/* =========================================================================
   SkyFidelity — site styles
   Dark navy canvas, cyan/green accents, mono "console" labels, one signature
   element (the hero signal trace). Built on top of Bootstrap 5.
   ========================================================================= */

:root{
  --navy:#0A1628;
  --surface:#0E1D34;
  --elevated:#13294A;
  --cyan:#00FFB3;
  --green:#00C98A;
  --text:#E6F7F1;
  --muted:#92A8BC;
  --faint:#5E768C;
  --line:rgba(146,168,188,.14);
  --line-strong:rgba(0,255,179,.30);
  --rhg-azure:#0075FA;
  --maxw:1180px;
  --r:14px;
  --font-display:'Sora',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--maxw);}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.14;letter-spacing:-.015em;color:#fff;}
h1{font-weight:700;}
h2{font-size:clamp(1.7rem,3vw,2.5rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1rem;}
a{color:var(--cyan);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--green);}

/* ---- Skip link & focus ---- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--cyan);color:#04261C;padding:.6rem 1rem;border-radius:0 0 10px 0;font-weight:600;z-index:200;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}

/* ---- Mono eyebrow / console label ---- */
.eyebrow{
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(0,255,179,.14);}
.tag-mono{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);}

.lead-muted{color:var(--muted);font-size:1.125rem;max-width:52ch;}

/* ---- Buttons ---- */
.btn-sky{
  display:inline-block;background:var(--cyan);color:#04261C;font-weight:600;
  border:0;border-radius:999px;padding:.68rem 1.45rem;font-family:var(--font-body);
  line-height:1.2;cursor:pointer;transition:background .15s ease,transform .15s ease;
}
.btn-sky:hover{background:var(--green);color:#04261C;transform:translateY(-1px);}
.btn-ghost{
  display:inline-block;background:transparent;color:var(--text);
  border:1px solid var(--line);border-radius:999px;padding:.68rem 1.45rem;line-height:1.2;
  transition:border-color .15s ease,color .15s ease;
}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}

/* ---- Header / nav ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(10,22,40,.80);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s ease;}
.site-header.is-scrolled{border-bottom-color:var(--line);}
.navbar{padding:.85rem 0;}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:#fff;letter-spacing:-.02em;}
.site-nav .nav-link{color:var(--text);font-size:.96rem;padding:.4rem .9rem;border-radius:8px;transition:color .15s ease;}
.site-nav .nav-link:hover{color:var(--cyan);}
.site-nav .nav-link[aria-current="page"]{color:var(--cyan);}
.navbar-toggler{border-color:var(--line);}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(0,255,179,.25);}
.dropdown-menu{--bs-dropdown-bg:#0E1D34;--bs-dropdown-border-color:var(--line);--bs-dropdown-link-color:var(--muted);--bs-dropdown-link-hover-bg:rgba(0,255,179,.07);--bs-dropdown-link-hover-color:var(--cyan);border-radius:12px;padding:.4rem;}
.dropdown-item{border-radius:8px;font-size:.95rem;}

/* ---- Sections ---- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0;}
.section--surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:60ch;}
.section-head h2{margin-top:.75rem;}

/* ---- Hero + signature signal trace ---- */
.hero{position:relative;overflow:hidden;padding:clamp(4.5rem,12vw,8.5rem) 0 clamp(3rem,7vw,5rem);}
.hero__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 72% 25%,#000 38%,transparent 78%);
          mask-image:radial-gradient(ellipse 85% 70% at 72% 25%,#000 38%,transparent 78%);
}
.hero__signal{position:absolute;right:-4%;top:14%;width:min(62%,640px);z-index:0;opacity:.85;pointer-events:none;}
.hero__content{position:relative;z-index:1;}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.1rem);max-width:17ch;}
.hero .accent{color:var(--cyan);}
.signal-base{fill:none;stroke:var(--line);stroke-width:1.5;}
.signal-path{fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.6;stroke-dasharray:18 700;animation:trace 4.6s linear infinite;}
@keyframes trace{from{stroke-dashoffset:718;}to{stroke-dashoffset:0;}}

/* ---- Cards / pillars ---- */
.pillar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem;height:100%;transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.pillar:hover{border-color:var(--line-strong);transform:translateY(-3px);background:var(--elevated);}
.pillar .ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(0,255,179,.10);color:var(--cyan);font-size:1.25rem;margin-bottom:1rem;}
.pillar h3{margin:0 0 .5rem;}
.pillar p{color:var(--muted);font-size:.98rem;margin:0 0 .9rem;}

/* ---- Product cards ---- */
.product{
  background:var(--navy);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;height:100%;transition:border-color .18s ease,transform .18s ease;
}
.product:hover{border-color:var(--line-strong);transform:translateY(-3px);}
.product .status{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);}
.product .status .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(0,201,138,.18);}
.product h3{margin:.7rem 0 .5rem;}
.product p{color:var(--muted);font-size:.96rem;}

/* ---- "Why" reasons ---- */
.reason{border-top:1px solid var(--line);padding:1.25rem 0;}
.reason:first-child{border-top:0;}
.reason h3{font-size:1.1rem;margin:0 0 .35rem;}
.reason p{color:var(--muted);font-size:.98rem;margin:0;}

/* ---- Solutions page blocks ---- */
.solution{border-top:1px solid var(--line);padding:clamp(2rem,5vw,3.25rem) 0;}
.solution:first-of-type{border-top:0;padding-top:0;}
.solution h2{margin:.6rem 0 .5rem;}
.solution .delivers{color:var(--muted);}
.proof{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;}
.proof span{font-family:var(--font-mono);font-size:.76rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem;}

/* ---- Forms ---- */
.form-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem;display:block;}
.form-control{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:.72rem .9rem;font-size:1rem;}
.form-control:focus{background:var(--surface);border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,255,179,.18);color:var(--text);}
.form-control::placeholder{color:var(--faint);}
.honeypot{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

/* ---- Banners ---- */
.banner{border-radius:12px;padding:.9rem 1.1rem;border:1px solid var(--line);margin-bottom:1.6rem;font-size:.98rem;}
.banner--ok{border-color:rgba(0,201,138,.45);background:rgba(0,201,138,.08);color:var(--text);}
.banner--err{border-color:rgba(255,120,120,.45);background:rgba(255,120,120,.08);color:#ffd9d9;}

/* ---- Footer ---- */
.site-footer{background:#08111F;border-top:1px solid var(--line);padding:3.5rem 0 2rem;}
.footer-head{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.9rem;}
.footer-list{list-style:none;padding:0;margin:0;}
.footer-list li{margin-bottom:.5rem;}
.footer-list a{color:var(--muted);font-size:.95rem;}
.footer-list a:hover{color:var(--cyan);}
.footer-bottom{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.5rem;}
.footer-mark{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--faint);}
.footer-mark .dot{width:9px;height:9px;border-radius:50%;background:var(--rhg-azure);}
.footer-mark:hover{color:var(--text);}
.footer-copy{color:var(--faint);font-size:.85rem;}

/* ---- Responsive ---- */
@media (max-width:991.98px){
  .hero__signal{opacity:.4;width:90%;right:-10%;top:auto;bottom:-6%;}
  .navbar-collapse{padding-top:.75rem;}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}