/* ===== FONTS ===== */
/* Bricolage Grotesque & Geist loaded via <link> in HTML (Google Fonts CDN) */

/* ===== ROOT / DARK THEME (default vars) ===== */
:root{
  --bg:        oklch(0.13 0.028 265);
  --surface:   oklch(0.17 0.032 265);
  --line:      oklch(0.28 0.04 265 / .55);
  --line-soft: oklch(0.30 0.04 265 / .25);
  --ink:       oklch(0.98 0.005 260);
  --ink-2:     oklch(0.78 0.018 260);
  --ink-3:     oklch(0.60 0.022 260);
  --blue:      oklch(0.70 0.20 263);
  --violet:    oklch(0.66 0.24 300);
  --cyan:      oklch(0.84 0.14 200);
  --grad: linear-gradient(135deg, var(--blue), var(--violet) 55%, var(--cyan));
  --glow-strength: 1;
  --shadow-lg: 0 30px 80px -30px oklch(0.05 0.08 270 / .9), 0 1px 0 oklch(1 0 0 / .04) inset;
  --radius: 18px;
  --glass-bg: oklch(0.22 0.03 265 / .45);
  --glass-blur: blur(18px) saturate(140%);
}

/* ===== ATMOSPHERE ===== */
body::before{ animation: atmosPulse 9s ease-in-out infinite; }
@keyframes atmosPulse{ 0%,100%{ filter:saturate(1) } 50%{ filter:saturate(1.35) brightness(1.12) } }
@media (prefers-reduced-motion: reduce){ body::before{ animation:none; } }

