/* ============================================================
   UTOPIA SITE — Base CSS
   Palette: #0E1B3A navy · #FF7A59 coral · #F6F1EA cream · #1A1410 ink
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:         #0E1B3A;
  --navy-2:       #12203f;
  --navy-3:       #172948;
  --navy-4:       #1e3260;
  --orange:       #FF7A59;
  --orange-2:     #ff9070;
  --cream:        #F6F1EA;
  --ink:          #1A1410;
  --ink-50:       rgba(26,20,16,0.55);
  --white:        #ffffff;
  --muted:        #7d94b5;
  --muted-2:      #3d5070;
  --border:       rgba(255,255,255,0.07);
  --border-light: rgba(26,20,16,0.10);
  --radius:       18px;
  --radius-sm:    12px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--navy); color: var(--white);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }
img { display: block; }
a { text-decoration: none; color: inherit; }
strong { font-weight: 700; }

/* ── BACKGROUND ─────────────────────────────────── */
.bg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(100px); }
.o1 { width:700px; height:700px; background:radial-gradient(circle,rgba(255,122,89,.22) 0%,transparent 65%); top:-220px; right:-120px; animation:drift1 10s ease-in-out infinite; }
.o2 { width:600px; height:600px; background:radial-gradient(circle,rgba(14,27,58,.95) 0%,transparent 70%); bottom:0; left:-200px; animation:drift2 13s ease-in-out infinite; }
.o3 { width:450px; height:450px; background:radial-gradient(circle,rgba(255,122,89,.10) 0%,transparent 70%); top:60%; left:50%; animation:drift3 15s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,50px) scale(1.07)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-40px)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-25px) scale(1.05)} }
.grid-overlay { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 100%); }
.cursor-glow { position:fixed; width:380px; height:380px; border-radius:50%; pointer-events:none; z-index:1; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,122,89,.05) 0%,transparent 70%); transition:opacity .3s; }
nav,.hero,.marquee-wrap,.section,.solution-section,.proof-section,.stats-section,.cta-section,footer { position:relative; z-index:2; }

