/* ═══════════════════════════════════════════════════════════
   LUMORA — Landing Page
   Design system: deep blue-black + WeDo brand blue, glass, motion
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────── */
:root{
  /* ── Surface ────────────────────────────────────────────
     Near-black, nudged very slightly blue so it sits with the
     logo navy instead of fighting it. */
  --bg:            #070910;
  --bg-2:          #0B0E17;
  --bg-3:          #10141F;
  --surface:       rgba(255,255,255,.028);
  --surface-2:     rgba(255,255,255,.045);
  --stroke:        rgba(255,255,255,.075);
  --stroke-2:      rgba(255,255,255,.13);

  /* ── Brand ──────────────────────────────────────────────
     Sampled from the WeDo Solutions logo:
        navy  #424E72   blue  #488AEA
     The logo blue is kept as --brand-3. --brand-2 is that blue
     lifted for legibility on a dark ground; it measures 7.7:1
     against --bg, where the raw logo blue only reaches 5.8:1.
     The navy is depth ONLY (orbs, surfaces) — at 2.4:1 on --bg
     it can never carry text. */
  --brand-1:       #CFE1FD;   /* pale — gradient top stop, hover text */
  --brand-2:       #6BA3F2;   /* the working accent                   */
  --brand-3:       #488AEA;   /* the logo blue, exact                 */
  --brand-deep:    #2E63B8;
  --brand-grad:    linear-gradient(120deg,#E3EEFE 0%,#6BA3F2 42%,#3A79D8 100%);
  --brand-glow:    rgba(107,163,242,.35);
  --brand-ink:     #06080F;   /* text ON a blue fill — 7.8:1          */

  /* ── Text ───────────────────────────────────────────────
     tx-3 is 52%, not the usual 45%: at 45% it measured 4.18:1
     on this ground and failed AA. */
  --tx-1:          #F2F5FA;
  --tx-2:          rgba(242,245,250,.68);
  --tx-3:          rgba(242,245,250,.52);

  /* Logo navy — depth cues only, never text */
  --violet:        #424E72;

  /* Radius */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Elevation — soft, large-blur, negative-spread depth pockets */
  --el-low:  0 10px 26px -10px rgba(0,0,0,.9);
  --el-mid:  0 26px 60px -28px rgba(0,0,0,.95);
  --el-high: 0 50px 110px -55px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.08);
  --el-brand: 0 12px 30px -12px var(--brand-glow);

  /* Motion — one easing family, three duration steps */
  --ease:      cubic-bezier(.22,1,.36,1);   /* expo-out: decelerate hard, settle */
  --ease-soft: cubic-bezier(.4,0,.2,1);     /* symmetric UI state changes */
  --d-micro:   .24s;   /* colour, border, icon nudges */
  --d-norm:    .42s;   /* surface lift, menu, accordion */
  --d-macro:   .85s;   /* entrances, overlays */

  /* Spacing — 4px base */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;

  /* Layout */
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --max: 1240px;
  --sec-y: clamp(4.5rem, 10vw, 8.5rem);

  /* Type */
  --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-disp: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ─── 2. RESET ──────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* --header-h is measured and published by initHeader(); the 92px is only
     the pre-JS fallback. Hardcoding it meant anchor targets could land
     underneath the bar whenever the real header was taller than the guess. */
  scroll-padding-top:calc(var(--header-h, 76px) + 18px);
  overflow-x:clip;              /* guard: never let a stray element scroll the page sideways */
}

body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--tx-1);
  font-size:clamp(.95rem,.9rem + .25vw,1.0625rem);
  line-height:1.68;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.011em;
}
body.is-locked{ overflow:hidden }

img,svg{ display:block; max-width:100% }
button,input,textarea,select{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }

::selection{ background:var(--brand-2); color:#06080F }

/* Scrollbar */
::-webkit-scrollbar{ width:9px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:rgba(107,163,242,.22); border-radius:99px }
::-webkit-scrollbar-thumb:hover{ background:rgba(107,163,242,.4) }

:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed; top:-100px; left:50%; transform:translateX(-50%);
  z-index:9999; background:var(--brand-2); color:#06080F;
  padding:.7rem 1.4rem; border-radius:0 0 var(--r-sm) var(--r-sm);
  font-weight:700; font-size:.85rem; transition:top .3s var(--ease);
}
.skip-link:focus{ top:0 }

/* ─── 3. LAYOUT ─────────────────────────────────────────── */
.container{
  width:100%; max-width:var(--max);
  margin-inline:auto; padding-inline:var(--pad);
}
.container--narrow{ max-width:840px }

.section{ position:relative; padding-block:var(--sec-y) }
.section--alt::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(107,163,242,.045) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.018) 0%, transparent 100%);
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}

.section__head{ max-width:720px; margin-bottom:clamp(2.5rem,5vw,4rem) }
.section__head--center,.section__head{ }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brand-2);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:''; width:26px; height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-3));
}

.section__title{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:clamp(1.9rem, 1.2rem + 3vw, 3.4rem);
  line-height:1.13;
  letter-spacing:-.022em;
}
.section__title em{
  font-style:italic;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section__sub{
  margin-top:1.1rem; color:var(--tx-2);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  max-width:56ch;
}

/* min() keeps the track from exceeding the container on 320px screens */
.grid{ display:grid; gap:clamp(1rem,1.6vw,1.4rem) }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)) }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)) }

/* ─── 4. BACKGROUND ─────────────────────────────────────── */
.bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none }

.bg__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 10%, transparent 75%);
}

.bg__orb{
  position:absolute; border-radius:50%;
  filter:blur(105px); opacity:.5;
  will-change:transform;
  animation:float 22s var(--ease-soft) infinite alternate;
}
.bg__orb--1{
  width:min(48vw,620px); aspect-ratio:1; top:-14%; left:-8%;
  background:radial-gradient(circle,rgba(107,163,242,.4),transparent 68%);
}
.bg__orb--2{
  width:min(42vw,540px); aspect-ratio:1; top:32%; right:-12%;
  background:radial-gradient(circle,rgba(66,78,114,.3),transparent 68%);
  animation-delay:-8s; animation-duration:27s;
}
.bg__orb--3{
  width:min(38vw,470px); aspect-ratio:1; bottom:-8%; left:22%;
  background:radial-gradient(circle,rgba(72,138,234,.26),transparent 68%);
  animation-delay:-15s; animation-duration:31s;
}
@keyframes float{
  0%  { transform:translate3d(0,0,0) scale(1) }
  50% { transform:translate3d(4%, 6%,0) scale(1.09) }
  100%{ transform:translate3d(-5%,-4%,0) scale(.95) }
}