/* ===== LIGHT THEME ===== */
html[data-theme="light"]{
  --bg:        oklch(0.975 0.006 250);
  --surface:   oklch(0.995 0.003 250);
  --line:      oklch(0.45 0.03 265 / .20);
  --line-soft: oklch(0.45 0.03 265 / .10);
  --ink:       oklch(0.26 0.035 265);
  --ink-2:     oklch(0.45 0.03 265);
  --ink-3:     oklch(0.57 0.025 265);
  --glass-bg:  oklch(1 0 0 / .62);
  --shadow-lg: 0 30px 70px -34px oklch(0.4 0.08 265 / .32), 0 1px 0 oklch(1 0 0 / .6) inset;
}
html[data-theme="light"] body::before{ opacity: calc(var(--glow-strength) * 0.7); }
html[data-theme="light"] .brand img{ filter: brightness(0); }
html[data-theme="light"] .nav-inner{ background: oklch(1 0 0 / .72); }
html[data-theme="light"] .nav a.link:hover{ background: oklch(0.4 0.03 265 / .06); }
html[data-theme="light"] .hero-tag,
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .svc-chip span,
html[data-theme="light"] .trust .pill,
html[data-theme="light"] .num,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .free-points .ic,
html[data-theme="light"] .contact-points .ic{ background: oklch(0.4 0.03 265 / .05); }
html[data-theme="light"] .btn-ghost:hover{ background: oklch(0.4 0.03 265 / .09); }
html[data-theme="light"] .card{
  background: linear-gradient(180deg, oklch(1 0 0 / .92), oklch(0.985 0.004 250 / .94));
  box-shadow: 0 1px 2px oklch(0.3 0.05 265 / .06), 0 18px 40px -28px oklch(0.3 0.06 265 / .4);
}
html[data-theme="light"] .card::before{ background: linear-gradient(135deg, oklch(0 0 0 / .07), transparent 45%); }
html[data-theme="light"] .card:hover{ border-color: color-mix(in oklch, var(--violet) 45%, var(--line)); }
html[data-theme="light"] .stage{
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in oklch, var(--violet) 28%, transparent), transparent 55%),
    radial-gradient(120% 80% at 10% 100%, color-mix(in oklch, var(--blue) 28%, transparent), transparent 55%),
    linear-gradient(180deg, oklch(1 0 0), oklch(0.955 0.012 250));
}
html[data-theme="light"] .stage::before{
  background-image:
    linear-gradient(oklch(0 0 0 / .05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0 0 0 / .05) 1px, transparent 1px);
}
html[data-theme="light"] .node{ background: oklch(1 0 0 / .82); }
html[data-theme="light"] .badge,
html[data-theme="light"] .video-tag{ background: oklch(1 0 0 / .85); }
html[data-theme="light"] .step{ background: oklch(1 0 0 / .85); }
html[data-theme="light"] .check{ background: oklch(0.4 0.03 265 / .08); }
html[data-theme="light"] .video-frame{ background: oklch(0.92 0.01 250); }
html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] .textarea{ background: oklch(1 0 0 / .85); }
html[data-theme="light"] .select option{ background: #fff; color: var(--ink); }
html[data-theme="light"] .free-card,
html[data-theme="light"] .contact-card{
  background:
    radial-gradient(80% 100% at 15% 0%, color-mix(in oklch, var(--violet) 20%, transparent), transparent 60%),
    radial-gradient(80% 100% at 95% 100%, color-mix(in oklch, var(--cyan) 16%, transparent), transparent 60%),
    linear-gradient(135deg, oklch(0.975 0.018 285), oklch(1 0 0));
}
html[data-theme="light"] .contact-intro{ border-right-color: var(--line-soft); }

/* ===== THEME TOGGLE BUTTON ===== */
.nav-actions{ display:flex; align-items:center; gap:10px; }
.theme-toggle{ width:40px; height:40px; border-radius:100px; border:1px solid var(--line); background:oklch(1 0 0 / .05); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; transition:transform .2s, color .2s, background .2s; padding:0; flex:0 0 40px; }
.theme-toggle:hover{ color:var(--ink); transform:translateY(-1px); background:oklch(1 0 0 / .09); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .i-sun{ display:block; }
.theme-toggle .i-moon{ display:none; }
html[data-theme="light"] .theme-toggle:hover{ background:oklch(0.4 0.03 265 / .1); }
html[data-theme="light"] .theme-toggle .i-sun{ display:none; }
html[data-theme="light"] .theme-toggle .i-moon{ display:block; }

/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Geist", system-ui, sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.5;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity: var(--glow-strength);
  transition: opacity .6s ease;
  background:
    radial-gradient(60vw 60vw at 12% -10%, color-mix(in oklch, var(--violet) 22%, transparent), transparent 60%),
    radial-gradient(70vw 50vw at 95% 18%, color-mix(in oklch, var(--blue) 26%, transparent), transparent 60%),
    radial-gradient(50vw 50vw at 50% 120%, color-mix(in oklch, var(--cyan) 14%, transparent), transparent 60%);
}

/* ===== TYPE ===== */
.display{ font-family:"Bricolage Grotesque", serif; font-weight:600; letter-spacing:-0.025em; line-height:1.02; text-wrap:balance; }
h1.display{ font-size:clamp(44px, 7vw, 100px); }
h2.display{ font-size:clamp(34px, 5vw, 68px); }
h3.display{ font-size:clamp(22px, 2vw, 28px); font-weight:600; }
.eyebrow{ font-family:"Geist Mono", monospace; font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3); display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:24px; height:1px; background:linear-gradient(90deg, var(--blue), transparent); }
.lead{ color:var(--ink-2); font-size:clamp(16px,1.2vw,19px); max-width:60ch; text-wrap:pretty; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ===== LAYOUT ===== */
.wrap{ position:relative; z-index:1; width:min(1240px, 92vw); margin:0 auto; }
section{ position:relative; padding:clamp(72px, 8vw, 130px) 0; z-index:1; }
.grid{ display:grid; gap:20px; }

/* ===== NAV ===== */
header.wrap{ position:sticky; top:14px; z-index:60; }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding:10px 12px 10px 16px;
  background:oklch(0.13 0.03 265 / .65); border:1px solid var(--line);
  border-radius:100px; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; }
