:root{
  /* Brand (locked) */
  --navy:#1B3A5C; --teal:#0D9488; --green:#10B981; --amber:#F59E0B;
  --deep-teal:#065A82;
  /* Web dark ramp (brand addendum) */
  --bg-0:#0A1628; --bg-1:#0F1F35; --bg-2:#14283F; --bg-3:#1B3A5C;
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.12);
  --txt:#EAF2F7; --txt-2:#9FB3C4; --txt-3:#6B8197;
  --teal-glow:rgba(13,148,136,.45); --green-glow:rgba(16,185,129,.40);
  --font:'Inter',system-ui,sans-serif; --display:'Space Grotesk','Inter',sans-serif; --mono:'JetBrains Mono',monospace;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); background:var(--bg-0); color:var(--txt);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.55;
}
/* Atmospheric background */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -5%, rgba(13,148,136,.16), transparent 60%),
    radial-gradient(800px 600px at 10% 100%, rgba(6,90,130,.18), transparent 55%),
    linear-gradient(180deg,#0A1628 0%,#0B1A2E 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 75%);
          mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 75%);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2}

/* ---------- NAV ---------- */
nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s,border-color .3s,backdrop-filter .3s; border-bottom:1px solid transparent}
nav.scrolled{background:rgba(10,22,40,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
nav.menu-open{background:rgba(10,22,40,.97); border-bottom-color:var(--line)}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:32px}
.logo{height:48px; display:block; flex:none}
.nav-links{display:flex; align-items:center; gap:28px; flex:1}
.nav-link{font-size:14px; font-weight:500; color:var(--txt-2); text-decoration:none; transition:color .2s; white-space:nowrap}
.nav-link:hover{color:var(--teal)}
.nav-right{display:flex; align-items:center; gap:16px; flex:none}
.nav-lang{font-family:var(--font); font-size:14px; font-weight:500; color:var(--txt-2); background:none; border:none; cursor:pointer; padding:0; transition:color .2s}
.nav-lang:hover{color:var(--teal)}
.nav-login{font-size:14px; font-weight:500; color:var(--txt-2); text-decoration:none; transition:color .2s; white-space:nowrap}
.nav-login:hover{color:var(--teal)}
.nav-cta{font-family:var(--font); font-weight:600; font-size:14px; color:#06231f; background:linear-gradient(135deg,var(--teal),var(--green)); padding:10px 18px; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:transform .2s,box-shadow .2s; box-shadow:0 4px 20px var(--teal-glow); white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 8px 28px var(--teal-glow)}
/* hamburger button */
.nav-burger{display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; padding:4px; width:32px; height:32px; flex:none}
.nav-burger span{display:block; height:2px; border-radius:2px; background:var(--txt-2); transition:transform .25s,opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* mobile overlay */
.nav-mobile{display:none; flex-direction:column; padding:8px 24px 20px; border-top:1px solid var(--line)}
nav.menu-open .nav-mobile{display:flex}
.nav-mobile-link{font-size:16px; font-weight:500; color:var(--txt-2); text-decoration:none; padding:13px 0; border-bottom:1px solid var(--line); transition:color .2s}
.nav-mobile-link:last-child{border:none}
.nav-mobile-link:hover{color:var(--teal)}
/* short/long CTA label control */
.nav-cta-short{display:none}
/* responsive breakpoint */
@media(max-width:768px){
  .nav-links{display:none}
  .nav-login{display:none}
  .nav-burger{display:flex}
  .nav-in{padding:12px 16px; gap:8px}
  .logo{height:36px}
  .nav-right{gap:10px}
  .nav-cta{padding:8px 12px; font-size:13px}
  .nav-cta-long{display:none}
  .nav-cta-short{display:inline}
}

/* ---------- INNER PAGE HERO ---------- */
.page-hero{padding:140px 0 72px; text-align:center; position:relative; z-index:2}
.page-hero h1{font-family:var(--display); font-size:clamp(32px,4.5vw,58px); font-weight:700; letter-spacing:-.02em; line-height:1.08; margin-bottom:20px}
.page-hero p.sub{font-size:clamp(15px,1.6vw,18px); color:var(--txt-2); max-width:600px; margin:0 auto}

/* ---------- HERO ---------- */
.hero{min-height:100vh; display:flex; align-items:center; padding:120px 0 80px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; width:100%}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); border:1px solid var(--line-strong); background:rgba(13,148,136,.08); padding:7px 14px; border-radius:100px; margin-bottom:26px}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:livedot 2s infinite}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.35}}
h1{font-family:var(--display); font-size:clamp(38px,5.4vw,68px); line-height:1.04; font-weight:700; letter-spacing:-.02em; margin-bottom:24px}
h1 .accent{background:linear-gradient(120deg,var(--teal),var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.sub{font-size:clamp(16px,1.7vw,19px); color:var(--txt-2); max-width:520px; margin-bottom:34px}
.hero-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.btn-primary{font-family:var(--font); font-weight:600; font-size:15.5px; color:#06231f; background:linear-gradient(135deg,var(--teal),var(--green)); padding:15px 28px; border-radius:12px; text-decoration:none; border:none; cursor:pointer; transition:transform .2s,box-shadow .2s; box-shadow:0 6px 30px var(--teal-glow); display:inline-flex; align-items:center; gap:9px}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 40px var(--teal-glow)}
.btn-ghost{font-family:var(--font); font-weight:500; font-size:15px; color:var(--txt); padding:15px 8px; text-decoration:none; transition:color .2s; display:inline-flex; align-items:center; gap:8px}
.btn-ghost:hover{color:var(--teal)}
.trust{margin-top:26px; font-size:13px; color:var(--txt-3); display:flex; align-items:center; gap:7px}
.trust b{color:var(--txt-2); font-weight:600}

/* ---------- PHONE / LIVE DEMO ---------- */
.phone-stage{position:relative; display:flex; justify-content:center; align-items:center}
.glow-orb{position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,var(--teal-glow),transparent 65%); filter:blur(30px); z-index:0; animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
.phone{position:relative; z-index:2; width:308px; background:linear-gradient(180deg,#0d1c2e,#0a1424); border-radius:38px; padding:12px; box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px var(--line-strong),inset 0 0 0 1px rgba(255,255,255,.04); opacity:0; transform:translateY(28px) scale(.97); animation:phoneIn .9s cubic-bezier(.2,.8,.2,1) .15s forwards}
@keyframes phoneIn{to{opacity:1; transform:none}}
.phone-screen{background:#0b141c; border-radius:28px; overflow:hidden; height:560px; display:flex; flex-direction:column}
.wa-head{background:#075E54; padding:13px 14px; display:flex; align-items:center; gap:10px}
.wa-ava{width:38px; height:38px; border-radius:50%; background:#0a1628; padding:4px; image-rendering:pixelated; flex:none; object-fit:contain}
.wa-name{font-size:14.5px; font-weight:600; color:#fff; line-height:1.2}
.wa-status{font-size:11px; color:#bfe9df; display:flex; align-items:center; gap:5px}
.wa-status .typing{font-style:italic}
.wa-body{flex:1; padding:16px 12px; background:#0b141c; background-image:radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px); background-size:18px 18px; display:flex; flex-direction:column; gap:10px; overflow:hidden}
.bubble{max-width:84%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; opacity:0; transform:translateY(10px); animation:bubbleIn .4s ease forwards}
@keyframes bubbleIn{to{opacity:1; transform:none}}
.bubble.in{background:#1f2c33; color:#e9edef; border-top-left-radius:4px; align-self:flex-start}
.bubble.out{background:#005c4b; color:#e9edef; border-top-right-radius:4px; align-self:flex-end}
.bubble .time{display:block; font-size:10px; color:rgba(255,255,255,.45); text-align:right; margin-top:3px}
.bubble strong{color:var(--green); font-weight:700}
.bubble .save{display:block; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#bfe9df}
.bubble .save .euro{font-family:var(--mono); font-weight:700; color:#fff; font-size:18px}
.typing-ind{align-self:flex-start; background:#1f2c33; padding:12px 15px; border-radius:14px; border-top-left-radius:4px; display:flex; gap:4px; opacity:0; animation:bubbleIn .3s ease forwards}
.typing-ind span{width:7px; height:7px; border-radius:50%; background:#8aa0ab; animation:dot 1.2s infinite}
.typing-ind span:nth-child(2){animation-delay:.2s} .typing-ind span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.wa-input{padding:9px 12px; background:#1f2c33; display:flex; align-items:center; gap:9px}
.wa-input .fld{flex:1; background:#2a3942; border-radius:18px; padding:8px 13px; font-size:12.5px; color:#67808c}
.wa-input .snd{width:34px; height:34px; border-radius:50%; background:#00a884; display:flex; align-items:center; justify-content:center; flex:none}
/* floating savings chip */
.save-chip{position:absolute; z-index:3; right:-26px; top:64px; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.4); backdrop-filter:blur(8px); border-radius:14px; padding:11px 15px; box-shadow:0 12px 40px rgba(0,0,0,.4); opacity:0; transform:translateX(16px); animation:chipIn .6s ease 3.2s forwards}
@keyframes chipIn{to{opacity:1; transform:none}}
.save-chip .lbl{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3)}
.save-chip .val{font-family:var(--mono); font-weight:700; font-size:22px; color:var(--green)}

/* ---------- SECTION SHELL ---------- */
section.block{padding:96px 0; position:relative; z-index:2}
.sec-head{text-align:center; max-width:680px; margin:0 auto 56px}
.kicker{font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:14px}
.sec-head h2{font-family:var(--display); font-size:clamp(28px,3.6vw,42px); font-weight:700; letter-spacing:-.02em; line-height:1.12; margin-bottom:16px}
.sec-head p{color:var(--txt-2); font-size:17px}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1; transform:none}

/* PROBLEM */
.prob-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.prob{background:linear-gradient(180deg,var(--bg-1),var(--bg-0)); border:1px solid var(--line); border-radius:18px; padding:30px 26px; transition:transform .3s,border-color .3s}
.prob:hover{transform:translateY(-4px); border-color:rgba(245,158,11,.35)}
.prob .big{font-family:var(--mono); font-size:40px; font-weight:700; color:var(--amber); line-height:1; margin-bottom:14px}
.prob h3{font-size:17px; font-weight:600; margin-bottom:8px}
.prob p{color:var(--txt-2); font-size:14.5px}

/* HOW / LOOP */
.loop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step}
.step{position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:18px; padding:28px 22px; transition:transform .3s,border-color .3s}
.step:hover{transform:translateY(-4px); border-color:var(--teal)}
.step .num{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--teal); letter-spacing:.1em; margin-bottom:14px}
.step h3{font-size:17px; font-weight:600; margin-bottom:8px}
.step p{color:var(--txt-2); font-size:14px}
.step::after{content:"→"; position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--teal); font-size:18px; z-index:3}
.step:last-child::after{display:none}

/* MOAT / differentiator strip */
.moat{background:linear-gradient(135deg,rgba(13,148,136,.10),rgba(6,90,130,.10)); border:1px solid var(--line-strong); border-radius:24px; padding:48px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center}
.moat h2{font-family:var(--display); font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-bottom:16px}
.moat p{color:var(--txt-2); font-size:16px; margin-bottom:10px}
.moat .hl{color:var(--teal); font-weight:600}
.bench{background:var(--bg-0); border:1px solid var(--line); border-radius:16px; padding:22px; font-family:var(--mono); font-size:13px}
.bench .row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line)}
.bench .row:last-child{border:none}
.bench .row .who{color:var(--txt-2)}
.bench .row .pr.low{color:var(--green); font-weight:700}
.bench .row .pr.high{color:var(--amber); font-weight:700}
.bench .you{color:var(--teal); font-weight:700}

/* PRICING */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:820px; margin:0 auto}
.pcard{border:1px solid var(--line); border-radius:22px; padding:36px; background:var(--bg-1); position:relative; display:flex; flex-direction:column}
.pcard.feat{border-color:var(--teal); background:linear-gradient(180deg,rgba(13,148,136,.10),var(--bg-1)); box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pcard .tag{position:absolute; top:-12px; right:24px; background:linear-gradient(135deg,var(--teal),var(--green)); color:#06231f; font-size:12px; font-weight:700; padding:5px 13px; border-radius:100px}
.pcard h3{font-size:15px; font-weight:600; color:var(--txt-2); margin-bottom:8px; letter-spacing:.02em}
.pcard .amt{font-family:var(--display); font-size:46px; font-weight:700; line-height:1; margin-bottom:4px}
.pcard .amt small{font-size:16px; font-weight:500; color:var(--txt-3); font-family:var(--font)}
.pcard .note{color:var(--txt-3); font-size:13.5px; margin-bottom:24px}
.pcard ul{list-style:none; margin-bottom:28px; display:flex; flex-direction:column; gap:12px; flex:1}
.pcard li{display:flex; gap:11px; font-size:14.5px; color:var(--txt); align-items:flex-start}
.pcard li svg{flex:none; margin-top:3px}
.pcard .btn-primary,.pcard .btn-out{width:100%; justify-content:center}
.btn-out{font-family:var(--font); font-weight:600; font-size:15px; color:var(--teal); background:transparent; border:1px solid var(--teal); padding:14px; border-radius:12px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:background .2s}
.btn-out:hover{background:rgba(13,148,136,.1)}

/* CTA */
.cta-final{text-align:center; background:linear-gradient(135deg,var(--bg-3),var(--bg-1)); border:1px solid var(--line-strong); border-radius:28px; padding:64px 32px; position:relative; overflow:hidden}
.cta-final::before{content:""; position:absolute; inset:0; background:radial-gradient(500px 300px at 50% -20%,var(--teal-glow),transparent 60%); pointer-events:none}
.cta-final h2{font-family:var(--display); font-size:clamp(28px,4vw,46px); font-weight:700; letter-spacing:-.02em; margin-bottom:16px; position:relative}
.cta-final p{color:var(--txt-2); font-size:18px; max-width:520px; margin:0 auto 32px; position:relative}
.cta-final .btn-primary{position:relative; font-size:17px; padding:17px 36px}
.cta-owl{width:104px; image-rendering:pixelated; margin:4px auto 22px; display:block; position:relative; animation:bob 4s ease-in-out infinite; filter:drop-shadow(0 10px 30px rgba(13,148,136,.45))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:48px 0 40px; position:relative; z-index:2}
.foot-in{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px}
.foot-in .logo{height:32px}
.foot-links{display:flex; gap:24px}
.foot-links a{color:var(--txt-3); font-size:14px; text-decoration:none; transition:color .2s}
.foot-links a:hover{color:var(--teal)}
.copy{color:var(--txt-3); font-size:13px}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:48px; text-align:center}
  .hero p.sub{margin-left:auto;margin-right:auto}
  .hero-actions,.trust{justify-content:center}
  .eyebrow{margin-left:auto;margin-right:auto}
  .prob-grid{grid-template-columns:1fr}
  .loop-grid{grid-template-columns:1fr 1fr} .step::after{display:none}
  .moat{grid-template-columns:1fr; padding:32px}
  .price-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .loop-grid{grid-template-columns:1fr}
  .save-chip{right:6px; top:auto; bottom:96px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} .reveal{opacity:1;transform:none}}