/*
 * Método 4D — Componentes
 * Depende de tokens.css. Nenhum valor bruto aqui: tudo sai de var().
 *
 * Os nomes de classe são os mesmos da apresentação, de propósito — o deck
 * pode passar a consumir estes arquivos sem reescrever o HTML.
 *
 * Blocos:
 *   1. Base          6. Jornada e listas    11. Ícones (Material Symbols)
 *   2. Ambiente      7. Fases (os quatro D) 12. Fotografia
 *   3. Tipografia    8. Landing             13. Responsivo
 *   4. Diamante      9. Utilitários
 *   5. Vidro        10. Marca
 */

/* ============ 1. BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-weight:var(--fw-light);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--violet-l);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--violet-l);outline-offset:3px;border-radius:4px}

/* ============ 2. AMBIENTE ============ */
/* A névoa. Quatro orbes desfocados em movimento lento + grão + vinheta.
   É o que faz o fundo parecer profundidade e não cor chapada. */
.mesh{position:fixed;inset:-25%;z-index:var(--z-mesh);filter:blur(90px);opacity:.62;pointer-events:none}
.orb{position:absolute;border-radius:50%;mix-blend-mode:screen}
.orb.o1{width:52vw;height:52vw;left:2%;top:4%;background:radial-gradient(circle,var(--violet),transparent 66%);animation:drift1 26s ease-in-out infinite}
.orb.o2{width:46vw;height:46vw;right:4%;top:14%;background:radial-gradient(circle,var(--violet-d),transparent 66%);animation:drift2 32s ease-in-out infinite}
.orb.o3{width:40vw;height:40vw;left:28%;bottom:2%;background:radial-gradient(circle,var(--blue-deep),transparent 66%);animation:drift3 29s ease-in-out infinite}
.orb.o4{width:26vw;height:26vw;right:20%;bottom:12%;background:radial-gradient(circle,var(--gold-d),transparent 64%);opacity:.5;animation:drift2 37s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(9vw,7vh) scale(1.14)}66%{transform:translate(-5vw,11vh) scale(.92)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-11vw,9vh) scale(1.18)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(8vw,-8vh) scale(.88)}75%{transform:translate(-7vw,-4vh) scale(1.1)}}

.grain{position:fixed;inset:0;pointer-events:none;z-index:var(--z-grain);opacity:.028;
  background-image:radial-gradient(rgba(255,255,255,.85) .5px,transparent .5px);background-size:3px 3px}
.vign{position:fixed;inset:0;pointer-events:none;z-index:var(--z-grain);
  background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.62) 100%)}

/* Barra de progresso — no deck marca o slide; no site, o scroll. */
.bar{position:fixed;top:0;left:0;height:2px;z-index:var(--z-chrome);width:0;
  background:var(--grad-bar);box-shadow:var(--glow-vio-sm);
  transition:width .6s var(--ease)}

/* ============ 3. TIPOGRAFIA ============ */
.tag{display:inline-flex;align-items:center;gap:12px;font-size:clamp(12px,1vw,15px);
  letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--violet-l);
  font-weight:var(--fw-medium);margin-bottom:var(--sp-md)}
.tag::before{content:"";width:26px;height:1px;background:var(--grad-rule)}

h1,.h1{text-wrap:balance;font-weight:var(--fw-semi);font-size:var(--fs-display);
  line-height:var(--lh-tight);letter-spacing:var(--ls-display);color:var(--white)}
h2,.h2{text-wrap:balance;font-weight:var(--fw-semi);font-size:var(--fs-h2);
  line-height:1.18;letter-spacing:var(--ls-title);color:var(--white)}
h3,.h3{font-weight:var(--fw-semi);font-size:var(--fs-h3);letter-spacing:-.015em;color:var(--white)}
.mega{text-wrap:balance;font-weight:var(--fw-semi);font-size:var(--fs-mega);
  line-height:1.24;letter-spacing:var(--ls-title)}

.lead{font-size:var(--fs-lead);color:var(--muted);line-height:var(--lh-lead);
  font-weight:var(--fw-light);max-width:var(--measure)}
p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}

.quote{text-wrap:balance;font-weight:var(--fw-thin);font-style:italic;color:var(--gold);
  font-size:var(--fs-quote);line-height:1.5;letter-spacing:-.01em}

/* Texto em gradiente: reservado ao nome da marca e a uma frase por peça. */
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;
  box-decoration-break:clone;padding-block:.04em}
.vio{color:var(--violet-l)}
.gld{color:var(--gold)}

