/* ============================================================
   Leroy Merlin × RaccoonGang — proposal landing
   Design language: warm "workshop paper" + deep green-ink darks,
   single Leroy Merlin green accent. Unbounded display / Manrope /
   JetBrains Mono. Anti-generic, brand-faithful, WCAG-minded.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:#F4F3EE;          /* warm off-white base */
  --paper-2:#EDEBE3;        /* tinted alt panel */
  --surface:#FFFFFF;
  --surface-soft:#FBFAF6;

  --ink:#181B1A;            /* near-black, faint green undertone (never #000) */
  --ink-2:#3B423E;
  --muted:#6B716C;
  --muted-2:#8C918B;
  --line:rgba(24,27,26,.12);
  --line-2:rgba(24,27,26,.07);

  --green:#78BE20;          /* Leroy Merlin brand green */
  --green-cta:#3C7A14;      /* deep green — white text passes AA */
  --green-cta-h:#33680F;
  --green-ink:#2C5310;      /* green for text on light (AA) */
  --green-100:#EAF4DC;
  --green-50:#F1F7E8;

  --navy:#0A3055;           /* LM secondary deep */
  --magenta:#9D0054;

  /* dark sections */
  --dark:#121A12;           /* deep green-ink */
  --dark-2:#0D140D;         /* darker (footer) */
  --dark-panel:#1B271A;     /* raised panel on dark */
  --dark-line:rgba(233,234,221,.13);
  --on-dark:#E9EBDD;        /* warm off-white on dark */
  --on-dark-mut:#9BA396;
  --green-lift:#9BD24E;     /* accent lifted for contrast on dark */

  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-disp:"Unbounded",var(--font);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1200px;
  --r:18px; --r-lg:26px; --r-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-card:0 1px 2px rgba(24,27,26,.04), 0 18px 40px -22px rgba(24,27,26,.22);
  --shadow-phone:0 2px 8px rgba(24,27,26,.10), 0 50px 90px -40px rgba(24,40,18,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.6;
  font-weight:400; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img,svg,iframe{display:block; max-width:100%}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-0.03em; line-height:1.04; color:var(--ink)}
