:root{
  --color-paper:#F4F5F0; --color-hush:#E9EBE2; --color-clay:#D8C8B0;
  --color-green:#2C5A48; --color-ink:#0F1F18; --color-mesh:#6FA88A;
  --color-lime:#C4D87C; --color-amber:#D9A441; --color-rust:#C25D3E; --color-sky:#4A7A8C;
  --line:rgba(111,168,138,.40); --line-soft:rgba(111,168,138,.22); --line-hush:rgba(111,168,138,.55);
  --fg-on-ink:#F4F5F0; --fg-on-ink-muted:rgba(244,245,240,.62);
  --fg:#0F1F18; --fg-muted:rgba(15,31,24,.65); --fg-subtle:rgba(15,31,24,.45);
  --font-sans:"Geist",-apple-system,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  --t-fast:.15s; --t-base:.2s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{font-family:var(--font-sans); background:var(--color-green); color:var(--fg-on-ink); -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:var(--color-lime); color:var(--color-ink)}

/* helpers */
.eyebrow{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px}
.bar{display:none}
.eyebrow--lime{color:var(--color-lime)} .eyebrow--lime .bar{background:var(--color-lime)}
.eyebrow--green{color:var(--color-green)} .eyebrow--green .bar{background:var(--color-green)}
.section{position:relative; padding:120px 40px; scroll-margin-top:72px}
.wrap{max-width:1240px; margin:0 auto; position:relative; z-index:2}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.s2{transition-delay:.1s}.reveal.s3{transition-delay:.2s}.reveal.s4{transition-delay:.3s}

/* TOPBAR */
.topbar{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:8px; padding:18px 40px; background:linear-gradient(to bottom, rgba(34,72,57,.96), rgba(44,90,72,0)); backdrop-filter:blur(2px); transition:background var(--t-base),padding var(--t-base)}
.topbar.solid{background:var(--color-green); border-bottom:1px solid var(--line-hush); padding:13px 40px}
.brand{font-weight:600; font-size:22px; letter-spacing:-.04em; text-transform:lowercase; color:var(--fg-on-ink); text-decoration:none; display:flex; align-items:center; gap:9px}
.brand .dot{width:8px; height:8px; background:var(--color-lime); border-radius:1px; display:inline-block}
.brand-logo{width:26px; height:26px; object-fit:contain}
.tb-nav{position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:22px}
.tb-nav a{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,245,240,.72); text-decoration:none; position:relative; padding:4px 0; white-space:nowrap; transition:color var(--t-fast)}
.tb-nav a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--color-lime); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast)}
.tb-nav a:hover{color:var(--color-lime)} .tb-nav a:hover::after{transform:scaleX(1)}
.tb-actions{margin-left:auto; display:flex; align-items:center; gap:12px}
.btn-line{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; background:transparent; color:var(--color-lime); border:1px solid var(--line-hush); border-radius:2px; padding:11px 18px; cursor:pointer; text-decoration:none; display:inline-block; white-space:nowrap; transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn-line:hover{background:var(--color-lime); color:var(--color-ink); border-color:var(--color-lime)}
.btn-login{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; background:var(--color-lime); color:var(--color-ink); border:1px solid var(--color-lime); border-radius:2px; padding:11px 18px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background var(--t-fast),transform .05s}
.btn-login:hover{background:#d3e394} .btn-login:active{transform:translateY(1px)} .btn-login i{font-size:15px}

/* burger + panel de nav mobile */
.tb-burger{display:none; width:38px; height:38px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line-hush); border-radius:2px; color:var(--fg-on-ink); font-size:19px; cursor:pointer; flex-shrink:0}
.tb-mobile-nav{position:fixed; top:0; right:0; z-index:49; width:min(78vw,320px); height:100vh; background:var(--color-ink); border-left:1px solid var(--line-hush); padding:96px 28px 32px; display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:transform var(--t-base) ease; overflow-y:auto}
.tb-mobile-nav.open{transform:none}
.tb-mobile-nav a{font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-on-ink); text-decoration:none; padding:14px 4px; border-bottom:1px solid rgba(244,245,240,.1)}
.tb-mobile-nav a:hover{color:var(--color-lime)}
.tb-mobile-nav .btn-primary{margin-top:20px; justify-content:center; border-bottom:none}