.num{font-weight:var(--fw-medium);font-size:var(--fs-num);line-height:1;letter-spacing:var(--ls-title);
  font-variant-numeric:tabular-nums}
.numlabel{font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-top:14px;font-weight:var(--fw-book)}
.idx{font-weight:var(--fw-medium);font-size:var(--fs-idx);color:var(--violet-l);line-height:1;
  margin-bottom:var(--sp-sm);letter-spacing:var(--ls-title)}

/* ============ 4. DIAMANTE ============ */
/* Único símbolo da marca. Quadrado girado, nunca imagem. */
.dmd{width:13px;height:13px;background:var(--grad-dmd);transform:rotate(45deg);
  display:inline-block;box-shadow:var(--glow-gold)}
.dmd.lg{width:30px;height:30px}
.dmd.sm{width:8px;height:8px;box-shadow:0 0 12px rgba(229,196,107,.4)}
.dmd.pulse{animation:pulse 4.2s ease-in-out infinite}
@keyframes pulse{
  0%,100%{transform:rotate(45deg) scale(1);box-shadow:0 0 22px rgba(229,196,107,.45)}
  50%{transform:rotate(45deg) scale(1.13);box-shadow:var(--glow-gold-lg)}
}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ============ 5. VIDRO ============ */
.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--stroke);
  border-radius:var(--r-xl);
  transition:transform var(--t-base) var(--ease),background var(--t-base),
             border-color var(--t-base),box-shadow var(--t-base);
}
.glass:hover{transform:translateY(-6px);background:var(--glass2);
  border-color:var(--stroke-vio);box-shadow:var(--glow-vio)}

.cards{display:grid;gap:var(--sp-sm);margin-top:var(--sp-lg)}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.card{padding:var(--pad-card)}
.card .k{font-size:13.5px;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--violet-l);font-weight:var(--fw-medium);margin:var(--sp-sm) 0 12px}
.card p{font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-body);font-weight:var(--fw-light)}

/* ============ 6. JORNADA E LISTAS ============ */
/* Chip de estrutura — item curto de inventário. */
.structs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:32px}
.st{display:flex;align-items:center;gap:var(--sp-xs);padding:var(--sp-xs) 15px;
  font-size:clamp(15px,1.24vw,18px);color:var(--text);
  background:var(--glass-soft);border:1px solid var(--stroke-soft);border-radius:var(--r-sm);
  transition:background .4s,border-color .4s,transform .4s}
.st:hover{background:var(--tint-vio);border-color:rgba(155,125,255,.32);transform:translateY(-2px)}
.st .dmd{width:6px;height:6px;flex:none;box-shadow:none}

/* Linha de jornada — sigla, nome, fala, consequência. Use .glass junto. */
.jrow{display:grid;grid-template-columns:92px 280px 1fr 290px;align-items:center;
  gap:var(--sp-sm);padding:20px var(--sp-md);margin-bottom:var(--sp-xs);border-radius:var(--r-lg)}
.jd{font-weight:var(--fw-semi);font-size:clamp(31px,3.2vw,49px);letter-spacing:var(--ls-title)}
.jn{font-size:clamp(19px,1.8vw,26px);font-weight:var(--fw-book);color:var(--white);letter-spacing:.02em}
.jn small{display:block;font-size:var(--fs-label);letter-spacing:.24em;color:var(--muted);
  margin-top:var(--sp-2xs);font-weight:var(--fw-book)}
.jq{font-style:italic;font-weight:var(--fw-thin);color:var(--gold);font-size:clamp(17px,1.45vw,22px)}
.js{font-size:var(--fs-small);color:var(--muted)}

/* Linha de pergunta — numerada porque é sequência de diagnóstico. */
.q{display:flex;align-items:center;gap:22px;padding:17px var(--sp-md);margin-bottom:9px;border-radius:var(--r-md)}
.q b{font-weight:var(--fw-medium);font-size:31px;color:var(--violet-l);flex:none;width:34px;letter-spacing:var(--ls-title)}
.q span{font-size:clamp(16px,1.35vw,20px);color:var(--text);font-weight:var(--fw-light)}

/* ============ 7. FASES — OS QUATRO D ============ */
/* A cor da fase é dado, não enfeite: sobe do violeta ao dourado conforme
   a pessoa avança. Aplique .fase.d1 … .d4 e a cor propaga por currentColor. */
