/* Gênese Studio (genese.html): página de produto do app desktop.
   Herda tokens, tipografia, nav e rodapé de styles.css; tudo aqui é prefixado .gs. */

/* ---- Hero: noite azul com o app subindo da base ---- */
.gs-hero { min-height:auto; display:block; overflow:visible; padding-bottom:clamp(64px,7vw,104px); padding-top:clamp(116px, 12vw, 160px); background:#05060b; color:#fff; }
.gs-hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 46% at 50% 0%, rgba(74,95,224,.42), transparent 70%),
    radial-gradient(38% 30% at 82% 38%, rgba(0,212,255,.16), transparent 72%),
    radial-gradient(44% 34% at 14% 52%, rgba(74,95,224,.18), transparent 72%),
    linear-gradient(180deg, #05060b 0%, #070a16 58%, #0b1024 100%); }
.gs-hero-bg::after { content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); }
.gs-hero-in { margin-inline:auto; text-align:center; }
.gs-eyebrow-d { color:rgba(255,255,255,.62); }
.gs-meta { font-size:.82rem; color:rgba(255,255,255,.55); margin-top:18px; letter-spacing:.01em; }
.gs-apple { margin-top:-2px; }
.gs-dl { gap:.6em; }

/* Screenshot com moldura de janela: sobe da noite e encosta no branco */
.gs-shot { position:relative; margin:0; border-radius:clamp(10px,1.2vw,16px); overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(20,22,34,.10), 0 30px 80px -28px rgba(20,22,34,.45), 0 8px 24px -10px rgba(20,22,34,.18); }
.gs-shot img { width:100%; height:auto; }
.gs-shot--hero { position:relative; z-index:2; width:min(1000px, calc(100% - 2 * var(--gut))); margin:clamp(40px,4.4vw,60px) auto 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 -20px 120px -30px rgba(74,95,224,.55), 0 40px 90px -50px rgba(0,0,0,.5); }

/* ---- Seções ---- */
.gs-max { max-width:20ch; }
.gs-tight-top { padding-top:0; }
.gs-band { background:#f6f7fa; }

.gs-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.gs-card { padding:clamp(24px,2.6vw,38px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg);
  transition:background .3s var(--e); }
.gs-card:hover { background:#f6f7fa; }
.gs-num { font-family:var(--mono); font-size:.78rem; color:var(--brand-a); letter-spacing:.04em; }
.gs-card h3 { font-size:clamp(1.2rem,1.6vw,1.45rem); letter-spacing:-0.02em; margin-top:clamp(28px,3.4vw,52px); }
.gs-card p { color:var(--ink-2); margin-top:10px; font-size:.98rem; max-width:40ch; }
@media (max-width:980px){ .gs-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .gs-grid{ grid-template-columns:1fr; } }

.gs-list { list-style:none; display:grid; gap:12px; }
.gs-list li { position:relative; padding-left:26px; color:var(--ink-2); }
.gs-list li::before { content:""; position:absolute; left:0; top:.5em; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--brand-a); border-bottom-color:var(--brand-b); }

.gs-steps { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px,2.4vw,32px); counter-reset:none; }
.gs-steps li { display:grid; gap:20px; align-content:start; padding-top:22px; border-top:1px solid var(--ink); }
.gs-step { font-size:clamp(3.4rem,6vw,5.5rem); line-height:.8; letter-spacing:-0.05em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gs-steps h3 { font-size:clamp(1.2rem,1.6vw,1.45rem); letter-spacing:-0.02em; }
.gs-steps p { color:var(--ink-2); margin-top:8px; max-width:38ch; }
@media (max-width:820px){ .gs-steps{ grid-template-columns:1fr; } }

.gs-two { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,6vw,96px); align-items:start; }
@media (max-width:860px){ .gs-two{ grid-template-columns:1fr; } }
.gs-req { display:grid; border-top:1px solid var(--line); }
.gs-req > div { display:grid; grid-template-columns:120px 1fr; gap:16px; padding-block:16px; border-bottom:1px solid var(--line); }
.gs-req dt { color:var(--ink-3); font-size:.9rem; }
.gs-req dd { color:var(--ink); }
@media (max-width:420px){ .gs-req > div{ grid-template-columns:1fr; gap:4px; } }