/* botones */
.btn-primary{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; background:var(--color-lime); color:var(--color-ink); border:none; border-radius:2px; padding:15px 24px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; text-decoration:none; transition:background var(--t-fast),transform .05s}
.btn-primary:hover{background:#d3e394} .btn-primary:active{transform:translateY(1px)} .btn-primary i{font-size:15px}
.btn-ghost{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; background:transparent; color:var(--fg-on-ink); border:1px solid var(--line-hush); border-radius:2px; padding:15px 24px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; text-decoration:none; transition:all var(--t-fast)}
.btn-ghost:hover{border-color:var(--color-lime); color:var(--color-lime)} .btn-ghost i{font-size:15px}

/* HERO */
.hero{position:relative; padding:150px 40px 70px; max-width:1320px; margin:0 auto}
.hero::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:0; pointer-events:none; background-image:linear-gradient(rgba(244,245,240,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(244,245,240,.5) 1px,transparent 1px); background-size:34px 34px; opacity:.09}
.hero::after{content:""; position:absolute; z-index:0; pointer-events:none; top:10%; left:-8%; width:600px; height:600px; background:radial-gradient(circle,rgba(196,216,124,.14),transparent 64%); filter:blur(24px)}
.hero-top{position:relative; z-index:2; display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start; margin-bottom:64px}
.hero-heading{max-width:640px}
.eyebrow-lg{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--color-lime); margin-bottom:28px}
.eyebrow-lg .bar{width:28px; height:1px; background:var(--color-lime); opacity:.7}
h1.hero-title{font-weight:600; font-size:clamp(40px,5.2vw,68px); line-height:1; letter-spacing:-.04em; color:var(--fg-on-ink)}
h1.hero-title .hl{color:var(--color-lime)}
.hero-side{padding-top:6px}
.hero-desc{font-size:15px; line-height:1.6; color:var(--fg-on-ink-muted); margin-bottom:24px}
.hero-desc strong{color:var(--fg-on-ink); font-weight:500}
.hero-actions{display:flex; align-items:center; gap:16px; flex-wrap:nowrap}

/* contenedor real de imagen, usado en cómo funciona, producto y sobre nosotros */
.ph-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; z-index:5}

/* media del hero (video institucional) · a sangre, de borde a borde */
.hero-media{position:relative; z-index:2; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; aspect-ratio:21/9; overflow:hidden; box-shadow:0 2px 0 rgba(0,0,0,.05),0 40px 80px -24px rgba(0,0,0,.55)}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}

.float-badge{position:absolute; bottom:24px; left:24px; z-index:3; background:var(--color-green); border:1px solid var(--line-hush); border-radius:2px; padding:11px 15px; display:flex; align-items:center; gap:10px; box-shadow:0 20px 40px -16px rgba(0,0,0,.6)}
.float-badge i{color:var(--color-lime); font-size:18px}
.float-badge .ft{display:flex; flex-direction:column; gap:1px}
.float-badge .ft .t{font-size:12px; font-weight:600; color:var(--fg-on-ink)}
.float-badge .ft .s{font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-mesh)}
.scroll-hint{position:relative; z-index:2; margin:36px auto 0; width:fit-content; font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,245,240,.55); display:flex; flex-direction:column; align-items:center; gap:8px}
.scroll-hint .ln{width:1px; height:34px; background:linear-gradient(rgba(244,245,240,.6),transparent); animation:slide 2s ease-in-out infinite}
@keyframes slide{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}
.hero .reveal{opacity:0; transform:translateY(22px); animation:fadeUp .85s cubic-bezier(.2,.7,.2,1) forwards}
.hero .d1{animation-delay:.05s}.hero .d2{animation-delay:.18s}.hero .d3{animation-delay:.31s}.hero .d4{animation-delay:.44s}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}

/* secciones claras */
.section--paper{background:var(--color-paper); color:var(--fg)}
.sec-head{max-width:760px; margin-bottom:60px}
.sec-title{font-weight:600; font-size:clamp(28px,3.6vw,46px); line-height:1.05; letter-spacing:-.03em; color:var(--fg); margin-top:20px}
.sec-title .em{color:var(--color-green)}
.sec-lead{font-size:17px; line-height:1.6; color:var(--fg-muted); margin-top:18px; max-width:640px}