.brand img{ width:34px; height:34px; display:block; }
.brand .name{ font-family:"Bricolage Grotesque", serif; font-size:18px; }
.nav ul{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.nav a.link{ color:var(--ink-2); text-decoration:none; font-size:14px; padding:8px 14px; border-radius:100px; transition:.2s; }
.nav a.link:hover{ color:var(--ink); background:oklch(1 0 0 / .04); }
.nav-cta{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:100px; background:var(--ink); color:var(--bg); font-weight:500; font-size:14px; text-decoration:none; transition:.2s; }
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 30px -10px oklch(1 0 0 / .3); }
@media (max-width:920px){ .nav ul{ display:none; } }

/* ===== BUTTONS ===== */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:100px; font-weight:500; font-size:15px; text-decoration:none; cursor:pointer; border:0; transition:transform .2s, box-shadow .25s, background .2s; font-family:inherit; }
.btn-primary{ color:white; background:linear-gradient(135deg, color-mix(in oklch, var(--blue) 88%, black), color-mix(in oklch, var(--violet) 86%, black)); box-shadow:0 14px 40px -14px color-mix(in oklch, var(--violet) 80%, transparent), 0 0 0 1px oklch(1 0 0 / .12) inset; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 50px -14px color-mix(in oklch, var(--violet) 95%, transparent), 0 0 0 1px oklch(1 0 0 / .2) inset; }
.btn-ghost{ color:var(--ink); background:oklch(1 0 0 / .03); border:1px solid var(--line); }
.btn-ghost:hover{ background:oklch(1 0 0 / .07); transform:translateY(-2px); }
.btn-arrow{ width:22px; height:22px; border-radius:100px; background:oklch(1 0 0 / .15); display:inline-grid; place-items:center; transition:transform .2s; }
.btn:hover .btn-arrow{ transform:translateX(3px); }

/* ===== HERO ===== */
.hero{ padding-top:clamp(48px,6vw,96px); padding-bottom:clamp(56px,7vw,110px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,4vw,64px); align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-tag{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:100px; background:oklch(1 0 0 / .04); border:1px solid var(--line); font-size:13px; color:var(--ink-2); margin-bottom:26px; }
.hero-tag .dot{ width:8px; height:8px; border-radius:50%; background:oklch(0.78 0.18 145); box-shadow:0 0 12px oklch(0.78 0.18 145 / .9); }
.hero h1{ margin:0 0 22px; }
.hero .sub{ color:var(--ink-2); font-size:clamp(16px,1.3vw,20px); max-width:54ch; }
.hero .micro{ margin-top:24px; font-family:"Geist Mono", monospace; font-size:12.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero .micro b{ color:var(--ink); font-weight:500; }
.hero .ctas{ display:flex; gap:12px; margin-top:34px; flex-wrap:wrap; }

/* ===== STAGE (hero visual) ===== */
.stage{ position:relative; aspect-ratio:1/1.02; border-radius:28px;
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in oklch, var(--violet) 35%, transparent), transparent 55%),
    radial-gradient(120% 80% at 10% 100%, color-mix(in oklch, var(--blue) 35%, transparent), transparent 55%),
    linear-gradient(180deg, oklch(0.18 0.035 265), oklch(0.14 0.03 265));
  border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow-lg); }
.stage::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(oklch(1 0 0 / .03) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / .03) 1px, transparent 1px);
  background-size:36px 36px; mask-image:radial-gradient(60% 60% at 50% 50%, black, transparent 80%); }