.gs-faq { border-top:1px solid var(--line); }
.gs-faq details { border-bottom:1px solid var(--line); }
.gs-faq summary { list-style:none; cursor:pointer; padding-block:18px; display:flex; justify-content:space-between; gap:16px;
  font-size:1.05rem; letter-spacing:-0.01em; }
.gs-faq summary::-webkit-details-marker { display:none; }
.gs-faq summary::after { content:"+"; color:var(--ink-3); font-size:1.3rem; line-height:1; transition:transform .25s var(--e); }
.gs-faq details[open] summary::after { transform:rotate(45deg); }
.gs-faq p { color:var(--ink-2); padding-bottom:20px; max-width:58ch; }

/* ---- CTA final escuro ---- */
.gs-final { position:relative; overflow:hidden; background:#05060b; color:#fff; padding-block:clamp(96px,11vw,168px); }
.gs-final-bg { position:absolute; inset:0; background:radial-gradient(50% 60% at 50% 100%, rgba(74,95,224,.45), transparent 72%), radial-gradient(30% 40% at 50% 100%, rgba(0,212,255,.22), transparent 70%); }
.gs-final-in { position:relative; z-index:1; }
.gs-final-mark { margin-inline:auto; }
.gs-final h2 { color:#f2f2f2; }
.gs-final .btn-solid { background:#fff; color:var(--ink); border-color:#fff; }

@media (max-width:820px){ .gs .split > .gs-shot { order:2; } }

/* ---- Treinamento local: seção de destaque (escura) ---- */
.gs-train { position:relative; overflow:hidden; background:#05060b; color:#fff; padding-block:clamp(96px,10vw,160px); }
.gs-train-bg { position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 40% at 18% 0%, rgba(74,95,224,.40), transparent 70%),
    radial-gradient(40% 30% at 92% 40%, rgba(0,212,255,.14), transparent 72%),
    linear-gradient(180deg, #05060b, #080b18); }
.gs-train-in { position:relative; z-index:1; }
.gs-train h2 { color:#f2f2f2; max-width:22ch; }
.gs-dim { color:rgba(255,255,255,.42); }
.gs-train-lede { color:rgba(255,255,255,.74); font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.5; max-width:56ch; }
.gs-flow { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.gs-flow li { padding-top:20px; border-top:1px solid rgba(255,255,255,.18); position:relative; }
.gs-flow li::before { content:""; position:absolute; top:-1px; left:0; width:44px; height:1px; background:var(--grad); background:linear-gradient(90deg,var(--brand-a),var(--brand-b)); }
.gs-flow-n { font-family:var(--mono); font-size:.78rem; color:#7f95ff; letter-spacing:.04em; }
.gs-flow h3 { font-size:clamp(1.15rem,1.5vw,1.35rem); letter-spacing:-0.02em; margin-top:14px; color:#fff; }
.gs-flow p { color:rgba(255,255,255,.66); margin-top:8px; font-size:.96rem; }
@media (max-width:980px){ .gs-flow{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .gs-flow{ grid-template-columns:1fr; } }
.gs-why { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; }
.gs-why > div { background:#080b18; padding:clamp(22px,2.4vw,34px); }
.gs-why h3 { font-size:1.15rem; letter-spacing:-0.015em; color:#fff; }
.gs-why p { color:rgba(255,255,255,.62); margin-top:8px; font-size:.95rem; }
@media (max-width:820px){ .gs-why{ grid-template-columns:1fr; } }

/* cartão de recurso em destaque, que leva à seção de treino */
.gs-card--hl { display:block; color:inherit; background:linear-gradient(180deg, rgba(74,95,224,.07), rgba(0,212,255,.04)); }
.gs-card--hl:hover { background:linear-gradient(180deg, rgba(74,95,224,.12), rgba(0,212,255,.07)); }
.gs-card--hl h3 { color:var(--brand-a); }
.gs-card-go { display:inline-flex; gap:.4em; margin-top:16px; font-size:.92rem; color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:2px; }