.bg__noise{
  position:absolute; inset:0; opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── 4b. HERO CINEMATIC LAYER ──────────────────────────── */
.hero-media{
  position:absolute; top:0; left:0; right:0;
  height:100svh; min-height:640px;
  z-index:-1; overflow:hidden; pointer-events:none;
}
.hero-media__still,
.hero-media video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
/* The clip fades in over the still once it can actually play, so there is
   never a black frame or a visible swap. */
.hero-media video{
  opacity:0; transition:opacity 1.2s var(--ease);
}
.hero-media video.is-live{ opacity:1 }

/* CENTRE-COLUMN scrim, not a global dimmer.
   The hero copy lives in a narrow centred column; the left and right thirds
   are empty. So protect the column hard and leave the flanks open — that is
   what lets the wave stay bright AND the text stay legible. Dimming the whole
   frame instead just produced an invisible wave (measured, twice).

   Solved by rendering the mesh under this scrim across three animation
   phases and measuring WCAG contrast on the brightest pixel in each copy
   block: heading 13.1:1 · body 6.2:1 · muted 4.7:1.
   Widening the ellipse or lightening these re-breaks the copy. */
.hero-media__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 32% 46% at 50% 46%, rgba(7,9,16,.95) 0%, rgba(7,9,16,.88) 55%, transparent 100%),
    linear-gradient(180deg, rgba(7,9,16,.58) 0%, rgba(7,9,16,.16) 30%, rgba(7,9,16,.06) 62%, rgba(7,9,16,.30) 90%, rgba(7,9,16,.92) 100%);
}

/* The 45% muted token is fine on flat black but fails over imagery.
   Lifted to 58% inside the hero ONLY while the wave is actually on —
   main.js adds .hero-wave. With the wave off there is no imagery to
   fight, so the hero keeps the design-system value like every other
   section. Solved, not guessed. */
.hero-wave .hero{ --tx-3: rgba(242,245,250,.58) }

/* ─── 4c. PARTICLE WAVE ─────────────────────────────────────
   Canvas sits below the scrim so the headline always wins.
   Sized and drawn entirely in JS — see initParticleWave(). */
.wave{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; pointer-events:none;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.wave.is-live{ opacity:1 }

/* Phones get the still only — see the note in index.html */
/* Phones: the text column fills nearly the whole width, so the scrim goes
   heavier over the copy while still leaving the wave readable at the foot. */
@media (max-width:1023px){
  .hero-media{ height:100svh }
  .hero-media__scrim{
    background:
      radial-gradient(ellipse 96% 46% at 50% 36%, rgba(7,9,16,.94) 0%, rgba(7,9,16,.72) 50%, transparent 86%),
      linear-gradient(180deg, rgba(7,9,16,.86) 0%, rgba(7,9,16,.46) 28%, rgba(7,9,16,.24) 62%, rgba(7,9,16,.62) 88%, var(--bg) 100%);
  }
}

/* ─── 5. PRELOADER ──────────────────────────────────────── */
.preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden }
.preloader__inner{ text-align:center }
.preloader__logo{
  display:block; width:auto;
  height:clamp(46px, 9vw, 66px);
  margin:0 auto 1.5rem;
  animation:plFade 1.4s var(--ease) infinite alternate;
}
@keyframes plFade{ from{opacity:.45} to{opacity:1} }
.preloader__bar{
  width:170px; height:2px; background:rgba(255,255,255,.09);
  border-radius:99px; overflow:hidden; margin-inline:auto;
}
.preloader__bar span{
  display:block; height:100%; width:0;
  background:var(--brand-grad);
  animation:plBar 1.15s var(--ease) forwards;
}
@keyframes plBar{ to{ width:100% } }

/* ─── 6. CURSOR ─────────────────────────────────────────── */
.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9998;
  pointer-events:none; border-radius:50%;
  opacity:0; transition:opacity .3s;
}
.cursor{
  width:6px; height:6px; background:var(--brand-1);
  margin:-3px 0 0 -3px;
}
.cursor-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(107,163,242,.5);
  transition:opacity .3s, width .3s var(--ease), height .3s var(--ease),
             margin .3s var(--ease), background .3s, border-color .3s;
}
body.cursor-on .cursor,body.cursor-on .cursor-ring{ opacity:1 }
body.cursor-hover .cursor-ring{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  background:rgba(107,163,242,.09);
  border-color:rgba(107,163,242,.85);
}

/* ─── 7. SCROLL PROGRESS ────────────────────────────────── */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:9997;
  background:var(--brand-grad);
  box-shadow:0 0 14px var(--brand-glow);
}

/* ─── 8. HEADER ─────────────────────────────────────────── */
/* Explicit transitions, never `all`. `all` also animated padding-block, so
   the bar changed HEIGHT at the same time it was translating — two motions
   fighting, which read as a jump. Padding still animates, but on its own
   shorter curve, and layout-affecting properties are the only ones listed
   deliberately. */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding-block:1.15rem;
  transition:transform .42s var(--ease),
             padding-block .3s var(--ease),
             background-color .3s var(--ease),
             border-color .3s var(--ease),
             backdrop-filter .3s var(--ease);
  will-change:transform;
}
.header.is-stuck{
  padding-block:.65rem;
  background:rgba(7,9,16,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--stroke);
}
.header.is-hidden{ transform:translateY(-108%) }

.header__inner{ display:flex; align-items:center; gap:1.2rem }

/* The supplied logo is a stacked lockup (WEDO over SOLUTIONS) at 2.91:1.
   Sized by HEIGHT so the lockup keeps its proportions; the shipped asset is
   600px wide, roughly 3x the largest display size. */
.logo{ display:inline-flex; align-items:center; flex-shrink:0 }
.logo picture{ display:block }
.logo img{
  display:block; width:auto;
  height:clamp(34px, 2.6vw, 42px);
  transition:opacity .35s var(--ease), transform .5s var(--ease);
}
.logo:hover img{ opacity:.86; transform:scale(1.02) }
.header.is-stuck .logo img{ height:clamp(30px, 2.3vw, 36px) }
.logo--footer img{ height:44px }

.logo__mark{ display:grid; place-items:center; transition:transform .5s var(--ease) }
.logo:hover .logo__mark{ transform:rotate(-8deg) scale(1.08) }
/* Legacy text lockup — superseded by the logo image, kept for reference
   quiet descriptor. A 14-character name at the old .16em tracking blew
   */