.stage-svg{ position:absolute; inset:0; width:100%; height:100%; }
.stage-svg path{ stroke-dasharray:6 6; animation:dash 8s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-120; } }
.node{ position:absolute; background:oklch(0.22 0.035 265 / .6); border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(10px); padding:12px 14px; color:var(--ink); box-shadow:0 18px 40px -20px oklch(0 0 0 / .8); will-change:transform; }
.node .role{ font-family:"Geist Mono", monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); margin-bottom:4px; }
.node .lbl{ font-weight:500; font-size:14.5px; letter-spacing:-0.01em; }
.node.creative{ left:4%; top:7%; width:39%; animation:floatA 7s ease-in-out infinite; }
.node.ad{ right:5%; top:22%; width:42%; animation:floatB 8s ease-in-out infinite; padding:0; overflow:hidden; }
.node.click{ left:8%; top:49%; width:36%; animation:floatA 9s ease-in-out infinite; }
.node.lead{ right:6%; top:58%; width:42%; animation:floatB 7.5s ease-in-out infinite; }
.node.client{ left:18%; bottom:5%; width:60%; animation:floatA 8s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes floatB{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.ad-img{ height:86px; position:relative;
  background:radial-gradient(70% 100% at 30% 30%, color-mix(in oklch, var(--violet) 90%, transparent), transparent 55%), radial-gradient(80% 100% at 80% 70%, color-mix(in oklch, var(--cyan) 85%, transparent), transparent 60%), linear-gradient(135deg, oklch(0.32 0.12 280), oklch(0.22 0.08 230)); }
.ad-img::after{ content:"\B7  AD CREATIVE  \B7"; position:absolute; left:10px; bottom:8px; font-family:"Geist Mono", monospace; font-size:10px; letter-spacing:.18em; color:oklch(1 0 0 / .85); }
.ad-body{ padding:10px 12px 12px; }
.ad-body .lbl{ font-size:13.5px; }
.badge{ position:absolute; padding:7px 11px; border-radius:100px; background:oklch(0.13 0.028 265 / .8); border:1px solid var(--line); font-family:"Geist Mono", monospace; font-size:11px; color:var(--ink); backdrop-filter:blur(10px); white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.badge .pip{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.badge.b1{ left:47%; top:7%; animation:floatA 9s ease-in-out infinite; }
.badge.b2{ left:1%; top:36%; animation:floatB 8s ease-in-out infinite; }
.badge.b3{ right:1%; top:47%; animation:floatA 10s ease-in-out infinite; }
.badge.b4{ right:8%; bottom:36%; animation:floatB 9s ease-in-out infinite; }

/* ===== TRUST ===== */
.trust{ margin-top:clamp(46px,6vw,72px); display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--ink-3); border-top:1px solid var(--line-soft); padding-top:24px; }
.trust .pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px; background:oklch(1 0 0 / .02); border:1px solid var(--line-soft); color:var(--ink-2); font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

/* ===== SECTION HEAD ===== */
.head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(36px,4.5vw,64px); max-width:880px; }
.head .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.head h2{ margin:0; } .head .lead{ margin:0; }

/* ===== ALCA PILLARS ===== */
.alca-banner{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:baseline;
  font-family:"Bricolage Grotesque", serif; font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(26px,3.4vw,46px); margin:0 0 14px;
}
.alca-banner .k{ color:var(--ink-3); }
.alca-banner .sep{ color:var(--ink-3); font-weight:400; }
.pillars{ grid-template-columns:repeat(4, 1fr); gap:22px; }
@media (max-width:1080px){ .pillars{ grid-template-columns:repeat(2,1fr); gap:24px; } }
@media (max-width:620px){ .pillars{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
.pillar-card{
  display:block; position:relative;
  aspect-ratio:1122 / 1402;
  border-radius:22px; overflow:hidden;
  border:1px solid var(--line);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:var(--shadow-lg);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .3s;
}
.pillar-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .4s;
  background:radial-gradient(120% 60% at 50% 0%, color-mix(in oklch, var(--violet) 22%, transparent), transparent 60%);
}
.pillar-card:hover{ transform:translateY(-6px); border-color:color-mix(in oklch, var(--violet) 55%, var(--line)); box-shadow:0 40px 90px -34px color-mix(in oklch, var(--violet) 55%, transparent); }
.pillar-card:hover::after{ opacity:1; }

/* Pillar images - dark theme */
html[data-theme="dark"]  .pillar-card.ads{ background-image:url("../assets/images/pillar-ads-dark.jpeg"); }
html[data-theme="dark"]  .pillar-card.leads{ background-image:url("../assets/images/pillar-leads-dark.jpeg"); }
html[data-theme="dark"]  .pillar-card.creatividad{ background-image:url("../assets/images/pillar-creatividad-dark.jpeg"); }
html[data-theme="dark"]  .pillar-card.automatizacion{ background-image:url("../assets/images/pillar-automatizacion-dark.jpeg"); }
/* Pillar images - light theme */
html[data-theme="light"] .pillar-card.ads{ background-image:url("../assets/images/pillar-ads-light.jpeg"); }
html[data-theme="light"] .pillar-card.leads{ background-image:url("../assets/images/pillar-leads-light.jpeg"); }
html[data-theme="light"] .pillar-card.creatividad{ background-image:url("../assets/images/pillar-creatividad-light.jpeg"); }
html[data-theme="light"] .pillar-card.automatizacion{ background-image:url("../assets/images/pillar-automatizacion-light.jpeg"); }

html[data-theme="light"] .pillar-card{ border-color:oklch(0.45 0.03 265 / .14); box-shadow:0 1px 2px oklch(0.3 0.05 265 / .06), 0 24px 50px -30px oklch(0.3 0.06 265 / .4); }

/* ===== CARDS ===== */
.card{ position:relative; background:linear-gradient(180deg, oklch(0.18 0.032 265 / .85), oklch(0.15 0.03 265 / .85)); border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:transform .35s, border-color .3s; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg, oklch(1 0 0 / .18), transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.card:hover{ transform:translateY(-4px); border-color:oklch(0.45 0.08 270 / .6); }
.pillar .glyph{ font-family:"Bricolage Grotesque", serif; font-size:46px; font-weight:700; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pillar .ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin:18px 0 16px; background:linear-gradient(135deg, color-mix(in oklch, var(--violet) 22%, transparent), color-mix(in oklch, var(--blue) 22%, transparent)); border:1px solid var(--line); color:var(--ink); }
.pillar .ico svg{ width:22px; height:22px; }
.pillar h3{ margin:0 0 8px; font-size:20px; font-weight:600; letter-spacing:-0.01em; }
.pillar p{ margin:0; color:var(--ink-2); font-size:14.5px; }

/* ===== PROCESS ===== */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
.process::before{ content:""; position:absolute; left:4%; right:4%; top:44px; height:1px; background:linear-gradient(90deg, transparent, var(--blue), var(--violet), var(--cyan), transparent); opacity:.8; }
@media (max-width:880px){ .process{ grid-template-columns:1fr; } .process::before{ display:none; } }
.step{ background:oklch(0.16 0.03 265 / .7); border:1px solid var(--line); border-radius:16px; padding:24px; position:relative; }
.step-dot{ width:26px; height:26px; border-radius:50%; background:oklch(0.13 0.028 265); border:1px solid var(--line); display:grid; place-items:center; font-family:"Geist Mono", monospace; font-size:11px; color:var(--ink); position:absolute; top:31px; left:24px; box-shadow:0 0 0 6px oklch(0.13 0.028 265); }
.step h3{ margin:60px 0 8px; font-size:18px; font-weight:600; letter-spacing:-0.01em; }
.step p{ margin:0; color:var(--ink-2); font-size:14.5px; }

/* ===== PLANS ===== */
.plans{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .plans{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
.plan{ padding:36px 32px; border-radius:22px; background:oklch(0.16 0.03 265 / .8); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .3s; }
.plan:hover{ transform:translateY(-4px); }
.plan .name{ display:flex; align-items:center; gap:10px; font-family:"Bricolage Grotesque", serif; font-size:28px; font-weight:600; letter-spacing:-0.02em; margin-bottom:6px; }
.plan .name .mark{ width:12px; height:12px; border-radius:4px; background:var(--blue); }
.plan.featured{ background:radial-gradient(120% 80% at 50% 0%, color-mix(in oklch, var(--violet) 25%, transparent), transparent 60%), linear-gradient(180deg, oklch(0.22 0.05 280 / .85), oklch(0.16 0.03 265 / .85)); border-color:color-mix(in oklch, var(--violet) 55%, var(--line)); box-shadow:0 30px 80px -30px color-mix(in oklch, var(--violet) 55%, transparent); }
.plan.featured .name .mark{ background:var(--violet); box-shadow:0 0 12px var(--violet); }
.plan .sub{ color:var(--ink-2); margin:0 0 24px; font-size:14.5px; min-height:42px; }
.plan ul{ list-style:none; margin:0 0 28px; padding:0; flex:1; display:flex; flex-direction:column; gap:0; }
.plan li{ display:flex; align-items:flex-start; gap:12px; color:var(--ink); font-size:14.5px; padding:12px 0; border-bottom:1px dashed var(--line-soft); }
.plan li:last-child{ border-bottom:0; }
.check{ width:18px; height:18px; flex:0 0 18px; border-radius:50%; background:oklch(0.22 0.04 265); display:grid; place-items:center; color:var(--cyan); margin-top:2px; }
.check svg{ width:10px; height:10px; stroke-width:3; }
.plan.featured .check{ background:color-mix(in oklch, var(--violet) 28%, transparent); color:white; }
.plan .ribbon{ display:inline-flex; align-self:flex-start; font-family:"Geist Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; background:oklch(1 0 0 / .08); border:1px solid var(--line); padding:5px 10px; border-radius:100px; color:var(--ink-2); margin-bottom:14px; }
.plan.featured .ribbon{ background:linear-gradient(135deg, color-mix(in oklch, var(--violet) 35%, transparent), color-mix(in oklch, var(--blue) 35%, transparent)); color:white; border-color:color-mix(in oklch, var(--violet) 60%, transparent); }

/* ===== FREE CREATIVE ===== */
.free-card{ position:relative; border-radius:32px; overflow:hidden; border:1px solid color-mix(in oklch, var(--violet) 40%, var(--line));
  background:radial-gradient(80% 100% at 12% 0%, color-mix(in oklch, var(--violet) 26%, transparent), transparent 60%), radial-gradient(80% 100% at 95% 100%, color-mix(in oklch, var(--cyan) 20%, transparent), transparent 60%), linear-gradient(135deg, oklch(0.19 0.05 280), oklch(0.14 0.035 265));
  box-shadow:var(--shadow-lg); }
.free-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,3.5vw,56px); align-items:center; padding:clamp(34px,4vw,60px); }
@media (max-width:920px){ .free-grid{ grid-template-columns:1fr; } }
.free-copy h2{ margin:14px 0 16px; }
.free-points{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.free-points li{ display:flex; align-items:center; gap:12px; color:var(--ink-2); font-size:15px; }
.free-points .ic{ width:30px; height:30px; border-radius:9px; background:oklch(1 0 0 / .05); border:1px solid var(--line); display:grid; place-items:center; color:var(--cyan); flex:0 0 30px; }
.free-points .ic svg{ width:15px; height:15px; }
.free-cta{ margin-top:32px; }

.free-video{ margin:0; }
.video-frame{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:oklch(0.1 0.025 265); box-shadow:0 30px 70px -30px oklch(0 0 0 / .8); aspect-ratio:16/9; }
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-tag{ position:absolute; top:14px; left:14px; z-index:3; font-family:"Geist Mono", monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:100px; background:oklch(0.13 0.028 265 / .8); border:1px solid var(--line); color:var(--ink); backdrop-filter:blur(8px); display:inline-flex; align-items:center; gap:8px; }
.video-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:oklch(0.78 0.18 145); box-shadow:0 0 10px oklch(0.78 0.18 145 / .9); }
.video-play{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; border:0; cursor:pointer; background:radial-gradient(circle at 50% 50%, oklch(0.1 0.03 265 / .25), oklch(0.1 0.03 265 / .55)); transition:opacity .3s; }
.video-play svg{ width:30px; height:30px; color:white; margin-left:4px; }
.video-play .ring{ width:74px; height:74px; }
.video-play::before{ content:""; position:absolute; width:78px; height:78px; border-radius:50%; background:linear-gradient(135deg, color-mix(in oklch, var(--blue) 88%, black), color-mix(in oklch, var(--violet) 86%, black)); box-shadow:0 14px 40px -10px color-mix(in oklch, var(--violet) 80%, transparent); transition:transform .25s; }
.video-play svg{ position:relative; z-index:1; }
.video-play:hover::before{ transform:scale(1.08); }
.video-frame.playing .video-play{ opacity:0; pointer-events:none; }
.free-video figcaption{ margin-top:14px; font-family:"Geist Mono", monospace; font-size:12px; letter-spacing:.08em; color:var(--ink-3); text-align:center; }

/* ===== CONTACT ===== */
.contact-card{ position:relative; border-radius:32px; overflow:hidden; border:1px solid color-mix(in oklch, var(--violet) 40%, var(--line));
  background:radial-gradient(80% 100% at 15% 0%, color-mix(in oklch, var(--violet) 28%, transparent), transparent 60%), radial-gradient(80% 100% at 95% 100%, color-mix(in oklch, var(--cyan) 22%, transparent), transparent 60%), linear-gradient(135deg, oklch(0.19 0.05 280), oklch(0.14 0.035 265));
  box-shadow:var(--shadow-lg); }
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; }
@media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-intro{ padding:clamp(34px,4vw,56px); border-right:1px solid var(--line-soft); position:relative; }
@media (max-width:920px){ .contact-intro{ border-right:0; border-bottom:1px solid var(--line-soft); } }
.contact-intro h2{ margin:14px 0 16px; }
.contact-points{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.contact-points li{ display:flex; align-items:center; gap:12px; color:var(--ink-2); font-size:14.5px; }
.contact-points .ic{ width:30px; height:30px; border-radius:9px; background:oklch(1 0 0 / .05); border:1px solid var(--line); display:grid; place-items:center; color:var(--cyan); flex:0 0 30px; }
.contact-points .ic svg{ width:15px; height:15px; }

/* ===== FORM ===== */
form.lead-form{ padding:clamp(34px,4vw,56px); display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:"Geist Mono", monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.field label .req{ color:var(--violet); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.input, .select, .textarea{ width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:oklch(0.12 0.025 265 / .8); border:1px solid var(--line); border-radius:12px; padding:13px 15px; transition:border-color .2s, box-shadow .2s, background .2s; }
.input::placeholder, .textarea::placeholder{ color:var(--ink-3); }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px color-mix(in oklch, var(--violet) 30%, transparent); background:oklch(0.14 0.03 265 / .9); }
.textarea{ resize:vertical; min-height:96px; }
.select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:38px; cursor:pointer; }
.select option{ background:#15151c; color:var(--ink); }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea{ border-color:oklch(0.62 0.2 25); box-shadow:0 0 0 3px oklch(0.62 0.2 25 / .18); }
.err{ font-size:12.5px; color:oklch(0.72 0.16 25); display:none; }
.field.invalid .err{ display:block; }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:4px; }
.consent{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--ink-3); max-width:34ch; }
.consent input{ margin-top:2px; accent-color:oklch(0.62 0.22 285); width:15px; height:15px; }
.lead-form .btn-primary{ justify-content:center; }

/* ===== SERVICE CHIPS ===== */
.svc-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.svc-chip{ position:relative; }
.svc-chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.svc-chip span{ display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:100px; border:1px solid var(--line); background:oklch(1 0 0 / .03); font-size:13.5px; color:var(--ink-2); cursor:pointer; transition:.18s; user-select:none; }
.svc-chip span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ink-3); transition:.18s; }
.svc-chip input:checked + span{ color:var(--ink); border-color:var(--violet); background:color-mix(in oklch, var(--violet) 16%, transparent); }
.svc-chip input:checked + span::before{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.svc-chip input:focus-visible + span{ box-shadow:0 0 0 3px color-mix(in oklch, var(--violet) 30%, transparent); }

/* ===== FORM SUCCESS ===== */
.form-success{ display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:clamp(40px,5vw,64px); min-height:360px; }
.form-success.show{ display:flex; }
.success-ring{ width:74px; height:74px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle, color-mix(in oklch, var(--violet) 35%, transparent), transparent 70%); border:1px solid var(--violet); color:white; animation:pop .5s cubic-bezier(.2,.9,.3,1.3); }
.success-ring svg{ width:34px; height:34px; stroke-width:2.4; }
@keyframes pop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.form-success h3{ margin:0; }
.form-success p{ margin:0; color:var(--ink-2); max-width:38ch; }
.form-success .summary{ font-family:"Geist Mono", monospace; font-size:12px; color:var(--ink-3); letter-spacing:.06em; margin-top:6px; }

/* ===== FOOTER ===== */
footer{ border-top:1px solid var(--line); padding:60px 0 30px; position:relative; z-index:1; }
.foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; }
@media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .foot-grid{ grid-template-columns:1fr; } }
.foot h4{ font-family:"Geist Mono", monospace; text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; color:var(--ink-3); margin:0 0 16px; font-weight:500; }
.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.foot a{ color:var(--ink-2); text-decoration:none; font-size:14.5px; }
.foot a:hover{ color:var(--ink); }
.foot-bottom{ margin-top:60px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--ink-3); font-size:13px; font-family:"Geist Mono", monospace; }

