/* ============================================================
   Webly Agency — design tokens
   ============================================================ */
:root{
  --blue:#0052FF;
  --teal:#00CEC9;
  --green:#00B894;
  --navy:#0B132B;
  --white:#FFFFFF;
  --gray-light:#F8F9FA;
  --charcoal:#2D3436;
  --cyan:#00BFFF;
  --royal:#0040FF;
  --emerald:#2ECC71;
  --gradient-signature: linear-gradient(135deg, #0052FF 0%, #0B132B 38%, #00CEC9 72%, #00B894 100%);
  --border-soft: rgba(11,19,43,0.10);
  --border-soft-navy: rgba(255,255,255,0.14);
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius-sm: 3px;
  --radius-md: 6px;
  --container: 1200px;
  --section-pad: clamp(4rem, 3rem + 4vw, 8rem);
  --ease: cubic-bezier(.16,.84,.32,1);
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; } /* Lenis drives smooth scroll in JS when enabled */
body,h1,h2,h3,p,figure,blockquote{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
img,svg,canvas{ display:block; max-width:100%; }

body{
  background: var(--gray-light);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; height:100vh; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; color:var(--navy); text-wrap:balance; }
h1{ font-size:clamp(2.6rem, 2rem + 3.2vw, 4.6rem); line-height:1.02; letter-spacing:-0.02em; }
h2{ font-size:clamp(1.9rem, 1.5rem + 1.8vw, 2.85rem); line-height:1.08; letter-spacing:-0.01em; }
h3{ font-size:1.2rem; line-height:1.3; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.75rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue);
}
.on-navy .eyebrow, .cta-final .eyebrow{ color:var(--teal); }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 2.5rem); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{
  position:absolute; left:1rem; top:-3rem; z-index:400;
  background:var(--navy); color:var(--white);
  padding:0.65rem 1rem; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:0.85rem;
  transition: top .2s ease;
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; border-radius:2px; }
.on-navy :focus-visible, .cta-final :focus-visible, footer :focus-visible{ outline-color:var(--cyan); }

/* ============================================================
   Custom cursor (pointer:fine only — CSS gates it, JS still safe elsewhere)
   ============================================================ */
.cursor-dot{
  position:fixed; top:0; left:0; width:9px; height:9px; border-radius:2px;
  background:var(--blue); pointer-events:none; z-index:500;
  transform:translate(-50%,-50%); opacity:0;
  transition:opacity .2s ease, width .2s var(--ease), height .2s var(--ease), background-color .2s ease;
}
.cursor-dot.is-active{ opacity:1; }
.cursor-dot.is-hover{ width:34px; height:34px; background:transparent; border:1.5px solid var(--blue); border-radius:50%; }
@media (hover:hover) and (pointer:fine){ body.cursor-ready{ cursor:none; } body.cursor-ready a, body.cursor-ready button{ cursor:none; } }

/* ============================================================
   Loader
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:1000; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .5s ease, visibility .5s ease;
}
#loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  position:absolute; top:50%; left:50%;
  height:min(22vh, 150px); width:auto;
  opacity:0; transform:translate(-50%,-50%) scale(.45);
  animation: logo-pop .7s var(--ease) .15s forwards;
}
@keyframes logo-pop{ to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (prefers-reduced-motion: reduce){ .loader-mark{ animation:none; opacity:1; transform:translate(-50%,-50%); } }

/* ============================================================
   Pixel primitives — the signature motif (ascending bar columns)
   ============================================================ */
.pixel-bars{ display:flex; align-items:flex-end; }
.pixel-bars .pixel-col{ display:flex; flex-direction:column-reverse; }
.pixel-bars .pixel-sq{ border-radius:2px; flex-shrink:0; }
@keyframes pixel-pop{ to{ opacity:1; transform:scale(1); } }

.mark{ flex-shrink:0; display:block; width:auto; }
.mark-sm{ height:20px; }
.mark-lg{ height:42px; }