/* PROPUESTA (problema) */
.pains{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pain{background:var(--color-paper); border:1px solid var(--line); border-left:3px solid var(--color-rust); border-radius:2px; padding:26px 24px}
.pain .num{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; color:var(--color-rust); margin-bottom:16px; display:block}
.pain h3{font-weight:600; font-size:19px; line-height:1.2; letter-spacing:-.02em; margin-bottom:12px}
.pain p{font-size:14px; line-height:1.6; color:var(--fg-muted)}
.turn{margin-top:42px; background:var(--color-green); border-radius:3px; padding:34px 40px; display:flex; align-items:center; gap:22px}
.turn i{font-size:34px; color:var(--color-lime); flex-shrink:0}
.turn p{font-size:clamp(17px,2vw,23px); line-height:1.4; font-weight:500; letter-spacing:-.02em; color:var(--fg-on-ink)}
.turn p b{color:var(--color-lime); font-weight:600}

/* secciones oscuras */
.section--ink{background:var(--color-green); color:var(--fg-on-ink)}
.section--ink .sec-title{color:var(--fg-on-ink)} .section--ink .sec-title .em{color:var(--color-lime)}
.section--ink .sec-lead{color:var(--fg-on-ink-muted)}
.gridtex{position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(244,245,240,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(244,245,240,.5) 1px,transparent 1px); background-size:32px 32px; opacity:.07}

/* GEMELO (solución) */
.twin{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:stretch}
.twin-copy h2{font-weight:600; font-size:clamp(28px,3.6vw,44px); line-height:1.06; letter-spacing:-.03em; margin:20px 0 22px}
.twin-copy h2 .em{color:var(--color-lime)}
.twin-copy p{font-size:16px; line-height:1.65; color:var(--fg-on-ink-muted); margin-bottom:18px}
.twin-copy p strong{color:var(--fg-on-ink); font-weight:500}
.twin-specs{margin-top:26px; border-top:1px solid var(--line-hush)}
.twin-specs .row{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.04em; color:var(--color-lime); padding:11px 0; border-bottom:1px solid rgba(244,245,240,.1)}
.twin-specs .row span:first-child{opacity:.55; text-transform:uppercase; color:var(--fg-on-ink)}
.twin-vis{position:relative; border:1px solid var(--line-hush); border-radius:4px; background:radial-gradient(ellipse at 60% 30%,rgba(111,168,138,.18),transparent 60%); overflow:hidden}
.twin-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* CÓMO FUNCIONA */
.flow-group-label{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--color-green); display:flex; align-items:center; gap:14px; margin:0 0 26px}
.flow-group-label::after{content:""; flex:1; height:1px; background:var(--line)}
.flow-group-label.alt{color:var(--color-rust)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:50px}
.steps.solo{grid-template-columns:1fr}
.step{background:var(--color-paper); border:1px solid var(--line); border-radius:2px; padding:28px 26px; position:relative; display:flex; flex-direction:column}
.step .n{font-weight:600; font-size:62px; line-height:.8; letter-spacing:-.04em; color:var(--color-green); opacity:.16; position:absolute; top:14px; right:18px}
.step .ic{width:42px; height:42px; border-radius:2px; background:var(--color-green); color:var(--color-lime); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:20px}
.step h3{font-weight:600; font-size:20px; letter-spacing:-.02em; margin-bottom:12px}
.step h3 .sub{display:block; font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--color-green); opacity:.7; margin-top:5px}
.step p{font-size:14px; line-height:1.6; color:var(--fg-muted)}
/* slider del paso */
.step-slider{position:relative; margin-top:auto; aspect-ratio:16/10; border-radius:2px; overflow:hidden; background:var(--color-hush); border:1px solid var(--line)}
.step p{font-size:14px; line-height:1.6; color:var(--fg-muted); margin-bottom:22px}
.step-slider .sl{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; opacity:0; transition:opacity .55s ease; color:var(--fg-subtle); background:repeating-linear-gradient(45deg,rgba(15,31,24,.03),rgba(15,31,24,.03) 10px,transparent 10px,transparent 20px)}
.step-slider .sl.on{opacity:1}
.step-slider .sl i{font-size:30px; color:var(--color-mesh)}
.step-slider .sl span{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase}
.step-slider .dots{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2}
.step-slider .dot{width:6px; height:6px; border-radius:50%; background:rgba(15,31,24,.2); transition:background .3s}
.step-slider .dot.on{background:var(--color-green)}
.slider-hint{position:absolute; top:9px; right:9px; z-index:2; font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-green); display:flex; align-items:center; gap:5px; background:rgba(244,245,240,.82); padding:4px 8px; border-radius:2px; transition:opacity var(--t-fast)}
.step:hover .slider-hint{opacity:0}
.step.op{background:var(--color-green); border-color:var(--color-green); color:var(--fg-on-ink); display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; padding:30px 34px}
.step.op .n{color:var(--color-lime); opacity:.22; position:static; font-size:84px}
.step.op .ic{background:var(--color-lime); color:var(--color-green); margin-bottom:0; width:48px; height:48px}
.step.op .txt h3{color:var(--fg-on-ink)} .step.op .txt p{color:var(--fg-on-ink-muted)}
.step.op .head{display:flex; align-items:center; gap:18px; margin-bottom:10px}