.logo__text{
  display:inline-flex; align-items:baseline; gap:.42em;
  font-family:var(--f-disp); font-weight:600;
  font-size:1.16rem; letter-spacing:.04em;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.logo__sub{
  font-family:var(--f-body); font-weight:600;
  font-size:.56em; letter-spacing:.2em; text-transform:uppercase;
  background:none; -webkit-text-fill-color:var(--tx-3);
  color:var(--tx-3);
  transition:color .3s var(--ease), -webkit-text-fill-color .3s var(--ease);
}
.logo:hover .logo__sub{ -webkit-text-fill-color:var(--tx-2); color:var(--tx-2) }

/* Narrow phones keep the monogram + "WeDo"; the descriptor would push
   the burger off-screen, which is exactly the bug we fixed once already. */
@media (max-width:430px){
  .logo__sub{ display:none }
}

.nav{ display:flex; gap:.25rem; margin-inline:auto }
.nav__link{
  position:relative; padding:.5rem .82rem; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:500; color:var(--tx-2);
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.nav__link::after{
  content:''; position:absolute; left:50%; bottom:.28rem;
  width:0; height:1px; background:var(--brand-grad);
  transform:translateX(-50%); transition:width .35s var(--ease);
}
.nav__link:hover{ color:var(--tx-1) }
.nav__link:hover::after,.nav__link.is-active::after{ width:38% }
.nav__link.is-active{ color:var(--brand-2) }

.header__actions{ display:flex; align-items:center; gap:.6rem; margin-left:auto }

/* Language */
.lang{ position:relative }
.lang__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .78rem; border-radius:var(--r-pill);
  border:1px solid var(--stroke);
  background:var(--surface);
  font-size:.78rem; font-weight:700; letter-spacing:.08em;
  color:var(--tx-2); transition:all .3s var(--ease);
}
.lang__btn:hover{ color:var(--brand-2); border-color:rgba(107,163,242,.35) }
.lang__menu{
  position:absolute; top:calc(100% + .5rem); right:0; min-width:160px;
  background:rgba(14,14,19,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--stroke-2); border-radius:var(--r);
  padding:.35rem; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transition:all .32s var(--ease);
  box-shadow:0 22px 50px rgba(0,0,0,.6);
}
.lang.is-open .lang__menu{ opacity:1; visibility:visible; transform:none }
.lang__menu button{
  display:block; width:100%; text-align:left;
  padding:.6rem .8rem; border-radius:10px;
  font-size:.86rem; color:var(--tx-2);
  transition:all .22s var(--ease);
}
.lang__menu button:hover{ background:var(--surface-2); color:var(--tx-1) }
.lang__menu button.is-active{ color:var(--brand-2); background:rgba(107,163,242,.08) }

/* Burger */
.burger{
  display:none; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--stroke); background:var(--surface);
  position:relative;
}
.burger span{
  position:absolute; left:50%; width:17px; height:1.6px;
  background:var(--tx-1); border-radius:2px;
  transition:all .38s var(--ease);
}
.burger span:nth-child(1){ transform:translate(-50%,-4px) }
.burger span:nth-child(2){ transform:translate(-50%,4px) }
.burger.is-open span:nth-child(1){ transform:translate(-50%,0) rotate(45deg) }
.burger.is-open span:nth-child(2){ transform:translate(-50%,0) rotate(-45deg) }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:880;
  background:rgba(7,9,16,.97);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .42s var(--ease), visibility .42s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible }
.mobile-menu__nav{
  display:flex; flex-direction:column; gap:.4rem;
  text-align:center; width:min(88vw,360px);
}
.mobile-menu__nav a{
  font-family:var(--f-disp); font-size:1.6rem; padding:.55rem;
  color:var(--tx-2); opacity:0; transform:translateY(22px);
  transition:color .3s, opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.is-open .mobile-menu__nav a{ opacity:1; transform:none }
.mobile-menu__nav a:nth-child(1){ transition-delay:.06s }
.mobile-menu__nav a:nth-child(2){ transition-delay:.11s }
.mobile-menu__nav a:nth-child(3){ transition-delay:.16s }
.mobile-menu__nav a:nth-child(4){ transition-delay:.21s }
.mobile-menu__nav a:nth-child(5){ transition-delay:.26s }
.mobile-menu__nav a:nth-child(6){ transition-delay:.31s }
.mobile-menu__nav a:nth-child(7){ transition-delay:.36s; margin-top:1.2rem }
.mobile-menu__nav a:hover{ color:var(--brand-2) }
.mobile-menu__nav a.btn{
  font-family:var(--f-body); font-size:1rem;
}
.mobile-menu__nav a.btn--primary,
.mobile-menu__nav a.btn--primary:hover{ color:#06080F }

/* ─── 9. BUTTONS ────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; padding:.85rem 1.6rem; border-radius:var(--r-pill);
  font-size:.925rem; font-weight:700; letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             color .3s, border-color .3s, background .3s;
  will-change:transform;
}
.btn svg{ transition:transform .35s var(--ease) }
.btn:hover svg{ transform:translateX(4px) }

.btn--primary{
  background:var(--brand-grad); color:#06080F;
  box-shadow:0 8px 26px -8px rgba(107,163,242,.5),
             inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);
  transform:translateX(-130%); transition:transform .8s var(--ease);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px -10px rgba(107,163,242,.6),
             inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--primary:hover::before{ transform:translateX(130%) }
.btn--primary:active{ transform:translateY(0) }

.btn--ghost{
  border:1px solid var(--stroke-2); color:var(--tx-1);
  background:var(--surface);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{
  border-color:rgba(107,163,242,.5); color:var(--brand-1);
  background:rgba(107,163,242,.06); transform:translateY(-2px);
}

.btn--sm{ padding:.62rem 1.15rem; font-size:.83rem }
.btn--lg{ padding:1.02rem 2rem; font-size:1rem }
.btn--block{ display:flex; width:100% }

/* ─── 10. HERO ──────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(7.5rem,15vh,10rem) clamp(4rem,8vh,6rem);
  overflow:hidden;
}
.hero__inner{ text-align:center; display:flex; flex-direction:column; align-items:center }

.hero__badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.05rem; border-radius:var(--r-pill);
  border:1px solid rgba(107,163,242,.28);
  background:rgba(107,163,242,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:.775rem; font-weight:600; letter-spacing:.04em;
  color:var(--brand-1); margin-bottom:1.9rem;
}
.pulse-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--brand-2); position:relative; flex-shrink:0;
}
.pulse-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--brand-2); animation:pulse 2s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.85 }
  100%{ transform:scale(3.6); opacity:0 }
}

.hero__title{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(2.4rem, 1.1rem + 6vw, 5.4rem);
  line-height:1.05; letter-spacing:-.032em;
  max-width:16ch;
}
.hero__title .line{ display:block }
.hero__title em{ font-style:italic; font-weight:500 }
.hero__title .grad{
  font-weight:700;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative; white-space:nowrap;
  filter:drop-shadow(0 6px 26px rgba(107,163,242,.28));
}

.hero__sub{
  margin-top:1.6rem; max-width:57ch;
  color:var(--tx-2);
  font-size:clamp(1rem,.95rem + .38vw,1.19rem);
}

.hero__cta{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center;
  margin-top:2.3rem;
}

.hero__note{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.1rem; font-size:.85rem; color:var(--tx-3);
}
.hero__note svg{ color:var(--brand-3); flex-shrink:0 }

/* Countdown */
.countdown{
  margin-top:3rem; padding:1.3rem 1.6rem;
  border:1px solid var(--stroke); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
}
.countdown__label{
  font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-3); margin-bottom:.85rem;
}
.countdown__grid{ display:flex; align-items:flex-start; gap:clamp(.5rem,2vw,1.1rem) }
.cd-cell{ display:flex; flex-direction:column; align-items:center; min-width:52px }
.cd-cell__num{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem); line-height:1;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.cd-cell__lbl{
  margin-top:.4rem; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-3);
}
.cd-sep{
  font-family:var(--f-disp); font-size:clamp(1.3rem,1.6vw,1.9rem);
  color:var(--brand-deep); line-height:1.1;
  animation:blink 1.6s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:.22 } }