/* ── NAV ─────────────────────────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:1.2rem 0; background:var(--cream); border-bottom:1px solid var(--border-light); transition:all .3s ease; }
.nav.scrolled { background:var(--cream); backdrop-filter:none; padding:1rem 0; border-bottom:1px solid var(--border-light); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:.65rem; color:var(--navy); }
.logo-img { width:32px; height:32px; border-radius:8px; object-fit:cover; }
.logo-text { font-family:'Fraunces',Georgia,serif; font-size:1.55rem; font-weight:900; letter-spacing:-.7px; color:var(--navy); }
.ut { font-family:'Fraunces',Georgia,serif; font-weight:900; font-style:normal; }
.logo-sep { color:var(--muted-2); font-weight:300; margin:0 .1rem; }
.logo-product { font-size:1rem; font-weight:700; color:var(--orange); }
.logo-product-img { width:28px; height:28px; border-radius:8px; object-fit:cover; }

/* Hero product logo (ZapObra page) */
.hero-product-logo {
  width: 64px; height: 64px;
  border-radius: 16px;
  object-fit: cover;
  margin-bottom: 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* Product card logo */
.prod-logo {
  width: 52px; height: 52px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.nav-links { display:flex; align-items:center; gap:2.8rem; }
.nav-links a { color:var(--ink-50); font-size:.9rem; font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--navy); }
.nav-back { color:var(--ink-50) !important; font-size:.82rem !important; }
.nav-cta { background:var(--navy) !important; color:var(--white) !important; padding:.6rem 1.5rem; border-radius:8px; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem !important; margin-left:.8rem; transition:background .2s,box-shadow .2s,transform .2s !important; }
.nav-cta:hover { background:var(--navy-4) !important; transform:translateY(-1px); box-shadow:0 8px 24px rgba(14,27,58,.25) !important; }

/* ── HERO ────────────────────────────────────────── */
.hero { min-height:100vh; padding:9rem 0 5rem; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.badge { display:inline-flex; align-items:center; gap:.65rem; background:none; border:none; padding:0; border-radius:0; color:rgba(255,255,255,.42); font-size:.7rem; font-weight:400; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.8rem; margin-left:auto; margin-right:auto; }
.badge::before { content:''; display:block; width:28px; height:1.5px; background:var(--orange); border-radius:2px; flex-shrink:0; }
.badge-pulse { display:none; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }
.hero-title { font-family:'Playfair Display',Georgia,serif; font-size:clamp(3rem,5.5vw,5rem); font-weight:900; line-height:1.03; letter-spacing:-2px; margin-bottom:1.5rem; }
.hi { background:linear-gradient(120deg,var(--orange) 0%,var(--orange-2) 60%,#f5a070 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:1.05rem; color:var(--muted); line-height:1.75; margin-bottom:2.2rem; max-width:600px; margin-left:auto; margin-right:auto; text-align:center; }
.hero-btns { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero-proof { display:flex; align-items:center; justify-content:center; gap:.8rem; }
.proof-avatars { display:flex; }
.av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:800; border:2px solid var(--navy); margin-right:-8px; }
.proof-text { font-size:.8rem; color:var(--muted); font-weight:500; padding-left:8px; }

/* ── BUTTONS ─────────────────────────────────────── */
.btn-primary { display:inline-flex; align-items:center; gap:.6rem; background:var(--orange); color:var(--white); font-weight:700; font-size:.95rem; padding:.85rem 1.8rem; border-radius:10px; transition:background .2s,transform .2s,box-shadow .2s; box-shadow:0 4px 20px rgba(255,122,89,.22); }
.btn-primary:hover { background:var(--orange-2); transform:translateY(-2px); box-shadow:0 12px 36px rgba(255,122,89,.42); }
.btn-primary svg { transition:transform .2s; flex-shrink:0; }
.btn-primary:hover svg { transform:translateX(3px); }
.btn-primary.btn-xl { font-size:1.05rem; padding:1.05rem 2.3rem; border-radius:12px; }
.btn-ghost { display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); font-weight:600; font-size:.95rem; padding:.85rem 1.6rem; border-radius:10px; border:1px solid var(--border); transition:color .2s,border-color .2s,background .2s; }
.btn-ghost:hover { color:var(--white); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.btn-ghost.btn-sm { font-size:.82rem; padding:.55rem 1.1rem; }

/* ── HERO VISUAL — BEFORE/AFTER ─────────────────── */
.hero-visual-wrap { position:relative; display:flex; gap:1rem; align-items:stretch; }
.hv-card {
  flex:1; border-radius:var(--radius); padding:1.6rem;
  background:linear-gradient(var(--navy-3),var(--navy-3)) padding-box,
             linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03)) border-box;
  border:1px solid transparent;
}
.hv-card.hv-after {
  background:linear-gradient(rgba(255,122,89,.07),rgba(255,122,89,.03)) padding-box,
             linear-gradient(135deg,rgba(255,122,89,.4),rgba(255,122,89,.1)) border-box;
}
.hv-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); margin-bottom:1.1rem; }
.hv-label.after { color:var(--orange); }
.hv-items { display:flex; flex-direction:column; gap:.7rem; }
.hv-item { font-size:.82rem; display:flex; align-items:flex-start; gap:.5rem; line-height:1.4; }
.hv-item span { font-weight:800; flex-shrink:0; }
.hv-item.bad { color:var(--muted); }
.hv-item.bad span { color:#f87171; }
.hv-item.good { color:rgba(255,255,255,.85); }
.hv-item.good span { color:#34d399; }
.hv-arrow { display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:1.4rem; font-weight:900; flex-shrink:0; opacity:.7; }
.float-card { position:absolute; background:linear-gradient(var(--navy-4),var(--navy-4)) padding-box,linear-gradient(135deg,rgba(255,122,89,.3),rgba(255,255,255,.08)) border-box; border:1px solid transparent; border-radius:10px; padding:.65rem 1rem; font-size:.78rem; display:flex; align-items:center; gap:.5rem; box-shadow:0 8px 28px rgba(0,0,0,.45); white-space:nowrap; z-index:3; backdrop-filter:blur(12px); }
.fc1 { bottom:-18px; left:10px; animation:floatY 4s ease-in-out infinite; }
.fc2 { top:-18px; right:10px; animation:floatY 5s ease-in-out infinite .7s; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Phone mockup (ZapObra page) */
.phone-wrap { display:flex; justify-content:center; }
.phone { width:265px; background:#090f1c; border-radius:38px; padding:10px; box-shadow:0 0 0 1px rgba(255,255,255,.09),0 40px 80px rgba(0,0,0,.6),0 0 60px rgba(255,122,89,.1); }
.phone-notch { width:80px; height:22px; background:#090f1c; border-radius:0 0 14px 14px; margin:0 auto 5px; border:1px solid rgba(255,255,255,.07); border-top:none; }
.phone-screen { background:linear-gradient(160deg,#0f1e36 0%,#0d1829 100%); border-radius:30px; overflow:hidden; height:460px; display:flex; flex-direction:column; }
.chat-head { background:rgba(21,37,65,.9); border-bottom:1px solid var(--border); padding:.85rem 1rem; display:flex; align-items:center; gap:.7rem; }
.chat-av { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-2)); display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; flex-shrink:0; }
.chat-name { font-size:.72rem; font-weight:700; display:block; }
.chat-online { font-size:.62rem; color:#34d399; display:block; }
.chat-body { flex:1; padding:.9rem; display:flex; flex-direction:column; gap:.55rem; overflow:hidden; }
.msg { max-width:84%; padding:.55rem .85rem; border-radius:12px; font-size:.72rem; line-height:1.55; transition:opacity .45s,transform .45s; }
.msg.in { background:rgba(255,255,255,.07); border:1px solid var(--border); align-self:flex-start; border-radius:4px 12px 12px 12px; }
.msg.out { background:rgba(255,122,89,.14); border:1px solid rgba(255,122,89,.22); align-self:flex-end; border-radius:12px 4px 12px 12px; }
.msg.ai.detail { display:flex; flex-direction:column; gap:.05rem; }
.ai-label { display:block; background:var(--orange); color:#fff; font-size:.53rem; font-weight:800; padding:.08rem .32rem; border-radius:4px; margin-bottom:.35rem; width:fit-content; letter-spacing:.04em; }
.detail-line { display:block; font-size:.68rem; line-height:1.75; }
.muted-line { color:var(--muted); font-size:.62rem; margin-top:.15rem; }

/* ── MARQUEE ─────────────────────────────────────── */
.marquee-wrap { overflow:hidden; padding:1.4rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.018); }
.marquee-track { display:flex; white-space:nowrap; animation:marquee 28s linear infinite; width:max-content; }
.marquee-track span { font-size:.8rem; font-weight:600; color:var(--muted); padding:0 1.1rem; text-transform:uppercase; letter-spacing:.07em; }
.marquee-track .mx { color:var(--orange); opacity:.45; padding:0 .3rem; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── SECTIONS ────────────────────────────────────── */
.section { padding:7rem 0; }
.section-label { display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--orange); margin-bottom:1.1rem; }
.section-label::before { content:''; display:block; width:18px; height:2px; background:var(--orange); border-radius:2px; flex-shrink:0; }
.section-title { font-family:'Fraunces',Georgia,serif; font-size:clamp(2.4rem,5vw,5rem); font-weight:900; line-height:1.03; letter-spacing:-2.5px; margin-bottom:1.4rem; text-align:center; }
.section-sub { font-size:1.02rem; color:var(--muted); line-height:1.75; max-width:620px; margin:0 auto 3rem; text-align:center; }
.link-orange { color:var(--orange); font-weight:600; border-bottom:1px solid rgba(255,122,89,.3); transition:border-color .2s; }
.link-orange:hover { border-color:var(--orange); }

/* ── MANIFESTO / BELIEFS ─────────────────────────── */
.beliefs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.belief {
  background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,
             linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03),rgba(255,255,255,.08)) border-box;
  border:1px solid transparent; border-radius:var(--radius); padding:2rem;
  transition:transform .3s,box-shadow .3s;
}
.belief:hover { transform:translateY(-3px); box-shadow:0 18px 45px rgba(0,0,0,.4); }
.belief-num { font-size:.68rem; font-weight:800; color:var(--orange); letter-spacing:.12em; margin-bottom:1rem; }
.belief h3 { font-size:1rem; font-weight:800; letter-spacing:-.3px; margin-bottom:.65rem; }
.belief p { font-size:.88rem; color:var(--muted); line-height:1.68; }

/* ── MODELO ──────────────────────────────────────── */
.modelo-section { padding:7rem 0; }
.modelo-inner { display:block; }

.modelo-section .section-label { justify-content:flex-start; }
.modelo-section .section-title { text-align:left; }
.modelo-section .section-sub { text-align:left; margin-left:0; }
.modelo-diff { margin:1.5rem 0 0; max-width:100%; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); }
.md-row { display:grid; grid-template-columns:1fr 80px 80px; align-items:center; padding:.7rem 1rem; border-bottom:1px solid var(--border); font-size:.85rem; color:var(--muted); }
.md-row:last-child { border-bottom:none; }
.md-row.header { background:rgba(255,255,255,.03); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted-2); padding:.55rem 1rem; }
.md-col-label { text-align:center; font-weight:700; }
.md-col-label.hi-col { color:var(--orange); }
.md-no { text-align:center; color:#f87171; font-size:1rem; }
.md-yes { text-align:center; color:#34d399; font-size:1rem; font-weight:700; }

.modelo-steps { display:flex; flex-direction:column; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
.mstep { display:grid; grid-template-columns:52px 1fr; gap:1.5rem; align-items:start; padding:1.8rem 0; border-bottom:1px solid var(--border); }
.mstep:last-child { border-bottom:none; }
.mstep-num { font-size:.72rem; font-weight:800; color:var(--orange); letter-spacing:.06em; padding-top:.25rem; }
.mstep-body h3 { font-size:1.05rem; font-weight:700; letter-spacing:-.3px; margin-bottom:.45rem; }
.mstep-body p { font-size:.88rem; color:var(--muted); line-height:1.65; }
.mstep-line { display:none; }

/* ── PRODUCTS ────────────────────────────────────── */
.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:3rem; }
.prod-card { background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03)) border-box; border:1px solid transparent; border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; gap:.9rem; transition:transform .3s,box-shadow .3s; }
.prod-card:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.prod-card.featured { background:linear-gradient(rgba(255,122,89,.07),rgba(255,122,89,.03)) padding-box,linear-gradient(135deg,rgba(255,122,89,.5),rgba(255,122,89,.08),rgba(255,122,89,.25)) border-box; }
.prod-card.featured:hover { box-shadow:0 24px 60px rgba(255,122,89,.18); }
.prod-live { display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; font-weight:700; color:#0b9e6a; letter-spacing:.06em; text-transform:uppercase; background:rgba(11,158,106,.08); border:1px solid rgba(11,158,106,.2); border-radius:999px; padding:.22rem .75rem; }
.prod-soon { display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; font-weight:700; color:var(--muted-2); letter-spacing:.06em; text-transform:uppercase; background:rgba(26,20,16,.04); border:1px solid rgba(26,20,16,.1); border-radius:999px; padding:.22rem .75rem; }
.prod-cta-link { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); margin-top:auto; display:inline-block; transition:opacity .2s; }
.prod-cta-link:hover { opacity:.65; }
.prod-icon { font-size:2rem; }
.prod-name { font-size:1.5rem; font-weight:900; letter-spacing:-.5px; }
.prod-desc { font-size:.88rem; color:var(--muted); line-height:1.65; }
.prod-result { background:rgba(255,122,89,.07); border:1px solid rgba(255,122,89,.2); border-radius:var(--radius-sm); padding:.9rem; margin-top:auto; }
.prod-result .pr-num { display:block; font-size:1.6rem; font-weight:900; letter-spacing:-1px; color:var(--orange); line-height:1.1; margin-bottom:.3rem; }
.prod-result .pr-desc { font-size:.75rem; color:var(--muted); line-height:1.45; }
.products-note { text-align:center; font-size:.88rem; color:var(--muted); margin-top:2rem; }

/* ── DIFERENCIAIS ────────────────────────────────── */
.diff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.diff-card { background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)) border-box; border:1px solid transparent; border-radius:var(--radius); padding:1.8rem; transition:transform .3s,box-shadow .3s; }
.diff-card:hover { transform:translateY(-3px); box-shadow:0 18px 45px rgba(0,0,0,.4); }
.diff-icon { font-size:1.8rem; margin-bottom:.9rem; }
.diff-card h3 { font-size:.98rem; font-weight:800; letter-spacing:-.2px; margin-bottom:.55rem; }
.diff-card p { font-size:.86rem; color:var(--muted); line-height:1.65; }