/* PRODUCTO (screens) */
.shots{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.shot{background:rgba(244,245,240,.03); border:1px solid var(--line-hush); border-radius:4px; overflow:hidden; cursor:pointer; transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base)}
.shot.big{grid-column:1/-1}
.shot:hover{transform:translateY(-5px); border-color:var(--color-lime); box-shadow:0 26px 54px -22px rgba(0,0,0,.55)}
.shot .cap{padding:22px 24px; border-bottom:1px solid rgba(244,245,240,.1)}
.shot .cap .eb{font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--color-lime); margin-bottom:10px; display:block}
.shot .cap h3{font-weight:600; font-size:21px; letter-spacing:-.02em; margin-bottom:8px; transition:color var(--t-fast)}
.shot:hover .cap h3{color:var(--color-lime)}
.shot .cap p{font-size:14px; line-height:1.55; color:var(--fg-on-ink-muted)}
.placeholder{position:relative; aspect-ratio:16/10.5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:repeating-linear-gradient(45deg,rgba(244,245,240,.02),rgba(244,245,240,.02) 12px,transparent 12px,transparent 24px); color:rgba(244,245,240,.35); overflow:hidden}
.shot.big .placeholder{aspect-ratio:1900/944}
.placeholder i{font-size:42px; color:rgba(196,216,124,.4); transition:transform var(--t-base), color var(--t-base); z-index:2}
.shot:hover .placeholder i{transform:scale(1.14); color:var(--color-lime)}
.placeholder .lbl{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; z-index:2}
.placeholder .scan{position:absolute; left:0; right:0; height:2px; top:-10%; background:linear-gradient(90deg,transparent,var(--color-lime),transparent); opacity:0}
.shot:hover .placeholder .scan{animation:scan 1.6s linear infinite; opacity:.8}
@keyframes scan{0%{top:-5%}100%{top:105%}}
.placeholder.slider .sl{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; opacity:0; transition:opacity .55s ease}
.placeholder.slider .sl.on{opacity:1}
.placeholder.slider .dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:6}
.placeholder.slider .dot{width:6px; height:6px; border-radius:50%; background:rgba(244,245,240,.25); transition:background .3s}
.placeholder.slider .dot.on{background:var(--color-lime)}

/* BENEFICIOS */
.bens{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden}
.ben{background:var(--color-paper); padding:28px 26px; display:flex; gap:18px; align-items:flex-start; transition:background var(--t-fast)}
.ben:hover{background:var(--color-hush)}
.ben .ic{width:40px; height:40px; flex-shrink:0; border-radius:2px; background:var(--color-green); color:var(--color-lime); display:flex; align-items:center; justify-content:center; font-size:20px}
.ben h3{font-weight:600; font-size:16px; letter-spacing:-.01em; margin-bottom:7px}
.ben p{font-size:13.5px; line-height:1.55; color:var(--fg-muted)}