p{margin:0}
::selection{background:var(--green); color:#0E1A05}

/* grain */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(18px,4vw,40px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font); font-weight:700; font-size:.98rem; letter-spacing:-0.01em;
  padding:.92em 1.5em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease), background .2s, border-color .2s, color .2s;
  will-change:transform;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--primary{background:var(--green-cta); color:#fff; box-shadow:0 10px 24px -12px rgba(60,122,20,.7)}
.btn--primary:hover{background:var(--green-cta-h)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink); background:rgba(24,27,26,.03)}
.btn--sm{padding:.62em 1.1em; font-size:.9rem}
.btn--lg{padding:1.05em 1.9em; font-size:1.06rem}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 1.1rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green-ink);
}
.eyebrow--light{color:var(--green-lift)}
.eyebrow__dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(120,190,32,.18)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:100; transition:background .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(244,243,238,.82); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border-color:var(--line-2)}
.nav__in{max-width:1320px; margin:0 auto; padding:14px clamp(18px,4vw,40px); display:flex; align-items:center; gap:22px}
.brand{display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-disp); font-weight:700; font-size:1.06rem; letter-spacing:-0.02em}
.brand__mark{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--ink)}
.brand__txt{color:var(--ink)}
.nav__links{display:flex; gap:26px; margin-left:14px}
.nav__links a{font-size:.95rem; font-weight:600; color:var(--ink-2); transition:color .2s; position:relative}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--green); transition:right .25s var(--ease)}
.nav__links a:hover::after{right:0}
.nav__act{margin-left:auto; display:flex; align-items:center; gap:14px}
.langtog{display:inline-flex; background:rgba(24,27,26,.05); border:1px solid var(--line-2); border-radius:999px; padding:3px}
.langtog button{font-family:var(--font-mono); font-size:.76rem; font-weight:500; letter-spacing:.04em; padding:.32em .7em; border:0; background:transparent; color:var(--muted); border-radius:999px; cursor:pointer; transition:.2s}
.langtog button.is-on{background:var(--ink); color:#fff}

/* ============================================================
   STAGE — hero + scroll-driven walkthrough
   ============================================================ */
.stage{
  max-width:1500px; margin:0 auto; padding:0 clamp(18px,4vw,40px);
  display:grid; grid-template-columns:minmax(0,700px) auto;
  column-gap:clamp(24px,3.5vw,64px); align-items:start;
}
.stage__rail{min-width:0}
.step{min-height:82vh; display:flex; flex-direction:column; justify-content:center; padding:7vh 0}
.step--hero{min-height:100vh; justify-content:center; padding-top:10vh}

.hero__h1{font-family:var(--font-disp); font-weight:700; font-size:clamp(2.3rem,4.6vw,4rem); line-height:1.02; letter-spacing:-0.035em; margin:.2em 0 .55em}
.hero__h1 em{font-style:normal; color:var(--green-ink); position:relative; white-space:nowrap}
.hero__h1 em::after{content:""; position:absolute; left:-.05em; right:-.05em; bottom:.06em; height:.16em; background:var(--green); opacity:.32; border-radius:2px; z-index:-1}
.hero__sub{font-size:1.16rem; color:var(--ink-2); max-width:36ch; line-height:1.55; margin-bottom:2rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:2.4rem}
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0 0 2.6rem}
.chips li{font-family:var(--font-mono); font-size:.78rem; font-weight:500; letter-spacing:.01em; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.5em 1em}
.hero__hint{font-family:var(--font-mono); font-size:.8rem; color:var(--muted); letter-spacing:.02em; animation:floaty 2.6s var(--ease) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.hero__hint{animation:none}}

.step__no{display:flex; align-items:center; gap:.8em; margin:0 0 1rem; font-family:var(--font-mono); font-size:.8rem; font-weight:500; letter-spacing:.04em; color:var(--muted)}
.step__no span:first-child{color:var(--green-ink); font-weight:700}
.step__no span:last-child{text-transform:uppercase; letter-spacing:.12em; font-size:.72rem}
.step__h{font-size:clamp(1.6rem,2.8vw,2.45rem); letter-spacing:-0.03em; margin-bottom:.7rem; max-width:18ch}
.step__p{font-size:1.1rem; color:var(--ink-2); max-width:42ch; line-height:1.58; margin-bottom:1.5rem}
.ticks{list-style:none; padding:0; margin:0 0 1.4rem; display:flex; flex-direction:column; gap:.7rem}
.ticks li{position:relative; padding-left:1.9em; font-size:1rem; color:var(--ink); line-height:1.45}
.ticks li::before{content:""; position:absolute; left:0; top:.16em; width:1.25em; height:1.25em; border-radius:50%; background:var(--green-50);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5310' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size:.78em; background-repeat:no-repeat; background-position:center}
.step__src{font-family:var(--font-mono); font-size:.74rem; color:var(--muted-2); letter-spacing:.01em; padding-top:.4rem; border-top:1px dashed var(--line); display:inline-block}

/* sticky phone */
.stage__phone{position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center}
.phone-wrap{position:relative; --ps:.72; width:calc(402px * var(--ps)); height:calc(874px * var(--ps))}
.phone-glow{position:absolute; inset:-14% -22%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%, rgba(120,190,32,.30), rgba(120,190,32,0) 70%);
  filter:blur(8px)}
.phone-shell{position:absolute; top:0; left:0; width:402px; height:874px; transform:scale(var(--ps)); transform-origin:top left;
  border-radius:48px; overflow:hidden; box-shadow:var(--shadow-phone); background:#F2F2F7; z-index:1}
.phone-shell iframe{width:402px; height:874px; border:0; background:transparent}
#phone-stage{pointer-events:none}
.phone-cap{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(-44px); display:flex; align-items:center; gap:12px; white-space:nowrap}
.phone-cap__live{display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--green-ink)}
.phone-cap__live i{width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(120,190,32,.5)}70%{box-shadow:0 0 0 7px rgba(120,190,32,0)}}
.phone-cap__label{font-family:var(--font-mono); font-size:.8rem; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.34em .9em; transition:opacity .25s}