/* ── PROBLEMA ────────────────────────────────────── */
.prob-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.prob-card { background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03),rgba(255,255,255,.07)) border-box; border:1px solid transparent; border-radius:var(--radius); padding:2rem; position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.prob-card:hover { transform:translateY(-3px); box-shadow:0 18px 45px rgba(0,0,0,.4); }
.prob-num { font-size:.68rem; font-weight:800; color:var(--muted-2); letter-spacing:.1em; margin-bottom:1.1rem; }
.prob-icon { font-size:1.8rem; margin-bottom:.9rem; }
.prob-card h3 { font-size:1rem; font-weight:800; letter-spacing:-.3px; margin-bottom:.6rem; }
.prob-card p { font-size:.88rem; color:var(--muted); line-height:1.65; }

/* ── BENTO GRID ──────────────────────────────────── */
.bento-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:1.2rem; margin-top:3.5rem; }
.bento-card { background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03),rgba(255,255,255,.07)) border-box; border:1px solid transparent; border-radius:var(--radius); padding:2rem; position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.bento-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 100% 0%,rgba(255,122,89,.06) 0%,transparent 55%); opacity:0; transition:opacity .3s; }
.bento-card:hover { transform:translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.4); }
.bento-card:hover::before { opacity:1; }
.bc-wide { grid-column:span 2; }
.bc-tall { grid-row:span 2; }
.bc-featured { background:linear-gradient(rgba(255,122,89,.08),rgba(255,122,89,.04)) padding-box,linear-gradient(135deg,rgba(255,122,89,.45),rgba(255,122,89,.1),rgba(255,122,89,.3)) border-box; }
.bc-accent { background:linear-gradient(var(--navy-3),var(--navy-3)) padding-box,linear-gradient(135deg,rgba(255,122,89,.35),rgba(255,255,255,.05)) border-box; }
.bc-tag { display:inline-block; background:var(--orange); color:#fff; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; padding:.2rem .6rem; border-radius:6px; margin-bottom:1rem; }
.bc-icon { font-size:1.8rem; margin-bottom:.9rem; }
.bento-card h3 { font-size:1.1rem; font-weight:800; letter-spacing:-.3px; margin-bottom:.6rem; }
.bento-card p { font-size:.88rem; color:var(--muted); line-height:1.65; }
.bc-chat-preview { margin-top:1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.bcp-msg { padding:.5rem .8rem; border-radius:10px; font-size:.75rem; line-height:1.5; max-width:85%; }
.bcp-msg.in { background:rgba(255,255,255,.07); border:1px solid var(--border); align-self:flex-start; border-radius:4px 10px 10px 10px; }
.bcp-msg.out { background:rgba(255,122,89,.15); border:1px solid rgba(255,122,89,.22); align-self:flex-end; border-radius:10px 4px 10px 10px; }
.bcp-badge { background:var(--orange); color:#fff; font-size:.55rem; font-weight:800; padding:.08rem .3rem; border-radius:4px; margin-right:.35rem; }
.bc-meter { margin-top:1.4rem; display:flex; flex-direction:column; gap:.85rem; }
.bcm-item { display:flex; align-items:center; gap:.6rem; font-size:.75rem; color:var(--muted); }
.bcm-item > span:first-child { width:80px; flex-shrink:0; }
.bcm-bar { flex:1; height:5px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.bcm-fill { height:100%; width:var(--w); background:var(--orange); border-radius:99px; }
.bcm-val { width:28px; text-align:right; font-weight:600; color:var(--white); font-size:.72rem; }

/* ── PROOF ───────────────────────────────────────── */
.proof-section { padding:2rem 0 5rem; }
.proof-card { background:linear-gradient(var(--navy-3),var(--navy-3)) padding-box,linear-gradient(135deg,rgba(255,122,89,.4),rgba(255,255,255,.06),rgba(255,122,89,.2)) border-box; border:1px solid transparent; border-radius:var(--radius); padding:3rem; position:relative; overflow:hidden; }
.proof-card::before { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,122,89,.07) 0%,transparent 70%); right:-60px; top:-60px; pointer-events:none; }
.proof-quote { font-size:5rem; font-weight:900; line-height:.8; color:var(--orange); opacity:.3; margin-bottom:.5rem; font-family:Georgia,serif; }
.proof-text-main { font-size:1.15rem; line-height:1.75; color:rgba(255,255,255,.88); max-width:680px; font-weight:400; margin-bottom:2rem; font-style:italic; }
.proof-author { display:flex; align-items:center; gap:1.5rem; border-top:1px solid var(--border); padding-top:1.5rem; flex-wrap:wrap; }
.proof-av { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-2)); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; flex-shrink:0; }
.proof-author > div strong { display:block; font-size:1rem; font-weight:800; }
.proof-author > div span { font-size:.82rem; color:var(--muted); }
.proof-result { margin-left:auto; text-align:right; }
.pr-num { display:block; font-size:1.8rem; font-weight:900; letter-spacing:-1px; color:var(--orange); }
.pr-label,.pr-desc { font-size:.75rem; color:var(--muted); max-width:160px; display:block; line-height:1.4; }

