:root{
  --navy:#071726;--navy2:#0b2236;--blue:#0578ff;--cyan:#16c7ff;--ink:#0e273a;
  --muted:#5b7085;--line:#e1eef8;--soft:#f5f9fd;--white:#ffffff;
  --elev-1:0 6px 20px rgba(6,30,60,0.12);
  --elev-2:0 18px 50px rgba(7,31,61,.10);
  --radius:14px;
  --space-xs:8px;--space-sm:12px;--space-md:20px;--space-lg:36px;
  --max-width:1160px;--break-md:900px;--break-sm:600px;
}
/* Self-hosted Inter font.
   The three shipped .woff2 files were byte-identical placeholders, so the 600/800
   weights were already being synthesised by the browser. All three faces now point at
   the one real file, removing ~96KB from the critical path with no visual change.
   Drop genuine Inter SemiBold/ExtraBold in and re-split these URLs if you want the
   real weight rendering. */

   font-display is "optional", not "swap". Measured: Inter's line box is 121% of em
   (ascent 97, descent 24) and it is ~6.6% wider than Arial, so a late swap re-wraps
   paragraphs into a different line count and pulled content up 30-43px (CLS up to
   0.027) 10-18ms after the woff2 landed. "optional" makes a font that misses its
   short block period a no-op instead of a reflow, so the shift cannot happen on any
   device. Every page already preloads the woff2, so the font still wins on normal
   connections and is cached for repeat visits. */
@font-face{
  font-family:InterVarLocal;src:local('Inter'),local('Inter var');
  src: url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional;
}
@font-face{
  font-family:InterVarLocal;src: url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:600;font-style:normal;font-display:optional;
}
@font-face{
  font-family:InterVarLocal;src: url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:800;font-style:normal;font-display:optional;
}
/* Skip link for keyboard users */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:20px;top:20px;z-index:9999;width:auto;height:auto;overflow:visible;clip:auto;background:#061426;color:#fff;padding:12px 18px;border-radius:8px;box-shadow:var(--elev-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}

