/* ====================================================================
   NextWave Services LLC — styles
   Palette + type derived from the brand logo (two-tone blue wave).
   Signature: rising "signal-line" motif from the logo's waVe peak.
   ==================================================================== */

:root{
  /* color */
  --navy:        #0A1A33;
  --navy-2:      #0E2444;
  --ink:         #14253B;
  --azure:       #2A7DE1;
  --azure-deep:  #1C63C4;
  --sky:         #5DB4EA;
  --mist:        #EEF4FB;
  --mist-2:      #F6F9FD;
  --line:        #DBE6F3;
  --text:        #19293F;
  --muted:       #5E7089;
  --muted-light: #A9C2E0;
  --white:       #FFFFFF;
  --grad:        linear-gradient(100deg, #5DB4EA 0%, #2A7DE1 100%);

  /* type */
  --display: 'Sora', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* metrics */
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --sec: clamp(64px, 9vw, 120px);
  --r: 16px;
  --r-sm: 10px;
  --shadow: 0 24px 60px -28px rgba(13, 38, 76, .35);
  --shadow-sm: 0 10px 30px -16px rgba(13, 38, 76, .28);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--body); color:var(--text);
  background:var(--white); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); line-height:1.08; letter-spacing:-.02em; font-weight:700; color:var(--ink); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--azure); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

/* ---------- type scale ---------- */
.h2{ font-size:clamp(28px, 4.2vw, 46px); }
.h3{ font-size:clamp(22px, 2.6vw, 28px); }
.h4{ font-size:clamp(19px, 2vw, 21px); letter-spacing:-.01em; }
.lead{ font-size:clamp(18px,2vw,21px); color:var(--text); }
p{ margin:0 0 1rem; color:var(--muted); }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--azure);
  margin:0 0 18px;
}
.eyebrow--light{ color:var(--sky); }

.grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:15px; cursor:pointer;
  border:1px solid transparent; border-radius:999px; padding:13px 26px;
  transition:transform .18s ease, box-shadow .25s ease, background .25s, color .2s;
  white-space:nowrap;
}
.btn--primary{ background:var(--grad); color:#fff; box-shadow:0 12px 26px -12px rgba(42,125,225,.7); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(42,125,225,.78); }
.btn--ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(4px); }
.btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; transform:translateY(-2px); }
.btn--lg{ padding:16px 32px; font-size:16px; }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--azure);
  margin-top:6px;
}
.link-arrow span{ transition:transform .2s ease; }
.link-arrow:hover span{ transform:translateX(5px); }

/* ====================================================================
   HEADER  (white utility bar + dark floating nav pill)
   ==================================================================== */
.site-header{ position:absolute; top:0; left:0; right:0; z-index:60; }

/* --- top utility bar --- */
.topbar{ background:#fff; transition:opacity .3s ease; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.topbar__logo img{ height:55px; width:auto; }
.topbar__contacts{ display:flex; align-items:center; gap:26px; }
.topbar__div{ width:1px; height:34px; background:var(--line); }
.tcontact{ display:flex; align-items:center; gap:12px; }
.tcontact__ic{ width:46px; height:46px; flex:none; border-radius:50%; background:var(--navy); display:grid; place-items:center; transition:background .25s; }
.tcontact:hover .tcontact__ic{ background:var(--azure); }
.tcontact__ic svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tcontact__txt{ display:flex; flex-direction:column; line-height:1.25; }
.tcontact__txt small{ font-size:12.5px; color:var(--muted); }
.tcontact__txt strong{ font-family:var(--display); font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }

/* --- dark floating nav pill --- */
.nav-wrap{ position:relative; }
.nav{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--navy); border-radius:24px; padding:8px 12px 8px 30px; min-height:64px;
  box-shadow:0 24px 50px -28px rgba(10,26,51,.55);
  transition:box-shadow .3s ease;
}
.nav__brand{ display:none; align-items:center; }
.nav__brand img{ height:40px; width:auto; }