/* Hero stats */
.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.6rem,2vw,2rem); margin-top:3rem;
  width:min(100%,760px);
}
.hero__stats li{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  position:relative;
}
.hero__stats li+li::before{
  content:''; position:absolute; left:calc(-1 * clamp(.3rem,1vw,1rem)); top:15%;
  width:1px; height:70%;
  background:linear-gradient(180deg,transparent,var(--stroke-2),transparent);
}
.hero__stats b{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.3rem,1rem + 1.1vw,1.85rem);
  color:var(--brand-1); font-variant-numeric:tabular-nums;
}
.hero__stats span{
  font-size:.72rem; letter-spacing:.05em; color:var(--tx-3);
  text-align:center; line-height:1.35;
}

/* Scroll hint */
.scroll-hint{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1px solid var(--stroke-2);
  border-radius:14px; display:grid; justify-items:center;
  padding-top:7px; opacity:.55;
}
.scroll-hint span{
  width:3px; height:7px; border-radius:2px; background:var(--brand-2);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{ transform:translateY(0); opacity:0 }
  30%{ opacity:1 }
  70%{ transform:translateY(13px); opacity:0 }
  100%{ opacity:0 }
}

/* ─── 11. MARQUEE ───────────────────────────────────────── */
/* The track keeps its CSS scroll so the marquee still runs without GSAP.
   GSAP skews the PARENT by scroll velocity — separate element, no
   transform conflict with the track's own animation. */
.marquee{
  position:relative; overflow:hidden;
  padding-block:1.15rem;
  border-block:1px solid var(--stroke);
  background:rgba(255,255,255,.014);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  will-change:transform;
}
.marquee__track{
  display:flex; gap:2.6rem; width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__track span{
  display:inline-flex; align-items:center; gap:2.6rem;
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:var(--tx-3); white-space:nowrap;
}
.marquee__track span::after{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--brand-3); opacity:.7;
}
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ─── 12. CARDS ─────────────────────────────────────────── */
.card{
  position:relative; padding:clamp(1.5rem,2.4vw,2rem);
  border:1px solid var(--stroke); border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  transition:transform .5s var(--ease), border-color .45s, box-shadow .5s;
  will-change:transform;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:linear-gradient(160deg,rgba(107,163,242,.55),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease);
}
.card::after{
  content:''; position:absolute; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle,rgba(107,163,242,.14),transparent 68%);
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  opacity:0; transition:opacity .45s; pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);
}
.card:hover::before,.card:hover::after{ opacity:1 }

.card__num{
  position:absolute; top:1.1rem; right:1.3rem;
  font-family:var(--f-disp); font-size:2.4rem; font-weight:600;
  color:rgba(255,255,255,.05); line-height:1;
  transition:color .45s var(--ease);
}
.card:hover .card__num{ color:rgba(107,163,242,.18) }

.card__icon{
  width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center; margin-bottom:1.15rem;
  border:1px solid rgba(107,163,242,.2);
  background:linear-gradient(150deg,rgba(107,163,242,.14),rgba(107,163,242,.03));
  color:var(--brand-2);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.card__icon svg{ width:21px; height:21px }
.card:hover .card__icon{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 10px 26px -10px var(--brand-glow);
}

.card h3{
  font-size:1.075rem; font-weight:700; line-height:1.35;
  margin-bottom:.55rem; letter-spacing:-.015em;
}
.card p{ color:var(--tx-2); font-size:.92rem; line-height:1.65 }

.card--problem .card__icon{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--tx-2);
}
.card--problem:hover .card__icon{ color:var(--brand-2) }

/* ─── 13. PRICING ───────────────────────────────────────── */
.pricing{
  display:grid; gap:clamp(1.2rem,2.4vw,2.2rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}

.price-card{
  position:relative; overflow:hidden;
  padding:clamp(1.7rem,3.2vw,2.8rem);
  border:1px solid rgba(107,163,242,.24);
  border-radius:var(--r-xl);
  background:
    linear-gradient(165deg, rgba(107,163,242,.09) 0%, rgba(255,255,255,.022) 40%, rgba(255,255,255,.01) 100%);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 40px 90px -45px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.09);
}
.price-card__glow{
  position:absolute; top:-45%; left:50%; transform:translateX(-50%);
  width:120%; aspect-ratio:2/1; pointer-events:none;
  background:radial-gradient(ellipse at center, var(--brand-glow), transparent 62%);
  opacity:.4; filter:blur(48px);
  animation:glowPulse 7s var(--ease-soft) infinite alternate;
}
@keyframes glowPulse{ from{opacity:.24} to{opacity:.5} }

/* Corner ribbon. Geometry rule: (width/2 − rightOverhang) ≈ (top + height/2)
   keeps the visible band centred on the corner in every language. */
.price-card__ribbon{
  position:absolute; top:52px; right:-52px; width:240px;
  transform:rotate(45deg); transform-origin:center;
  background:var(--brand-grad); color:#06080F;
  font-size:.66rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; text-align:center; padding:.4rem 0;
  white-space:nowrap;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.8);
}

.price-card__name{
  position:relative; font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-2); margin-bottom:1.3rem; max-width:70%;
}

.price-card__amount{ position:relative; margin-bottom:1.7rem }
.price-card__old{
  display:block; font-size:1rem; color:var(--tx-3);
  text-decoration:line-through; text-decoration-color:rgba(255,80,80,.6);
  margin-bottom:.15rem;
}
.price-card__now{
  display:flex; align-items:flex-start; gap:.12rem;
  font-family:var(--f-disp); font-weight:700; line-height:.92;
}
.price-card__now .cur{
  font-size:clamp(1.5rem,1rem + 1.6vw,2.3rem);
  color:var(--brand-2); margin-top:.35em;
}
.price-card__now .val{
  font-size:clamp(3.9rem, 2rem + 8vw, 6.6rem);
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 10px 34px rgba(107,163,242,.3));
}
.price-card__unit{
  display:block; margin-top:.5rem;
  font-size:.86rem; color:var(--tx-3); letter-spacing:.02em;
}