/* ── ICP ─────────────────────────────────────────── */
.icp-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; margin:3rem 0 1.5rem; }
.icp-card { background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)) border-box; border:1px solid transparent; border-radius:var(--radius-sm); padding:1.5rem 1rem; text-align:center; transition:transform .3s,box-shadow .3s; }
.icp-card:hover { transform:translateY(-3px); box-shadow:0 14px 35px rgba(0,0,0,.4); }
.icp-card span { font-size:1.8rem; display:block; margin-bottom:.6rem; }
.icp-card h3 { font-size:.82rem; font-weight:700; color:var(--muted); }
.icp-note { text-align:center; font-size:.9rem; color:var(--muted); }

/* ── PLANS ───────────────────────────────────────── */
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.plan-card { background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03)) border-box; border:1px solid transparent; border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; gap:1rem; transition:transform .3s,box-shadow .3s; }
.plan-card:hover { transform:translateY(-4px); box-shadow:0 24px 55px rgba(0,0,0,.4); }
.plan-card.featured { background:linear-gradient(rgba(255,122,89,.07),rgba(255,122,89,.03)) padding-box,linear-gradient(135deg,rgba(255,122,89,.5),rgba(255,122,89,.1),rgba(255,122,89,.3)) border-box; position:relative; }
.plan-badge { font-size:.68rem; font-weight:800; color:var(--orange); letter-spacing:.06em; text-transform:uppercase; }
.plan-card h3 { font-size:1.2rem; font-weight:800; letter-spacing:-.3px; }
.plan-price { font-size:2rem; font-weight:900; letter-spacing:-1px; line-height:1; }
.plan-price small { font-size:.9rem; font-weight:500; color:var(--muted); }
.plan-card ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.plan-card li { font-size:.86rem; color:var(--muted); }
.plan-card li:first-child { color:rgba(255,255,255,.8); font-weight:500; }
.plans-note { text-align:center; font-size:.82rem; color:var(--muted-2); margin-top:1.5rem; }