.seam{ display:flex; justify-content:center; gap:8px; padding-block:2.5rem; }
.seam span{ width:8px; height:8px; border-radius:2px; background:var(--border-soft); transform:scale(0.4); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease), background-color .3s ease; }
.seam.is-active span{ transform:scale(1); opacity:1; }
.seam.is-active span:nth-child(1){ background:var(--blue); transition-delay:0ms; }
.seam.is-active span:nth-child(2){ background:var(--navy); transition-delay:60ms; }
.seam.is-active span:nth-child(3){ background:var(--teal); transition-delay:120ms; }
.seam.is-active span:nth-child(4){ background:var(--green); transition-delay:180ms; }
.seam.is-active span:nth-child(5){ background:var(--blue); opacity:0.35; transition-delay:240ms; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.9rem 1.6rem; font-weight:600; font-size:0.95rem;
  border-radius:var(--radius-sm); will-change:transform;
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease, transform .18s ease-out;
}
.btn-primary{ background:var(--blue); color:var(--white); }
.btn-primary:hover{ background:var(--royal); box-shadow:0 8px 20px rgba(0,82,255,0.3); }
.btn-secondary{ background:transparent; color:var(--navy); border:1.5px solid var(--border-soft); }
.btn-secondary:hover{ border-color:var(--navy); }
.on-navy .btn-secondary, .cta-final .btn-secondary{ color:var(--white); border-color:rgba(255,255,255,0.3); }
.on-navy .btn-secondary:hover, .cta-final .btn-secondary:hover{ border-color:var(--white); }
.btn-block{ width:100%; }

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(248,249,250,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.nav.is-scrolled{ border-color:var(--border-soft); }
.nav.is-on-dark{ background:rgba(11,19,43,0.72); }
.nav.is-on-dark.is-scrolled{ border-color:var(--border-soft-navy); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:1.15rem; transition:padding-block .25s ease; }
.nav.is-scrolled .nav-inner{ padding-block:0.7rem; }

.brand{ display:flex; align-items:center; gap:0.6rem; font-family:var(--font-mono); font-weight:600; font-size:1.02rem; color:var(--navy); }
.nav.is-on-dark .brand, footer .brand{ color:var(--white); }
.brand small{ color:var(--blue); font-weight:500; }
.nav.is-on-dark .brand small{ color:var(--cyan); }

.nav-toggle{
  display:none; position:relative; z-index:160;
  width:44px; height:44px; padding:0; align-items:center; justify-content:center;
  border-radius:50%; transition:background-color .2s ease;
}
.nav-toggle .bars{ width:20px; height:14px; position:relative; }
.nav-toggle .bars span{ position:absolute; left:0; right:0; height:2px; background:var(--navy); border-radius:1px; transition:transform .3s var(--ease), opacity .2s ease, background-color .2s ease; }
.nav.is-on-dark .nav-toggle .bars span{ background:var(--white); }
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:6px; }
.nav-toggle .bars span:nth-child(3){ top:12px; }
.nav-toggle.is-open .bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-toggle.is-open .bars span:nth-child(2){ opacity:0; }
.nav-toggle.is-open .bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }

.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a:not(.btn){ font-size:0.92rem; font-weight:500; }
.nav-links a:not(.btn):hover{ color:var(--blue); }
.nav.is-on-dark .nav-links a:not(.btn):hover{ color:var(--cyan); }
.nav-backdrop{ display:none; }

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; z-index:150; inset:0 0 auto auto; top:0; height:100dvh; width:min(80vw, 320px);
    background:var(--navy); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:5.5rem 1.75rem 2rem; gap:1.5rem;
    transform:translateX(100%); transition:transform .35s var(--ease);
    box-shadow:-24px 0 48px -24px rgba(11,19,43,0.4);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a:not(.btn){ color:var(--white); font-size:1.05rem; }
  .nav-links .btn-primary{ width:100%; margin-top:0.5rem; }

  .nav-backdrop{
    display:block; position:fixed; z-index:140; inset:0;
    background:rgba(5,8,20,0.5); opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  .nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; background:var(--navy); overflow:hidden; }
.hero-3d-host{ position:absolute; inset:0; z-index:0; }
#scene-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1s ease; }
#scene-canvas.is-ready{ opacity:1; }
.hero-poster{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 32%, rgba(0,206,201,0.22), transparent 45%),
    radial-gradient(circle at 68% 62%, rgba(0,184,148,0.18), transparent 50%),
    radial-gradient(circle at 85% 78%, rgba(0,82,255,0.28), transparent 45%);
}
.hero-poster.is-hidden{ opacity:0; transition:opacity .8s ease; }
.hero-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(11,19,43,0.86) 0%, rgba(11,19,43,0.6) 42%, rgba(11,19,43,0.08) 72%, transparent 100%); }
.hero-inner{ position:relative; z-index:2; width:100%; padding-block:6rem 4rem; }
.hero-copy{ max-width:640px; color:var(--white); }
.hero-copy .eyebrow{ color:var(--teal); }
.hero-copy h1{ color:var(--white); margin-top:1.1rem; }

.mask-title .line{ overflow:hidden; display:block; }
.mask-title .line-inner{ display:block; transform:translateY(112%); }

.hero-sub{ max-width:42ch; color:rgba(255,255,255,0.75); font-size:1.08rem; margin-top:1.4rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2.1rem; }
.trust-line{ margin-top:2.25rem; display:flex; align-items:center; gap:0.6rem; font-family:var(--font-mono); font-size:0.82rem; color:rgba(255,255,255,0.6); }
.trust-line .dot{ width:5px; height:5px; border-radius:50%; background:var(--emerald); }

.scroll-cue{ position:absolute; left:50%; bottom:2.2rem; z-index:2; transform:translateX(-50%); width:1px; height:44px; background:rgba(255,255,255,0.25); }
.scroll-cue span{ position:absolute; top:0; left:-3px; width:7px; height:7px; border-radius:2px; background:var(--cyan); animation:cue-drop 1.8s ease-in-out infinite; }
@keyframes cue-drop{ 0%{ top:0; opacity:0; } 20%{ opacity:1; } 90%{ opacity:1; } 100%{ top:38px; opacity:0; } }

@media (max-width:640px){ .hero-veil{ background:linear-gradient(180deg, rgba(11,19,43,0.46) 10%, rgba(11,19,43,0.86) 62%); } .hero-inner{ padding-block:5.5rem 3rem; } }

/* ============================================================
   Trust strip — real client logos, scrolling. Grayscale-by-default
   with a color reveal on hover unifies four very different logo
   styles (flat marks vs. a full-bleed photographic badge) onto one
   moving shelf instead of letting each fight for attention.
   ============================================================ */