/* Stronger focus outlines for accessibility */
a:focus,.btn:focus,.menu:focus{outline:3px solid rgba(11,149,255,.16);outline-offset:3px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:InterVarLocal,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65;font-synthesis:weight}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1160px,92%);margin:auto}
.topbar{background:#020b18;color:#b8c6d8;font-size:13px}.topbar .container{display:flex;justify-content:space-between;gap:20px;padding:8px 0}.topbar a{color:#dbe9f8}
.header{position:sticky;top:0;z-index:50;background:rgba(4,17,33,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand img,.brand .logo-svg{width:190px;height:auto}
.navlinks{display:flex;align-items:center;gap:26px;color:#d9e5f3;font-size:15px;font-weight:600}.navlinks a{padding:18px 0;position:relative}.navlinks a:hover,.navlinks a.active{color:#fff}.navlinks a.active:after{content:"";position:absolute;left:0;right:0;bottom:14px;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:4px}
.nav{position:relative}
.menu{display:none;background:none;border:0;color:#fff;font-size:28px}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 30%,rgba(22,199,255,.14),transparent 30%),linear-gradient(135deg,var(--navy),#071f33 70%);color:#fff;min-height:720px;display:flex;align-items:center}
.hero:before{content:"";position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent)}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
@media(max-width:900px){.navlinks{display:none;position:absolute;top:78px;left:0;right:0;background:#061426;padding:15px 0;flex-direction:column;align-items:flex-start;gap:0}.navlinks.open{display:flex}.navlinks a{padding:12px 0}.navlinks a.active:after{bottom:4px}.menu{display:block}.hero .container,.split,.contact-grid{grid-template-columns:1fr}.hero{min-height:auto;padding:80px 0 120px}.hero-art{min-height:320px}.quickgrid{grid-template-columns:repeat(3,1fr)}.quickitem:nth-child(3){border-right:0}.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.footergrid{grid-template-columns:1fr 1fr}
  .brand img,.brand .logo-svg{width:165px}
  .hero .container{grid-template-columns:1fr;gap:28px;padding-top:24px}
  .actions{justify-content:flex-start}
}
.eyebrow{color:#0e6f96;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;font-size:13px}
/* Bright cyan is only legible on the dark surfaces, so restore it there */
.hero .eyebrow,.pagehero .eyebrow,.section.dark .eyebrow,.cta .eyebrow,.industry .eyebrow{color:#35c8ff}.hero h1{font-size:clamp(44px,6vw,78px);line-height:1.02;margin:8px 0 20px;font-weight:800;letter-spacing:-1px}.hero h1 span{color:var(--cyan)}.hero p{font-size:18px;color:#c7d7e6;max-width:680px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:12px;border:1px solid-transparent;font-weight:700;font-size:15px;transition:transform .18s,box-shadow .18s}
.btn.primary{background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff;box-shadow:var(--elev-1)}
.btn.primary:hover{transform:translateY(-4px);box-shadow:var(--elev-2)}
.btn.ghost{border-color:rgba(255,255,255,0.08);color:#fff;background:transparent}
.btn.light{background:#fff;color:var(--navy)}
.hero-art{min-height:430px;display:grid;place-items:center;position:relative}
.orb{width:min(380px,72vw);aspect-ratio:1;border:1px solid rgba(54,190,255,.6);border-radius:50%;box-shadow:0 0 60px rgba(0,151,255,.25),inset 0 0 50px rgba(0,151,255,.12);display:grid;place-items:center;position:relative}.orb:before{content:"";position:absolute;width:75%;height:75%;border:2px solid rgba(20,178,255,.75);border-radius:50%;filter:blur(.2px)}.cloud{font-size:108px;filter:drop-shadow(0 0 18px #0ab6ff)}.arrow{position:absolute;font-size:80px;color:#25c7ff;top:38%;font-weight:300}
.wave{position:absolute;bottom:-5px;left:-5%;width:110%;height:120px;background:linear-gradient(160deg,transparent 48%,rgba(7,135,255,.20) 49%,transparent 53%);border-radius:50%}
.quick{margin-top:-48px;position:relative;z-index:5}.quickgrid{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border-radius:16px;box-shadow:var(--elev-2);overflow:hidden}.quickitem{padding:26px 14px;text-align:center;border-right:1px solid #e7edf4;font-weight:800;font-size:13px}.quickitem:last-child{border:0}.quickicon{font-size:28px;color:#087fff;margin-bottom:7px}
.section{padding:92px 0}.section.soft{background:var(--soft)}.section.dark{background:var(--navy);color:#fff}.sectionhead{max-width:760px;margin-bottom:45px}.sectionhead.center{text-align:center;margin-left:auto;margin-right:auto}.sectionhead h2{font-size:clamp(30px,4vw,46px);line-height:1.1;margin:10px 0 14px;letter-spacing:-1.3px}.sectionhead p{color:var(--muted);font-size:17px}
.section.dark .sectionhead p{color:#b6c6d8}

/* Dark section adjustments */
.section.dark .pillar b{color:#eaf6ff}
.section.dark .pillar-desc{color:#b6c6d8}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{background:#fff;border:1px solid rgba(14,36,56,0.04);border-radius:12px;padding:26px;box-shadow:0 8px 30px rgba(9,29,50,0.06);transition:transform .28s,box-shadow .28s}
.card:hover{box-shadow:var(--elev-2);transform:translateY(-6px)}
.iconbox{width:54px;height:54px;border-radius:12px;background:linear-gradient(180deg,#f0fbff,#eaf6ff);color:var(--blue);display:grid;place-items:center;font-size:26px;margin-bottom:18px}
.card h3{margin:0 0 10px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.mock-office{min-height:390px;border-radius:28px;background:linear-gradient(135deg,#eaf5ff,#fff);position:relative;overflow:hidden;box-shadow:var(--elev-2);border:1px solid #dce9f5}.mock-office:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 25%,rgba(0,145,255,.22),transparent 35%),linear-gradient(115deg,transparent 45%,rgba(5,26,52,.06) 46%,transparent 47%)}.desk{position:absolute;left:13%;right:10%;bottom:17%;height:70px;background:#b88a63;box-shadow:0 20px 30px rgba(0,0,0,.14);transform:skewX(-5deg)}.screen{position:absolute;left:32%;bottom:34%;width:210px;height:125px;background:#071a31;border:9px solid #172f4c;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.18)}.screen:after{content:"R";display:grid;place-items:center;height:100%;font-size:70px;font-weight:900;color:#16aaff}.plant{position:absolute;right:10%;bottom:22%;font-size:72px}.pillars{display:grid;gap:18px;margin-top:26px}.pillar{display:flex;gap:15px;align-items:flex-start}.check{width:30px;height:30px;flex:none;border-radius:50%;background:#e8f6ff;color:#0787ff;display:grid;place-items:center;font-weight:900}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:50px}.stat{padding:25px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.04)}.stat b{font-size:34px;color:#25c6ff;display:block}.stat span{color:#b9c9da;font-size:13px}
.service-card{position:relative;overflow:hidden}.service-card:after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:rgba(10,145,255,.07)}
.tag{display:inline-block;padding:5px 10px;border-radius:999px;background:#eaf6ff;color:#0a5cc4;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;margin-bottom:15px}
.industry{min-height:220px;background:linear-gradient(135deg,#06182d,#0c2a4a);color:#fff;border-radius:22px;padding:28px;position:relative;overflow:hidden}.industry:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(0,174,255,.3);border-radius:50%;right:-70px;bottom:-70px}.industry p{color:#b9cadd}.industry .iconbox{background:rgba(255,255,255,.08);color:#2bc5ff}
.cta{border-radius:28px;padding:55px;background:linear-gradient(120deg,#061526,#0b2c50);color:#fff;display:flex;justify-content:space-between;gap:30px;align-items:center;overflow:hidden;position:relative}.cta:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(27,197,255,.25);border-radius:50%;right:-120px;top:-150px}.cta h2{margin:0;font-size:clamp(28px,4vw,42px)}.cta p{color:#bdccdc;margin:8px 0 0}
.pagehero{padding:85px 0 80px;background:radial-gradient(circle at 85% 20%,rgba(0,154,255,.2),transparent 28%),var(--navy);color:#fff}.pagehero h1{font-size:56px;line-height:1.05;margin:12px 0}.breadcrumbs{color:#aebfd2;font-size:13px}.breadcrumbs a{color:#35c8ff}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}.contactlist{display:grid;gap:15px}.contactrow{display:flex;gap:15px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}.contactrow:last-child{border:0}.contactrow .iconbox{margin:0;width:45px;height:45px;flex:none}.form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--elev-2)}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px;margin-bottom:16px}.field.full{grid-column:1/-1}.field label{font-weight:700;font-size:13px}.field input,.field select,.field textarea{width:100%;border:1px solid #ccd9e6;border-radius:10px;padding:13px 14px;font:inherit;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#0b95ff;box-shadow:0 0 0 3px rgba(11,149,255,.1)}textarea{min-height:140px;resize:vertical}
.footer{background:#020d1c;color:#d6e3f0}.footergrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:45px;padding:65px 0 40px}.footer h2{margin:0 0 14px;color:#fff;font-size:1.05rem}.footer p,.footer li{color:#9fb2c8;font-size:14px}.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.footer .brand img{width:200px;margin-bottom:15px}.social{display:flex;gap:10px;margin-top:20px}.social a{width:38px;height:38px;border:1px solid #2b4058;border-radius:50%;display:grid;place-items:center;color:#fff}.copyright{border-top:1px solid #1d3047;padding:20px 0;display:flex;justify-content:space-between;gap:15px;color:#8195ab;font-size:13px}
.toast{position:fixed;right:20px;bottom:20px;background:#06203a;color:#fff;padding:14px 18px;border-radius:10px;box-shadow:var(--elev-2);display:none;z-index:100}
/* Comfortable tap targets (WCAG 2.5.8 needs 24x24 CSS px) */
.footer li a,.contactrow a,.breadcrumbs a{display:inline-block;padding:5px 0;min-height:24px}
/* Inline "Details" links inside card lists are real navigation, not prose,
   so give them a full 24px target too without breaking the text flow. */
.card li a{display:inline-block;padding:3px 0;min-height:24px;line-height:18px}
/* FAQ question headings: h3 for correct outline order, sized like the old h4 */
.faq-q{font-size:1em;font-weight:700;margin:20px 0 8px}
@media(max-width:900px){.navlinks{display:none;position:absolute;top:78px;left:0;right:0;background:#061426;padding:15px 5%;flex-direction:column;align-items:flex-start;gap:0}.navlinks.open{display:flex}.navlinks a{padding:12px 0}.navlinks a.active:after{bottom:4px}.menu{display:block}.hero .container,.split,.contact-grid{grid-template-columns:1fr}.hero{min-height:auto;padding:80px 0 120px}.hero-art{min-height:320px}.quickgrid{grid-template-columns:repeat(3,1fr)}.quickitem:nth-child(3){border-right:0}.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.footergrid{grid-template-columns:1fr 1fr}}

/* Mobile-friendly navigation overlay */
@media (max-width:900px){
  .nav{display:flex;align-items:center;justify-content:space-between;min-height:68px}
  .navlinks{position:fixed;top:68px;left:0;right:0;bottom:0;background:linear-gradient(180deg,#061426,#04142a);padding:20px 6%;display:none;flex-direction:column;align-items:flex-start;gap:12px;overflow:auto;z-index:60}
  .navlinks.open{display:flex}
  .navlinks a{width:100%}
  .navlinks a{padding:10px 0;font-size:18px;color:#e6f4ff;display:block}
  .navlinks a.active:after{display:none}
  .menu{display:inline-grid;width:48px;height:48px;border-radius:8px;place-items:center;background:transparent;border:1px solid rgba(255,255,255,0.08);font-size:22px;color:#fff}
  .menu[aria-expanded="true"]{background:rgba(255,255,255,0.06)}
  body.nav-open{overflow:hidden}
}
@media(max-width:600px){.topbar{display:none}.nav{height:68px}.navlinks{top:68px}.brand img{width:165px}.hero h1{font-size:42px}.hero p{font-size:16px}.section{padding:65px 0}.quick{margin-top:-35px}.quickgrid{grid-template-columns:1fr 1fr}.quickitem{padding:20px 10px}.quickitem:nth-child(2n){border-right:0}.grid4,.grid3,.grid2,.stats,.formgrid,.footergrid{grid-template-columns:1fr}.pagehero h1{font-size:42px}.cta{padding:34px 25px;display:block}.cta .btn{margin-top:22px}.copyright{display:block}.copyright span{display:block;margin-top:5px}}

@media (max-width:420px){
  .menu{width:44px;height:44px;font-size:20px}
  .btn{min-height:56px;padding:0 20px;border-radius:12px}
}

/* Floating animations, reveal helpers, and CTA pulse */
.orb{animation:float 6s ease-in-out infinite}
.cloud{animation:floatCloud 5.5s ease-in-out infinite}
.arrow{animation:arrowBob 3s ease-in-out infinite}

@keyframes float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(3deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes floatCloud{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-6px) translateX(6px)}100%{transform:translateY(0) translateX(0)}}
@keyframes arrowBob{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in-view{opacity:1;transform:translateY(0)}
/* Never leave reveal targets hidden when the user asked for less motion */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

.btn.primary{transition:transform .18s, box-shadow .18s}
.btn.primary.pulse{animation:pulse 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 10px 25px rgba(0,143,255,.25)}50%{box-shadow:0 18px 40px rgba(0,143,255,.18);transform:translateY(-2px)}100%{box-shadow:0 10px 25px rgba(0,143,255,.25);transform:translateY(0)}}

/* Hero SVG graphic styling */
.hero-graphic{width:min(520px,72vw);height:auto;filter:drop-shadow(0 20px 40px rgba(6,32,58,.18));transition:transform .6s ease,filter .3s ease}
.hero-graphic:hover{transform:translateY(-6px) scale(1.01)}

/* Logo SVG shimmer + dot pulse */
.logo-svg{width:220px;height:auto;display:block}
.logo-svg .shimmer{mix-blend-mode:screen;opacity:.95;animation:shimmer 2.2s linear infinite}
.logo-svg .dot{transform-origin:center;animation:dotPulse 1.8s ease-in-out infinite}
.logo-svg .dot:nth-of-type(1){animation-delay:.1s}
.logo-svg .dot:nth-of-type(2){animation-delay:.25s}
.logo-svg .dot:nth-of-type(3){animation-delay:.4s}
.logo-svg .logo-mark{fill:#fff}
.logo-svg .logo-word{fill:#eaf6ff}
.logo-svg .logo-sub{fill:#bdeeff}

@keyframes shimmer{0%{transform:translateX(-100%)}50%{transform:translateX(40%)}100%{transform:translateX(100%)}}
@keyframes dotPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(.65);opacity:.7}100%{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion: reduce){
  .logo-svg .shimmer,.logo-svg .dot{animation:none}
}

/* Tech illustration cards */
.tech-illustrations{margin-top:26px}
.tech-card{text-align:center}
.tech-ill{width:100%;max-width:160px;height:auto;margin:0 auto 18px;filter:drop-shadow(0 12px 30px rgba(6,32,58,.14));transition:transform .45s ease}
.tech-ill:hover{transform:translateY(-8px) scale(1.02)}
@keyframes techFloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.tech-ill{animation:techFloat 6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .tech-ill{animation:none;transform:none}
}

@media (prefers-reduced-motion: reduce){
  .orb,.cloud,.arrow,.hero-graphic{animation:none;transition:none}
}

/* Style-guide utilities (dev-only page) */
.token-swatch{display:inline-block;padding:10px 14px;border-radius:8px;color:#fff;font-weight:700}
/* light-background swatches need dark text; ratios vs #fff / #061426 measured per token */
.token-swatch.ondark{color:#061426}
.token-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0}

/* ==========================================================================
   Modern motion + graphics layer
   --------------------------------------------------------------------------
   House rules for everything in this block:
   1. Only `transform` and `opacity` are ever animated. Animating width,
      height, top, left, margin or font-size is what produced CLS 0.811 in
      ca41483, and an unsized <img> produced a 0.0268 shift in 5fc7151.
      Nothing here is allowed to move a box.
   2. Pseudo-elements that already exist are left alone. `.hero:before` is the
      grid pattern, `.service-card:after` / `.cta:after` / `.industry:after`
      are decorative circles, `.screen:after` draws the "R", and
      `.navlinks a.active:after` is the active-page indicator. New effects
      either use a free pseudo or a free property.
   3. Every effect is additive. If this block fails to parse, or site.js never
      runs, the page still renders, reads and navigates normally.
   4. Gradient text is behind @supports. A browser without background-clip:text
      would render `color:transparent` as invisible headline text.
   5. The block switches itself off under prefers-reduced-motion at the end.
   ========================================================================== */

/* --- Scroll progress bar -------------------------------------------------
   Injected by site.js rather than inlined into 21 HTML files, so all pages
   stay identical and the markup diff stays small.                          */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:55;pointer-events:none;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 55%,#7c3aed);
  transform:scaleX(var(--sp,0));transform-origin:0 50%;will-change:transform
}

/* --- Film grain ----------------------------------------------------------
   A single 140px turbulence tile stretched over the viewport. Fixed and
   pointer-events:none, so it cannot affect layout, scrolling or selection. */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* --- Aurora / mesh gradient behind the dark heroes ------------------------
   `isolation:isolate` gives the hero its own stacking context so z-index:-1
   paints the aurora above the hero's own background but below every child.
   The existing .wave and `.hero .container` stacking is therefore untouched.
   inset:0 plus the inherited overflow:hidden keeps the blur from bleeding
   onto the white sections above and below.                                  */
.hero,.pagehero{isolation:isolate}
.pagehero{position:relative;overflow:hidden}
.hero:after,.pagehero:after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 44% at 20% 26%,rgba(5,120,255,.34),transparent 70%),
    radial-gradient(34% 40% at 84% 20%,rgba(22,199,255,.26),transparent 70%),
    radial-gradient(44% 48% at 62% 92%,rgba(124,58,237,.20),transparent 70%);
  filter:blur(14px);will-change:transform;
  animation:aurora 30s ease-in-out infinite alternate
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2%,0) scale(1.02)}
}

/* --- Gradient headline ---------------------------------------------------
   Static gradient, deliberately not animated: this is the most likely
   largest-contentful-paint element on the page and a repainting text
   gradient there is not worth the risk.                                     */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background:linear-gradient(100deg,#ffffff 6%,#cdefff 34%,var(--cyan) 56%,#ffffff 86%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent
  }
}

/* --- Card cursor spotlight + tinted edge ---------------------------------
   `.service-card` already owns ::after, so the spotlight uses ::before and the
   tinted edge is a plain border/box-shadow transition.                      */
.card{position:relative;isolation:isolate}
.card:before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(11,149,255,.16),transparent 72%)
}
.card:hover:before{opacity:1}
.card:hover{border-color:rgba(11,149,255,.34);box-shadow:0 18px 44px rgba(9,29,50,.12),0 0 0 1px rgba(11,149,255,.10)}
.card h3{transition:color .25s ease}
.card:hover h3{color:#0a5cc4}

/* --- Icon tile + tag lift ------------------------------------------------ */
.iconbox{transition:transform .3s ease,box-shadow .3s ease}
.card:hover .iconbox{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 24px rgba(11,149,255,.18)}
.quickicon{transition:transform .3s ease}
.quickitem:hover .quickicon{transform:translateY(-3px) scale(1.08)}

/* --- Capability strip: hover tint + top accent that wipes in -------------
   `.quickgrid` has overflow:hidden, so a translateY lift would be clipped.
   The accent is a scaleX wipe instead: no clipping, no reflow.            */
.quickitem{position:relative;transition:background-color .25s ease}
.quickitem:hover{background:#f6faff}
.quickitem:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .3s ease
}
.quickitem:hover:before{transform:scaleX(1)}

/* --- Approach stat tiles ------------------------------------------------- */
.stat{position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease,background-color .3s ease}
.stat:hover{transform:translateY(-4px);border-color:rgba(37,198,255,.42);background:rgba(255,255,255,.07)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat b{background:linear-gradient(120deg,#25c6ff,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

/* --- Magnetic buttons ----------------------------------------------------
   site.js writes --bx/--by from the pointer position. The transform is a pure
   translate, so nothing reflows. Excluded from `.pulse` because the pulse
   keyframes animate `transform` themselves and an animation would win.     */
.btn.primary:not(.pulse){transform:translate3d(var(--bx,0px),var(--by,0px),0)}
.btn.primary:not(.pulse):hover{transform:translate3d(var(--bx,0px),calc(var(--by,0px) - 4px),0)}

/* --- Back to top ---------------------------------------------------------
   The ring is a conic-gradient driven by the same --sp as the progress bar.
   Sits at bottom:92px so it never collides with the .toast at bottom:20px. */
.to-top{
  position:fixed;right:20px;bottom:92px;z-index:90;width:46px;height:46px;padding:0;
  border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:conic-gradient(var(--cyan) calc(var(--sp,0) * 360deg),rgba(255,255,255,.10) 0);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .25s ease,transform .25s ease,visibility .25s
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:before{content:"";position:absolute;inset:3px;border-radius:50%;background:#06203a}
.to-top span{position:relative;font-size:17px;line-height:1;transform:translateY(-1px)}
.to-top:hover{box-shadow:0 10px 30px rgba(11,149,255,.35)}
.to-top:focus-visible{outline:3px solid #7cc9ff;outline-offset:3px}

/* --- Office illustration: scanline + gentle float ------------------------
   `.screen:after` already draws the "R", so the scanline uses ::before. The
   58px travel stays inside the 107px content box, and overflow:hidden clips
   it to the bezel. */
.screen{overflow:hidden;animation:screenFloat 7s ease-in-out infinite}
.screen:before{
  content:"";position:absolute;left:12px;right:12px;top:12px;height:26px;border-radius:4px;
  background:linear-gradient(90deg,#25c6ff 0 38%,transparent 38% 44%,#25c6ff 44% 74%,transparent 74% 80%,#25c6ff 80% 100%);
  opacity:.5;animation:scanline 3.6s ease-in-out infinite
}
@keyframes scanline{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(58px);opacity:.6}}
@keyframes screenFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.plant{transform-origin:bottom center;animation:plantSway 6s ease-in-out infinite}
@keyframes plantSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}

/* --- Nav hover underline -------------------------------------------------
   `.navlinks a.active:after` is the existing active-page indicator, so this
   only targets the non-active links and never touches it.                  */
.navlinks a:not(.active):after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:3px;border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .28s ease
}
.navlinks a:not(.active):hover:after{transform:scaleX(1)}

/* --- Staggered reveals ---------------------------------------------------
   site.js sets --d per sibling so a row cascades instead of popping in.   */
.reveal{transition-delay:var(--d,0ms)}

/* Mobile nav stacks vertically and has no hover, so the underline is dead
   weight there. The active indicator is already hidden at this width. */
@media(max-width:900px){
  .navlinks a:not(.active):after{display:none}
  .to-top{right:14px;bottom:80px;width:44px;height:44px}
}

/* --- Reduced motion: switch the whole layer off -------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero:after,.pagehero:after{animation:none}
  .screen,.screen:before,.plant{animation:none}
  .to-top{transition:opacity .2s ease}
  .to-top:not(.show){transform:none}
  .card,.card:before,.card h3,.quickitem,.quickitem:before,.iconbox,.quickicon,
  .stat,.navlinks a:not(.active):after,.scroll-progress{transition:none}
  .card:hover:before,.quickitem:hover:before,.navlinks a:not(.active):hover:after{transform:none}
}

/* --------------------------------------------------------------------------
   Long-form content pages (privacy, terms, cookies, compliance, accessibility).
   Below the fold only; no layout impact on existing pages. Text is capped at a
   comfortable measure and reuses the shared --muted/--ink tokens.
   -------------------------------------------------------------------------- */
.prose{max-width:820px}
.prose h2{font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin:40px 0 12px;letter-spacing:-.7px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;margin:24px 0 8px}
.prose p{color:var(--muted);font-size:16px;margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--muted)}
.prose li{margin:0 0 8px}
.prose li:last-child{margin-bottom:0}
.prose a{color:#0a5cc4;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--blue)}
.prose .meta{color:#8195ab;font-size:13px;margin:0 0 10px}
.prose .note{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 18px;color:#42566b;font-size:15px}

/* Footer legal links (replaces the old tagline slot) */
.copyright .legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.copyright .legal a{color:#9fb2c8}
.copyright .legal a:hover{color:#fff}