/* ===== INTRO / CINEMATIC COVER ===== */
.intro{ position:relative; height:100svh; min-height:520px; width:100%; overflow:hidden; background:#05060a; z-index:5; }
.intro-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.intro-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, oklch(0.05 0.02 265 / .35) 0%, transparent 22% 58%, var(--bg) 99%); }
.intro-top{ position:absolute; top:0; left:0; right:0; height:140px; pointer-events:none;
  background:linear-gradient(to bottom, oklch(0.05 0.02 265 / .5), transparent); z-index:2; }
.intro-brand{ position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:11px; color:#fff; }
.intro-brand img{ width:34px; height:34px; display:block; }
.intro-brand .name{ font-family:"Bricolage Grotesque", serif; font-size:19px; font-weight:600; letter-spacing:-0.01em; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.intro-cue{ position:absolute; left:50%; bottom:32px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px; color:#fff; cursor:pointer;
  font-family:"Geist Mono", monospace; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.55); background:none; border:0; transition:opacity .3s; }
.intro-cue:hover{ opacity:.75; }
.intro-cue .chev{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  display:grid; place-items:center; animation:cueBounce 1.8s ease-in-out infinite; backdrop-filter:blur(4px); background:rgba(255,255,255,.06); }
.intro-cue .chev svg{ width:15px; height:15px; }
@keyframes cueBounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }
.intro-mute{ position:absolute; right:22px; bottom:26px; z-index:3; width:42px; height:42px; border-radius:100px;
  border:1px solid rgba(255,255,255,.25); background:rgba(10,12,20,.45); color:#fff; display:grid; place-items:center;
  cursor:pointer; backdrop-filter:blur(8px); transition:transform .2s, background .2s; padding:0; }