.fase{--fase:var(--d1)}
.fase.d1{--fase:var(--d1)}
.fase.d2{--fase:var(--d2)}
.fase.d3{--fase:var(--d3)}
.fase.d4{--fase:var(--d4)}
.fase .jd,.fase .fase-sigla{color:var(--fase)}
.fase{border-left:2px solid var(--fase)}
.fase:hover{border-color:var(--fase);box-shadow:0 22px 60px color-mix(in srgb,var(--fase) 22%,transparent)}
.fase-dot{width:10px;height:10px;border-radius:50%;background:var(--fase);flex:none;
  box-shadow:0 0 14px color-mix(in srgb,var(--fase) 70%,transparent)}
.fase-trilha{display:flex;align-items:center;gap:0;height:4px;border-radius:var(--r-pill);overflow:hidden}
.fase-trilha span{flex:1;height:100%}
.fase-trilha .s1{background:var(--d1)}
.fase-trilha .s2{background:var(--d2)}
.fase-trilha .s3{background:var(--d3)}
.fase-trilha .s4{background:var(--d4)}

/* ============ 8. LANDING ============ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad-slide)}
.section{position:relative;z-index:var(--z-content);padding-block:var(--sp-3xl)}
.section.alt{background:var(--bg2)}

.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-sm) var(--pad-slide);
  background:rgba(5,6,12,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--stroke-soft)}
.nav-marca{display:flex;align-items:center;gap:var(--sp-xs);color:var(--white);
  font-weight:var(--fw-medium);letter-spacing:.18em;text-transform:uppercase;font-size:var(--fs-label)}
.nav-links{display:flex;gap:var(--sp-md);font-size:14px;letter-spacing:.06em}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--text)}

.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--sp-2xl);position:relative;z-index:var(--z-content);text-align:center;align-items:center}
.hero .lead{margin-inline:auto}

/* Botões. Um primário por tela — o violeta é a única ação cheia do sistema. */
.btn{display:inline-flex;align-items:center;gap:var(--sp-xs);cursor:pointer;
  font-family:var(--font);font-size:16px;font-weight:var(--fw-medium);letter-spacing:.04em;
  padding:16px 30px;border-radius:var(--r-pill);border:1px solid transparent;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),
             border-color var(--t-fast),box-shadow var(--t-fast)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--violet);color:var(--white);box-shadow:0 12px 34px rgba(109,74,255,.32)}
.btn-primary:hover{background:var(--violet-l);color:var(--white);box-shadow:0 18px 48px rgba(109,74,255,.44)}
.btn-ghost{background:var(--glass);color:var(--text);border-color:var(--stroke);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.btn-ghost:hover{background:var(--tint-vio);border-color:var(--stroke-vio);color:var(--white)}
.btn-gold{background:transparent;color:var(--gold);border-color:var(--gold-d)}
.btn-gold:hover{background:rgba(229,196,107,.10);border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:11px 20px;font-size:14px}
.btn[disabled]{opacity:.35;pointer-events:none}

/* Pílula de estado / etiqueta curta */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--glass-soft);border:1px solid var(--stroke-soft);
  font-size:12px;letter-spacing:var(--ls-small);text-transform:uppercase;
  color:var(--muted);font-weight:var(--fw-medium)}
.pill-vio{color:var(--violet-l);border-color:var(--stroke-vio);background:var(--tint-vio)}
.pill-gold{color:var(--gold);border-color:rgba(229,196,107,.32);background:rgba(229,196,107,.08)}

/* Bloco de chamada final */
.cta{text-align:center;padding:clamp(48px,6vw,84px) var(--pad-card);
  background:linear-gradient(160deg,rgba(109,74,255,.16),rgba(27,17,69,.5));
  border:1px solid var(--stroke-vio);border-radius:var(--r-xl)}
.cta .mega{margin-bottom:var(--sp-md)}
.cta-acoes{display:flex;gap:var(--sp-xs);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-md)}

/* Formulário — captura de fila */
.form{display:grid;gap:var(--sp-xs);max-width:520px}
.form-linha{display:grid;gap:6px}
.form label{font-size:12px;letter-spacing:var(--ls-small);text-transform:uppercase;
  color:var(--muted);font-weight:var(--fw-medium)}
.form input,.form textarea,.form select{
  font-family:var(--font);font-size:16px;font-weight:var(--fw-light);color:var(--text);
  background:var(--glass-soft);border:1px solid var(--stroke);border-radius:var(--r-sm);
  padding:14px 16px;transition:border-color var(--t-fast),background var(--t-fast)}
