/* AITIZER home "mix" (out/2026): a home de capítulos com a cara da v2.
   Carregado DEPOIS de site-new.css. Fonte Geist em tudo; nav clara; seções marcadas
   com .lt viram claras redefinindo as variáveis de cor só dentro delas — o palco das
   cenas (.scene-wrap) continua escuro, como uma tela do produto sobre papel branco.
   Regras do iPhone: nada de backdrop-filter/filter em camada grande nova. */

@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/Geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/Geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --grad-ink: linear-gradient(100deg, #7c3aed 0%, #c026d3 45%, #ec4899 70%, #f59e0b 100%);
}
h1, h2, h3, .hl, .ch-b-title { font-weight: 800; letter-spacing: -0.035em; }

/* ---------- nav clara (sem blur): o HTML marca .nav e .mobnav com .lt ---------- */
.nav.lt, .nav.lt.stuck {
  background: rgba(251, 250, 248, 0.95);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(15, 12, 30, 0.08);
}
.nav.lt .lockup { background-image: url("../brand/logo-full-dark.png"); }
.nav.lt .nav-item:hover, .nav.lt .nav-item.here { background: rgba(15, 12, 30, 0.05); }
.nav.lt .nav-pill { background: rgba(15, 12, 30, 0.06); }
.nav.lt .ghost { color: #0d0c12; border-color: rgba(15, 12, 30, 0.14); background: #fff; }
.nav.lt .btn-sm { background: #0d0c12; color: #fff; }
.nav.lt .mega, .mobnav.lt { background: #fff; color: #0d0c12; border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.lt .burger span, .nav.lt .burger i { background: #0d0c12; }

/* ---------- seções claras ---------- */
.lt {
  --bg: #fbfaf8; --bg-2: #f4f2f7; --panel: #ffffff; --raised: #f6f4fa;
  --line: #e7e3ee; --line-2: #ddd8e6;
  --text: #0d0c12; --muted: #4e4b5a; --dim: #6b6878;
  --violet-soft: #6d28d9;
  background: var(--bg);
  color: var(--text);
}
.lt .grad-text { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lt .eyebrow { color: #6d28d9; }
.lt .ch-b-k { color: #6d28d9; border-color: rgba(109, 40, 217, .25); background: #f1ebfe; }
.lt .card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15, 12, 30, .02), 0 10px 30px -18px rgba(15, 12, 30, .18);
}
.lt .card:hover { border-color: #d6cdea; }
.lt .card p, .lt .lede, .lt p { color: var(--muted); }
.lt .card h3 { color: var(--text); }
.lt .card .ci { background: #f1ebfe; color: #6d28d9; border-color: #e4daf9; }
.lt .card .ck { color: #a9a3b8; }
.lt .scene-next .nx { background: #fff; color: #0d0c12; border-color: var(--line); }
.lt .s-chip { background: rgba(255, 255, 255, .9); color: #3f3d4a; border-color: var(--line); }
.lt .s-chip:hover { color: #0d0c12; border-color: #cfc8de; }

/* banner do capítulo: papel claro com um brilho, sem o desenho escuro */
.lt .ch-banner { background: radial-gradient(60% 90% at 50% 100%, rgba(124, 58, 237, .14), transparent 70%), #fbfaf8; }
.lt .ch-bg { opacity: .08; }
.lt .ch-veil { background: linear-gradient(180deg, rgba(251, 250, 248, .2), #fbfaf8 92%); }
.lt .ch-b-title { color: #0d0c12; text-shadow: none; }

/* o palco das cenas continua ESCURO: é a tela do produto */
.lt .scene-wrap {
  --bg: #08080c; --bg-2: #0b0b0f; --panel: #141419; --raised: #1b1b22;
  --line: #26262e; --line-2: #2c2c36; --text: #f4f4f6; --muted: #a2a2b0; --dim: #8a8a97;
  --violet-soft: #d8bcff;
  background: #0b0b10;
  color: var(--text);
  border-radius: 22px;
  box-shadow: 0 40px 90px -40px rgba(30, 16, 70, .55), 0 0 0 1px rgba(15, 12, 30, .06);
}

/* ---------- hero claro (estilo v2) ---------- */
.hero.lt { background: #fbfaf8; }
.hero.lt .hero-mesh { display: none; }
.hero.lt .hero-bg {
  background:
    radial-gradient(46% 40% at 18% 58%, rgba(124, 58, 237, .26), transparent 72%),
    radial-gradient(40% 36% at 50% 70%, rgba(236, 72, 153, .22), transparent 72%),
    radial-gradient(44% 40% at 82% 58%, rgba(6, 182, 212, .22), transparent 72%),
    radial-gradient(34% 26% at 66% 80%, rgba(245, 158, 11, .16), transparent 72%);
}
.hero.lt h1 { font-size: clamp(40px, 6.4vw, 86px); line-height: .98; letter-spacing: -0.045em; font-weight: 800; color: #0d0c12; }
.hero.lt .eyebrow { display: none; }
.hero.lt .composer-wrap { width: min(760px, 94vw); }
.hero.lt .composer { background: #fff; box-shadow: 0 30px 80px -20px rgba(76, 29, 149, .28), 0 12px 30px -12px rgba(15, 12, 30, .16); }
.hero.lt .composer textarea { color: #0d0c12; font-size: 18px; }
.hero.lt .composer textarea::placeholder { color: #9a96a8; }
.hero.lt .c-model { background: #faf9fc; color: #3f3d4a; border-color: var(--line); }
.hero.lt .cbtn { color: #6b6878; }
.hero.lt .send { background: #0d0c12; }
.hero.lt .btn-secondary { background: #fff; color: #0d0c12; border-color: var(--line); }
.hero.lt .fine { color: #6b6878; }
.hero.lt .scroll-cue { color: #8a8698; }
.hero.lt .c-menu { background: #fff; color: #0d0c12; border-color: var(--line); }

@media (max-width: 760px) {
  .hero.lt h1 { font-size: clamp(38px, 11vw, 52px); }
  .hero.lt .composer textarea { font-size: 16px; } /* iPhone: sem zoom no foco */
}
.nav.lt .burger { background: #fff; border-color: rgba(15, 12, 30, 0.14); }
.mobnav.lt { background: #fbfaf8; }

/* menu: links numa cápsula branca centralizada, seletor de idioma e botões à direita */
@media (min-width: 861px) {
  .nav.lt { gap: 14px; }
  .nav.lt .links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 12, 30, .09); box-shadow: 0 6px 20px -12px rgba(15, 12, 30, .25); }
  .nav.lt .nav-item { height: 36px; padding: 0 15px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: #3f3d4a; display: inline-flex; align-items: center; gap: 5px; }
  .nav.lt .nav-item:hover, .nav.lt .nav-item[aria-expanded="true"] { background: #f2eff8; color: #0d0c12; }
  .nav.lt .nav-pill { display: none; }
  .nav.lt .ghost { height: 38px; border-radius: 999px; padding: 0 16px; }
  .nav.lt .btn-sm { height: 40px; border-radius: 999px; padding: 0 18px; }
  .nav.lt .lang-sel > summary { background: #fff; border-color: rgba(15, 12, 30, .12); }
}
.mobnav.lt a { color: #0d0c12; }


/* ── Hero: botão Google (CTA principal) ── */
.btn-google { background: #fff; color: #111118; border: 1px solid #e4e0ec; gap: 10px; box-shadow: 0 1px 2px rgba(20,10,40,.06), 0 10px 30px -14px rgba(124,58,237,.35); }
.btn-google svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-google:hover { transform: translateY(-1px); border-color: #c9bfe3; box-shadow: 0 2px 4px rgba(20,10,40,.08), 0 16px 34px -14px rgba(124,58,237,.45); }
.hero .fine { font-family: var(--font-ui); font-size: 13.5px; letter-spacing: 0; color: var(--muted); }
.hero .scroll-cue { display: none; }
.p-meta { display: none; }

/* ── "Everything your software needs": ícones 3D + varredura neon no hover ── */
@property --ov-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ov-card { position: relative; isolation: isolate; overflow: hidden; align-items: flex-start; gap: 10px; padding: 20px 18px 22px; border-radius: 18px; }
.lt .ov-card { background: #fff; border-color: #ebe7f3; box-shadow: 0 1px 2px rgba(20,10,40,.04); }
.lt .ov-card:hover { background: #fff; border-color: transparent; transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(124,58,237,.35); }
.ov-ic3d { width: 68px; height: 68px; object-fit: contain; margin-bottom: 2px; filter: drop-shadow(0 12px 18px rgba(124,58,237,.22)); transition: transform .55s cubic-bezier(.22,1,.36,1), filter .4s ease; }
.ov-card:hover .ov-ic3d { transform: translateY(-5px) rotate(-4deg) scale(1.07); filter: drop-shadow(0 18px 26px rgba(168,85,247,.38)); }
.ov-glow { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; opacity: 0; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--ov-a), transparent 0 62%, #a855f7 76%, #ec4899 86%, #22d3ee 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .4s ease; }
.ov-card:hover .ov-glow { opacity: 1; animation: ovSweep 3.6s linear infinite; }
@keyframes ovSweep { to { --ov-a: 360deg; } }
.ov-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(120px 90px at 22% 18%, rgba(168,85,247,.14), transparent 70%); }
.ov-card:hover::after { opacity: 1; }
.ov-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: clamp(26px, 4vh, 42px); }
.ov-cta span { font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ov-card:hover .ov-glow { animation: none; } .ov-card:hover .ov-ic3d { transform: none; } }
@media (max-width: 767px) { .ov-ic3d { width: 54px; height: 54px; } .ov-card { padding: 16px 14px 18px; } }

/* Hero: no celular o composer era 94vw, mais largo que a coluna do hero (100% menos o padding),
   e empurrava todo o bloco ~16px para a direita. */
.hero.lt .composer-wrap { width: min(760px, 100%); }
.hero.lt .hero-sub { margin: -4px auto 0; max-width: 620px; font-family: var(--font-ui); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; color: #4b4858; }

/* Hero: 200 credits free, como uma linha de destaque (sem caixa, sem dot) */
.c-free { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 12px auto 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.3; color: #5a576a; }
.c-free b { font-family: var(--font-display, var(--font-ui)); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-free-ico { width: 24px; height: 24px; flex: 0 0 auto; animation: c-free-spin 6s linear infinite; }
@keyframes c-free-spin { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(12deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .c-free-ico { animation: none; } }
@media (max-width: 760px) { .c-free { font-size: 14px; } .c-free b { font-size: 20px; } .hero.lt .hero-sub { font-size: 15.5px; padding: 0 6px; } }

/* Navegador interno do Facebook/Instagram (html.in-app): sem Google, e-mail vira o botão principal */
.inapp-tip { display: none; margin: 10px auto 0; max-width: 520px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: #6b6878; text-align: center; }
.in-app .btn-google { display: none !important; }
.in-app .hero .btn-secondary { background: #0d0c12; color: #fff; border-color: #0d0c12; }
.in-app .inapp-tip { display: block; }

/* ── Built with AITIZER: galeria de apps reais, logo depois do hero ── */
.showcase { padding: clamp(56px, 8vh, 96px) 5vw; background: #fbfaf8; border-top: 1px solid var(--line); }
.sc-wrap { max-width: 1180px; margin: 0 auto; }
.sc-intro { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.sc-intro h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1.05; margin: 10px 0 12px; color: #0d0c12; }
.sc-lede { font-family: var(--font-ui); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: #4e4b5a; margin: 0; }
/* carrossel arrastável: scroll-snap + arrasto por ponteiro (JS), setas e pontos */
.sc-track { position: relative; margin: 0 -5vw; padding: 8px 5vw 12px; }
.sc-grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px 18px; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; }
.sc-grid::-webkit-scrollbar { display: none; }
.sc-grid.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.sc-grid .sc-card { flex: 0 0 min(352px, 82vw); scroll-snap-align: start; }
.sc-grid.dragging .sc-card { pointer-events: none; }
.sc-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.sc-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #0d0c12; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sc-arrow:hover { transform: translateY(-2px); border-color: rgba(124,58,237,.45); box-shadow: 0 14px 30px -18px rgba(76,29,149,.5); }
.sc-arrow svg { width: 18px; height: 18px; }
.sc-dots { display: flex; gap: 6px; }
.sc-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: #d9d6e2; padding: 0; cursor: pointer; transition: width .3s ease, background .3s ease; }
.sc-dots button.on { width: 26px; background: #7c3aed; }
.sc-track::before, .sc-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5vw; pointer-events: none; z-index: 2; }
.sc-track::before { left: 0; background: linear-gradient(90deg, #fbfaf8, rgba(251,250,248,0)); }
.sc-track::after { right: 0; background: linear-gradient(270deg, #fbfaf8, rgba(251,250,248,0)); }
.sc-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .3s ease; }
.sc-card:hover { transform: translateY(-4px); border-color: rgba(124, 58, 237, .35); box-shadow: 0 30px 60px -30px rgba(76, 29, 149, .35); }
.sc-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f2f7; border-bottom: 1px solid var(--line); }
.sc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.sc-card:hover .sc-shot img { transform: scale(1.03); }
.sc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sc-head b { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.02em; color: #0d0c12; }
.sc-kind { font-family: var(--font-ui); font-size: 12.5px; color: #6b6878; }
.sc-body p { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: #4e4b5a; }
.sc-prompt { margin: 2px 0 0; padding: 10px 12px; border-left: 3px solid #7c3aed; background: #f6f3fc; border-radius: 0 10px 10px 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: #3f3d4a; }
.sc-prompt::before { content: "Prompt: "; font-weight: 600; color: #6d28d9; }
.sc-actions { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.sc-actions .btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
@media (max-width: 640px) { .showcase { padding: 48px 5vw; } .sc-grid { gap: 14px; } .sc-grid .sc-card { flex-basis: 84vw; } }