/* ============================================================
   SECTIONS — generic
   ============================================================ */
.sec{padding:clamp(72px,10vw,140px) 0; position:relative}
.sec--paper{background:var(--paper-2)}
.sec--dark,.sec--play{background:var(--dark); color:var(--on-dark)}
.sec--dark h2,.sec--dark h3,.sec--play h2,.sec--play h3{color:#fff}
.sec__head{max-width:42rem; margin-bottom:clamp(36px,5vw,64px)}
.sec__head--center{margin-left:auto; margin-right:auto; text-align:center}
.sec__head--center .eyebrow{justify-content:center}
.sec__h{font-size:clamp(1.7rem,3.4vw,2.7rem); letter-spacing:-0.032em; line-height:1.08}
.sec__lead{margin-top:1rem; font-size:1.12rem; line-height:1.55; color:var(--ink-2)}
.sec--dark .sec__lead,.sec--play .sec__lead{color:var(--on-dark-mut)}

/* ---------- architecture ---------- */
.arch{display:flex; flex-direction:column; align-items:stretch; gap:0; max-width:760px; margin:0 auto}
.arch__layer{border-radius:var(--r-lg); padding:22px 26px; display:flex; flex-direction:column; gap:14px; position:relative}
.arch__layer--app{background:var(--dark-panel); border:1px solid var(--dark-line); align-items:center; text-align:center}
.arch__layer--mw{background:linear-gradient(180deg, rgba(120,190,32,.16), rgba(120,190,32,.06)); border:1px solid rgba(120,190,32,.4)}
.arch__layer--core{background:var(--dark-panel); border:1px solid var(--dark-line)}
.arch__tag{font-family:var(--font-mono); font-size:.78rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--green-lift)}
.arch__layer--app .arch__tag{font-size:1.05rem; font-weight:700; text-transform:none; font-family:var(--font-disp); color:#fff; letter-spacing:-0.01em}
.arch__meta{font-family:var(--font-mono); font-size:.82rem; color:var(--on-dark-mut)}
.arch__mods{display:flex; flex-direction:column; gap:8px}
.arch__mods span{font-size:.96rem; color:var(--on-dark); padding:9px 14px; background:rgba(0,0,0,.18); border-radius:10px; border:1px solid var(--dark-line)}
.arch__mods--core{flex-direction:row; flex-wrap:wrap; gap:8px}
.arch__mods--core span{font-family:var(--font-mono); font-size:.82rem; letter-spacing:.03em; color:var(--on-dark-mut)}
.arch__pipe{align-self:center; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--on-dark-mut); padding:14px 0; position:relative}
.arch__pipe::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:repeating-linear-gradient(180deg, var(--green-lift) 0 5px, transparent 5px 11px); opacity:.5; transform:translateX(-50%); z-index:-1}
.arch__pipe span{background:var(--dark); padding:3px 12px}
.arch__pipe--down{padding:18px 0}
.techgrid{list-style:none; padding:0; margin:clamp(40px,5vw,64px) 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--dark-line); border:1px solid var(--dark-line); border-radius:var(--r-lg); overflow:hidden}
.techgrid li{background:var(--dark); padding:24px 24px; display:flex; flex-direction:column; gap:6px}
.techgrid b{font-size:1.04rem; font-weight:700; color:#fff; letter-spacing:-0.01em}
.techgrid span{font-size:.92rem; color:var(--on-dark-mut); line-height:1.4}

/* ---------- bento (why us) ---------- */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,2.6vw,34px); position:relative; box-shadow:var(--shadow-card); transition:transform .3s var(--ease), box-shadow .3s}
.card:hover{transform:translateY(-4px); box-shadow:0 2px 4px rgba(24,27,26,.05), 0 30px 60px -28px rgba(24,40,18,.30)}
.card--wide{grid-column:span 2}
.card--accent{background:linear-gradient(160deg, var(--green-50), var(--surface)); border-color:rgba(120,190,32,.34)}
.card__ix{font-family:var(--font-mono); font-size:.78rem; font-weight:700; color:var(--green-ink); letter-spacing:.06em}
.card h3{font-size:1.3rem; letter-spacing:-0.02em; margin:.7rem 0 .6rem}
.card p{font-size:1rem; color:var(--ink-2); line-height:1.55}
.card__note{margin-top:.9rem; font-family:var(--font-mono); font-size:.78rem; color:var(--muted); line-height:1.45; padding-top:.8rem; border-top:1px solid var(--line-2)}
.card__link{display:inline-block; margin-top:1rem; font-weight:700; font-size:.96rem; color:var(--green-ink); transition:gap .2s}
.card__link:hover{text-decoration:underline}

