
:root{
  --g900:#052620; --g800:#072F28; --g:#093E34; --g700:#0E5143; --g600:#17654F;
  --lime:#C9DD44; --lime2:#DCEA7A; --limeSoft:#EEF5C4;
  --mint:#CFE0D8; --paper:#F1F3EE; --white:#FFFFFF; --ink:#0B201B; --muted:#5D6F69;
  --line:rgba(9,62,52,.12);
  --r:22px; --ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:Poppins,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--g600)}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.dark .eyebrow{color:var(--lime)}
h1,h2,h3{letter-spacing:-.03em;line-height:1.02;font-weight:700}
.h2{font-size:clamp(34px,5.4vw,72px)}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--muted);max-width:56ch}
.dark .lead{color:var(--mint)}
.hl{color:var(--lime)}

/* ---------- progress + nav ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:var(--lime)}
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1200px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 16px;border-radius:999px;transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease),top .5s var(--ease);color:#fff}
.nav.scrolled{background:rgba(7,47,40,.82);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 10px 40px -12px rgba(0,0,0,.35);top:10px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:auto}
.brand b{display:block;font-size:17px;letter-spacing:.04em;line-height:1}
.brand small{display:block;font-size:9px;letter-spacing:.32em;color:var(--mint);margin-top:3px}
.links{display:flex;gap:4px;align-items:center}
.links a{font-size:14px;font-weight:500;padding:10px 14px;border-radius:999px;transition:background .3s}
.links a:hover{background:rgba(255,255,255,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;padding:14px 22px;border-radius:999px;transition:transform .35s var(--ease),background .3s,box-shadow .35s var(--ease);will-change:transform;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-lime{background:var(--lime);color:var(--g)}
.btn-lime:hover{box-shadow:0 14px 34px -10px rgba(201,221,68,.65)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-dark{background:var(--g);color:#fff}
.btn-dark:hover{box-shadow:0 14px 34px -12px rgba(9,62,52,.6)}
.nav .btn{padding:11px 18px;font-size:14px}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);align-items:center;justify-content:center}
.burger svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.mnav{position:fixed;inset:0;z-index:45;background:var(--g800);display:flex;flex-direction:column;justify-content:center;padding:100px 28px 40px;gap:6px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.mnav.open{opacity:1;pointer-events:auto}
.mnav a{color:#fff;font-size:34px;font-weight:600;letter-spacing:-.02em;padding:6px 0;transform:translateY(20px);opacity:0;transition:.5s var(--ease)}
.mnav.open a{transform:none;opacity:1}
.mnav.open a:nth-child(2){transition-delay:.05s}.mnav.open a:nth-child(3){transition-delay:.1s}.mnav.open a:nth-child(4){transition-delay:.15s}
.mnav .btn{margin-top:24px;align-self:flex-start;font-size:16px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;background:var(--g);color:#fff;overflow:hidden;display:flex;align-items:center;padding:120px 0 120px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px circle at var(--mx,70%) var(--my,40%),rgba(201,221,68,.16),transparent 60%),radial-gradient(900px circle at 100% 0%,rgba(23,101,79,.9),transparent 55%),radial-gradient(700px circle at 0% 100%,var(--g900),transparent 60%)}
.ring{position:absolute;border-radius:50%;border:1.5px solid rgba(207,224,216,.12);z-index:-1;pointer-events:none}
.ring.r1{width:780px;height:780px;right:-220px;top:-160px}
.ring.r2{width:520px;height:520px;right:-90px;top:-30px;border-color:rgba(201,221,68,.18)}
.grain{position:absolute;inset:0;z-index:-1;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(44px,5.6vw,84px);font-weight:700;margin:22px 0 26px}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.loaded .line>span{transform:none}
.loaded .line:nth-child(2)>span{transition-delay:.1s}
.loaded .line:nth-child(3)>span{transition-delay:.2s}
.hero .lead{margin-bottom:34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.fade{opacity:0;transform:translateY(18px);transition:1s var(--ease)}
.loaded .fade{opacity:1;transform:none}
.loaded .fade.d1{transition-delay:.35s}.loaded .fade.d2{transition-delay:.5s}.loaded .fade.d3{transition-delay:.65s}
.hero-meta{display:flex;gap:28px;margin-top:46px;flex-wrap:wrap}
.hero-meta div{font-size:13px;color:var(--mint);display:flex;align-items:center;gap:10px}
.hero-meta svg{width:20px;height:20px;stroke:var(--lime);fill:none;stroke-width:1.8}

.stack{position:relative;height:520px;perspective:1000px}
.chip{position:absolute;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:20px;padding:16px 18px;display:flex;gap:14px;align-items:center;min-width:260px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);will-change:transform;transition:opacity 1s var(--ease)}
.chip .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:rgba(201,221,68,.14)}
.chip .ic svg{width:22px;height:22px;stroke:var(--lime);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip b{display:block;font-size:15px;font-weight:600}
.chip small{display:block;font-size:12.5px;color:var(--mint)}
.chip.solid{background:var(--lime);color:var(--g);border-color:transparent}
.chip.solid small{color:var(--g700)}
.chip.solid .ic{background:var(--g)}
.chip.white{background:#fff;color:var(--ink)}
.chip.white small{color:var(--muted)}
.chip.white .ic{background:var(--limeSoft)}
.chip.white .ic svg{stroke:var(--g)}
.c1{top:30px;left:6%}.c2{top:150px;right:0}.c3{top:290px;left:0}.c4{top:405px;right:8%}
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--lime);animation:pulse 2s infinite}
@keyframes pulse{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
.scrollcue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;color:var(--mint);text-transform:uppercase}
.scrollcue i{width:22px;height:36px;border:1.5px solid rgba(207,224,216,.5);border-radius:12px;position:relative}
.scrollcue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;background:var(--lime);transform:translateX(-50%);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- marquee ---------- */
.marquee{background:var(--lime);color:var(--g);overflow:hidden;padding:20px 0;transform:rotate(-1.4deg) scale(1.03);margin-top:-26px;position:relative;z-index:2;box-shadow:0 20px 50px -25px rgba(9,62,52,.5)}
.mtrack{display:flex;width:max-content;will-change:transform}
.mtrack span{font-size:clamp(20px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;padding:0 22px;display:flex;align-items:center;gap:44px;white-space:nowrap}
.mtrack span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--g)}