.form input::placeholder,.form textarea::placeholder{color:var(--faint)}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--violet-l);background:var(--tint-vio)}
.form .ajuda{font-size:13px;color:var(--faint)}
.form .erro{font-size:13px;color:#FF8A8A}
.form input[aria-invalid="true"]{border-color:#FF8A8A}

/* Rodapé */
.footer{position:relative;z-index:var(--z-content);background:var(--indigo);
  border-top:1px solid var(--stroke-soft);padding-block:var(--sp-xl)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-lg);align-items:start}
.footer small{display:block;color:var(--faint);font-size:13px;line-height:1.9}

/* ============ 9. UTILITÁRIOS ============ */
.center{text-align:center}
.stack{display:grid;gap:var(--sp-xs)}
.row{display:flex;align-items:center;gap:var(--sp-xs);flex-wrap:wrap}
.mt-sm{margin-top:var(--sp-sm)}
.mt-md{margin-top:var(--sp-md)}
.mt-lg{margin-top:var(--sp-lg)}
.mt-xl{margin-top:var(--sp-xl)}
.scroll-x{overflow-x:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Entrada em cena: elementos .r sobem ao revelar o bloco pai .seen */
.r{opacity:0;transform:translateY(22px)}
.seen .r{animation:rise var(--t-slow) var(--ease) forwards}
.seen .r:nth-child(1){animation-delay:.12s}
.seen .r:nth-child(2){animation-delay:.22s}
.seen .r:nth-child(3){animation-delay:.32s}
.seen .r:nth-child(4){animation-delay:.42s}
.seen .r:nth-child(5){animation-delay:.52s}
.seen .r:nth-child(6){animation-delay:.62s}
@keyframes rise{to{opacity:1;transform:none}}

/* ============ 10. MARCA ============ */
/* Duas marcas convivem aqui e não se misturam:
   a pessoa (monograma FB, âmbar) e o método (o nome escrito — símbolo ainda não definido).
   Nunca lado a lado no mesmo tamanho — quem assina a peça aparece menor. */
.marca{display:inline-flex;align-items:center;gap:var(--sp-xs);color:var(--white)}
.marca img,.marca svg{display:block;height:auto}

/* Assinatura do Método — tipográfica enquanto o símbolo não existe.
   MÉTODO em 300, 4D em 600: o peso cai no que nomeia o produto.
   Não é imagem: é texto, escala com o layout e nunca perde nitidez. */
.marca-m4d{display:inline-flex;align-items:baseline;gap:.34em;
  font-size:var(--tam-marca,26px);line-height:1;color:var(--white);
  font-weight:var(--fw-light);letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap}
.marca-m4d b{font-weight:var(--fw-semi);letter-spacing:.1em}
.marca-m4d-sm{--tam-marca:15px}
.marca-m4d-lg{--tam-marca:clamp(30px,4vw,54px)}

/* Versão empilhada, com a linha do projeto embaixo */
.marca-m4d-vert{display:inline-grid;justify-items:center;gap:.6em;text-align:center}
.marca-m4d-vert .marca-selo{font-size:11px;letter-spacing:var(--ls-tag);
  text-transform:uppercase;color:var(--muted);font-weight:var(--fw-book)}

/* Assinatura da pessoa. Três versões de arquivo, escolhidas pelo fundo:
   -sobre-escuro (âmbar + branco) · -sobre-claro (âmbar + tinta) · -branco (mono).
   Altura mínima: 32px na horizontal, 48px na vertical. Abaixo disso o monograma fecha. */
.marca-fb{height:40px}
.marca-fb-sm{height:32px}
.marca-fb-vert{height:96px}
.marca-fb-simbolo{width:34px;height:40px}   /* proporção 75×87 */
.marca-fb-simbolo-sm{width:21px;height:24px}

/* Retrato de assinatura */
.retrato{border-radius:50%;overflow:hidden;border:1px solid var(--stroke);
  width:var(--tam,120px);height:var(--tam,120px);flex:none}
.retrato img{width:100%;height:100%;object-fit:cover}

/* Fundo mínimo aceitável para qualquer marca do sistema */
.marca-fundo{background:var(--bg);padding:var(--sp-md);border-radius:var(--r-lg)}

/* ============ 11. ÍCONES ============ */
/* Material Symbols Rounded, contorno, peso 300. Um traço só, sem preenchimento —
   o único elemento sólido da marca é o diamante. Ícone acompanha texto: nunca
   substitui rótulo em botão nem carrega significado sozinho. */
.ico{
  font-family:'Material Symbols Rounded';
  font-weight:normal;font-style:normal;line-height:1;
  font-size:var(--ico-md);
  display:inline-block;vertical-align:middle;
  letter-spacing:normal;text-transform:none;white-space:nowrap;
  direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' var(--ico-fill),'wght' var(--ico-wght),'GRAD' var(--ico-grad),'opsz' 24;
  color:var(--violet-l);
  user-select:none;
}
.ico-sm{font-size:var(--ico-sm);font-variation-settings:'FILL' var(--ico-fill),'wght' 400,'GRAD' var(--ico-grad),'opsz' 20}
.ico-lg{font-size:var(--ico-lg)}
.ico-xl{font-size:var(--ico-xl);font-variation-settings:'FILL' var(--ico-fill),'wght' 200,'GRAD' var(--ico-grad),'opsz' 48}
.ico-muted{color:var(--muted)}
.ico-text{color:var(--text)}
.ico-gold{color:var(--gold)}
.ico-fase{color:var(--fase,var(--violet-l))}
.ico-fill{--ico-fill:1}

/* Ícone em moldura de vidro — cabeçalho de card */
.ico-box{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-sm);
  background:var(--glass-soft);border:1px solid var(--stroke-soft);
  transition:background var(--t-fast),border-color var(--t-fast)}
.glass:hover .ico-box{background:var(--tint-vio);border-color:var(--stroke-vio)}

/* ============ 12. FOTOGRAFIA ============ */
/* A foto nunca entra crua: recebe véu violeta e degradê para o preto na base,
   porque é sobre ela que o texto vai assentar. Se a imagem sozinha já compete
   com o texto, ela é ilustração — não é foto de cena. */
.foto{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--bg2)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--foto-tinta),var(--foto-grade)}
.foto-legenda{position:absolute;left:var(--sp-md);right:var(--sp-md);bottom:var(--sp-md);z-index:1}