.nav__collapse{ display:flex; align-items:center; gap:18px; flex:1; justify-content:space-between; }
.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links > li{ position:relative; }
.nav__links a{
  display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:500; color:#eaf2fb;
  padding:10px 14px; border-radius:10px; transition:color .2s, background .2s;
}
.nav__links a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.caret{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s; }
.has-drop:hover .caret{ transform:rotate(180deg); }

/* dropdown */
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:248px; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s; z-index:5;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.dropdown a{ color:var(--text); font-size:14.5px; padding:11px 14px; border-radius:9px; width:100%; }
.dropdown a:hover{ color:var(--azure); background:var(--mist); }

/* consult button (light pill) */
.btn-consult{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  background:#fff; color:var(--ink); font-family:var(--body); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:999px; transition:transform .2s, box-shadow .25s, background .25s, color .2s;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.5);
}
.btn-consult svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.btn-consult:hover{ background:var(--grad); color:#fff; transform:translateY(-2px); }
.btn-consult:hover svg{ transform:translate(2px,-2px); }

/* 4-dot grid button -> opens off-canvas panel */
.nav__grid{
  flex:none; width:46px; height:46px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center; transition:background .25s, border-color .25s, transform .2s;
}
.nav__grid:hover{ background:rgba(255,255,255,.16); transform:translateY(-1px); }
.nav__grid svg{ width:20px; height:20px; }
.nav__grid .d{ fill:#cfe0f3; transition:fill .25s; }
.nav__grid:hover .d{ fill:#fff; }

/* off-canvas quick-contact panel */
.oc{ position:fixed; inset:0; z-index:1000; visibility:hidden; pointer-events:none; }
.oc.open{ visibility:visible; pointer-events:auto; }
.oc__overlay{ position:absolute; inset:0; background:rgba(8,18,35,.55); backdrop-filter:blur(2px); opacity:0; transition:opacity .35s ease; }
.oc.open .oc__overlay{ opacity:1; }
.oc__panel{
  position:absolute; top:0; right:0; height:100%; width:min(92vw,400px);
  background:var(--navy); color:#dce8f7; padding:38px 32px; overflow-y:auto;
  display:flex; flex-direction:column; gap:22px;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.6);
}
.oc.open .oc__panel{ transform:none; }
.oc__close{
  position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); cursor:pointer;
  display:grid; place-items:center; transition:background .25s, transform .25s;
}
.oc__close:hover{ background:rgba(255,255,255,.16); transform:rotate(90deg); }
.oc__close svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.oc__logo{ height:120px; width:auto; margin-top:4px; }
.oc__blurb{ font-size:14.5px; line-height:1.7; color:#aebfd6; margin:0; }
.oc__title{ font-family:var(--display); font-size:20px; color:#fff; margin:4px 0 0; }
.oc__contact{ display:flex; flex-direction:column; gap:14px; }
.oc__contact li{ display:flex; align-items:center; gap:13px; font-size:15px; color:#dce8f7; }
.oc__ic{ width:38px; height:38px; flex:none; border-radius:10px; background:rgba(93,180,234,.16); display:grid; place-items:center; }
.oc__ic svg{ width:18px; height:18px; fill:none; stroke:var(--sky); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.oc__contact a:hover{ color:#fff; text-decoration:underline; }
.oc__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--grad); color:#fff; font-weight:600; font-size:15px; padding:14px 20px; border-radius:999px;
  box-shadow:0 12px 26px -12px rgba(42,125,225,.7); transition:transform .2s;
}
.oc__cta:hover{ transform:translateY(-2px); }
.oc__social{ display:flex; gap:12px; margin-top:auto; padding-top:6px; }
.oc__social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  transition:background .25s, border-color .25s, transform .2s;
}
.oc__social a:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }
.oc__social svg{ width:18px; height:18px; fill:#c3d6ee; transition:fill .25s; }
.oc__social a:hover svg{ fill:#fff; }

/* scrolled: header becomes a fixed floating pill, topbar hides, brand appears */
.site-header.scrolled{ position:fixed; }
.site-header.scrolled .topbar{ opacity:0; pointer-events:none; height:0; overflow:hidden; padding:0; }
.site-header.scrolled .nav-wrap{ padding-top:10px; }
.site-header.scrolled .nav{ box-shadow:0 16px 40px -18px rgba(10,26,51,.6); }
.site-header.scrolled .nav__brand{ display:inline-flex; }
.site-header.scrolled .nav{ padding-left:20px; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; width:46px; height:46px; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:0; border-radius:12px; cursor:pointer; flex:none; }
.nav__toggle span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .3s, opacity .3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ====================================================================
   HERO
   ==================================================================== */
.hero{ position:relative; padding-top:clamp(190px,24vh,260px); padding-bottom:0; color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,26,51,.74) 0%, rgba(10,26,51,.70) 45%, rgba(10,26,51,.94) 100%),
    radial-gradient(120% 90% at 80% 0%, rgba(42,125,225,.35), transparent 60%);
}
.hero__signal{ position:absolute; left:0; right:0; bottom:120px; width:100%; height:220px; z-index:-1; opacity:.55; }
.hero__signal .signal-path{ fill:none; stroke:var(--sky); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(93,180,234,.7)); }

.hero__inner{ position:relative; max-width:900px; }
.hero__welcome{ margin-bottom:22px; }

/* rotating headline (Zenith-inspired) */
.hero__title{ display:grid; font-size:clamp(34px, 5.6vw, 64px); font-weight:800; letter-spacing:-.03em; color:#fff; }
.hero__title .rot{
  grid-area:1 / 1; margin:0; opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease; pointer-events:none;
}
.hero__title .rot.is-active{ opacity:1; transform:none; pointer-events:auto; }

/* slider dots (Zenith-inspired) */
.hero__dots{ display:flex; gap:12px; margin-top:26px; }
.hero__dots button{
  width:34px; height:5px; border:0; padding:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.28); transition:background .3s ease, width .3s ease;
}
.hero__dots button:hover{ background:rgba(255,255,255,.5); }
.hero__dots button.on{ width:52px; background:var(--grad); }

.hero__lede{ font-size:clamp(17px,2.1vw,21px); color:#cfe0f3; max-width:620px; margin-top:24px; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:34px; }
.hero__link{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:16px; color:#fff; }
.hero__link svg{ width:20px; height:20px; fill:none; stroke:var(--sky); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.hero__link:hover svg{ transform:translateX(5px); }

.hero__stats{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; margin-top:clamp(56px,8vw,90px);
  border-top:1px solid rgba(255,255,255,.16);
  padding:36px 0 46px;
}
.stat__num{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4.5vw,52px); line-height:1; color:#fff; letter-spacing:-.02em; }
.stat__label{ font-size:14px; color:var(--muted-light); margin-top:10px; max-width:160px; }
.stat{ position:relative; padding-left:18px; }
.stat::before{ content:""; position:absolute; left:0; top:6px; bottom:34px; width:3px; border-radius:3px; background:var(--grad); }

/* ====================================================================
   SECTION SCAFFOLD
   ==================================================================== */
.section{ padding:var(--sec) 0; position:relative; }
.section--mist{ background:var(--mist); }
.section--ink{ background:var(--navy); color:#eaf2fb; }
.section--ink p{ color:#b9cce4; }

.section-head{ max-width:760px; margin:0 auto clamp(40px,5vw,64px); text-align:center; }
.section-head--left{ margin-inline:0; text-align:left; }
.section-head--light .h2{ color:#fff; }
.section-head__sub{ font-size:18px; color:var(--muted); margin-top:16px; }
.section--ink .section-head__sub{ color:#b9cce4; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }

/* ---------- signal divider (signature) ---------- */
.signal-divider{ padding:18px 0 6px; }
.signal-divider svg{ width:100%; height:46px; display:block; }
.signal-divider .signal-path{ fill:none; stroke:var(--line); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.signal-divider.on .signal-path{ stroke:var(--azure); }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ====================================================================
   TRUST
   ==================================================================== */
.trust__media{ position:relative; }
.trust__media img{ width:100%; border-radius:var(--r); box-shadow:var(--shadow); }
.media__tag{
  position:absolute; left:20px; bottom:20px; background:rgba(10,26,51,.78); color:#fff;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px; backdrop-filter:blur(6px);
}
.trust__text .lead{ margin:18px 0 14px; }

/* ====================================================================
   ABOUT
   ==================================================================== */
.about__top{ margin-bottom:clamp(40px,6vw,72px); }
.about__img img{ width:100%; border-radius:var(--r); box-shadow:var(--shadow); }
.mv{ gap:28px; }
.mv__card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(28px,3vw,40px); position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.mv__card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--grad); }
.mv__mark{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--azure); }
.mv__card .h3{ margin:10px 0 12px; }

/* ====================================================================
   SERVICES
   ==================================================================== */
.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.svc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px); transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  display:flex; flex-direction:column; gap:14px;
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.svc__icon{ width:54px; height:54px; border-radius:14px; background:var(--mist); display:grid; place-items:center; transition:background .25s; }
.svc:hover .svc__icon{ background:var(--grad); }
.svc__icon svg{ width:26px; height:26px; fill:none; stroke:var(--azure); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
.svc:hover .svc__icon svg{ stroke:#fff; }
.svc p{ font-size:15.5px; }
.svc__list{ display:flex; flex-direction:column; gap:2px; }
.svc__list li{ font-size:14.5px; color:var(--muted); padding:6px 0 6px 18px; position:relative; }
.svc__list li::before{ content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:2px; background:var(--sky); }

/* ====================================================================
   TECH EXPERTISE (dark)
   ==================================================================== */
.tech{ overflow:hidden; }
.tech__bg{ position:absolute; inset:0; z-index:0; }
.tech__bg img{ width:100%; height:100%; object-fit:cover; opacity:.14; }
.tech .container{ position:relative; z-index:1; }
.tech__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; }
.tech__cat{ font-family:var(--display); font-weight:600; font-size:16px; color:#fff; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.16); }
.tech__list li{ font-size:15px; color:#c3d6ee; padding:7px 0 7px 18px; position:relative; }
.tech__list li::before{ content:""; position:absolute; left:0; top:14px; width:7px; height:7px; border-radius:2px; background:var(--sky); }

/* ====================================================================
   WHY NEXTWAVE
   ==================================================================== */
.why__layout{ align-items:start; }
.why__intro{ position:sticky; top:110px; }
.why__img{ margin-top:28px; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.why__img img{ width:100%; }
.why__list{ display:flex; flex-direction:column; }
.why__item{ display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--line); }
.why__item:last-child{ border-bottom:0; }
.why__no{ font-family:var(--mono); font-weight:600; font-size:14px; color:var(--azure); padding-top:4px; min-width:30px; }
.why__item .h4{ margin-bottom:8px; }
.why__item p{ font-size:15.5px; }

/* ====================================================================
   INDUSTRIES
   ==================================================================== */
.industries{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ind{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,2.6vw,34px);
  background:#fff; transition:transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden;
}
.ind::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.ind:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.ind:hover::after{ transform:scaleX(1); }
.ind__icon{ width:52px; height:52px; border-radius:14px; background:var(--mist); display:grid; place-items:center; margin-bottom:18px; }
.ind__icon svg{ width:25px; height:25px; fill:none; stroke:var(--azure); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ind .h4{ margin-bottom:8px; overflow-wrap:break-word; hyphens:auto; }
.ind p{ font-size:15px; }

/* ====================================================================
   COMMITMENT BAND
   ==================================================================== */
.commit{ position:relative; color:#fff; padding:clamp(90px,12vw,150px) 0; overflow:hidden; }
.commit__bg{ position:absolute; inset:0; z-index:0; }
.commit__bg img{ width:100%; height:100%; object-fit:cover; }
.commit__veil{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,26,51,.92) 0%, rgba(10,26,51,.72) 55%, rgba(14,36,68,.55) 100%); }
.commit__inner{ position:relative; z-index:1; max-width:720px; }
.commit__title{ color:#fff; margin-bottom:20px; }
.commit__lede{ font-size:clamp(17px,2vw,20px); color:#d5e3f5; }

/* ====================================================================
   TESTIMONIALS
   ==================================================================== */

/* floating one-line marquee */
.quotes-marquee{
  overflow:hidden; margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.quotes-track{ display:flex; width:max-content; padding-block:18px; animation:quoteMarquee 70s linear infinite; }
.quotes-marquee:hover .quotes-track{ animation-play-state:paused; }
.quotes-track .quote{ width:clamp(300px,80vw,360px); flex:none; margin:0 24px 0 0; }
@keyframes quoteMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,2.6vw,34px); position:relative; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.quote::before{ content:"“"; font-family:var(--display); font-size:64px; line-height:1; color:var(--sky); opacity:.5; position:absolute; top:14px; right:22px; }
.quote blockquote{ margin:0 0 22px; font-size:17px; color:var(--text); }
.quote__by{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.quote__avatar{
  width:46px; height:46px; flex:none; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.02em;
}
.quote__meta{ display:flex; flex-direction:column; min-width:0; }
.quote__name{ font-weight:600; color:var(--ink); }
.quote__role{ font-size:13px; color:var(--muted); margin-top:2px; }
.quotes__note{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:28px; }

/* ====================================================================
   FINAL CTA + CONTACT
   ==================================================================== */
.final{ overflow:hidden; }
.final__bg{ position:absolute; inset:0; z-index:0; }
.final__bg img{ width:100%; height:100%; object-fit:cover; }
.final__veil{ position:absolute; inset:0; background:linear-gradient(120deg, rgba(10,26,51,.96) 0%, rgba(10,26,51,.85) 50%, rgba(14,36,68,.7) 100%); }
.final .container{ position:relative; z-index:1; }
.final__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,72px); align-items:center; }
.final__title{ color:#fff; margin-bottom:18px; }
.final__lede{ color:#cfe0f3; font-size:18px; max-width:460px; }
.final__contact{ margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.final__contact li{ display:flex; align-items:center; gap:14px; color:#dce8f7; font-size:16px; }
.final__contact a:hover{ color:#fff; text-decoration:underline; }
.ci__ic{ width:40px; height:40px; flex:none; border-radius:10px; background:rgba(93,180,234,.16); display:grid; place-items:center; }
.ci__ic svg{ width:20px; height:20px; fill:none; stroke:var(--sky); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.final__card{ background:#fff; border-radius:var(--r); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow); }
.cform__title{ margin-bottom:22px; color:var(--ink); }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field span{ font-size:13.5px; font-weight:600; color:var(--ink); }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:15px; color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; background:var(--mist-2);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder,.field textarea::placeholder{ color:#9aa9bd; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--azure); background:#fff; box-shadow:0 0 0 3px rgba(42,125,225,.14);
}
.field textarea{ resize:vertical; }
.cform__ok{ margin-top:14px; font-size:14.5px; color:var(--azure-deep); font-weight:600; }

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer{ background:var(--navy); color:#c3d6ee; padding:clamp(56px,7vw,84px) 0 28px; }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:40px; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer__logo{ height:55px; margin-bottom:18px; }
.footer__tag{ font-size:14.5px; color:#9fb6d4; max-width:340px; margin:0; }
.footer__social{ display:flex; gap:12px; margin-top:22px; }
.footer__social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  transition:background .25s ease, transform .2s ease, border-color .25s;
}
.footer__social a:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }
.footer__social svg{ width:18px; height:18px; fill:#c3d6ee; transition:fill .25s; }
.footer__social a:hover svg{ fill:#fff; }
.footer__col h4{ font-family:var(--display); font-size:14px; letter-spacing:.04em; color:#fff; margin-bottom:18px; }
.footer__col a,.footer__col span{ display:block; font-size:15px; color:#b3c7e0; margin-bottom:11px; }
.footer__col a:hover{ color:#fff; }
.footer__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:24px; flex-wrap:wrap; }
.footer__bar p{ margin:0; font-size:13.5px; color:#8ba4c4; }
.footer__legal{ display:flex; gap:12px; align-items:center; }
.footer__legal a:hover{ color:#fff; }

/* ---------- to top ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90; width:46px; height:46px; border-radius:50%;
  background:var(--grad); color:#fff; display:grid; place-items:center; font-size:20px;
  box-shadow:0 12px 26px -10px rgba(42,125,225,.7); opacity:0; transform:translateY(14px) scale(.9);
  pointer-events:none; transition:opacity .3s, transform .3s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width:1024px){
  .services{ grid-template-columns:repeat(2,1fr); }
  .tech__grid{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .industries{ grid-template-columns:repeat(2,1fr); }
  .why__intro{ position:static; }
}

/* collapse the pill nav into a mobile drawer */
@media (max-width:980px){
  .nav{ padding:8px 8px 8px 22px; }
  .nav__toggle{ display:flex; }
  .nav__collapse{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px); display:flex; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:4px; background:#fff; padding:90px 26px 30px; transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1); box-shadow:-20px 0 60px -30px rgba(0,0,0,.4); z-index:99; overflow-y:auto;
  }
  .nav__collapse.open{ transform:none; }
  .nav__links{ flex-direction:column; align-items:stretch; gap:2px; width:100%; }
  .nav__links a{ color:var(--ink); font-size:17px; padding:13px 12px; border-radius:10px; }
  .nav__links a:hover{ background:var(--mist); color:var(--azure); }
  .has-drop .caret{ margin-left:auto; }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0;
    border-left:2px solid var(--line); border-radius:0; margin:2px 0 6px 12px; padding:2px 0 2px 8px; min-width:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .has-drop.open .dropdown{ max-height:360px; }
  .has-drop.open .caret{ transform:rotate(180deg); }
  .dropdown a{ font-size:15px; padding:10px 12px; }
  .btn-consult{ margin-top:16px; justify-content:center; background:var(--grad); color:#fff; }
  .btn-consult svg{ stroke:#fff; }
}

@media (max-width:860px){
  .topbar__contacts{ gap:12px; }
  .tcontact__txt{ display:none; }              /* icon-only contacts on small screens */
  .topbar__div{ display:none; }
  .topbar__logo img{ height:55px; }
  .grid-2{ grid-template-columns:1fr; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .final__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .why__img{ display:none; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .services{ grid-template-columns:1fr; }
  .tech__grid{ grid-template-columns:repeat(2,1fr); }
  .industries{ grid-template-columns:1fr; }
  .cform__row{ grid-template-columns:1fr; }
  .hero__stats{ grid-template-columns:1fr 1fr; gap:24px; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bar{ flex-direction:column; align-items:flex-start; }
  .mv{ gap:18px; }
  .tcontact__ic{ width:42px; height:42px; }
}

/* ---------- a11y / motion ---------- */
:focus-visible{ outline:2px solid var(--azure); outline-offset:3px; border-radius:4px; }
.site-header.scrolled :focus-visible{ outline-color:var(--azure-deep); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
  .quotes-track{ animation:none; }
  .quotes-marquee{ overflow-x:auto; }
}