/* ---------- statement ---------- */
.statement{padding:clamp(110px,16vw,200px) 0 clamp(90px,12vw,160px)}
.statement p{font-size:clamp(28px,4.3vw,58px);font-weight:600;letter-spacing:-.03em;line-height:1.14;max-width:22ch}
.statement .w{color:rgba(9,62,52,.14);transition:color .35s}
.statement .w.on{color:var(--g)}
.statement .w.on.k{color:var(--g600)}
.statement .sig{margin-top:40px;display:flex;align-items:center;gap:14px;color:var(--muted);font-size:14px}
.statement .sig img{width:46px;filter:brightness(.42) saturate(1.6)}

/* ---------- services (horizontal) ---------- */
.hs{position:relative;background:var(--g);color:#fff}
.hs-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,4vh,48px)}
.hs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.hs-head .lead{max-width:38ch}
.hs-count{font-size:13px;color:var(--mint);letter-spacing:.1em;white-space:nowrap}
.hs-count b{color:var(--lime);font-size:30px;font-weight:700;letter-spacing:-.02em}
.hs-track{display:flex;gap:18px;padding:0 var(--pad);will-change:transform;width:max-content}
.svc{position:relative;width:clamp(260px,24vw,330px);height:clamp(330px,46vh,420px);flex:none;border-radius:28px;padding:26px;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:transform .5s var(--ease),background .5s,border-color .5s}
.svc:hover{transform:translateY(-8px);border-color:rgba(201,221,68,.5)}
.svc .num{font-size:13px;color:var(--mint);letter-spacing:.1em}
.svc .ico{width:64px;height:64px;border-radius:20px;background:rgba(201,221,68,.12);display:grid;place-items:center;margin:22px 0 auto;transition:transform .6s var(--ease),background .4s}
.svc .ico svg{width:30px;height:30px;stroke:var(--lime);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc:hover .ico{transform:rotate(-8deg) scale(1.08);background:var(--lime)}
.svc:hover .ico svg{stroke:var(--g)}
.svc h3{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.svc p{font-size:14.5px;color:var(--mint);line-height:1.55}
.svc .tag{position:absolute;top:22px;right:22px;font-size:11px;font-weight:600;letter-spacing:.06em;padding:6px 10px;border-radius:999px;background:var(--lime);color:var(--g)}
.svc.feature{background:var(--lime);color:var(--g);border-color:transparent}
.svc.feature .num,.svc.feature p{color:var(--g700)}
.svc.feature .ico{background:var(--g)}
.svc.feature .tag{background:var(--g);color:var(--lime)}
.svc.end{background:transparent;border:1.5px dashed rgba(207,224,216,.3);justify-content:center;align-items:flex-start;gap:18px}
.svc.end h3{font-size:30px}
.hs-bar{height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.hs-bar i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- app ---------- */
.app{position:relative;padding:clamp(100px,12vw,160px) 0 0}
.app-intro{text-align:center;max-width:860px;margin:0 auto 20px}
.app-intro .h2{margin:18px 0 20px}
.app-intro .lead{margin:0 auto}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;position:relative}
.phone-col{position:relative}
.phone-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:visible}
.phone-col{overflow-x:clip}
.phone-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,221,68,.45),transparent 65%);filter:blur(30px);transition:transform 1s var(--ease)}
.phone-wrap{position:relative;width:calc(310px*var(--ps,1));height:calc(640px*var(--ps,1))}
.phone{position:absolute;top:0;left:0;width:310px;height:640px;transform:scale(var(--ps,1));transform-origin:0 0;border-radius:48px;background:#0d0f0e;padding:11px;box-shadow:0 60px 120px -40px rgba(9,62,52,.55),0 0 0 1.5px #2b2f2d inset}
.screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--paper)}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#0d0f0e;z-index:20}
.sbar{position:absolute;top:0;left:0;right:0;height:46px;display:flex;justify-content:space-between;align-items:center;padding:6px 26px 0;font-size:12.5px;font-weight:600;z-index:15;color:#fff}
.sbar.dk{color:var(--ink)}
.sbar i{display:flex;gap:5px;align-items:center}
.sbar i b{width:16px;height:9px;border-radius:2px;border:1.5px solid currentColor;position:relative}
.sbar i b::after{content:"";position:absolute;inset:1px 3px 1px 1px;background:currentColor;border-radius:1px}
.scr{position:absolute;inset:0;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.scr.on{opacity:1;transform:none}
.scr.prev{transform:translateY(-24px) scale(.98)}
/* screen pieces */
.s-top{background:var(--g);color:#fff;padding:58px 18px 20px;border-radius:0 0 28px 28px;position:relative;overflow:hidden}
.s-top::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:26px solid rgba(255,255,255,.05);right:-90px;top:-60px}
.s-top small{font-size:11px;color:var(--mint)}
.s-top h4{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:4px 0 14px}
.s-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;font-size:11.5px;color:var(--mint)}
.s-search svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.s-body{padding:14px 14px 0}
.s-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.s-card{border-radius:16px;padding:12px;background:#fff;box-shadow:0 4px 14px -8px rgba(9,62,52,.25)}
.s-card.l{background:var(--lime)}
.s-card .mi{width:28px;height:28px;border-radius:9px;background:var(--g);display:grid;place-items:center;margin-bottom:10px}
.s-card .mi svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}
.s-card.w .mi{background:var(--limeSoft)}
.s-card.w .mi svg{stroke:var(--g)}
.s-card b{display:block;font-size:12px;font-weight:600;color:var(--g)}
.s-card small{font-size:10px;color:var(--g700)}
.s-lbl{display:flex;justify-content:space-between;font-size:12px;font-weight:600;margin:2px 2px 9px;color:var(--ink)}
.s-lbl em{font-style:normal;color:var(--g600);font-size:10.5px}
.s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s-svc{background:#fff;border-radius:14px;padding:10px 4px 8px;text-align:center;font-size:9.5px;font-weight:500;color:var(--ink);box-shadow:0 3px 10px -7px rgba(9,62,52,.3)}
.s-svc svg{width:20px;height:20px;margin:0 auto 5px;stroke:var(--g);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s-tabs{position:absolute;left:0;right:0;bottom:0;height:64px;background:#fff;display:flex;justify-content:space-around;align-items:center;padding-bottom:8px;border-top:1px solid var(--line)}
.s-tabs span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:var(--muted)}
.s-tabs span.on{color:var(--g);font-weight:600}
.s-tabs svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.s-hd{padding:54px 16px 10px;display:flex;align-items:center;gap:10px}
.s-hd .bk{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 3px 10px -6px rgba(0,0,0,.3)}
.s-hd .bk svg{width:14px;height:14px;stroke:var(--g);fill:none;stroke-width:2.2}
.s-hd b{font-size:15px;display:block;line-height:1.1}
.s-hd small{font-size:10.5px;color:var(--muted)}
.steps4{display:flex;gap:4px;padding:0 16px 14px}
.steps4 i{flex:1;height:4px;border-radius:4px;background:var(--lime)}
.steps4 i:last-child{background:var(--g)}
.s-sec{padding:0 16px}
.s-sec h5{font-size:11.5px;font-weight:600;margin:4px 0 8px}
.days{display:flex;gap:6px;margin-bottom:14px}
.days span{flex:1;background:#fff;border-radius:12px;padding:8px 0;text-align:center;font-size:9.5px;color:var(--muted);box-shadow:0 3px 10px -7px rgba(9,62,52,.3)}
.days span b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.days span.on{background:var(--g);color:var(--mint)}
.days span.on b{color:#fff}
.slots{display:grid;gap:7px;margin-bottom:14px}
.slots span{background:#fff;border:1.5px solid transparent;border-radius:12px;padding:10px 12px;font-size:11.5px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 10px -7px rgba(9,62,52,.3)}
.slots span.on{border-color:var(--g);background:var(--limeSoft);font-weight:600}
.slots span.on::after{content:"✓";width:18px;height:18px;border-radius:50%;background:var(--g);color:#fff;font-size:10px;display:grid;place-items:center}
.slots span.off{color:#b4beba;text-decoration:line-through}
.addr{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 12px;font-size:11px;box-shadow:0 3px 10px -7px rgba(9,62,52,.3)}
.addr .mi{width:30px;height:30px;border-radius:10px;background:var(--limeSoft);display:grid;place-items:center;flex:none}
.addr .mi svg{width:15px;height:15px;stroke:var(--g);fill:none;stroke-width:2}
.addr b{display:block;font-size:11.5px}
.addr small{color:var(--muted)}
.s-cta{position:absolute;left:16px;right:16px;bottom:22px;background:var(--lime);color:var(--g);font-weight:600;font-size:13px;text-align:center;padding:14px;border-radius:14px}
.tcard{margin:0 16px 12px;background:var(--g);color:#fff;border-radius:20px;padding:14px;position:relative;overflow:hidden}
.tcard .st{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;background:var(--lime);color:var(--g);padding:4px 9px;border-radius:999px}
.tcard .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.tcard h6{font-size:15px;font-weight:600;margin:10px 0 2px}
.tcard small{font-size:10.5px;color:var(--mint)}
.tech{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.tech .av{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--g);display:grid;place-items:center;font-weight:700;font-size:12px}
.tech b{font-size:12px;display:block}
.tech small{font-size:10px}
.tech .eta{margin-left:auto;text-align:right}
.tech .eta b{font-size:18px;color:var(--lime);line-height:1}
.tl{margin:4px 16px 0;background:#fff;border-radius:18px;padding:14px 14px 4px;box-shadow:0 3px 12px -8px rgba(9,62,52,.3)}
.tl div{display:flex;gap:11px;position:relative;padding-bottom:13px;font-size:11.5px}
.tl div::before{content:"";position:absolute;left:8px;top:18px;bottom:0;width:2px;background:var(--line)}
.tl div:last-child::before{display:none}
.tl div.done::before{background:var(--g)}
.tl i{width:18px;height:18px;border-radius:50%;border:2px solid #cfd8d4;flex:none;background:#fff;position:relative;z-index:1}
.tl .done i{background:var(--g);border-color:var(--g)}
.tl .done i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tl .now i{border-color:var(--g);background:var(--lime);box-shadow:0 0 0 5px rgba(201,221,68,.35)}
.tl b{font-weight:600;display:block;line-height:1.2}
.tl small{color:var(--muted);font-size:10px}
.tl .todo{color:#a3afab}
.ba{margin:0 16px;height:170px;border-radius:18px;overflow:hidden;position:relative}
.ba .side{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ba .after{background:linear-gradient(180deg,#e9eef0,#cfdade)}
.ba .before{background:linear-gradient(180deg,#a3988a,#6f6559);clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);animation:sweep 5s var(--ease) infinite}
@keyframes sweep{0%,100%{--x:22%}50%{--x:78%}}
@property --x{syntax:'<percentage>';inherits:true;initial-value:50%}
.fins{width:78%;height:56%;border-radius:10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 3px,rgba(160,175,180,.6) 3px 7px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.before .fins{background:repeating-linear-gradient(90deg,rgba(80,70,58,.9) 0 3px,rgba(45,38,30,.9) 3px 7px);box-shadow:none;filter:contrast(1.1)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;animation:sweep 5s var(--ease) infinite}
.ba .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#fff;color:var(--g);font-size:13px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.ba label{position:absolute;bottom:8px;font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;z-index:2}
.ba label.a{left:8px}.ba label.b{right:8px;background:var(--lime);color:var(--g)}
.okchip{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;padding:4px 9px;border-radius:999px;background:#DDF1E3;color:#1F7A47;margin-left:auto}
.stars{display:flex;gap:4px;margin:12px 16px 12px;align-items:center;font-size:11px;color:var(--muted)}
.stars span{color:var(--lime);font-size:18px;text-shadow:0 0 0 var(--g);-webkit-text-stroke:.6px var(--g)}
.eq{margin:0 16px;background:#fff;border-radius:16px;padding:12px;display:flex;gap:10px;align-items:center;box-shadow:0 3px 12px -8px rgba(9,62,52,.3)}
.eq .mi{width:34px;height:34px;border-radius:11px;background:var(--limeSoft);display:grid;place-items:center;flex:none}
.eq .mi svg{width:17px;height:17px;stroke:var(--g);fill:none;stroke-width:1.8}
.eq div{flex:1}
.eq b{font-size:11.5px;display:block}
.eq small{font-size:10px;color:var(--muted)}
.eq .bar{height:5px;border-radius:5px;background:var(--paper);margin-top:6px;overflow:hidden}
.eq .bar i{display:block;height:100%;width:72%;background:var(--g);border-radius:5px}

.steps{padding:0 0 10vh}
.step{min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:470px}
.step .n{font-size:13px;font-weight:600;color:var(--g600);letter-spacing:.14em;display:flex;align-items:center;gap:12px}
.step .n i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:var(--lime);font-style:normal;font-size:13px}
.step h3{font-size:clamp(32px,3.8vw,50px);margin:18px 0 16px}
.step p{color:var(--muted);font-size:17px}
.step ul{list-style:none;margin-top:22px;display:grid;gap:10px}
.step li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.step li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23093E34' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.step{opacity:.25;transition:opacity .6s var(--ease)}
.step.on{opacity:1}
.dots{position:absolute;right:-6px;top:50%;transform:translateY(-50%);display:grid;gap:10px}
.dots i{width:6px;height:6px;border-radius:6px;background:rgba(9,62,52,.2);transition:.5s var(--ease)}
.dots i.on{height:26px;background:var(--g)}

/* CTA card */
.invite{padding:20px 0 clamp(90px,12vw,150px)}
.inv{position:relative;border-radius:40px;background:var(--lime);color:var(--g);padding:clamp(30px,5vw,70px);display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;overflow:hidden;isolation:isolate}
.inv::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;border:70px solid rgba(9,62,52,.06);right:-200px;bottom:-280px;z-index:-1}
.inv h2{font-size:clamp(36px,5vw,66px)}
.inv p{font-size:17px;color:var(--g700);margin:16px 0 26px;max-width:46ch}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-bottom:32px;list-style:none}
.perks li{display:flex;gap:10px;align-items:center;font-weight:500;font-size:15px}
.perks svg{width:22px;height:22px;flex:none;stroke:var(--g);fill:none;stroke-width:2}
.inv .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.inv .note{font-size:13px;color:var(--g700);margin-top:18px}
.qr{justify-self:center;background:#fff;border-radius:28px;padding:22px;text-align:center;box-shadow:0 30px 60px -30px rgba(9,62,52,.5);transform:rotate(3deg);transition:transform .6s var(--ease)}
.qr:hover{transform:rotate(0) scale(1.03)}
.qr svg{width:170px;height:170px;fill:var(--g)}
.qr b{display:block;margin-top:14px;font-size:14px}
.qr small{color:var(--muted);font-size:12px}

/* ---------- why ---------- */
.why{background:var(--white);padding:clamp(100px,12vw,160px) 0;border-radius:48px 48px 0 0}
.why-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:56px;flex-wrap:wrap}
.why-head .h2{max-width:14ch;margin-top:16px}
.why-head .lead{max-width:40ch}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--paper);border-radius:28px;padding:28px;min-height:300px;display:flex;flex-direction:column;transition:transform .6s var(--ease),background .5s,color .5s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-8px);background:var(--g);color:#fff}
.card:hover p{color:var(--mint)}
.card .ci{width:56px;height:56px;border-radius:18px;background:#fff;display:grid;place-items:center;margin-bottom:auto;transition:background .5s}
.card:hover .ci{background:var(--lime)}
.card .ci svg{width:26px;height:26px;stroke:var(--g);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:40px 0 10px;line-height:1.15}
.card p{font-size:14.5px;color:var(--muted);transition:color .5s}

/* ---------- zone ---------- */
.zone{background:var(--white);padding:0 0 clamp(100px,12vw,160px)}
.zone-box{border-radius:40px;background:var(--paper);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;overflow:hidden}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pills span{padding:12px 18px;border-radius:999px;background:#fff;font-weight:500;font-size:15px;border:1px solid var(--line);transition:.4s var(--ease)}
.pills span:hover{background:var(--g);color:#fff;transform:translateY(-3px)}
.coast{width:100%;height:auto;max-height:380px}
.coast .route{stroke-dasharray:6 8;animation:dash 2.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-56}}
.coast .pin{animation:bob 2.4s var(--ease) infinite;transform-box:fill-box;transform-origin:50% 100%}
.coast .pin:nth-of-type(2){animation-delay:.4s}.coast .pin:nth-of-type(3){animation-delay:.8s}.coast .pin:nth-of-type(4){animation-delay:1.2s}
@keyframes bob{50%{transform:translateY(-6px)}}

/* ---------- final ---------- */
.final{background:var(--g);color:#fff;padding:clamp(110px,14vw,190px) 0 40px;position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px circle at 50% 0%,rgba(201,221,68,.18),transparent 60%)}
.final h2{font-size:clamp(44px,8vw,120px);text-align:center;max-width:14ch;margin:0 auto}
.final .lead{text-align:center;margin:24px auto 36px}
.final .row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.foot{margin-top:clamp(90px,12vw,150px);padding-top:30px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--mint)}
.foot .brand{color:#fff}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a:hover{color:var(--lime)}

.wa{position:fixed;right:18px;bottom:18px;z-index:40;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(0,0,0,.4);transform:scale(0);transition:transform .5s var(--ease)}
.wa.show{transform:scale(1)}
.wa svg{width:30px;height:30px;fill:#fff}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .cards{grid-template-columns:1fr 1fr}
  .inv{grid-template-columns:1fr}
  .qr{justify-self:start}
}
@media (max-width:900px){
  .links,.nav>.btn{display:none}
  .burger{display:flex}
  .hero{padding:110px 0 90px;align-items:flex-start}
  .hero-grid{grid-template-columns:1fr}
  .stack{height:330px;margin-top:20px}
  .chip{min-width:0;padding:12px 14px}
  .chip .ic{width:38px;height:38px}
  .c1{top:0;left:0}.c2{top:78px;right:0}.c3{top:160px;left:4%}.c4{top:242px;right:2%}
  .ring.r1{width:520px;height:520px;right:-260px;top:auto;bottom:-120px}
  .ring.r2{display:none}
  .scrollcue{display:none}
  .hs{height:auto!important}
  .hs-sticky{position:relative;height:auto;padding:100px 0 80px}
  .hs-head{flex-direction:column;align-items:flex-start}
  .hs-track{transform:none!important;overflow-x:auto;width:100%;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hs-track::-webkit-scrollbar{display:none}
  .svc{scroll-snap-align:center;width:78vw;max-width:320px;height:360px}
  .hs-bar{display:none}
  .app-grid{grid-template-columns:1fr;gap:0}
  .phone-col{position:sticky;top:0;height:100svh;z-index:1}
  .phone-sticky{position:relative;height:100svh;flex-direction:column;justify-content:flex-start;padding-top:76px;gap:14px}
  .phone-glow{width:340px;height:340px;top:60px}
  .steps{position:relative;z-index:2;margin-top:-100svh;padding-bottom:0;pointer-events:none}
  .step{min-height:85svh;visibility:hidden}
  .dots{display:none}
  .mcap{display:block!important;position:relative;width:100%;max-width:420px;flex:1;min-height:150px}
  .mcap>div{position:absolute;inset:0 0 auto 0;background:#fff;border-radius:22px;padding:18px 18px 16px;box-shadow:0 20px 50px -24px rgba(9,62,52,.45);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .mcap>div.on{opacity:1;transform:none}
  .mcap .n{font-size:11px;font-weight:600;color:var(--g600);letter-spacing:.14em;display:flex;align-items:center;gap:10px}
  .mcap .n i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:var(--lime);font-style:normal;font-size:11px}
  .mcap h3{font-size:21px;margin:10px 0 6px;line-height:1.1}
  .mcap p{font-size:14px;color:var(--muted);line-height:1.45}
  .mcap .pg{display:flex;gap:6px;margin-top:12px}
  .mcap .pg i{height:4px;flex:1;border-radius:4px;background:var(--line)}
  .mcap .pg i.on{background:var(--g)}
  .qr{display:none}
  .zone-box{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .card h3{margin-top:28px}
  .hero-meta{gap:14px;flex-direction:column}
  .hero-ctas .btn{flex:1 1 100%}
  .chip b{font-size:13.5px}.chip small{font-size:11.5px}
  .inv{border-radius:30px}
}
@media (max-height:700px) and (min-width:901px){ .phone-wrap{--ps:.82} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.fade,.line>span{opacity:1;transform:none}
}

/* ---------- promo bar ---------- */
.promo{position:relative;z-index:55;background:var(--lime);color:var(--g);font-size:14px;font-weight:500;text-align:center;padding:10px 48px 10px 16px}
.promo a{font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-left:8px}
.promo button{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;font-size:18px;line-height:1}
body.has-promo .nav{top:58px}
body.has-promo .nav.scrolled{top:10px}
/* ---------- admin bar ---------- */
.adminbar{position:fixed;left:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:10px;background:#0b1f1a;color:#fff;border-radius:999px;padding:8px 8px 8px 16px;font-size:13px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.adminbar b{color:var(--lime)}
.adminbar a{background:var(--lime);color:var(--g);font-weight:600;border-radius:999px;padding:7px 14px}
.adminbar.warn{background:#7a2e0e}

/* ---------- rendimiento en celulares (iPhone) ---------- */
.paused,.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
@media (hover:none),(max-width:900px){
  .grain{display:none}
  .chip{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,81,67,.94);border-color:rgba(255,255,255,.14);box-shadow:0 14px 28px -18px rgba(0,0,0,.55);will-change:auto}
  .chip.solid{background:var(--lime)}
  .chip.white{background:#fff}
  .nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,47,40,.97)}
  .mnav a{transition:transform .4s var(--ease),opacity .4s var(--ease)}
  .hero-copy{will-change:auto}
  .phone{box-shadow:0 30px 60px -30px rgba(9,62,52,.55),0 0 0 1.5px #2b2f2d inset}
  .phone-glow{filter:none;background:radial-gradient(circle,rgba(201,221,68,.35),transparent 62%)}
  .marquee{box-shadow:none}
  .mcap>div{box-shadow:0 12px 30px -20px rgba(9,62,52,.45)}
}

/* ---------- contacto ---------- */
.contact{background:var(--white);padding:0 0 clamp(100px,12vw,160px)}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:start}
.contact-info .h2{margin:16px 0 18px}
.cinfo{display:grid;gap:10px;margin-top:30px}
.ci-item{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--paper);transition:background .3s,transform .3s var(--ease)}
a.ci-item:hover{background:var(--limeSoft);transform:translateX(4px)}
.ci-ic{width:44px;height:44px;flex:none;border-radius:14px;background:var(--g);display:grid;place-items:center}
.ci-ic svg{width:20px;height:20px;stroke:var(--lime);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ci-item small{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.ci-item b{font-size:16px;font-weight:600;color:var(--ink);word-break:break-word}
.cform{position:relative;background:var(--g);color:#fff;border-radius:32px;padding:clamp(22px,3.5vw,40px);display:grid;gap:14px;box-shadow:0 40px 80px -50px rgba(9,62,52,.7)}
.cform label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--mint)}
.cform input,.cform select,.cform textarea{font:inherit;font-size:15px;font-weight:400;color:#fff;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);border-radius:14px;padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.cform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9DD44' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.cform select option{color:var(--ink)}
.cform textarea{resize:vertical;min-height:110px;line-height:1.5}
.cform ::placeholder{color:rgba(207,224,216,.55)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--lime);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(201,221,68,.18)}
.cform .bad input,.cform .bad textarea{border-color:#ff9b8a}
.frow.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.fnote{font-size:12.5px;color:var(--mint);line-height:1.5}
.fnote a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.fsend{justify-self:start;margin-top:4px}
.fsend.loading{opacity:.65;pointer-events:none}
.fmsg{font-size:13.5px;color:#ffb4a8;min-height:0}
.fmsg:empty{display:none}
.fdone{text-align:center;padding:30px 10px}
.fdone .ok{width:64px;height:64px;border-radius:50%;background:var(--lime);color:var(--g);display:grid;place-items:center;font-size:30px;font-weight:700;margin:0 auto 18px}
.fdone b{display:block;font-size:22px;letter-spacing:-.02em;margin-bottom:8px}
.fdone p{color:var(--mint)}
.cform.sent>*:not(.fdone){display:none}
.cform.sent .fdone{display:block}
/* ---------- botón subir ---------- */
.totop{position:fixed;right:86px;bottom:27px;z-index:40;width:42px;height:42px;border-radius:50%;background:rgba(9,62,52,.92);color:var(--lime);border:1px solid rgba(201,221,68,.35);display:grid;place-items:center;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--g)}
.totop svg{width:18px;height:18px}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .frow.two{grid-template-columns:1fr}
  .fsend{justify-self:stretch}
  .cform{border-radius:26px}
}

.qr img{display:block;width:190px;height:190px;border-radius:12px}

.hero-meta{gap:12px 22px}
@media (max-width:560px){.hero-meta{gap:12px}}

/* ---------- pagos con tarjeta ---------- */
.paypill{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border-radius:999px;background:rgba(201,221,68,.14);border:1.5px solid rgba(201,221,68,.55);color:#fff;font-weight:600;font-size:15px;line-height:1.2}
.paypill i{width:32px;height:32px;flex:none;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-style:normal}
.paypill svg{width:18px;height:18px;stroke:var(--g);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero .paypill{margin:0 0 22px;position:relative}
.hero .paypill::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid rgba(201,221,68,.6);animation:paypulse 2.6s ease-out infinite;pointer-events:none}
@keyframes paypulse{0%{opacity:.9;transform:scale(.97)}100%{opacity:0;transform:scale(1.12)}}
.paypill.sm{margin-top:14px;font-size:13.5px;padding:5px 14px 5px 5px}
.paypill.sm i{width:26px;height:26px}
.paypill.sm svg{width:15px;height:15px}
.mtrack span.pay em{font-style:normal;display:inline-flex;align-items:center;gap:12px;background:var(--g);color:var(--lime);border-radius:999px;padding:6px 20px 6px 14px;font-size:.78em}
.mtrack span.pay svg{width:1.1em;height:1.1em;stroke:var(--lime);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.payband{margin-top:16px;border-radius:28px;background:var(--g);color:#fff;padding:22px 24px;display:flex;align-items:center;gap:20px}
.payband .pb-ic{width:60px;height:60px;flex:none;border-radius:18px;background:var(--lime);display:grid;place-items:center}
.payband .pb-ic svg{width:30px;height:30px;stroke:var(--g);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.payband b{display:block;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;line-height:1.2}
.payband p{color:var(--mint);font-size:15px;margin-top:4px}
.payband .btn{margin-left:auto}
.paycenter{display:flex;justify-content:center;margin:-14px 0 28px}
@media (max-width:700px){
  .payband{flex-direction:column;align-items:flex-start;padding:22px}
  .payband .btn{margin-left:0;width:100%}
  .paypill{font-size:14px}
}
