/* ============================================================ TOKENS, fonte única de verdade (espelha doc 27b) ============================================================ */ :root { --bg: #0a0e14; --bg-card: #151b26; --bg-card-2: #1b2230; --line: #232c3d; --accent: #22c55e; --accent-dim:#16a34a; --text: #e6edf3; --text-dim: #93a1b4; --text-mut: #6b7a8f; --danger: #f87171; --reading: 760px; --font-display: 'Clash Display', 'Geist', system-ui, sans-serif; --font-body: 'Geist', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; /* movimento */ --dur-fast: .4s; --dur-base: .6s; --dur-slow: .9s; --ease-out: cubic-bezier(.16,1,.3,1); /* ~power3.out */ --reveal-y: 32px; /* scrim do nav/sticky, muda por tema */ --scrim-rgb: 10,14,20; } /* TEMA segue o DISPOSITIVO do usuário (sem botão). Dark é o default; claro entra automático só se o aparelho do usuário estiver em modo claro. */ @media (prefers-color-scheme: light) { :root { --bg: #e9efeb; --bg-card: #ffffff; --bg-card-2: #eef3f0; --line: #c6d5cc; --accent: #22c55e; /* verde padrão do app, mantido */ --accent-dim:#16a34a; --text: #0e1a14; --text-dim: #46524a; --text-mut: #6f7d72; --scrim-rgb: 245,248,246; } /* atmosfera CLARA: sem o vignette escuro do dark; só um tint verde suave */ body { background-image: radial-gradient(1100px 720px at 82% -6%, rgba(34,197,94,.12), transparent 62%), radial-gradient(820px 600px at 6% 4%, rgba(34,197,94,.06), transparent 58%); } /* cards precisam de elevação no claro, senão somem no fundo quase branco */ .pillar, .product, .sim-card, .faq details, .trust-item, .sec-item, .compare-col, .stat, .dor, .support, .legal-example { box-shadow: 0 8px 24px -10px rgba(15,40,25,.16); } } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; font-size:17px; letter-spacing:-.01em; overflow-x:hidden; /* Atmosfera: mesh radial + vignette. Profundidade de LUZ, não de cor. */ background-image: radial-gradient(1100px 720px at 82% -8%, rgba(34,197,94,.15), transparent 60%), radial-gradient(820px 600px at 6% 5%, rgba(34,197,94,.07), transparent 55%), radial-gradient(1000px 800px at 50% 116%, rgba(34,197,94,.05), transparent 60%), radial-gradient(150% 130% at 50% 28%, transparent 52%, rgba(0,0,0,.5) 100%); background-attachment:fixed; } /* grão estático (não anima, barato) */ body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap { max-width:var(--reading); margin:0 auto; padding:0 24px; position:relative; z-index:2; } section { position:relative; z-index:2; } /* ---------- tipografia ---------- */ h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.0; letter-spacing:-.04em; } h1 { font-size:clamp(2.7rem, 7.5vw, 4.7rem); line-height:.96; } h2 { font-size:clamp(2.25rem, 6vw, 3.4rem); } .eyebrow { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); font-weight:500; } .lead { color:var(--text-dim); font-size:clamp(1.1rem,2.6vw,1.34rem); line-height:1.55; max-width:46ch; } .num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } /* ---------- nav ---------- */ /* #nav (NÃO "nav" genérico, senão a regra vaza pro