/* ── STATS ───────────────────────────────────────── */
.stats-section { padding:5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.012); }
.stats-grid { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.stat { text-align:center; flex:1; min-width:140px; }
.stat-top { display:flex; align-items:baseline; justify-content:center; gap:.1rem; margin-bottom:.45rem; }
.stat-num { font-size:clamp(2.6rem,4vw,3.8rem); font-weight:900; letter-spacing:-2px; line-height:1; background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.65) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-unit { font-size:clamp(1.1rem,2vw,1.5rem); font-weight:700; color:var(--orange); }
.stat-label { font-size:.8rem; color:var(--muted); line-height:1.4; }
.stat-sep { width:1px; height:56px; background:var(--border); flex-shrink:0; }

/* ── CTA ─────────────────────────────────────────── */
.cta-section { padding:8rem 0; text-align:center; position:relative; overflow:hidden; }
.cta-bg-glow { position:absolute; width:900px; height:900px; border-radius:50%; background:radial-gradient(circle,rgba(255,122,89,.07) 0%,transparent 65%); left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; }
.cta-inner { position:relative; z-index:1; }
.cta-title { font-family:'Fraunces',Georgia,serif; font-size:clamp(2.2rem,4vw,3.6rem); font-weight:900; line-height:1.08; letter-spacing:-1.5px; margin-bottom:1.4rem; }
.cta-sub { font-size:1.02rem; color:var(--muted); max-width:460px; margin:0 auto 1.5rem; line-height:1.75; }
.cta-urgency { display:inline-flex; align-items:center; gap:.7rem; background:rgba(255,122,89,.07); border:1px solid rgba(255,122,89,.2); border-radius:8px; padding:.7rem 1.2rem; font-size:.82rem; color:var(--muted); max-width:460px; margin:0 auto 2.5rem; line-height:1.5; }
.urgency-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; animation:pulse 2s ease-in-out infinite; }