.split{
  position:relative; display:flex; align-items:center; gap:.9rem;
  padding:.95rem 1.15rem; margin-bottom:1.6rem;
  border:1px dashed rgba(107,163,242,.28); border-radius:var(--r);
  background:rgba(107,163,242,.045);
}
.split__part{ display:flex; flex-direction:column; flex:1 }
.split__part b{
  font-family:var(--f-disp); font-size:1.35rem; color:var(--brand-1); line-height:1.2;
}
.split__part span{ font-size:.76rem; color:var(--tx-3); letter-spacing:.03em }
.split__part:last-child{ text-align:right; align-items:flex-end }
.split__line{
  flex:0 0 auto; width:46px; height:20px; position:relative;
  display:grid; place-items:center;
}
.split__line span{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-3),transparent);
}
.split__line::after{
  content:'→'; position:relative;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--brand-2); font-size:.8rem; line-height:1;
  border:1px solid rgba(107,163,242,.4);
  background:rgba(20,17,12,.92);
}

.price-card__list{
  position:relative;
  display:grid; gap:.72rem; margin-bottom:1.9rem;
}
.price-card__list li{
  display:flex; align-items:flex-start; gap:.68rem;
  font-size:.925rem; color:var(--tx-2); line-height:1.5;
}
.price-card__list li::before{
  content:''; flex-shrink:0; width:18px; height:18px; margin-top:.16rem;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat,
    var(--brand-grad);
}

.price-card__foot{
  position:relative;
  display:flex; align-items:center; gap:.45rem; justify-content:center;
  margin-top:1rem; font-size:.78rem; color:var(--tx-3);
}
.price-card__foot svg{ color:var(--brand-3); flex-shrink:0 }

.price-side{ display:grid; gap:1rem; align-content:start }
.price-side__item{
  padding:1.35rem 1.5rem;
  border:1px solid var(--stroke); border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:border-color .4s, transform .4s var(--ease);
}
.price-side__item:hover{ border-color:rgba(107,163,242,.3); transform:translateX(4px) }
.price-side__item b{
  display:block; font-size:1rem; margin-bottom:.45rem;
  color:var(--brand-1); letter-spacing:-.01em;
}
.price-side__item p{ font-size:.885rem; color:var(--tx-2); line-height:1.62 }

/* ─── 14. TIMELINE ──────────────────────────────────────── */
.timeline{
  position:relative; display:grid; gap:0;
  max-width:860px; margin-inline:auto;
}
.timeline::before{
  content:''; position:absolute; left:23px; top:12px; bottom:34px;
  width:1px; background:linear-gradient(180deg,var(--brand-3),rgba(107,163,242,.12));
}
.tl{ position:relative; display:flex; gap:1.5rem; padding-bottom:2.5rem }
.tl:last-child{ padding-bottom:0 }