/* ---------- timeline ---------- */
.timeline{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); counter-reset:tl}
.tl{position:relative; padding:26px 22px 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card)}
.tl::before{content:""; display:block; width:13px; height:13px; border-radius:50%; background:var(--green); margin-bottom:18px; box-shadow:0 0 0 5px var(--green-100)}
.tl__date{font-family:var(--font-mono); font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--green-ink)}
.tl h3{font-size:1.12rem; letter-spacing:-0.02em; margin:.5rem 0 .45rem}
.tl p{font-size:.95rem; color:var(--ink-2); line-height:1.5}

/* ---------- investment tiers ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); margin-bottom:clamp(32px,4vw,48px)}
.tier{background:var(--dark-panel); border:1px solid var(--dark-line); border-radius:var(--r-lg); padding:clamp(26px,2.6vw,34px); display:flex; flex-direction:column}
.tier--lead{background:linear-gradient(165deg, rgba(120,190,32,.2), rgba(120,190,32,.05)); border-color:rgba(120,190,32,.5); box-shadow:0 30px 70px -36px rgba(120,190,32,.5)}
.tier--soft{background:rgba(255,255,255,.03)}
.tier__badge{font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--green-lift)}
.tier h3{font-size:1.3rem; letter-spacing:-0.02em; margin:.5rem 0 .6rem; color:#fff}
.tier__price{font-family:var(--font-disp); font-weight:700; font-size:3.3rem; line-height:1; color:#fff; letter-spacing:-0.04em; margin:.2rem 0 .1rem; display:flex; align-items:flex-start; gap:.04em}
.tier__cur{font-size:1.5rem; margin-top:.45rem; color:var(--green-lift)}
.tier__plus{font-size:1.7rem; margin-top:.35rem; color:var(--green-lift)}
.tier__k{font-size:1.7rem; align-self:flex-end; margin-bottom:.35rem; color:var(--on-dark-mut)}
.tier__sub{font-family:var(--font-mono); font-size:.8rem; color:var(--on-dark-mut); margin-bottom:1.3rem}
.tier__list{list-style:none; padding:0; margin:0 0 1.3rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.tier__list li{position:relative; padding-left:1.6em; font-size:.96rem; color:var(--on-dark); line-height:1.4}
.tier__list li::before{content:""; position:absolute; left:0; top:.5em; width:.7em; height:.7em; border-radius:3px; background:var(--green-lift); opacity:.85}
.tier__foot{font-family:var(--font-mono); font-size:.74rem; color:var(--on-dark-mut); line-height:1.4; padding-top:.9rem; border-top:1px solid var(--dark-line)}

/* breakdown table */
.breakdown{background:rgba(255,255,255,.03); border:1px solid var(--dark-line); border-radius:var(--r-lg); overflow:hidden}
.breakdown summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px clamp(20px,2.5vw,30px); font-family:var(--font-mono); font-size:.86rem; font-weight:500; letter-spacing:.02em; color:var(--on-dark)}
.breakdown summary::-webkit-details-marker{display:none}
.breakdown__chev{transition:transform .25s; color:var(--green-lift)}
.breakdown[open] .breakdown__chev{transform:rotate(180deg)}
.bd{padding:0 clamp(20px,2.5vw,30px) 26px}
.bd__t{width:100%; border-collapse:collapse; font-size:.92rem}
.bd__t th{text-align:left; font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-mut); padding:10px 8px; border-bottom:1px solid var(--dark-line)}
.bd__t th:nth-child(2),.bd__t th:nth-child(3),.bd__t td:nth-child(2),.bd__t td:nth-child(3){text-align:right; font-family:var(--font-mono); white-space:nowrap}
.bd__t td{padding:9px 8px; border-bottom:1px solid rgba(233,234,221,.06); color:var(--on-dark)}
.bd__t td:first-child{color:var(--on-dark-mut)}
.bd__sub td{font-weight:700; color:#fff !important; border-top:1px solid var(--dark-line); padding-top:13px}
.bd__sub td:first-child{color:#fff !important}
.bd__total td{font-family:var(--font-disp); font-weight:700; font-size:1.05rem; color:var(--green-lift) !important; border-top:2px solid var(--green-lift); border-bottom:none; padding-top:14px}
.bd__total td:first-child{color:#fff !important; font-family:var(--font); font-size:1rem}
.bd__sup td{color:var(--on-dark-mut)}
.bd__note{margin-top:18px; font-size:.86rem; color:var(--on-dark-mut); line-height:1.5; max-width:60ch}

/* ---------- investment ($97k single proposal) ---------- */
.ihero{display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,64px); align-items:center;
  background:linear-gradient(160deg, rgba(120,190,32,.2), rgba(120,190,32,.04)); border:1px solid rgba(120,190,32,.5);
  border-radius:var(--r-lg); padding:clamp(28px,3.6vw,46px); box-shadow:0 34px 80px -38px rgba(120,190,32,.55); margin-bottom:clamp(16px,2vw,24px)}
.ihero__price{font-family:var(--font-disp); font-weight:700; font-size:clamp(3.6rem,7vw,5.6rem); line-height:.88; color:#fff; letter-spacing:-0.05em; display:flex; align-items:flex-start; gap:.02em; margin:0}
.ihero__cur{font-size:.42em; margin-top:.36em; color:var(--green-lift)}
.ihero__k{margin-left:.14em}
.ihero__note{font-family:var(--font-mono); font-size:.82rem; color:var(--on-dark-mut); margin:.7rem 0 0; max-width:26ch; line-height:1.45; letter-spacing:.01em}
.ihero__facts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px}
.ihero__facts li{display:flex; flex-direction:column; gap:4px; padding-left:16px; border-left:2px solid rgba(120,190,32,.6)}
.ihero__facts b{font-family:var(--font-disp); font-weight:600; font-size:1.5rem; color:#fff; letter-spacing:-0.02em; line-height:1}
.ihero__facts span{font-size:.9rem; color:var(--on-dark-mut); line-height:1.3}

.icols{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(14px,1.8vw,22px); margin-bottom:clamp(18px,2.4vw,30px)}
.icard{background:rgba(255,255,255,.03); border:1px solid var(--dark-line); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px)}
.icard__h{font-size:1.14rem; letter-spacing:-0.02em; margin:0 0 1.1rem; color:#fff}
.dt{width:100%; border-collapse:collapse; font-size:.95rem}
.dt th{text-align:left; font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-mut); padding:0 8px 10px; border-bottom:1px solid var(--dark-line)}
.dt th:nth-child(2),.dt th:nth-child(3),.dt td:nth-child(2),.dt td:nth-child(3){text-align:right; font-family:var(--font-mono); white-space:nowrap}
.dt td{padding:11px 8px; border-bottom:1px solid rgba(233,234,221,.06); color:var(--on-dark)}
.dt td:first-child{color:var(--on-dark-mut)}
.dt__total td{font-family:var(--font-disp); font-weight:700; font-size:1.06rem; color:var(--green-lift) !important; border-top:2px solid var(--green-lift); border-bottom:none; padding-top:14px}
.dt__total td:first-child{color:#fff !important; font-family:var(--font); font-size:1rem}
.dt__note{margin-top:14px; font-size:.82rem; color:var(--on-dark-mut); line-height:1.5}
.scopelist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem .9rem}
.scopelist li{position:relative; padding-left:1.55em; font-size:.88rem; color:var(--on-dark); line-height:1.3}
.scopelist li::before{content:""; position:absolute; left:0; top:.12em; width:1.05em; height:1.05em; border-radius:50%; background:rgba(120,190,32,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BD24E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size:.66em; background-repeat:no-repeat; background-position:center}
.levers__h{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green-lift); margin:0 0 16px}
.levers__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--dark-line); border:1px solid var(--dark-line); border-radius:var(--r-lg); overflow:hidden}
.lever{background:var(--dark); padding:22px; display:flex; flex-direction:column; gap:7px}
.lever b{font-size:1rem; font-weight:700; color:#fff; letter-spacing:-0.01em}
.lever span{font-size:.88rem; color:var(--on-dark-mut); line-height:1.4}
@media (max-width:1024px){
  .ihero{grid-template-columns:1fr; gap:30px}
  .icols{grid-template-columns:1fr}
  .levers__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ihero__facts,.scopelist,.levers__grid{grid-template-columns:1fr}
}

/* ---------- KPI / ROI ---------- */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:clamp(28px,3.5vw,44px)}
.kpi{background:var(--surface); padding:30px 22px; display:flex; flex-direction:column; gap:8px}
.kpi__n{font-family:var(--font-disp); font-weight:700; font-size:clamp(1.9rem,3.2vw,2.7rem); letter-spacing:-0.04em; color:var(--ink); line-height:1; display:flex; align-items:baseline}
.kpi__cur{font-size:.5em; margin-left:.12em; color:var(--green-ink)}
.kpi__l{font-size:.9rem; color:var(--muted); line-height:1.35}
.roi{background:linear-gradient(160deg, var(--green-50), var(--surface)); border:1px solid rgba(120,190,32,.34); border-radius:var(--r-lg); padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; gap:1rem}
.roi__big{font-family:var(--font-disp); font-weight:600; font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-0.03em; line-height:1.2; color:var(--ink); max-width:24ch}
.roi__big b{color:var(--green-ink)}
.roi__sub{font-size:1rem; color:var(--ink-2); line-height:1.55; max-width:62ch}