.trust-section{ padding-block:1.75rem; border-block:1px solid var(--border-soft); }
.trust-label{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  max-width:400px; margin-inline:auto; margin-bottom:1.25rem;
  font-family:var(--font-mono); font-size:0.72rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:#9198A0;
}
.trust-label::before, .trust-label::after{ content:""; flex:1; height:1px; background:var(--border-soft); }
.trust-marquee .marquee-track{ gap:0.85rem; }
.client-logo{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:82px; height:42px; padding:0.5rem 0.7rem;
  background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.client-logo:hover{ border-color:rgba(0,82,255,0.32); box-shadow:0 8px 18px -12px rgba(11,19,43,0.3); transform:translateY(-2px); }
.client-logo img{
  max-width:100%; max-height:100%; object-fit:contain;
  filter:grayscale(1); transition:filter .3s ease;
}
.client-logo:hover img, .client-logo:focus-within img{ filter:grayscale(0); }

/* ============================================================
   Marquees
   ============================================================ */
.marquee-wrap{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.stack-marquee{ padding-block:1.5rem; margin-top:2.5rem; }
.marquee-track{ display:flex; width:max-content; gap:3rem; animation: marquee 34s linear infinite; animation-play-state:paused; }
.marquee-track.marquee-reverse{ animation-direction:reverse; animation-duration:28s; gap:0.75rem; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
.stack-marquee .marquee-track span{ font-family:var(--font-mono); font-size:0.85rem; padding:0.55rem 0.95rem; border:1px solid var(--border-soft); border-radius:var(--radius-sm); color:#4A4F52; white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track.is-static{ animation:none; flex-wrap:wrap; width:100%; }

/* ============================================================
   Scroll reveal
   ============================================================ */
[data-reveal], [data-reveal-item]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible, [data-reveal-item].is-visible{ opacity:1; transform:none; }

/* ============================================================
   Sections generic
   ============================================================ */
section{ padding-block:var(--section-pad); }
.section-head{ max-width:640px; }
.section-head p{ margin-top:1rem; color:#4A4F52; font-size:1.05rem; }
section.on-navy{ background:var(--navy); color:var(--white); }
section.on-navy h2{ color:var(--white); }
section.on-navy .section-head p{ color:rgba(255,255,255,0.72); }

/* ============================================================
   Services — interactive index / preview
   ============================================================ */
.services-interactive{ margin-top:2.75rem; display:grid; gap:2.5rem; grid-template-columns:1fr; position:relative; }
.services-index{ border-top:1px solid var(--border-soft); }
.service-row{
  position:relative; display:flex; align-items:center; gap:1.25rem;
  padding-block:1.35rem; padding-inline:0.25rem; border-bottom:1px solid var(--border-soft);
  cursor:pointer; overflow:hidden; border-radius:var(--radius-sm);
  transition:background-color .3s ease;
}
.service-row:hover, .service-row:focus-visible, .service-row.is-active{ background:rgba(0,82,255,0.045); }

/* A large watermark number bleeding off the row's edge — echoes the Méthode section's
   big background numeral, scaled down to fit a compact row. */
.row-num-bg{
  position:absolute; right:0.5rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-weight:700; font-size:clamp(2.75rem, 2rem + 3vw, 4.5rem);
  line-height:1; color:rgba(11,19,43,0.05); z-index:0; pointer-events:none; user-select:none;
  transition:color .3s ease;
}
.service-row.is-active .row-num-bg, .service-row:hover .row-num-bg, .service-row:focus-visible .row-num-bg{ color:rgba(0,82,255,0.09); }

.row-icon{ position:relative; z-index:1; width:30px; flex-shrink:0; display:flex; align-items:flex-end; height:22px; }
.service-row .row-num{ position:relative; z-index:1; font-family:var(--font-mono); color:var(--blue); font-size:0.9rem; width:1.6rem; flex-shrink:0; }
.service-row .row-name{ position:relative; z-index:1; font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--navy); transition:transform .3s var(--ease), color .3s ease; }
.service-row .row-arrow{ position:relative; z-index:1; margin-left:auto; opacity:0; transform:translateX(-6px); transition:opacity .25s ease, transform .25s ease; color:var(--blue); }
.service-row .row-desc{
  /* Visually hidden (not display:none) at desktop widths, where the shared preview
     panel shows it instead — keeps it in the accessibility tree either way. */
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  color:#4A4F52; font-size:0.94rem;
}
.service-row.is-active .row-name, .service-row:hover .row-name, .service-row:focus-visible .row-name{ transform:translateX(10px); color:var(--blue); }
.service-row.is-active .row-arrow, .service-row:hover .row-arrow, .service-row:focus-visible .row-arrow{ opacity:1; transform:translateX(0); }

.services-preview{ display:none; }

@media (min-width:900px){
  .services-interactive{ grid-template-columns:1.1fr 0.9fr; align-items:start; }
  .services-preview{
    display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem;
    position:sticky; top:7rem; background:var(--gray-light); border:1px solid var(--border-soft);
    border-radius:var(--radius-md); padding:2.25rem; min-height:220px; overflow:hidden;
  }
  .preview-glow{
    position:absolute; top:-30%; right:-20%; width:60%; aspect-ratio:1;
    background:radial-gradient(circle, rgba(0,206,201,0.16), transparent 70%);
    pointer-events:none;
  }
  .preview-icon{ position:relative; height:70px; transition:opacity .2s ease; }
  .preview-desc{ position:relative; font-size:1.02rem; color:#3a3f42; max-width:34ch; transition:opacity .2s ease; }
}
@media (max-width:899px){
  .service-row{ flex-wrap:wrap; }
  .service-row .row-desc{
    position:static; flex-basis:100%; width:auto; height:auto;
    padding:0 0 0 calc(30px + 1.25rem); margin-top:0.35rem;
    overflow:visible; clip:auto; white-space:normal; border:0;
  }
}

/* ============================================================
   Method — pinned scroll sequence
   ============================================================ */
.method-section{ padding-block:0; position:relative; }
.method-head{ padding-block:5rem 0; position:relative; z-index:1; }
.method-stage{ height:100vh; position:relative; overflow:hidden; }
.method-stage-inner{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:3rem; position:relative; z-index:1; }

/* Faint dot grid + a soft off-center glow give the pinned stage some depth. */
.method-bg{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1.5px);
  background-size:24px 24px;
}
.method-bg::after{
  content:""; position:absolute; inset:-20%;
  background: radial-gradient(circle at 82% 24%, rgba(0,206,201,0.16), transparent 55%),
              radial-gradient(circle at 12% 82%, rgba(0,82,255,0.14), transparent 50%);
}

/* Rail — five ascending pixel-columns (one per step), filling bottom-up as you scroll
   through that step's slice, with a small glowing marker gliding continuously overhead. */
.method-rail{ position:relative; }
.rail-track{ display:flex; gap:2.2rem; align-items:flex-end; height:34px; }
.rail-col{ flex:1; display:flex; flex-direction:column-reverse; gap:4px; max-width:64px; }
.rail-sq{ height:6px; border-radius:2px; background:rgba(255,255,255,0.12); transition:background-color .3s ease, box-shadow .3s ease; }
.rail-sq.is-filled{ background:var(--teal); box-shadow:0 0 10px rgba(0,206,201,0.55); }
.rail-dot{
  position:absolute; top:-10px; left:0; width:8px; height:8px; border-radius:2px;
  background:var(--white); box-shadow:0 0 12px 3px rgba(0,191,255,0.65);
  transform:translateX(-50%); transition:left .05s linear;
}

.method-steps{ position:relative; min-height:260px; }
.method-step{ position:absolute; inset:0; pointer-events:none; }
.method-step.is-active{ pointer-events:auto; }

.method-num-bg{
  position:absolute; top:-3.2rem; left:-0.2rem; z-index:0;
  font-family:var(--font-mono); font-weight:700; font-size:clamp(6rem, 5rem + 6vw, 10rem);
  line-height:1; letter-spacing:-0.04em;
  background:var(--gradient-signature); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  opacity:0; transform:translateY(18px) scale(0.94); filter:blur(10px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
.method-step.is-active .method-num-bg{ opacity:0.16; transform:none; filter:blur(0.5px); transition-delay:0ms; }

.step-icon{
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,10px); grid-template-rows:repeat(3,10px); gap:4px;
  margin-bottom:1.1rem;
  opacity:0; transform:translateY(14px); filter:blur(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.step-icon .cell{ width:10px; height:10px; border-radius:2px; background:rgba(255,255,255,0.14); }
.step-icon .cell.on{ background:var(--teal); box-shadow:0 0 8px rgba(0,206,201,0.5); }
.step-icon-bars{ display:flex; align-items:flex-end; gap:5px; grid-template-columns:none; }
.step-icon-bars .bar{ width:9px; height:calc(var(--h) * 7px); border-radius:2px; background:var(--teal); box-shadow:0 0 8px rgba(0,206,201,0.5); }
.method-step.is-active .step-icon{ opacity:1; transform:none; filter:blur(0); transition-delay:60ms; }

.method-num{
  position:relative; z-index:1; font-family:var(--font-mono); font-weight:600; font-size:1.1rem; color:var(--teal); display:block; margin-bottom:0.75rem;
  opacity:0; transform:translateY(14px); filter:blur(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.method-step.is-active .method-num{ opacity:1; transform:none; filter:blur(0); transition-delay:110ms; }

.method-step h3{
  position:relative; z-index:1; color:var(--white); font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); margin-bottom:0.9rem;
  opacity:0; transform:translateY(16px); filter:blur(7px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
.method-step.is-active h3{ opacity:1; transform:none; filter:blur(0); transition-delay:160ms; }

.method-step p{
  position:relative; z-index:1; max-width:52ch; color:rgba(255,255,255,0.72); font-size:1.05rem;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.method-step.is-active p{ opacity:1; transform:none; transition-delay:220ms; }

@media (max-width:720px){ .method-stage{ height:80vh; } .method-head{ padding-block:3.5rem 0; } .method-num-bg{ display:none; } }

/* Fallback when ScrollTrigger pin isn't available — plain stacked list */
.method-stage.is-static{ height:auto; padding-block:3rem 5rem; }
.method-stage.is-static .method-steps{ position:static; min-height:0; display:flex; flex-direction:column; gap:3.5rem; }
.method-stage.is-static .method-step{ position:static; pointer-events:auto; }
.method-stage.is-static .method-rail{ display:none; }
.method-stage.is-static .method-num-bg{ display:none; }

/* ============================================================
   Work gallery
   ============================================================ */
#work{ position:relative; overflow:hidden; }
.work-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(11,19,43,0.035) 1px, transparent 1.5px);
  background-size:26px 26px;
}
.work-bg::after{
  content:""; position:absolute; inset:-15%;
  background: radial-gradient(circle at 85% 12%, rgba(0,82,255,0.07), transparent 55%),
              radial-gradient(circle at 6% 92%, rgba(0,206,201,0.08), transparent 50%);
}
#work .container{ position:relative; z-index:1; }

.work-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.work-nav{ display:flex; gap:0.6rem; }
.work-arrow{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border-soft); display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, background-color .2s ease, transform .2s ease; }
.work-arrow:hover{ border-color:var(--blue); background:var(--blue); color:var(--white); transform:translateY(-2px); }

.work-gallery{
  margin-top:2.75rem; display:grid; grid-auto-flow:column; grid-auto-columns:min(84vw, 420px);
  gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem;
  scrollbar-width:thin; perspective:1200px;
}
.work-gallery::-webkit-scrollbar{ height:6px; }
.work-gallery::-webkit-scrollbar-thumb{ background:var(--border-soft); border-radius:4px; }
.work-card{
  display:block; position:relative; overflow:hidden; scroll-snap-align:start;
  background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:1.9rem;
  will-change:transform; transform-style:preserve-3d; transition:transform .3s ease-out, border-color .2s ease, box-shadow .3s ease;
}
.work-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gradient-signature); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.work-card:hover, .work-card:focus-visible{ border-color:rgba(0,82,255,0.35); box-shadow:0 14px 32px -18px rgba(11,19,43,0.28); }
.work-card:hover::before, .work-card:focus-visible::before{ transform:scaleX(1); }

.work-num-bg{
  position:absolute; top:1.1rem; right:1.25rem; z-index:0;
  font-family:var(--font-mono); font-weight:700; font-size:clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height:1; color:rgba(11,19,43,0.05); pointer-events:none; user-select:none;
  transition:color .3s ease;
}
.work-card:hover .work-num-bg, .work-card:focus-visible .work-num-bg{ color:rgba(0,82,255,0.09); }

.work-card-head{ position:relative; z-index:1; display:flex; align-items:center; gap:0.55rem; }
.work-icon{ display:flex; align-items:flex-end; height:14px; }

.work-card h3{ position:relative; z-index:1; margin-top:0.6rem; }
.work-card .work-desc{ position:relative; z-index:1; color:#4A4F52; font-size:0.92rem; margin-top:0.5rem; }
.work-card .related-arrow{ position:relative; z-index:1; display:block; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border-soft); }

.work-progress{ margin-top:1.75rem; display:flex; flex-direction:column; gap:0.65rem; max-width:260px; }
.work-progress-track{ height:3px; background:var(--border-soft); border-radius:2px; overflow:hidden; }
.work-progress-fill{ display:block; height:100%; width:100%; background:var(--gradient-signature); transform:scaleX(0); transform-origin:left; transition:transform .1s linear; }
.work-progress-dots{ display:flex; justify-content:space-between; }
.work-dot{ width:6px; height:6px; border-radius:2px; background:var(--border-soft); transition:background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.work-dot.is-active{ background:var(--blue); box-shadow:0 0 8px rgba(0,82,255,0.4); transform:scale(1.4); }

.work-note{ margin-top:1.75rem; font-size:0.82rem; color:#6B7073; }

/* Internal cross-links from the homepage's condensed sections to their full pages */
.section-more{ margin-top:2rem; }
.section-more a{ font-family:var(--font-mono); font-size:0.88rem; font-weight:500; color:var(--blue); }
.section-more a:hover{ text-decoration:underline; }
.section-more-navy{ text-align:center; padding-bottom:3rem; position:relative; z-index:1; }
.section-more-navy a{ color:var(--teal); }

/* ============================================================
   Testimonials — rotating spotlight carousel
   ============================================================ */
#testimonials{ position:relative; overflow:hidden; }
.testi-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(11,19,43,0.035) 1px, transparent 1.5px);
  background-size:26px 26px;
}
.testi-bg::after{
  content:""; position:absolute; inset:-15%;
  background: radial-gradient(circle at 10% 10%, rgba(0,206,201,0.08), transparent 50%),
              radial-gradient(circle at 92% 85%, rgba(0,82,255,0.08), transparent 55%);
}
#testimonials .container{ position:relative; z-index:1; }

.testi-spotlight{
  position:relative; margin-top:2.75rem; max-width:760px; margin-inline:auto;
  background:var(--gray-light); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:clamp(2.25rem, 2rem + 2vw, 3.5rem); overflow:hidden;
}
.testi-quote-mark{
  position:absolute; top:-1.5rem; left:1.5rem; z-index:0;
  font-family:var(--font-display); font-weight:700; font-size:clamp(6rem, 5rem + 5vw, 9rem); line-height:1;
  background:var(--gradient-signature); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  opacity:0.14; pointer-events:none; user-select:none;
}

.testi-stage{ position:relative; z-index:1; min-height:clamp(230px, 32vw, 270px); }
.testi-slide{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(16px) scale(0.98); filter:blur(6px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.testi-slide.is-active{ opacity:1; transform:none; filter:blur(0); pointer-events:auto; }
.testi-slide blockquote{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.25rem, 1.05rem + 1vw, 1.65rem); line-height:1.4; color:var(--navy); text-wrap:balance; }

.testi-rating{ display:flex; gap:5px; margin-top:1.4rem; }
.testi-rating span{ width:8px; height:8px; border-radius:2px; background:var(--border-soft); }
.testi-rating span.on{ background:var(--teal); }

.testi-who{ display:flex; align-items:center; gap:0.85rem; margin-top:1.5rem; }
.testi-avatar{ display:grid; width:44px; height:44px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; }
.testi-who-text{ font-family:var(--font-mono); font-size:0.82rem; color:#6B7073; }
.testi-who-text strong{ color:var(--navy); display:block; font-family:var(--font-body); font-weight:600; font-size:0.98rem; margin-bottom:0.1rem; }

.testi-controls{ display:flex; align-items:center; justify-content:center; gap:0.75rem; margin-top:2rem; }
.testi-arrow{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .2s ease, background-color .2s ease, transform .2s ease; }
.testi-arrow:hover{ border-color:var(--blue); background:var(--blue); color:var(--white); transform:translateY(-2px); }

.testi-tabs{ display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:center; }
.testi-tab{
  position:relative; display:flex; align-items:center; gap:0.6rem;
  padding:0.55rem 0.9rem 0.55rem 0.55rem; border:1px solid var(--border-soft); border-radius:999px;
  background:var(--white); overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease;
}
.testi-tab:hover{ border-color:rgba(0,82,255,0.35); }
.testi-tab.is-active{ border-color:var(--blue); box-shadow:0 6px 16px -8px rgba(0,82,255,0.35); }
.tab-avatar{ display:grid; width:24px; height:24px; border-radius:4px; overflow:hidden; flex-shrink:0; }
.tab-info{ text-align:left; line-height:1.25; }
.tab-info strong{ display:block; font-size:0.82rem; color:var(--navy); font-weight:600; }
.tab-info span{ display:block; font-family:var(--font-mono); font-size:0.7rem; color:#6B7073; }
.tab-progress{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; }

@media (max-width:560px){
  .tab-info{ display:none; }
  .testi-tab{ padding:0.4rem; }
}

/* ============================================================
   Stats
   ============================================================ */
.stats-grid{ margin-top:2.75rem; display:grid; gap:1.75rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ display:flex; flex-direction:column; gap:0.5rem; }
.stat strong{ font-family:var(--font-mono); font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem); font-variant-numeric:tabular-nums; color:var(--white); }
.stat span{ font-size:0.85rem; color:rgba(255,255,255,0.65); }

/* ============================================================
   CTA final
   ============================================================ */
.cta-final{ background:var(--gradient-signature); color:var(--white); position:relative; overflow:hidden; }
.cta-final .container{ position:relative; z-index:1; }
.cta-grid{ display:grid; gap:2.5rem; }
@media (min-width:900px){ .cta-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.cta-final h2{ color:var(--white); }
.cta-final .section-head p{ color:rgba(255,255,255,0.85); }
.cta-form{ position:relative; overflow:hidden; background:rgba(11,19,43,0.35); border:1px solid rgba(255,255,255,0.22); border-radius:var(--radius-md); padding:1.75rem; backdrop-filter:blur(6px); }
.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.1rem; }
.field label{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.04em; color:rgba(255,255,255,0.85); }
.field input, .field textarea, .field select{ background:rgba(255,255,255,0.96); border:1px solid transparent; border-radius:var(--radius-sm); padding:0.75rem 0.9rem; color:var(--charcoal); font-size:0.95rem; }
.field input::placeholder, .field textarea::placeholder{ color:#8A8F92; }
.field textarea{ resize:vertical; min-height:90px; }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:2.4rem; background-repeat:no-repeat; background-position:right 0.9rem center; background-size:10px 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%232D3436' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}
.field select:invalid{ color:#8A8F92; }
/* Honeypot — off-screen, not display:none (some bots skip hidden fields differently);
   real visitors never see or reach it, tabindex="-1" keeps it out of keyboard flow. */
.field-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; margin:0; }
.form-status{ background:rgba(255,255,255,0.96); color:var(--navy); border-radius:var(--radius-md); padding:1.75rem; }
.form-status strong{ display:block; font-family:var(--font-display); font-size:1.15rem; margin-bottom:0.35rem; }
.form-error{ margin-top:1rem; padding:0.85rem 1rem; border-radius:var(--radius-sm); background:rgba(220,38,38,0.12); color:#fecaca; font-size:0.88rem; }
.cta-final .form-error{ background:rgba(255,255,255,0.12); color:#ffd7d7; }
.contact-grid .form-error{ background:rgba(220,38,38,0.08); color:#b91c1c; }

/* ============================================================
   Footer
   ============================================================ */
footer{ background:var(--navy); color:rgba(255,255,255,0.72); padding-block:2.75rem; font-size:0.85rem; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,0.14); }
.footer-brand p{ margin-top:0.75rem; max-width:32ch; color:rgba(255,255,255,0.6); }
.footer-links{ display:flex; flex-wrap:wrap; gap:2.5rem; }
.footer-col h3{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.85); font-weight:500; margin-bottom:0.9rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:0.55rem; }
.footer-col a:hover{ color:var(--white); }
.footer-contact-link{ display:flex; align-items:center; gap:0.55rem; }
.footer-contact-link .contact-icon{ flex-shrink:0; width:14px; height:14px; color:rgba(255,255,255,0.55); transition:color .2s ease; }
.footer-contact-link:hover .contact-icon{ color:var(--teal); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.5rem; }

/* ============================================================
   Internal pages — breadcrumb
   ============================================================ */
.breadcrumb{ padding-block:1rem; border-bottom:1px solid var(--border-soft); font-family:var(--font-mono); font-size:0.8rem; }
.breadcrumb .container{ display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }
.breadcrumb a{ color:#6B7073; }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb span[aria-current]{ color:var(--navy); font-weight:600; }
.breadcrumb .crumb-sep{ color:var(--border-soft); }

/* ============================================================
   Internal pages — lite hero (no WebGL; CSS/pixel motif only)
   ============================================================ */
.page-hero{ position:relative; overflow:hidden; background:var(--navy); padding-block:clamp(3.5rem, 3rem + 4vw, 6rem); }
.page-hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.5px);
  background-size:24px 24px;
}
.page-hero-bg::after{
  content:""; position:absolute; inset:-20%;
  background: radial-gradient(circle at 85% 15%, rgba(0,206,201,0.16), transparent 55%),
              radial-gradient(circle at 8% 85%, rgba(0,82,255,0.14), transparent 50%);
}
.page-hero-inner{ position:relative; z-index:1; max-width:720px; }
.page-hero .eyebrow{ color:var(--teal); }
.page-hero-icon{ display:flex; align-items:flex-end; height:34px; margin-top:1.1rem; }
.page-hero-icon-sm{ height:26px; }
.page-hero h1{ color:var(--white); margin-top:0.9rem; }
.page-hero-intro{ color:rgba(255,255,255,0.75); font-size:1.08rem; max-width:56ch; margin-top:1.1rem; }
.page-hero-meta{ color:rgba(255,255,255,0.6); font-family:var(--font-mono); font-size:0.85rem; margin-top:0.9rem; }
.page-hero .hero-ctas{ margin-top:1.75rem; }
.page-hero-article{ padding-block:clamp(3rem, 2.5rem + 3vw, 4.5rem); }

.page-hero-minimal{ background:var(--gray-light); padding-block:clamp(2.5rem, 2rem + 3vw, 4rem); }
.page-hero-minimal h1{ margin:0; }

/* ============================================================
   Internal pages — prose sections (Contexte, Défi, légal…)
   ============================================================ */
.prose-section{ }
.prose{ max-width:68ch; }
.prose p{ color:#4A4F52; font-size:1.02rem; line-height:1.7; }
.prose p + p{ margin-top:1rem; }
.prose ul{ margin-top:0.75rem; display:flex; flex-direction:column; gap:0.6rem; }
.prose li{ color:#4A4F52; font-size:1.02rem; line-height:1.6; padding-left:1.4rem; position:relative; }
.prose li::before{ content:""; position:absolute; left:0; top:0.55em; width:6px; height:6px; border-radius:2px; background:var(--blue); }
.prose strong{ color:var(--navy); }
.prose-section.on-navy .prose p, .prose-section.on-navy .prose li{ color:rgba(255,255,255,0.75); }
.prose-section.on-navy .prose strong{ color:var(--white); }
.prose-section.on-navy .prose li::before{ background:var(--teal); }
.prose-article h2{ margin-top:2.5rem; margin-bottom:0.75rem; font-size:clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); }
.prose-article h2:first-child{ margin-top:0; }

/* ============================================================
   Internal pages — benefits list
   ============================================================ */
.benefits-list{ margin-top:2.5rem; display:grid; gap:1rem; grid-template-columns:1fr; max-width:640px; }
@media (min-width:640px){ .benefits-list{ grid-template-columns:1fr 1fr; } }
.benefits-list li{ display:flex; align-items:flex-start; gap:0.75rem; font-size:1rem; color:#3a3f42; line-height:1.5; }
.benefit-mark{ flex-shrink:0; width:8px; height:8px; border-radius:2px; margin-top:0.4em; background:var(--gradient-signature); }
section.on-navy .benefits-list li{ color:rgba(255,255,255,0.82); }

/* ============================================================
   Internal pages — FAQ accordion (native <details>, no JS)
   ============================================================ */
.faq-list{ margin-top:2.5rem; max-width:760px; display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--border-soft); padding-block:0.4rem; }
.faq-list .faq-item:last-child{ border-bottom:1px solid var(--border-soft); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1.1rem; font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--navy);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .faq-toggle{ position:relative; flex-shrink:0; width:16px; height:16px; }
.faq-item .faq-toggle::before, .faq-item .faq-toggle::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--blue);
  transition:transform .25s ease;
}
.faq-item .faq-toggle::before{ width:16px; height:2px; transform:translate(-50%,-50%); }
.faq-item .faq-toggle::after{ width:2px; height:16px; transform:translate(-50%,-50%); }
.faq-item[open] .faq-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item p{ color:#4A4F52; font-size:0.98rem; line-height:1.65; max-width:65ch; padding-bottom:1.3rem; }

/* ============================================================
   Internal pages — related cards (services / réalisations grids)
   ============================================================ */
.related-section{ }
.related-grid, .realisations-grid{ margin-top:2.5rem; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .related-grid, .realisations-grid{ grid-template-columns:repeat(2,1fr); } }
.related-card{
  position:relative; display:flex; flex-direction:column; gap:0.6rem; background:var(--white);
  border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:1.75rem;
  transition:border-color .2s ease, transform .3s ease-out, box-shadow .3s ease;
}
.related-card:hover{ border-color:rgba(0,82,255,0.35); box-shadow:0 14px 32px -18px rgba(11,19,43,0.28); }
.related-card h3{ margin-top:0.2rem; }
.related-icon{ display:flex; align-items:flex-end; height:16px; }
.related-arrow{ margin-top:auto; padding-top:0.5rem; color:var(--blue); font-family:var(--font-mono); }

/* ============================================================
   Internal pages — method teaser (compact, links to /agence/)
   ============================================================ */
.method-teaser-inner > div{ max-width:640px; }
.method-teaser-inner p{ margin-top:1rem; }
.method-teaser-inner .btn{ margin-top:1.75rem; }

/* ============================================================
   Agence page — simple (non-pinned) method list
   ============================================================ */
.method-full .method-list{ margin-top:2.75rem; display:flex; flex-direction:column; }
.method-full .method-item{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem; padding-block:1.5rem; border-top:1px solid rgba(255,255,255,0.14); }
.method-full .method-item:last-child{ border-bottom:1px solid rgba(255,255,255,0.14); }
.method-full .method-item .method-num{ font-family:var(--font-mono); font-weight:600; font-size:1.4rem; color:var(--teal); opacity:1; transform:none; }
.method-full .method-item h3{ color:var(--white); margin-bottom:0.4rem; }
.method-full .method-item p{ color:rgba(255,255,255,0.72); max-width:56ch; }
@media (min-width:720px){ .method-full .method-item{ grid-template-columns:80px 1fr; align-items:baseline; } }

/* ============================================================
   Services index / réalisations index grids
   ============================================================ */
.service-teaser-grid{ margin-top:2.75rem; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .service-teaser-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .service-teaser-grid{ grid-template-columns:repeat(3,1fr); } }
.service-teaser-card{
  position:relative; display:flex; flex-direction:column; gap:1rem; background:var(--white);
  border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:1.9rem;
  transition:border-color .2s ease, transform .3s ease-out, box-shadow .3s ease;
}
.service-teaser-card:hover{ border-color:rgba(0,82,255,0.35); box-shadow:0 14px 32px -18px rgba(11,19,43,0.28); }
.service-teaser-card.is-current{ border-color:var(--blue); background:rgba(0,82,255,0.04); }
.service-teaser-icon{ display:flex; align-items:flex-end; height:22px; }
.service-teaser-card p{ color:#4A4F52; font-size:0.94rem; }

/* ============================================================
   Blog
   ============================================================ */
.blog-grid-section{ }
.blog-grid{ margin-top:2.75rem; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
.blog-card{
  position:relative; display:flex; flex-direction:column; gap:0.6rem; background:var(--white);
  border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:1.9rem;
  transition:border-color .2s ease, transform .3s ease-out, box-shadow .3s ease;
}
.blog-card:hover{ border-color:rgba(0,82,255,0.35); box-shadow:0 14px 32px -18px rgba(11,19,43,0.28); }
.blog-card h3{ margin-top:0.2rem; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-section{ position:relative; overflow:hidden; padding-block:var(--section-pad); }
.contact-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(11,19,43,0.035) 1px, transparent 1.5px);
  background-size:26px 26px;
}
.contact-bg::after{
  content:""; position:absolute; inset:-15%;
  background: radial-gradient(circle at 8% 8%, rgba(0,82,255,0.07), transparent 50%),
              radial-gradient(circle at 95% 90%, rgba(0,206,201,0.08), transparent 55%);
}
.contact-grid{ position:relative; z-index:1; display:grid; gap:2.75rem; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:0.95fr 1.05fr; align-items:start; } }
.contact-grid .cta-form{ background:var(--gray-light); border-color:var(--border-soft); }
.contact-grid .field label{ color:#4A4F52; }
.contact-grid .form-status{ margin-top:0; }

.contact-steps{ margin-top:2.25rem; display:flex; flex-direction:column; }
.contact-steps li{ display:grid; grid-template-columns:auto 1fr; gap:1.25rem; padding-block:1.25rem; border-top:1px solid var(--border-soft); }
.contact-steps li:last-child{ border-bottom:1px solid var(--border-soft); }
.contact-step-num{ font-family:var(--font-mono); font-weight:600; font-size:1.15rem; color:var(--blue); }
.contact-steps h3{ font-size:1.02rem; margin-bottom:0.3rem; }
.contact-steps p{ color:#4A4F52; font-size:0.92rem; max-width:40ch; }

.contact-details{ margin-top:2.25rem; display:flex; flex-direction:column; gap:0.75rem; }
.contact-detail{
  display:flex; align-items:center; gap:0.75rem; font-family:var(--font-mono); font-size:0.92rem; color:var(--navy);
  transition:color .2s ease;
}
.contact-detail:hover{ color:var(--blue); }
.contact-detail .contact-icon{ flex-shrink:0; width:19px; height:19px; }

/* ============================================================
   Reduced motion — hard overrides
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-item]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .mask-title .line-inner{ transform:none !important; }
  .marquee-track{ animation:none !important; }
  .scroll-cue span{ animation:none !important; top:16px; opacity:0.6; }
  .method-step, .method-step *{ transition:none !important; filter:none !important; }
  .method-num-bg{ opacity:0.16 !important; transform:none !important; }
  .step-icon, .method-num, .method-step h3, .method-step p{ opacity:1 !important; transform:none !important; }
  .testi-slide{ transition:none !important; filter:none !important; }
  .faq-item .faq-toggle::before, .faq-item .faq-toggle::after{ transition:none !important; }
  .cursor-dot{ display:none !important; }
  #loader{ transition:none !important; }
}