/* ── FOOTER ──────────────────────────────────────── */
.footer { background:var(--cream); padding:1.8rem 0; border-top:1px solid var(--border-light); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-brand { display:flex; flex-direction:column; gap:.25rem; }
.footer-logo { display:flex; align-items:center; gap:.6rem; }
.footer-logo .logo-text { color:var(--navy); }
.footer-links { display:flex; gap:2rem; align-items:center; }
.footer-links a { font-size:.82rem; color:var(--ink-50); transition:color .2s; font-weight:500; }
.footer-links a:hover { color:var(--navy); }
.footer-tag { font-size:.76rem; color:var(--ink-50); }
.footer-copy { font-size:.74rem; color:var(--ink-50); white-space:nowrap; }

/* ── REVEAL ──────────────────────────────────────── */
.reveal,.reveal-right,.reveal-up { opacity:0; transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1); }
.reveal { transform:translateY(28px); }
.reveal-right { transform:translateX(44px); }
.reveal-up { transform:translateY(18px); }
.reveal.visible,.reveal-right.visible,.reveal-up.visible { opacity:1; transform:translate(0,0); }

.beliefs-grid .reveal:nth-child(2),.diff-grid .reveal:nth-child(2),.prob-grid .reveal:nth-child(2) { transition-delay:.1s; }
.beliefs-grid .reveal:nth-child(3),.diff-grid .reveal:nth-child(3),.prob-grid .reveal:nth-child(3) { transition-delay:.2s; }
.diff-grid .reveal:nth-child(4) { transition-delay:.1s; }
.diff-grid .reveal:nth-child(5) { transition-delay:.2s; }
.diff-grid .reveal:nth-child(6) { transition-delay:.3s; }
.bento-card:nth-child(2) { transition-delay:.1s; }
.bento-card:nth-child(3) { transition-delay:.18s; }
.bento-card:nth-child(4) { transition-delay:.26s; }
.bento-card:nth-child(5) { transition-delay:.34s; }
.prod-card:nth-child(2) { transition-delay:.14s; }
.prod-card:nth-child(3) { transition-delay:.28s; }
.plan-card:nth-child(2) { transition-delay:.14s; }
.plan-card:nth-child(3) { transition-delay:.28s; }
.icp-card:nth-child(2) { transition-delay:.06s; }
.icp-card:nth-child(3) { transition-delay:.12s; }
.icp-card:nth-child(4) { transition-delay:.18s; }
.icp-card:nth-child(5) { transition-delay:.24s; }
.icp-card:nth-child(6) { transition-delay:.3s; }
.fc1.reveal-up { transition-delay:.45s; }
.fc2.reveal-up { transition-delay:.6s; }