/* SOBRE NOSOTROS */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:stretch}
.about-copy h2{font-weight:600; font-size:clamp(28px,3.6vw,44px); line-height:1.06; letter-spacing:-.03em; margin:20px 0 22px}
.about-copy h2 .em{color:var(--color-lime)}
.about-copy p{font-size:16px; line-height:1.65; color:var(--fg-on-ink-muted); margin-bottom:16px; max-width:540px}
.about-copy p strong{color:var(--fg-on-ink); font-weight:500}
.about-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.about-tags span{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--color-lime); border:1px solid var(--line-hush); border-radius:2px; padding:9px 13px; display:inline-flex; align-items:center; gap:8px}
.about-vis{position:relative}
.about-img{position:relative; z-index:1; height:100%; border:1px solid var(--line-hush); border-radius:4px; overflow:hidden}
.about-badge{position:absolute; z-index:2; bottom:-16px; right:-16px; background:var(--color-lime); color:var(--color-ink); border-radius:3px; padding:16px 20px; box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.about-badge .t{font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; opacity:.7}
.about-badge .v{font-weight:600; font-size:17px; letter-spacing:-.02em; margin-top:3px}

/* NUESTRA ESENCIA · MVV */
.mvv{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mvv-card{background:var(--color-paper); border:1px solid var(--line); border-radius:2px; padding:32px 28px}
.mvv-card .ic{width:46px; height:46px; border-radius:2px; background:var(--color-green); color:var(--color-lime); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:22px}
.mvv-card h3{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--color-green); margin-bottom:14px}
.mvv-card p{font-size:15px; line-height:1.62; color:var(--fg-muted)}
.mvv-card ul{list-style:none; display:flex; flex-direction:column; gap:14px}
.mvv-card li{font-size:14px; line-height:1.45; color:var(--fg); display:flex; gap:10px; align-items:flex-start}
.mvv-card li i{color:var(--color-green); font-size:16px; flex-shrink:0; margin-top:2px}
.mvv-card li b{font-weight:600} .mvv-card li span{font-weight:400}
.mvv-card li span em{font-style:normal; color:var(--fg-muted)}

/* CIERRE */
.close{text-align:center; max-width:820px; margin:0 auto; position:relative; z-index:2}
.close h2{font-weight:600; font-size:clamp(30px,4.6vw,58px); line-height:1.02; letter-spacing:-.035em; color:var(--fg-on-ink); margin:26px 0 24px}
.close h2 .em{color:var(--color-lime)}
.close p{font-size:18px; line-height:1.6; color:var(--fg-on-ink-muted); max-width:620px; margin:0 auto 40px}
.close .actions{display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap}
.close .note{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:rgba(244,245,240,.6); display:flex; align-items:center; gap:8px}
.close .note i{color:var(--color-lime)}

/* PIE */
.foot-shell{background:var(--color-green); padding:0 20px 20px}
.foot{background:var(--color-ink); color:var(--fg-on-ink); padding:80px 40px 36px; position:relative; overflow:hidden; border-radius:24px}
.foot-top{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.3fr 2fr; gap:64px}
.foot .brand{margin-bottom:18px}
.foot .tag{font-size:14px; line-height:1.65; color:var(--fg-on-ink-muted); max-width:330px; margin-bottom:26px}
.socials{display:flex; gap:10px}
.socials a{width:40px; height:40px; border:1px solid var(--line-hush); border-radius:2px; display:flex; align-items:center; justify-content:center; color:var(--fg-on-ink-muted); font-size:19px; transition:all var(--t-fast)}
.socials a:hover{background:var(--color-lime); color:var(--color-ink); border-color:var(--color-lime)}
.foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.foot .col h4{font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--color-lime); margin-bottom:18px}
.foot .col a{display:block; font-size:14px; color:var(--fg-on-ink-muted); text-decoration:none; margin-bottom:11px; transition:color var(--t-fast); cursor:pointer}
.foot .col a:hover{color:var(--fg-on-ink)}
.wordmark{max-width:1240px; margin:56px auto 0; font-weight:600; font-size:clamp(80px,18vw,260px); line-height:.8; letter-spacing:-.05em; text-transform:lowercase; color:rgba(244,245,240,.05); user-select:none; pointer-events:none; display:flex; align-items:center; gap:.03em}
.wordmark span{color:rgba(196,216,124,.18)}
.wordmark-logo{width:.72em; height:.72em; object-fit:contain; opacity:.05}
.foot-bottom{max-width:1240px; margin:40px auto 0; padding-top:24px; border-top:1px solid rgba(244,245,240,.12); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,245,240,.4)}
.foot-bottom .legal{display:flex; gap:20px}
.foot-bottom .legal a{color:rgba(244,245,240,.4); text-decoration:none; transition:color var(--t-fast)}
.foot-bottom .legal a:hover{color:var(--color-lime)}