/* ---------- playground ---------- */
.sec--play{background:var(--dark); color:var(--on-dark)}
.play{display:flex; flex-direction:column; align-items:center; gap:clamp(22px,3vw,38px); margin:0 auto}
.play__bar{display:flex; align-items:center; gap:14px}
.play__controls{display:flex; flex-direction:column; gap:26px}
.ctl{display:flex; flex-direction:column; gap:12px}
.ctl__lbl{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-mut)}
.swatches{display:flex; gap:12px}
.sw{width:42px; height:42px; border-radius:13px; background:var(--sw); border:2px solid transparent; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s; position:relative}
.sw:hover{transform:scale(1.06)}
.sw.is-on{box-shadow:0 0 0 2px var(--dark), 0 0 0 4px #fff}
.seg{display:inline-flex; background:rgba(255,255,255,.06); border:1px solid var(--dark-line); border-radius:12px; padding:4px; width:fit-content}
.seg button{font-family:var(--font); font-weight:600; font-size:.92rem; padding:.55em 1.2em; border:0; background:transparent; color:var(--on-dark-mut); border-radius:9px; cursor:pointer; transition:.2s}
.seg button.is-on{background:var(--green-cta); color:#fff}
.jumps{display:flex; flex-wrap:wrap; gap:8px}
.jumps button{font-family:var(--font-mono); font-size:.82rem; padding:.5em 1em; border:1px solid var(--dark-line); background:rgba(255,255,255,.04); color:var(--on-dark); border-radius:999px; cursor:pointer; transition:.2s}
.jumps button:hover{border-color:var(--green-lift); color:#fff}
.play__phone{position:relative; display:flex; justify-content:center}
.phone-shell--play{box-shadow:0 2px 8px rgba(0,0,0,.3), 0 50px 100px -40px rgba(0,0,0,.7)}
.phone-glow--play{background:radial-gradient(60% 50% at 50% 45%, rgba(120,190,32,.38), rgba(120,190,32,0) 70%)}
#phone-play{pointer-events:auto}

/* ---------- footer ---------- */
.foot{background:var(--dark-2); color:var(--on-dark); padding:clamp(72px,9vw,120px) 0 40px}
.foot__cta{max-width:46rem; margin-bottom:clamp(48px,6vw,80px)}
.foot__h{font-family:var(--font-disp); font-weight:700; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-0.035em; line-height:1.05; color:#fff; margin-bottom:1.1rem}
.foot__p{font-size:1.14rem; color:var(--on-dark-mut); line-height:1.55; max-width:48ch; margin-bottom:2rem}
.foot__meta{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; padding-top:36px; border-top:1px solid var(--dark-line)}
.foot__col{display:flex; flex-direction:column; gap:10px}
.foot__col--c{align-items:flex-end; text-align:right; font-family:var(--font-mono); font-size:.9rem}
.foot__col--c a{color:var(--on-dark-mut); transition:color .2s}
.foot__col--c a:hover{color:var(--green-lift)}
.brand--foot .brand__mark{background:#fff}
.brand--foot .brand__txt{color:#fff}
.foot__addr{font-size:.92rem; color:var(--on-dark-mut); max-width:34ch; line-height:1.5}
.foot__fine{margin-top:40px; font-family:var(--font-mono); font-size:.74rem; color:rgba(155,163,150,.7); line-height:1.6; max-width:80ch}

/* ---------- scroll progress ---------- */
.rail-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:120; background:transparent; pointer-events:none}
.rail-progress span{display:block; height:100%; width:0; background:var(--green); box-shadow:0 0 8px rgba(120,190,32,.6); transition:width .12s linear}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1; transform:none; transition:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .phone-wrap{--ps:.64}
}
@media (max-width:1024px){
  .nav__links{display:none}
  .bento,.tiers,.timeline{grid-template-columns:repeat(2,1fr)}
  .card--wide{grid-column:span 2}
  .techgrid{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  body{font-size:16px}
  /* stage collapses: phone sticks (opaque) under nav, steps scroll beneath it */
  .stage{grid-template-columns:1fr; gap:0}
  .stage__phone{position:sticky; top:54px; height:auto; order:-1; padding:12px 0 16px; background:var(--paper); z-index:40;
    box-shadow:0 18px 26px -16px rgba(24,40,18,.35); border-bottom:1px solid var(--line)}
  .phone-wrap{--ps:.38; margin:0 auto}
  .phone-cap{display:none}
  .step{min-height:auto; padding:7vh 0 5vh; justify-content:flex-start}
  .step--hero{min-height:auto; padding:2vh 0 4vh; text-align:left}
  .step--hero .hero__hint{display:none}
  .hero__sub,.step__p{max-width:none}
  .play{gap:26px}
}
@media (max-width:560px){
  .bento,.tiers,.timeline,.techgrid,.kpis{grid-template-columns:1fr}
  .card--wide{grid-column:span 1}
  .foot__meta{flex-direction:column}
  .foot__col--c{align-items:flex-start; text-align:left}
  .nav__act .btn--sm{display:none}
  .phone-wrap{--ps:.44}
}