/* ══════════════════════════════════════════════════
   MOBILE NAV — hamburger + overlay
══════════════════════════════════════════════════ */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-right: -8px;
  z-index: 200;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: rgba(10,18,45,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
}
.nav-mobile.open { display: flex; }
.nm-link {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.5px;
  transition: color .2s;
}
.nm-link:hover { color: var(--orange); }
.nm-cta {
  margin-top: 1rem;
  font-size: 1rem !important;
  padding: 1rem 2.5rem !important;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Tablet 640–960px
══════════════════════════════════════════════════ */
@media (max-width: 960px) {
  /* nav */
  .nav-links { display: none; }
  .nav-burger { display: flex; }

  /* hero */
  .hero { padding: 8rem 0 4rem; min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-right { display: block; }
  .hero-title { font-size: clamp(2.6rem, 7vw, 4rem); }
  .hero-sub { max-width: 100%; }
  /* Before/after compact on tablet */
  .hero-visual-wrap { flex-direction: column; gap: .8rem; }
  .hv-arrow { transform: rotate(90deg); align-self: center; }
  .fc1, .fc2 { display: none; }

  /* grids → 2 col */
  .beliefs-grid { grid-template-columns: repeat(2, 1fr); }
  .diff-grid     { grid-template-columns: repeat(2, 1fr); }
  .prob-grid     { grid-template-columns: repeat(2, 1fr); }

  /* bento */
  .bento-grid    { grid-template-columns: repeat(2, 1fr); }
  .bc-wide       { grid-column: span 2; }
  .bc-tall       { grid-row: span 1; }

  /* products / plans */
  .plans-grid    { grid-template-columns: repeat(2, 1fr); }
  .plan-card.featured { grid-column: span 2; }

  /* icp */
  .icp-grid { grid-template-columns: repeat(3, 1fr); }

  /* modelo */
  .mstep { grid-template-columns: 44px 1fr; gap: 1rem; }
  .modelo-diff { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* stats */
  .stats-grid { flex-direction: column; gap: 2.5rem; text-align: center; }
  .stat-sep   { width: 80px; height: 1px; }

  /* proof */
  .proof-result { margin-left: 0; }
  .proof-author { flex-wrap: wrap; }

  /* solution */
  .solution-inner { grid-template-columns: 1fr; gap: 3rem; }
  .sol-text { order: 2; }
  .sol-visual { order: 1; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Mobile 480–640px
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .container { padding: 0 1.25rem; }
  .section   { padding: 4rem 0; }

  /* hero */
  .hero { padding: 7.5rem 0 3rem; }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); letter-spacing: -1.5px; }
  .hero-btns  { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { justify-content: center; width: 100%; }
  .hero-proof { flex-direction: column; align-items: flex-start; gap: .6rem; }

  /* grids → 1 col */
  .beliefs-grid,
  .diff-grid,
  .prob-grid  { grid-template-columns: 1fr; }

  /* bento → 1 col */
  .bento-grid { grid-template-columns: 1fr; }
  .bc-wide    { grid-column: span 1; }
  .bc-tall    { grid-row: span 1; }

  /* products */
  .products-grid { grid-template-columns: 1fr; }
  .prod-card.featured { grid-column: span 1; }

  /* plans → 1 col */
  .plans-grid { grid-template-columns: 1fr; }
  .plan-card.featured { grid-column: span 1; }

  /* icp */
  .icp-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .icp-card { padding: 1.1rem .7rem; }
  .icp-card span { font-size: 1.5rem; }
  .icp-card h3 { font-size: .75rem; }

  /* section titles */
  .section-title { font-size: clamp(1.7rem, 7vw, 2.4rem); letter-spacing: -1px; }
  .cta-title     { font-size: clamp(1.8rem, 7vw, 2.8rem); letter-spacing: -1px; }

  /* proof card */
  .proof-card    { padding: 1.6rem; }
  .proof-text-main { font-size: 1rem; }
  .proof-author  { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .proof-result  { text-align: left; }
  .pr-label      { max-width: 100%; }

  /* modelo diff table */
  .md-row { font-size: .78rem; padding: .6rem .8rem; }
  .md-row .md-col-label { font-size: .65rem; }

  /* stats */
  .stat-num { font-size: 2.8rem; }

  /* cta urgency */
  .cta-urgency { text-align: left; flex-direction: column; align-items: flex-start; }

  /* before/after card */
  .hero-ba { padding: 1.4rem; margin-top: 2rem; }
  .ba-cols { grid-template-columns: 1fr; gap: 1.4rem 0; }
  .ba-col-sep { display: none; }

  /* nav mobile menu font */
  .nm-link { font-size: 1.3rem; }

  /* float cards — always hidden on mobile */
  .fc1, .fc2 { display: none !important; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Small Mobile <380px
══════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .container { padding: 0 1rem; }
  .hero-title { font-size: 2rem; }
  .icp-grid   { grid-template-columns: repeat(2, 1fr); }
  .badge      { font-size: .7rem; }
  .bento-card { padding: 1.4rem; }
  .belief, .diff-card, .prob-card { padding: 1.5rem; }
  .proof-card { padding: 1.3rem; }
  .plan-card  { padding: 1.5rem; }
  .prod-card  { padding: 1.5rem; }
}

/* ── HERO CONTENT (index) ────────────────────────── */
.hero-content { max-width: 900px; margin: 0 auto; text-align: center; }

/* ── BEFORE / AFTER CARD ─────────────────────────── */
.hero-ba {
  margin-top: 3.5rem;
  background: linear-gradient(var(--navy-2),var(--navy-2)) padding-box,
              linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 2rem;
}
.ba-header { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); margin-bottom:1.5rem; }
.ba-cols { display:grid; grid-template-columns:1fr 1px 1fr; gap:0 2rem; align-items:start; }
.ba-col-sep { background:var(--border); }
.ba-col-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); margin-bottom:.8rem; }
.ba-col-label.ba-col-good { color:var(--orange); }
.ba-divider { height:1px; background:var(--border); margin-bottom:1rem; }
.ba-items { display:flex; flex-direction:column; gap:.65rem; }
.ba-item { font-size:.85rem; display:flex; align-items:flex-start; gap:.5rem; color:var(--muted); }
.ba-bad span { color:#f87171; font-weight:800; flex-shrink:0; }
.ba-good { color:rgba(255,255,255,.85); }
.ba-good span { color:#34d399; font-weight:800; flex-shrink:0; }

/* ── STATS CORAL ─────────────────────────────────── */
.stats-coral {
  background: var(--orange);
  border-top: none;
  border-bottom: none;
}
.stats-coral .stat-num {
  background: none;
  -webkit-text-fill-color: var(--white);
  color: var(--white);
}
.stats-coral .stat-unit  { color: var(--white); }
.stats-coral .stat-label { color: rgba(255,255,255,.85); }
.stats-coral .stat-sep   { background: rgba(255,255,255,.25); }

/* ══════════════════════════════════════════════════
   CREAM SECTIONS — light background overrides
══════════════════════════════════════════════════ */
.section-cream {
  background: var(--cream);
}
.section-cream .section-label { color: var(--orange); }
.section-cream .section-title { color: var(--ink); }
.section-cream .section-title .hi {
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-cream .section-sub   { color: var(--ink-50); }
.section-cream .products-note { color: var(--ink-50); }
.section-cream .link-orange   { color: var(--orange); border-bottom-color: rgba(255,122,89,.3); }

/* Cards on cream */
.section-cream .belief,
.section-cream .diff-card,
.section-cream .prod-card {
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,rgba(26,20,16,.13),rgba(26,20,16,.04)) border-box;
}
.section-cream .belief:hover,
.section-cream .diff-card:hover,
.section-cream .prod-card:hover { box-shadow: 0 18px 45px rgba(26,20,16,.10); }

.section-cream .belief h3,
.section-cream .diff-card h3    { color: var(--ink); }
.section-cream .belief p,
.section-cream .diff-card p     { color: var(--ink-50); }
.section-cream .belief-num      { color: var(--orange); }

.section-cream .prod-name       { color: var(--ink); }
.section-cream .prod-desc       { color: var(--ink-50); }
.section-cream .prod-live       { color: #0b9e6a; }
.section-cream .prod-soon       { color: rgba(26,20,16,.35); }

.section-cream .prod-card.featured {
  background: rgba(255,122,89,.06);
  border: 1px solid rgba(255,122,89,.22);
}
.section-cream .prod-card.featured:hover { box-shadow: 0 24px 60px rgba(255,122,89,.16); }
.section-cream .prod-result { background: rgba(255,122,89,.08); border-color: rgba(255,122,89,.22); }
.section-cream .prod-result .pr-num { color: var(--orange); }
.section-cream .prod-result .pr-desc { color: var(--ink-50); }

/* Stats on cream */
.stats-cream {
  background: var(--cream);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.stats-cream .stat-num {
  background: linear-gradient(135deg, var(--ink) 0%, rgba(26,20,16,.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stats-cream .stat-unit  { color: var(--orange); }
.stats-cream .stat-label { color: var(--ink-50); }
.stats-cream .stat-sep   { background: var(--border-light); }