/* MODAL */
.modal-ov{position:fixed; inset:0; z-index:100; background:rgba(15,31,24,.66); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity var(--t-base)}
.modal-ov.open{opacity:1; pointer-events:auto}
.modal{background:var(--color-paper); color:var(--fg); border-radius:4px; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; box-shadow:0 40px 90px -24px rgba(0,0,0,.5); transform:translateY(20px) scale(.98); transition:transform var(--t-base)}
.modal-ov.open .modal{transform:none}
.modal-head{position:relative; padding:30px 32px 0}
.modal-head .eb{font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--color-green); display:inline-flex; align-items:center; gap:9px; margin-bottom:14px}
.modal-head .eb .bar{width:24px; height:1px; background:var(--color-green); opacity:.7}
.modal-head h3{font-weight:600; font-size:26px; letter-spacing:-.025em; line-height:1.1}
.modal-head p{font-size:14px; line-height:1.55; color:var(--fg-muted); margin-top:10px}
.modal-close{position:absolute; top:22px; right:22px; width:36px; height:36px; border:1px solid var(--line); border-radius:2px; background:transparent; color:var(--color-green); font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--t-fast)}
.modal-close:hover{background:var(--color-hush); border-color:var(--color-green)}
.modal-body{padding:24px 32px 32px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field-label{font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--color-green)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.input,.select,.textarea{font-family:var(--font-sans); font-size:14px; color:var(--fg); background:#fff; border:1px solid var(--line); border-radius:2px; padding:12px 14px; outline:none; width:100%; transition:border-color var(--t-fast)}
.input::placeholder,.textarea::placeholder{color:var(--fg-subtle)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--color-green)}
.textarea{resize:vertical; min-height:90px; line-height:1.5}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232C5A48' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; cursor:pointer}
.modal .btn-primary{width:100%; justify-content:center; margin-top:8px; padding:15px}
.modal-note{font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--fg-subtle); text-align:center; margin-top:14px}
.modal-error{display:none; font-size:13px; line-height:1.5; color:var(--color-rust); background:rgba(194,93,62,.08); border:1px solid rgba(194,93,62,.3); border-radius:2px; padding:12px 14px; margin-bottom:16px}
.modal-error.show{display:block}
.modal-error a{color:var(--color-rust); text-decoration:underline}
.modal .btn-primary.loading{opacity:.6; pointer-events:none}
.modal-success{display:none; padding:48px 32px; text-align:center}
.modal-success.show{display:block} .modal-form.hide{display:none}
.modal-success .chk{width:60px; height:60px; border-radius:50%; background:var(--color-lime); color:var(--color-green); display:flex; align-items:center; justify-content:center; font-size:34px; margin:0 auto 22px}
.modal-success h3{font-weight:600; font-size:24px; letter-spacing:-.02em; margin-bottom:12px}
.modal-success p{font-size:15px; line-height:1.6; color:var(--fg-muted); max-width:340px; margin:0 auto}

/* responsive */
@media(max-width:1080px){
  .tb-nav{display:none}
  .tb-burger{display:flex}
}
@media(max-width:920px){
  .section{padding:84px 24px}
  .hero{padding:120px 24px 60px}
  .hero-top{grid-template-columns:1fr; gap:32px; align-items:start; margin-bottom:40px}
  .hero-media{aspect-ratio:4/3.4}
  .hero-actions{flex-wrap:wrap}
  .topbar{padding:16px 24px}
  .btn-line[data-demo]{display:none}
  .pains{grid-template-columns:1fr} .steps{grid-template-columns:1fr}
  .twin{grid-template-columns:1fr; gap:40px} .twin-vis{order:-1; aspect-ratio:16/10}
  .shots{grid-template-columns:1fr} .bens{grid-template-columns:1fr}
  .step.op{grid-template-columns:1fr; gap:16px}
  .about{grid-template-columns:1fr; gap:48px} .about-vis{order:-1} .about-img{height:auto; aspect-ratio:4/3}
  .mvv{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr; gap:44px} .foot-cols{grid-template-columns:repeat(2,1fr); gap:32px}
  .foot-shell{padding:0 12px 12px} .foot{padding:60px 28px 30px; border-radius:18px}
  .socials{justify-content:center}
  .wordmark{justify-content:center}
}
@media(max-width:560px){
  .float-badge{display:none} .turn{flex-direction:column; align-items:flex-start; padding:26px}
  .field-row{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr); gap:20px}
  .foot-bottom{flex-direction:column; align-items:center; text-align:center; gap:14px}
  .foot-bottom .legal{justify-content:center}
  .hero-actions{gap:12px}
  .btn-primary,.btn-ghost{width:100%; justify-content:center}
  .btn-login{padding:10px 14px}
  .about-badge{right:12px; bottom:12px}
}