.r-16x9{aspect-ratio:16/9}
.r-4x5{aspect-ratio:4/5}       /* retrato de feed */
.r-3x2{aspect-ratio:3/2}
.r-1x1{aspect-ratio:1/1}
.r-9x16{aspect-ratio:9/16}     /* story, reel */

/* Foto como fundo de cena, com deriva lenta (Ken Burns) */
.bgimg{position:absolute;inset:0;z-index:var(--z-mesh);pointer-events:none;
  background-size:cover;background-position:center;opacity:var(--foto-op);
  animation:ken 30s ease-in-out infinite alternate}
@keyframes ken{
  from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.6%,1.2%,0)}
}

/* ============ 13. RESPONSIVO ============ */
@media (max-width:980px) and (min-width:821px){
  .c4,.c3,.c2,.structs{grid-template-columns:repeat(2,1fr)}
  .jrow{grid-template-columns:52px 1fr;gap:12px}
  .jq,.js{display:none}
  .mesh{filter:blur(60px)}
}
@media (max-width:820px){
  .mesh{filter:blur(60px)}
  .vign{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)}
  h1,.h1{font-size:clamp(38px,11vw,60px);line-height:1.12}
  h2,.h2{font-size:clamp(28px,8vw,44px);line-height:1.2}
  h3,.h3{font-size:clamp(19px,5vw,23px)}
  .mega{font-size:clamp(24px,7.4vw,40px);line-height:1.28}
  .quote{font-size:clamp(21px,6.2vw,30px);line-height:1.45}
  .lead{font-size:clamp(15.5px,4.2vw,18px);line-height:1.65}
  .tag{font-size:11px;letter-spacing:.3em;margin-bottom:var(--sp-sm)}
  .num{font-size:clamp(42px,13vw,64px)}
  .idx{font-size:clamp(30px,8vw,42px)}
  .c4,.c3,.c2,.structs,.footer-grid{grid-template-columns:1fr;gap:14px}
  .cards{margin-top:30px}
  .card{padding:20px}
  .card p{font-size:15.5px}
  .st{font-size:15px;padding:12px 14px}
  .jrow{grid-template-columns:44px 1fr;gap:10px;padding:16px}
  .jq,.js{display:none}
  .jd{font-size:30px}
  .jn{font-size:18px}
  .q{gap:14px;padding:14px 16px;align-items:flex-start}
  .q b{font-size:24px;width:26px}
  .q span{font-size:15.5px}
  .glass:hover{transform:none;box-shadow:none}
  .nav-links{display:none}
}
@media (prefers-reduced-motion:reduce){
  .orb,.dmd.pulse,.float{animation:none}
  .seen .r{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}