.tl__dot{
  position:relative; z-index:1; flex-shrink:0;
  width:47px; height:47px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(107,163,242,.35);
  background:linear-gradient(150deg,#141926,#090C14);
  box-shadow:0 0 0 6px var(--bg), 0 10px 24px -12px rgba(0,0,0,.9);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.tl__dot span{
  font-family:var(--f-disp); font-size:1.05rem; font-weight:600;
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tl:hover .tl__dot{
  transform:scale(1.09);
  box-shadow:0 0 0 6px var(--bg), 0 0 30px -4px var(--brand-glow);
}
.tl__dot--end{ background:var(--brand-grad); border-color:transparent }
.tl__dot--end span{ -webkit-text-fill-color:#06080F; background:none; color:#06080F }

.tl__body{ padding-top:.3rem }
.tl__time{
  display:inline-block; font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-3); margin-bottom:.4rem;
}
.tl__body h3{
  font-family:var(--f-disp); font-size:clamp(1.2rem,1rem + .7vw,1.55rem);
  font-weight:600; margin-bottom:.5rem; letter-spacing:-.015em;
}
.tl__body p{ color:var(--tx-2); font-size:.94rem; max-width:58ch }

/* ─── 15. SHOWCASE ──────────────────────────────────────── */
/* Four projects sit as a clean 2×2 — larger cards show real work better
   than four cramped ones, and there is no orphan on a second row. */
.showcase{
  display:grid; gap:clamp(1.1rem,2vw,1.8rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:640px){
  .showcase{ grid-template-columns:1fr }
}
.mock{ transition:transform .55s var(--ease) }
.mock:hover{ transform:translateY(-8px) }

.mock__frame{
  border:1px solid var(--stroke-2); border-radius:var(--r-lg);
  overflow:hidden; background:#0E1220;
  box-shadow:0 30px 70px -34px rgba(0,0,0,1);
  transition:border-color .5s, box-shadow .5s;
}
.mock:hover .mock__frame{
  border-color:rgba(107,163,242,.4);
  box-shadow:0 40px 80px -34px rgba(0,0,0,1), 0 0 44px -22px var(--brand-glow);
}
.mock__bar{
  display:flex; align-items:center; gap:5px;
  padding:.6rem .85rem; background:rgba(255,255,255,.045);
  border-bottom:1px solid var(--stroke);
}
.mock__bar i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18) }
.mock__url{
  margin-left:.6rem; font-size:.66rem; letter-spacing:.04em;
  color:var(--tx-3); padding:.14rem .6rem; border-radius:99px;
  background:rgba(255,255,255,.05);
}

.mock__screen{
  position:relative; aspect-ratio:4/3.1; padding:.85rem;
  display:flex; flex-direction:column; gap:.7rem;
  overflow:hidden;
}
.mock__screen--food { background:radial-gradient(110% 80% at 15% 0%, #2A1810 0%, #0E1220 62%) }
.mock__screen--fit  { background:radial-gradient(110% 80% at 85% 0%, #101E2A 0%, #0E1220 62%) }
.mock__screen--build{ background:radial-gradient(110% 80% at 50% 0%, #1C1A24 0%, #0E1220 62%) }

.mk-nav{ display:flex; align-items:center; gap:.5rem }
.mk-logo{ width:26px; height:7px; border-radius:3px; background:var(--brand-grad); opacity:.9 }
.mk-links{ display:flex; gap:5px; margin-left:auto }
.mk-links i{ width:14px; height:4px; border-radius:2px; background:rgba(255,255,255,.2) }
.mk-btn{ width:24px; height:9px; border-radius:99px; background:rgba(107,163,242,.65) }

.mk-hero{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:.4rem .2rem }
.mk-hero.center{ align-items:center; text-align:center }
.mk-h1{ width:78%; height:11px; border-radius:4px; background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.4)) }
.mk-h1.sm{ width:52%; height:11px; background:linear-gradient(90deg,var(--brand-2),rgba(107,163,242,.35)) }
.mk-p{ width:66%; height:5px; border-radius:3px; background:rgba(255,255,255,.18); margin-top:3px }
.mk-p.sh{ width:44% }
.mk-cta{ width:64px; height:15px; border-radius:99px; background:var(--brand-grad); margin-top:7px }
.mk-ctas{ display:flex; gap:6px; margin-top:7px }
.mk-ctas i{ width:52px; height:14px; border-radius:99px; background:var(--brand-grad) }
.mk-ctas i:last-child{ background:rgba(255,255,255,.14) }

.mk-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.mk-cards i{ height:34px; border-radius:7px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07) }
.mk-cards i:nth-child(2){ background:rgba(107,163,242,.14) }

.mk-split{ flex:1; display:grid; grid-template-columns:1.1fr .9fr; gap:.6rem; align-items:center }
.mk-col{ display:flex; flex-direction:column; gap:5px }
.mk-col .mk-h1{ width:92% } .mk-col .mk-h1.sm{ width:62% }
.mk-col .mk-p{ width:86% } .mk-col .mk-p.sh{ width:58% }
.mk-visual{
  height:100%; min-height:70px; border-radius:9px;
  background:linear-gradient(150deg,rgba(107,163,242,.32),rgba(66,78,114,.22));
  border:1px solid rgba(255,255,255,.09);
}
.mk-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px }
.mk-strip i{ height:16px; border-radius:5px; background:rgba(255,255,255,.07) }

.mk-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px }
.mk-tiles i{ height:26px; border-radius:6px; background:rgba(255,255,255,.07) }
.mk-tiles i:nth-child(odd){ background:rgba(107,163,242,.12) }

.mock figcaption{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.9rem .25rem 0;
}
.mock figcaption b{ font-size:.94rem; font-weight:700 }
.mock figcaption span{ font-size:.79rem; color:var(--tx-3) }

/* ─── 15b. REAL PROJECT CARDS ───────────────────────────── */
.proj{ display:block; transition:transform .55s var(--ease) }
.proj:hover{ transform:translateY(-8px) }

.proj__frame{
  border:1px solid var(--stroke-2); border-radius:var(--r-lg);
  overflow:hidden; background:#0E1220;
  box-shadow:var(--el-mid);
  transition:border-color .5s, box-shadow .5s;
}
.proj:hover .proj__frame{
  border-color:rgba(107,163,242,.42);
  box-shadow:var(--el-mid), 0 0 46px -22px var(--brand-glow);
}

/* The project's own palette — a brand swatch, never a fake screenshot */
.proj__canvas{
  position:relative; aspect-ratio:4/2.7;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1rem; text-align:center; overflow:hidden;
}
.proj__canvas::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 120%, rgba(255,255,255,.09), transparent 60%);
  pointer-events:none;
}
.proj__mark{
  position:relative; z-index:1;
  font-family:var(--f-disp); font-size:clamp(1.2rem,1rem + 1.1vw,1.7rem);
  font-weight:600; letter-spacing:.02em; line-height:1.1;
}
.proj__kind{
  position:relative; z-index:1;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:.72; max-width:24ch; line-height:1.4;
}

.proj__canvas--lily{
  background:linear-gradient(158deg,#151009 0%,#06080F 62%);
  color:#E8CB84;
}
.proj__canvas--lily .proj__mark{
  background:linear-gradient(120deg,#F6E4B4,#C9A227);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.proj__canvas--cheese{
  background:linear-gradient(158deg,#16261A 0%,#0B1410 64%);
  color:#B7D69A;
}
.proj__canvas--cheese .proj__mark{ color:#DCEBCB }
.proj__canvas--beko{
  background:linear-gradient(158deg,#171325 0%,#0B0B12 64%);
  color:#B4A9FF;
}
.proj__canvas--beko .proj__mark{
  background:linear-gradient(120deg,#EDEAFF,#7C6BFF);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.proj__canvas--dev{
  background:linear-gradient(158deg,#0C1420 0%,#070910 64%);
  color:#8FB6DE;
}
.proj__canvas--dev .proj__mark{ color:#DCE9F6; font-family:var(--f-body); font-weight:700; letter-spacing:.1em }
.proj__canvas--splus{
  background:linear-gradient(158deg,#101A22 0%,#080D11 64%);
  color:#8FC9DE;
}

.proj figcaption{
  display:flex; flex-direction:column; gap:.22rem;
  padding:.95rem .25rem 0;
}
.proj figcaption b{ font-size:.96rem; font-weight:700; letter-spacing:-.012em }
.proj figcaption span{ font-size:.8rem; color:var(--tx-3); line-height:1.5 }
.proj__go{
  margin-top:.3rem; font-style:normal;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color:var(--brand-2); opacity:.75;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.proj:hover .proj__go{ opacity:1; transform:translateX(3px) }

.showcase__note{
  margin-top:2rem; font-size:.8rem; color:var(--tx-3);
  text-align:center; max-width:66ch; margin-inline:auto;
}

/* ─── 16. WHY ───────────────────────────────────────────── */
.why{
  display:grid; gap:clamp(1.8rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.why__lead{ margin:1.2rem 0 1.9rem; color:var(--tx-2); max-width:52ch }
.why__list{ display:grid; gap:.85rem }
.why__list li{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.15rem 1.3rem;
  border:1px solid var(--stroke); border-radius:var(--r);
  background:rgba(255,255,255,.022);
  transition:border-color .4s, background .4s, transform .45s var(--ease);
}
.why__list li:hover{
  border-color:rgba(107,163,242,.3);
  background:rgba(107,163,242,.05);
  transform:translateX(5px);
}
.why__ico{
  flex-shrink:0; width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(107,163,242,.1); color:var(--brand-2);
  border:1px solid rgba(107,163,242,.18);
}
.why__ico svg{ width:18px; height:18px }
.why__list b{ display:block; font-size:.98rem; margin-bottom:.25rem }
.why__list p{ font-size:.87rem; color:var(--tx-2); line-height:1.6 }

/* ─── 17. FAQ ───────────────────────────────────────────── */
.faq{ display:grid; gap:.7rem }
.faq__item{
  border:1px solid var(--stroke); border-radius:var(--r);
  background:rgba(255,255,255,.022);
  overflow:hidden;
  transition:border-color .4s, background .4s;
}
.faq__item.is-open{
  border-color:rgba(107,163,242,.32);
  background:rgba(107,163,242,.04);
}
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  width:100%; text-align:left; padding:1.15rem 1.35rem;
  font-size:1rem; font-weight:600; line-height:1.45;
  color:var(--tx-1); transition:color .3s;
}
.faq__q:hover{ color:var(--brand-1) }
.faq__icon{
  position:relative; flex-shrink:0; width:22px; height:22px;
  border-radius:50%; border:1px solid var(--stroke-2);
  transition:all .4s var(--ease);
}
.faq__icon::before,.faq__icon::after{
  content:''; position:absolute; left:50%; top:50%;
  background:var(--brand-2); border-radius:2px;
  transform:translate(-50%,-50%); transition:all .4s var(--ease);
}
.faq__icon::before{ width:9px; height:1.5px }
.faq__icon::after { width:1.5px; height:9px }
.faq__item.is-open .faq__icon{
  border-color:var(--brand-3); background:rgba(107,163,242,.14);
  transform:rotate(180deg);
}
.faq__item.is-open .faq__icon::after{ height:0 }

.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.faq__item.is-open .faq__a{ grid-template-rows:1fr }
.faq__a > p{
  overflow:hidden;
  padding-inline:1.35rem;
  color:var(--tx-2); font-size:.925rem; line-height:1.72;
  max-width:70ch;
}
.faq__item.is-open .faq__a > p{ padding-bottom:1.3rem }

/* ─── 18. CTA / FORM ────────────────────────────────────── */
.section--cta{ padding-bottom:clamp(4rem,7vw,6.5rem) }

.cta-box{
  position:relative; overflow:hidden;
  display:grid; gap:clamp(1.8rem,3.6vw,3.4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  padding:clamp(1.7rem,4vw,3.4rem);
  border:1px solid rgba(107,163,242,.22); border-radius:var(--r-xl);
  background:
    linear-gradient(160deg, rgba(107,163,242,.085) 0%, rgba(255,255,255,.02) 45%, rgba(66,78,114,.05) 100%);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 50px 110px -55px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.08);
}
.cta-box__glow{
  position:absolute; inset:-40% -10% auto; height:70%;
  background:radial-gradient(ellipse at 30% 50%, var(--brand-glow), transparent 60%);
  filter:blur(60px); opacity:.35; pointer-events:none;
  animation:glowPulse 8s var(--ease-soft) infinite alternate;
}
.cta-box__left{ position:relative }
.cta-box__sub{ margin-top:1.1rem; color:var(--tx-2); max-width:46ch }
.cta-box__points{ display:grid; gap:.6rem; margin-top:1.6rem }
.cta-box__points li{
  display:flex; align-items:center; gap:.6rem;
  font-size:.9rem; color:var(--tx-2);
}
.cta-box__points li::before{
  content:''; flex-shrink:0; width:17px; height:17px; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat,
    var(--brand-grad);
}

.socials{ display:flex; gap:.55rem; margin-top:2rem }
.social{
  width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center;
  border:1px solid var(--stroke-2); background:var(--surface);
  color:var(--tx-2);
  transition:all .4s var(--ease);
}
.social:hover{
  color:#06080F; background:var(--brand-grad);
  border-color:transparent; transform:translateY(-4px);
  box-shadow:0 12px 28px -10px var(--brand-glow);
}

/* Form */
.form{
  position:relative;
  display:grid; gap:.95rem; align-content:start;
  padding:clamp(1.3rem,2.4vw,1.9rem);
  border:1px solid var(--stroke); border-radius:var(--r-lg);
  background:rgba(10,10,14,.5);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.field{ display:grid; gap:.4rem }
.field label{
  font-size:.78rem; font-weight:600; letter-spacing:.045em;
  text-transform:uppercase; color:var(--tx-3);
}
.field label .opt{ text-transform:none; letter-spacing:0; opacity:.7; font-weight:400 }
.field input,.field textarea{
  width:100%; padding:.82rem 1rem;
  border:1px solid var(--stroke-2); border-radius:12px;
  background:rgba(255,255,255,.032);
  font-size:.94rem; color:var(--tx-1);
  transition:border-color .3s, background .3s, box-shadow .3s;
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(242,245,250,.28) }
.field input:focus,.field textarea:focus{
  outline:none; border-color:rgba(107,163,242,.55);
  background:rgba(107,163,242,.05);
  box-shadow:0 0 0 3px rgba(107,163,242,.1);
}
.field__err{
  display:none; font-size:.76rem; color:#FF8A8A; letter-spacing:.01em;
}
.field.is-invalid input,.field.is-invalid textarea{ border-color:rgba(255,110,110,.6) }
.field.is-invalid .field__err{ display:block }

/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are display:none. Never focusable, never announced. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form__note{ font-size:.76rem; color:var(--tx-3); text-align:center; line-height:1.55 }
/* Sending: dim the fields so it is obvious the form is busy. */
.form.is-sending .field{ opacity:.55; pointer-events:none; transition:opacity .2s var(--ease) }

/* ─── 18b. SUBMIT RESULT MODAL ──────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:1200;
  display:grid; place-items:center;
  padding:var(--pad);
}
.modal[hidden]{ display:none }

.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(4,6,12,.72);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}

.modal__panel{
  position:relative;
  width:min(94vw, 460px);
  padding:clamp(1.9rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.4rem) clamp(1.5rem, 3vw, 2rem);
  text-align:center;
  border:1px solid rgba(107,163,242,.26);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(107,163,242,.16), transparent 62%),
    linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  box-shadow:var(--el-high);
}

.modal__icon{
  width:clamp(66px, 14vw, 84px); aspect-ratio:1;
  margin:0 auto clamp(1rem, 2.4vw, 1.4rem);
  color:var(--brand-2);
}
.modal__icon svg{ width:100%; height:100%; display:none }
.modal--ok    .modal__tick{ display:block }
.modal--error .modal__bang{ display:block }
.modal--error .modal__icon{ color:#FF8A8A }

/* Ring sweeps in, then the mark draws. Pure CSS so it still plays if
   GSAP never loaded. */
.modal__ring { stroke-dasharray:145; stroke-dashoffset:145 }
.modal__check{ stroke-dasharray:48;  stroke-dashoffset:48  }
.modal.is-open .modal__ring {
  animation:drawRing .55s var(--ease) .05s forwards;
}
.modal.is-open .modal__check{
  animation:drawCheck .4s var(--ease) .38s forwards;
}
@keyframes drawRing { to{ stroke-dashoffset:0 } }
@keyframes drawCheck{ to{ stroke-dashoffset:0 } }

.modal__title{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.45rem, 1.1rem + 1.4vw, 1.95rem);
  line-height:1.2; letter-spacing:-.02em;
  margin-bottom:.6rem;
}
.modal--error .modal__title{ color:#FFD5D5 }

.modal__text{
  color:var(--tx-2);
  font-size:clamp(.92rem, .88rem + .2vw, 1.02rem);
  line-height:1.62;
  max-width:34ch; margin:0 auto;
}
.modal__btn{ margin-top:clamp(1.3rem, 3vw, 1.8rem); min-width:170px }
.modal--error .modal__btn{
  background:rgba(255,255,255,.06); color:var(--tx-1);
  border:1px solid var(--stroke-2); box-shadow:none;
}
.modal--error .modal__btn::before{ display:none }

/* No-GSAP entrance (and the reduced-motion resting state) */
.modal__panel{ opacity:0; transform:translateY(14px) scale(.97) }
.modal.is-open .modal__panel{
  opacity:1; transform:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.modal__backdrop{ opacity:0; transition:opacity .35s var(--ease) }
.modal.is-open .modal__backdrop{ opacity:1 }

@media (prefers-reduced-motion:reduce){
  .modal__panel{ opacity:1 !important; transform:none !important }
  .modal__backdrop{ opacity:1 !important }
  .modal__ring, .modal__check{ stroke-dashoffset:0 !important; animation:none !important }
}

/* ─── 19. FOOTER ────────────────────────────────────────── */
.footer{
  position:relative; padding-top:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--stroke);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.018));
}
.footer__inner{
  display:grid; gap:2rem;
  grid-template-columns:1.4fr 1fr 1fr;
  padding-bottom:2.5rem;
}
.footer__brand p{
  margin-top:.9rem; font-size:.87rem; color:var(--tx-3); max-width:34ch;
}
.footer__nav,.footer__contact{ display:grid; gap:.6rem; align-content:start }
.footer__nav a,.footer__contact a{
  font-size:.885rem; color:var(--tx-2); width:fit-content;
  transition:color .3s, transform .3s var(--ease);
}
.footer__nav a:hover,.footer__contact a:hover{ color:var(--brand-2); transform:translateX(3px) }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  justify-content:space-between; align-items:center;
  padding-block:1.4rem; border-top:1px solid var(--stroke);
  font-size:.78rem; color:var(--tx-3);
}

/* ─── 20. FAB ───────────────────────────────────────────── */
.fab{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:850;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.25rem; border-radius:var(--r-pill);
  background:var(--brand-grad); color:#06080F;
  font-size:.86rem; font-weight:700;
  box-shadow:0 14px 34px -12px rgba(107,163,242,.6);
  opacity:0; visibility:hidden; transform:translateY(22px) scale(.94);
  transition:all .45s var(--ease);
}
.fab.is-visible{ opacity:1; visibility:visible; transform:none }
.fab:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -12px rgba(107,163,242,.7) }

/* ─── 21. REVEAL ANIMATIONS ─────────────────────────────── */
/* GSAP owns the reveal. Elements are hidden ONLY while <html> carries
   .anim-pending, which an inline head script adds and main.js removes —
   including when GSAP fails to load. No JS ⇒ nothing is ever hidden.
   This page is a lead magnet; motion must never gate the content. */
.anim-pending .reveal,
.anim-pending .hero__title .line,
.anim-pending .section__title{ opacity:0 }

.reveal{ will-change:opacity, transform }

/* SplitText line masking */
.split-line{ overflow:hidden; padding-bottom:.06em }

/* Process rule: GSAP draws it downward on scroll */
.timeline::before{ transform:scaleY(var(--draw,1)); transform-origin:top }

.tl__dot{ will-change:transform, box-shadow }
.tl.is-lit .tl__dot{
  border-color:rgba(107,163,242,.75);
  box-shadow:0 0 0 6px var(--bg), 0 0 34px -6px var(--brand-glow);
}

/* ─── 22. RESPONSIVE ────────────────────────────────────── */
@media (max-width:1080px){
  .nav{ display:none }
  .burger{ display:block }
  .pricing{ grid-template-columns:1fr }
  .price-side{ grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)) }
  .why{ grid-template-columns:1fr }
  .cta-box{ grid-template-columns:1fr }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:2.2rem }
  .footer__brand{ grid-column:1/-1 }
}

@media (max-width:720px){
  html{ scroll-padding-top:calc(var(--header-h, 64px) + 14px) }
  .hero__stats{ grid-template-columns:repeat(2,1fr); row-gap:1.6rem }
  .hero__stats li:nth-child(3)::before{ display:none }
  .countdown{ width:100%; padding:1.1rem }
  .countdown__grid{ justify-content:space-between }
  .cd-cell{ min-width:auto; flex:1 }
  .cd-sep{ display:none }
  .hero__cta{ width:100%; flex-direction:column }
  .hero__cta .btn{ width:100% }
  .price-card__ribbon{ font-size:.62rem; padding:.38rem 3.2rem; right:-3.4rem }
  .price-card__name{ max-width:60% }
  .split{ flex-direction:column; align-items:stretch; gap:.7rem; text-align:center }
  .split__part:last-child{ text-align:center; align-items:center }
  .split__line{ width:100%; height:20px }
  .split__line::after{ content:'↓' }
  .timeline::before{ left:18px }
  .tl{ gap:1.1rem }
  .tl__dot{ width:37px; height:37px }
  .tl__dot span{ font-size:.9rem }
  .footer__inner{ grid-template-columns:1fr }
  .footer__bottom{ flex-direction:column; align-items:flex-start; text-align:left }
  .fab span{ display:none }
  .fab{ padding:.95rem; border-radius:50% }
  .section__head{ margin-bottom:2.2rem }
}

/* Narrow phones: the header CTA would push the burger off-screen.
   The burger menu and the floating button both carry the same CTA. */
@media (max-width:560px){
  .header__actions .btn--primary{ display:none }
  .header__inner{ gap:.6rem }
}

@media (max-width:420px){
  .hero__badge{ font-size:.7rem; padding:.45rem .85rem; letter-spacing:0 }
  .price-card__now .val{ font-size:3.6rem }
  .logo__text{ font-size:1.05rem; letter-spacing:.12em }
}

/* Touch: disable hover-lift jitter */
@media (hover:none){
  .card:hover,.mock:hover,.price-side__item:hover,.why__list li:hover{ transform:none }
  .cursor,.cursor-ring{ display:none }
}

/* ─── 23. REDUCED MOTION ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Belt-and-braces: nothing may be hidden for motion reasons, whatever
     JS does or doesn't run. Covers the .anim-pending pre-hide too. */
  .reveal, .section__title, .hero__title .line, .split-line > *,
  .anim-pending .reveal,
  .anim-pending .section__title,
  .anim-pending .hero__title .line{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  .timeline::before{ transform:none !important }
  .bg__orb{ animation:none }
  .marquee__track{ animation:none }
}

/* ─── 24. PRINT ─────────────────────────────────────────── */
@media print{
  .header,.mobile-menu,.fab,.preloader,.cursor,.cursor-ring,
  .scroll-progress,.bg,.marquee,.scroll-hint{ display:none !important }
  body{ background:#fff; color:#000 }
  .reveal{ opacity:1 !important; transform:none !important }
}