.intro-mute:hover{ transform:translateY(-2px); background:rgba(10,12,20,.65); }
.intro-mute svg{ width:18px; height:18px; }
.intro-mute .i-on{ display:none; } .intro-mute .i-off{ display:block; }
.intro-mute.unmuted .i-on{ display:block; } .intro-mute.unmuted .i-off{ display:none; }
@media (prefers-reduced-motion: reduce){ .intro-cue .chev{ animation:none; } }

/* ===== HONEYPOT (accessible hide) ===== */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== FORM ERROR ===== */
.form-error{ font-size:13px; color:oklch(0.72 0.16 25); text-align:center; margin-top:8px; display:none; }
.form-error.show{ display:block; }

/* ===== CONSENT VALIDATION ===== */
.consent.invalid{ color:oklch(0.72 0.16 25); }
.consent.invalid input{ outline:2px solid oklch(0.62 0.2 25); outline-offset:2px; border-radius:3px; }

/* ===== REVEAL ANIMATIONS ===== */
.reveal{ opacity:1; transform:none; }
html.anim .reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
html.anim .reveal.visible{ opacity:1; transform:translateY(0); }
html.anim .reveal.d1{ transition-delay:.08s; } html.anim .reveal.d2{ transition-delay:.16s; } html.anim .reveal.d3{ transition-delay:.24s; } html.anim .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ html.anim .reveal{ opacity:1; transform:none; transition:none; } .node, .badge{ animation:none; } }