/* ============================================================
   DARTHA — camada de marca
   Aplica a identidade Artha Systems sobre os componentes V3:
   tokens de cor, grid hexagonal, malha de circuito, horizonte
   ciano, brackets de HUD e o brasão como marca-d'água.
   Carregada DEPOIS de dartha-components.css.
   ============================================================ */

:root{
  /* dourado — amostrado do banner oficial */
  --d-gold-deep:#8b5811;
  --d-gold:#d6a049;
  --d-gold-mid:#c08838;
  --d-gold-light:#fcd076;
  --d-gold-glint:#f9ee8a;
  /* ciano — acento tech do banner */
  --d-cyan:#0ca0e4;
  --d-cyan-bright:#3ab8e1;
  --d-cyan-glow:#d3f6fd;
  --d-cyan-deep:#014c8c;
  /* base navy */
  --d-navy-abyss:#000612;
  --d-navy:#000716;
  --d-navy-elev:#03101f;
  --d-navy-card:#08192b;
  /* texto */
  --d-text:#eaf2fb;
  --d-hair:#d6a04926;
  --d-hair-cyan:#0ca0e42e;
  --d-glow-gold:0 0 24px #d6a04938;
  --d-glow-cyan:0 0 28px #0ca0e440;
  --d-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 1. base: navy + malha hexagonal + circuito ---------- */
body{background:var(--d-navy-abyss)}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("../brand/hexgrid.svg");
  background-size:132px 152px;opacity:.5;
  mask-image:radial-gradient(ellipse 100% 78% at 50% 0%,#000 0%,#0009 42%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 100% 78% at 50% 0%,#000 0%,#0009 42%,transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 12% 8%,#8b581112,transparent 62%),
    radial-gradient(ellipse 55% 38% at 88% 4%,#014c8c1a,transparent 62%);
}
body>*{position:relative;z-index:1}

/* textura de grão: mais fria e discreta sobre o navy */
.grain{opacity:.035;mix-blend-mode:soft-light}

/* ---------- 2. cursor ---------- */
/* o blend "difference" original inverteria o dourado/ciano da marca;
   sobre o navy as cores solidas ficam legiveis e on-brand */
.cursor{mix-blend-mode:normal;will-change:transform}
/* o contorno escuro mantem o ponto legivel tambem sobre superficies
   douradas (botoes primarios), onde so o dourado sumiria */
.cursor-dot{background:var(--d-gold-light);box-shadow:0 0 0 1.5px #04131fa6,0 0 10px #d6a049cc}
.cursor-ring{border-color:#3ab8e17a;transition:width .3s var(--d-ease),height .3s var(--d-ease),border-color .3s,opacity .3s}
.cursor.cursor-hover .cursor-ring{border-color:var(--d-cyan-bright);box-shadow:var(--d-glow-cyan)}
.cursor.cursor-active .cursor-ring{width:22px;height:22px;border-color:var(--d-gold-light)}
.cursor.cursor-active .cursor-dot{transform:translate(-50%,-50%)scale(1.5)}

/* ---------- 3. nav ---------- */
/* A casca externa (<nav>) ja e uma pilula: border-radius:999px vem do
   CSS base. O tratamento DARTHA estava indo para o __navInner, que nao
   tem raio nenhum — resultado: um retangulo desenhado dentro do
   arredondado. Vai para a casca, e o miolo fica so como flexbox.

   O seletor leva a tag `nav` de proposito: [class*="__nav"] sozinho
   alcancaria tambem navInner, navBrand, navMenu, navLink e navCta. */
nav[class*="__nav"]{
  background:linear-gradient(180deg,#03101fd9,#000716b8);
  border:1px solid var(--d-hair);
  box-shadow:0 18px 50px #00040cb3,inset 0 1px 0 #fcd0761f;
}
[class*="__navInner"]{background:none;border:none;box-shadow:none}
[class*="__navBrand"]{letter-spacing:.16em;text-transform:uppercase;font-weight:600;font-size:13.5px}
[class*="__navBrand"]>span{
  background:linear-gradient(92deg,var(--d-gold-light),var(--d-gold) 46%,var(--d-gold-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[class*="__navMark"]{filter:drop-shadow(0 0 7px #d6a04980);transition:filter .35s var(--d-ease)}
[class*="__navBrand"]:hover [class*="__navMark"]{filter:drop-shadow(0 0 13px #fcd076cc)}
[class*="__navLink"]:hover{color:var(--d-cyan-glow)}
[class*="__navCta"]{
  background:linear-gradient(135deg,var(--d-gold-light),var(--d-gold) 52%,var(--d-gold-mid));
  color:#04131f;border:none;box-shadow:var(--d-glow-gold);
}
[class*="__navCta"]:hover{box-shadow:0 0 30px #fcd07666,0 8px 22px #00040c80}

/* ---------- 4. hero ---------- */
[class*="__heroAurora"] [class*="aurora1"]{background:radial-gradient(circle,#8b581145,transparent 66%)}
[class*="__heroAurora"] [class*="aurora2"]{background:radial-gradient(circle,#014c8c40,transparent 66%)}
[class*="__heroAurora"] [class*="aurora3"]{background:radial-gradient(circle,#d6a04928,transparent 66%)}

/* brasão como marca-d'água + piso em perspectiva com horizonte ciano */
[class*="__hero"][id="top"]::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  top:46%;left:50%;width:min(52vw,620px);aspect-ratio:454/548;
  transform:translate(-50%,-50%);
  background:var(--d-gold) ;
  -webkit-mask:url("../brand/dartha-mark-mask.png") center/contain no-repeat;
  mask:url("../brand/dartha-mark-mask.png") center/contain no-repeat;
  opacity:.045;animation:d-emblem 9s ease-in-out infinite;
}
@keyframes d-emblem{0%,100%{opacity:.04}50%{opacity:.085}}

[class*="__hero"][id="top"]::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:-25%;right:-25%;bottom:0;height:34vh;
  background-image:
    repeating-linear-gradient(90deg,#d6a04933 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,#0ca0e42b 0 1px,transparent 1px 46px);
  transform:perspective(320px) rotateX(66deg);transform-origin:bottom center;
  mask-image:linear-gradient(to top,#000,transparent 82%);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 82%);
}
[class*="__heroVignette"]{
  background:
    radial-gradient(ellipse 46% 12% at 50% 100%,#0ca0e44d,transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 45%,transparent 40%,#000612e6 100%);
}
[class*="__heroEyebrow"]{
  border:1px solid var(--d-hair-cyan);background:#03101f8c;
  letter-spacing:.22em;box-shadow:inset 0 0 20px #014c8c26;
}
[class*="__eyebrowPing"]{background:var(--d-cyan-bright);box-shadow:0 0 12px var(--d-cyan)}
[class*="__goldAccent"]{
  background:linear-gradient(100deg,var(--d-gold-glint),var(--d-gold) 44%,var(--d-gold-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px #d6a0493d);
}
[class*="__heroStats"] [class*="__hsVal"]{color:var(--d-gold-light);text-shadow:0 0 18px #d6a04947}
[class*="__hsSep"]{background:linear-gradient(180deg,transparent,#0ca0e459,transparent)}
/* o indicador "ROLAR" saiu do hero: ficava em bottom:28px e cruzava
   a fileira de pilares (BASE / PRATICA / HABITO / LEGADO) */

/* ---------- 5. botões ---------- */
[class*="__btnPrimary"],[class*="__ctaSubmit"]{
  background:linear-gradient(135deg,var(--d-gold-light),var(--d-gold) 50%,var(--d-gold-mid));
  color:#04131f;border:none;position:relative;overflow:hidden;
  box-shadow:0 0 26px #d6a04940,inset 0 1px 0 #fff9;
}
[class*="__btnPrimary"]::after,[class*="__ctaSubmit"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,#ffffff8c 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .75s var(--d-ease);
}
[class*="__btnPrimary"]:hover::after,[class*="__ctaSubmit"]:hover::after{transform:translateX(130%)}
[class*="__btnPrimary"]:hover,[class*="__ctaSubmit"]:hover{box-shadow:0 0 38px #fcd07666,0 10px 26px #00040c73}
[class*="__btnGhost"]{border:1px solid var(--d-hair-cyan);background:#03101f73}
[class*="__btnGhost"]:hover{border-color:var(--d-cyan-bright);box-shadow:var(--d-glow-cyan);color:var(--d-cyan-glow)}

/* ---------- 6. eyebrows / dashes / dots de seção ---------- */
[class*="__eyebrowDash"],[class*="__shDash"],[class*="__trustDash"]{
  background:linear-gradient(90deg,var(--d-cyan),var(--d-gold));
}
[class*="__tagDot"],[class*="__ctaDot"],[class*="__eventTagDot"],
[class*="__tiVtagDot"],[class*="__trustDot"]{
  background:var(--d-cyan-bright);box-shadow:0 0 10px var(--d-cyan);
}

/* ---------- 7. cards / bento ---------- */
/* O cartao de produto e uma ancora; qualificar com `a` impede que
   [class*="__prog"] alcance tambem progContent, progTitle, progDesc,
   progCta e companhia. Sem isso, cada bloco interno herdava o fundo
   navy e — pior — ganhava a propria sombra de 60px ao ser apontado,
   ja que o ponteiro sobre o cartao tambem esta sobre eles. */
[class*="__card"],a[class*="__prog"],[class*="__eventHighlight"],
[class*="__hubsEmpty"],[class*="__ctaFrame"]{
  border-color:var(--d-hair);
  background-image:linear-gradient(180deg,#08192b5c,#0007160f);
}
[class*="__card"]:hover,a[class*="__prog"]:hover{
  border-color:#0ca0e459;box-shadow:0 0 0 1px #0ca0e41f,0 22px 60px #00040c8c;
}
[class*="__spot"]{background:radial-gradient(280px circle at var(--x,50%) var(--y,50%),#0ca0e424,transparent 70%)}
[class*="__cardIdx"],[class*="__hlNum"],[class*="__progNumVal"]{
  color:var(--d-gold);text-shadow:0 0 14px #d6a04947;
}
[class*="__bnVal"],[class*="__hsBig"],[class*="__fsNum"],[class*="__tisNum"]{
  background:linear-gradient(100deg,var(--d-gold-light),var(--d-gold-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* brackets de HUD nos cards grandes — motivo do banner */
[class*="__cardBig"]{position:relative}
[class*="__cardBig"]::before,[class*="__cardBig"]::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border-color:var(--d-gold);opacity:.42;transition:opacity .35s var(--d-ease);
}
[class*="__cardBig"]::before{top:10px;left:10px;border-top:1px solid;border-left:1px solid}
[class*="__cardBig"]::after{bottom:10px;right:10px;border-bottom:1px solid;border-right:1px solid}
[class*="__cardBig"]:hover::before,[class*="__cardBig"]:hover::after{opacity:1}

/* ---------- 8. SVG decorativos: pulsos e nós em ciano/ouro ---------- */
[class*="__netPulse"]{stroke:var(--d-cyan-bright);filter:drop-shadow(0 0 4px #0ca0e4)}
[class*="__nodeCenter"]{fill:var(--d-gold-light);filter:drop-shadow(0 0 6px #d6a049)}
[class*="__globeDot"]{filter:drop-shadow(0 0 5px #0ca0e4b3)}
[class*="__hgPins"] circle:nth-child(2){filter:drop-shadow(0 0 6px #d6a049)}
[class*="__hgLabels"] text{fill:#eaf2fbd9}
[class*="__orbitCore"]{
  background:radial-gradient(circle,var(--d-gold-light),var(--d-gold-mid));
  box-shadow:0 0 26px #d6a04980;
}
[class*="__planet"]{background:var(--d-cyan-bright);box-shadow:0 0 10px var(--d-cyan)}
[class*="__orbitRing"]{border-color:#0ca0e42e}

/* ---------- 9. programas ---------- */
/* Os tres produtos eram linhas horizontais empilhadas (numero |
   texto | CTA), com o preco perdido ao lado da tag. Aqui viram
   cartoes VERTICAIS lado a lado: cada preco ganha corpo proprio e os
   tres ficam na mesma altura, o que torna a comparacao imediata.

   Os seletores usam a[class*="__prog"] de proposito: so o cartao e
   uma ancora, entao o `a` evita que [class*="__prog"] alcance
   tambem progNum, progMeta, progTitle, progCta e companhia. */

/* A folga entre cartoes e o que o cartao apontado precisa vencer
   para cobrir o vizinho: ele cresce w*(escala-1)/2 por lado, entao
   sobrepoe apenas o que passar do gap. Com 12px e escala 1.10 sao
   ~20px de crescimento contra 12px de folga: ~8px de vizinho
   cobertos de cada lado. A folga menor tambem faz os tres lerem
   como uma fileira de planos, e nao como caixas soltas. */
[class*="__progStack"]{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;align-items:stretch;
}

a[class*="__prog"]{
  display:flex;flex-direction:column;
  padding:34px 30px 30px;
  border:1px solid var(--d-hair);border-radius:18px;
  background:linear-gradient(180deg,#08192b70,#00071624);
  overflow:hidden;
  z-index:1;
  /* Cada propriedade tem seu proprio tempo, em vez de um
     transition:all: o hover chega em camadas — primeiro a peca se
     levanta, depois a borda acende, por ultimo o brilho assenta.

     z-index nao interpola de forma util, entao entra com duracao
     zero. O atraso de .55s so vale na SAIDA: assim a camada de
     cima e devolvida depois que o cartao ja encolheu, e ele nunca
     mergulha sob o vizinho no meio do caminho. */
  transition:
    transform .6s var(--d-ease),
    border-color .5s var(--d-ease),
    box-shadow .7s var(--d-ease),
    background .5s var(--d-ease),
    z-index 0s linear .55s;
}
a[class*="__prog"]:last-child{border:1px solid var(--d-hair)}

/* lavagem de fundo: no cartao vertical a luz vem de cima, nao de lado */
a[class*="__prog"]::before{
  background:
    radial-gradient(120% 76% at 50% 0%,#d6a0491c,transparent 62%),
    linear-gradient(180deg,#0ca0e410,transparent 55%);
  transition:opacity .65s var(--d-ease);
}

/* trilho de luz no topo, preenchendo da esquerda para a direita */
a[class*="__prog"]::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--d-gold-light) 30%,var(--d-cyan-bright) 72%,transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .75s var(--d-ease);
}

/* O hover original empurrava padding-left: um deslocamento que
   redesenha o cartao inteiro a cada quadro. Trocado por translateY,
   que o compositor resolve sozinho — dai a suavidade. */
/* O cartao apontado cresce alem da propria celula do grid — come o
   gap de 24px e passa por cima dos vizinhos — e sobe de camada. A
   sombra maior separa os planos: sem ela a sobreposicao viraria
   apenas dois retangulos colados. */
a[class*="__prog"]:hover{
  padding-left:30px;
  transform:translateY(-10px) scale(1.1);
  border-color:#fcd07659;
  box-shadow:0 34px 80px -22px #00040cf2,0 0 0 1px #fcd0761f,inset 0 1px 0 #fcd07630;
  z-index:10;
  transition-delay:0s;
}
a[class*="__prog"]:hover::after{transform:scaleX(1);transition-delay:.06s}

/* numero + filete, agora em linha no topo do cartao */
div[class*="__progNum"]{
  flex-direction:row;align-items:center;gap:14px;
  padding:0;margin-bottom:24px;
}
[class*="__progNumLine"]{
  flex:1;width:auto;
  background:linear-gradient(90deg,#d6a04947,transparent);
  transition:background .55s var(--d-ease);
}
a[class*="__prog"]:hover [class*="__progNumLine"]{
  width:auto;
  background:linear-gradient(90deg,var(--d-gold-light),#0ca0e459 70%,transparent);
  transition-delay:.08s;
}

/* bloco de identificacao: formato em cima (tag), PUBLICO com corpo
   proprio embaixo. Era o preco que ocupava esse lugar; num site
   institucional o preco vira a unica informacao e envelhece a cada
   reajuste, entao quem ganha o destaque agora e para quem o produto e.
   O preco vive nas LPs de produto (.dp-preco, dartha-produto.css). */
[class*="__progMeta"]{
  flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:18px;
}
[class*="__progTagLive"]{
  color:var(--d-cyan-glow);border-color:#0ca0e459;background:#014c8c2e;
}
[class*="__progTagGold"]{
  color:#04131f;border:none;
  background:linear-gradient(135deg,var(--d-gold-light),var(--d-gold-mid));
}
a[class*="__prog"] .d-publico{
  /* frase, nao numero: sai a mono (pesada demais em corpo grande) e
     entra a fonte de texto, com o mesmo gradiente dourado do valor */
  font-size:clamp(1.05rem,1.45vw,1.3rem);font-weight:500;
  letter-spacing:-.01em;line-height:1.25;white-space:normal;
  background:linear-gradient(100deg,var(--d-gold-light),var(--d-gold-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform-origin:left center;
  transition:filter .55s var(--d-ease),transform .55s var(--d-ease);
}
a[class*="__prog"]:hover .d-publico{
  filter:brightness(1.12) drop-shadow(0 0 16px #d6a04961);
  transform:scale(1.03);
  transition-delay:.1s;
}

/* titulo e texto no corpo mais estreito do cartao */
[class*="__progTitle"]{font-size:clamp(1.35rem,2.1vw,1.75rem)}
[class*="__progDesc"]{max-width:none;font-size:14.5px}

/* CTA colado no rodape: os tres alinham mesmo com textos de alturas
   diferentes */
[class*="__progCta"]{
  margin-top:auto;width:100%;align-self:stretch;
  justify-content:space-between;
  border-top:1px solid var(--d-hair);padding-top:22px;
}
[class*="__progArrow"]{
  border-color:var(--d-hair);
  transition:
    transform .55s var(--d-ease),
    background-color .45s var(--d-ease),
    border-color .45s var(--d-ease),
    color .45s var(--d-ease),
    box-shadow .6s var(--d-ease);
}
/* o giro de -5deg do original dava um solavanco; so o avanco basta */
a[class*="__prog"]:hover [class*="__progArrow"]{
  background:var(--d-gold);border-color:var(--d-gold);color:#04131f;
  box-shadow:var(--d-glow-gold);
  transform:translateX(6px);
  transition-delay:.12s;
}

/* o cartao sob medida continua sendo o destaque da fileira */
a[class*="__progPremium"]{
  border-color:#d6a04947;
  background:linear-gradient(180deg,#8b581126,#08192b70 58%,#00071624);
}
a[class*="__progPremium"]:hover{border-color:#fcd07685}

[class*="__bracket"]{color:var(--d-cyan-bright)}

@media (prefers-reduced-motion:reduce){
  a[class*="__prog"]:hover{transform:none}
  a[class*="__prog"]::after{transition:none}
}

/* abaixo de 1024px tres colunas espremem o preco: volta a uma
   coluna, ja no formato de cartao */
@media (max-width:1024px){
  [class*="__progStack"]{
    grid-template-columns:1fr;gap:20px;max-width:600px;
  }
  /* em coluna unica nao ha vizinho ao lado para sobrepor, e crescer
     avancaria sobre o cartao de cima: fica so o levantar */
  a[class*="__prog"]:hover{transform:translateY(-6px)}
}

/* ---------- 10. provas (painel navy elevado) ---------- */
[class*="__proofs"]{
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%,#8b58111f,transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%,#014c8c26,transparent 60%),
    linear-gradient(180deg,#04131f 0%,#02101a 100%);
  border-top:1px solid var(--d-hair);border-bottom:1px solid var(--d-hair);
}
[class*="__testiGlow"]{background:radial-gradient(ellipse 60% 50% at 50% 50%,#0ca0e42e,transparent 70%)}
[class*="__testiCardInner"],[class*="__testiCardOuter"]{border-color:var(--d-hair)}
[class*="__testiCardGrid"]{
  background-image:
    repeating-linear-gradient(0deg,#0ca0e414 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,#0ca0e414 0 1px,transparent 1px 26px);
}
[class*="__testiBtn"]{border-color:var(--d-hair-cyan);background:#03101fa6;color:var(--d-text)}
[class*="__testiBtn"]:hover{border-color:var(--d-cyan-bright);box-shadow:var(--d-glow-cyan)}
[class*="__tiWimg"]{border:1px solid var(--d-hair);box-shadow:0 12px 34px #00040c66}

/* ---------- 11. hubs ---------- */
[class*="__hubs"][id="hubs"]{background:var(--d-navy)}
[class*="__hubsSkySvg"] path{stroke:#0ca0e424}
[class*="__hmFrame"]{
  border:1px solid var(--d-hair);
  background:radial-gradient(ellipse 70% 60% at 50% 50%,#014c8c1f,transparent 70%);
}
[class*="__hubsStrip"]{border-color:var(--d-hair)}
[class*="__hsSep2"]{background:linear-gradient(180deg,transparent,#0ca0e459,transparent)}
[class*="__eventTag"]{border-color:var(--d-hair-cyan);background:#014c8c26}
[class*="__hueCta"]:hover{color:var(--d-cyan-glow)}

/* ---------- 12. founder ---------- */
[class*="__fpFrame"]{border:1px solid var(--d-hair);box-shadow:0 0 60px #014c8c33}
[class*="__fpTint"]{
  background:linear-gradient(180deg,#0ca0e41a,transparent 40%,#000612d9);
  mix-blend-mode:normal;
}
[class*="__fpCorner"]{border-color:var(--d-gold)}
[class*="__fpCVal"]{color:var(--d-gold-light);letter-spacing:.2em}
[class*="__fmLogos"] span{color:#eaf2fb8c}

/* --- pilulas e marcadores de "Quem somos" -------------------------
   As pilulas ganham ima proprio (cada uma corre atras do cursor) e um
   facho que percorre o interior; os marcadores ganham trilho que
   cresce e o mesmo facho. founder-blocos.js escreve:

     --t-x / --t-y     deslocamento magnetico da pilula, em px
     --t-mx / --t-my   ponteiro dentro da pilula
     --t-hot           0..1, proximidade da pilula
     --s-mx / --s-my   ponteiro dentro do marcador
     --s-hot           0..1, ponteiro sobre o marcador

   O ima vive nas PILULAS, nao no contorno .founderTags, e o trilho
   dos marcadores vive em pseudo-elementos: os dois containers sao
   alvos da revelacao (.d-lin), cuja regra .d-lin-on{transform:none}
   apagaria qualquer transform escrito neles. */
[class*="__founderTags"] span{
  --t-x:0px;--t-y:0px;--t-mx:50%;--t-my:50%;--t-hot:0;
  position:relative;overflow:hidden;isolation:isolate;
  border-color:var(--d-hair-cyan);background:#03101f8c;
  transform:translate3d(var(--t-x),var(--t-y),0);
  will-change:transform;
  transition:
    color .45s var(--d-ease),
    border-color .45s var(--d-ease),
    box-shadow .5s var(--d-ease);
}
[class*="__founderTags"] span::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80px circle at var(--t-mx) var(--t-my),#d6a04947,transparent 72%);
  opacity:var(--t-hot);
  transition:opacity .4s var(--d-ease);
}
[class*="__founderTags"] span:hover{
  color:var(--d-text);border-color:#fcd07666;
  box-shadow:0 10px 26px -12px #00040ce6,0 0 0 1px #fcd0761f;
}

[class*="__founderStats"]>div{
  --s-mx:50%;--s-my:50%;--s-hot:0;
  position:relative;isolation:isolate;padding-left:18px;
}
/* trilho que cresce de cima para baixo */
[class*="__founderStats"]>div::before{
  content:"";position:absolute;left:0;top:1px;bottom:1px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--d-gold-light),var(--d-cyan) 72%,transparent);
  transform:scaleY(calc(.18 + var(--s-hot) * .82));transform-origin:top center;
  opacity:calc(.45 + var(--s-hot) * .55);
  transition:transform .6s var(--d-ease),opacity .5s var(--d-ease);
}
/* facho seguindo o ponteiro, transbordando um pouco do bloco */
[class*="__founderStats"]>div::after{
  content:"";position:absolute;inset:-14px -18px;z-index:-1;pointer-events:none;
  border-radius:16px;
  background:radial-gradient(190px circle at var(--s-mx) var(--s-my),#d6a04926,transparent 70%);
  opacity:var(--s-hot);
  transition:opacity .5s var(--d-ease);
}
[class*="__founderStats"] [class*="__fsNum"]{
  transform-origin:left center;
  transition:filter .5s var(--d-ease),transform .5s var(--d-ease);
}
[class*="__founderStats"]>div:hover [class*="__fsNum"]{
  filter:brightness(1.12) drop-shadow(0 0 18px #d6a04966);
  transform:scale(1.03);
}

@media (prefers-reduced-motion:reduce){
  [class*="__founderTags"] span{transform:none}
  [class*="__founderStats"]>div::before{transform:scaleY(1)}
  [class*="__founderStats"]>div:hover [class*="__fsNum"]{transform:none}
}

/* ---------- 13. newsletter: horizonte ciano ---------- */
[class*="__cta"][id="newsletter"]{background:var(--d-navy-abyss);position:relative;overflow:hidden}
[class*="__ctaGradient"]{
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%,#8b58112e,transparent 66%),
    radial-gradient(ellipse 70% 30% at 50% 100%,#0ca0e433,transparent 70%);
}
[class*="__cta"][id="newsletter"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--d-cyan-bright) 42%,var(--d-cyan-glow) 50%,var(--d-cyan-bright) 58%,transparent);
  box-shadow:0 0 34px 5px #0ca0e473;
}
[class*="__ctaMeta"]{border-color:var(--d-hair-cyan);background:#03101f8c;letter-spacing:.22em}

/* ---------- 14. footer ---------- */
/* Qualificar com a tag `footer` e obrigatorio: [class*="__footer"]
   sozinho alcanca os 19 descendentes (footerInner, footerTop,
   footerBrandImg...). Com fundo opaco no <img> da marca, o
   drop-shadow dourado passa a seguir o retangulo do elemento em vez
   do contorno do brasao — e a logo ganha um quadrado brilhante atras. */
footer[class*="__footer"]{background:var(--d-navy-abyss);position:relative}
footer[class*="__footer"]::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--d-gold) 30%,var(--d-cyan) 70%,transparent);
  opacity:.55;
}
[class*="__footerBrand"]{letter-spacing:.16em;text-transform:uppercase;font-weight:600}
[class*="__footerBrand"]>span{
  background:linear-gradient(92deg,var(--d-gold-light),var(--d-gold) 50%,var(--d-gold-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[class*="__footerBrandImg"]{filter:drop-shadow(0 0 7px #d6a04980)}
[class*="__footerCol"] h4{color:var(--d-gold)}
[class*="__footerCol"] a:hover{color:var(--d-cyan-glow)}

/* ---------- 15. trust ticker ---------- */
[class*="__trustItem"]{color:#eaf2fb73;letter-spacing:.2em}
[class*="__trust"] [class*="__trustTicker"]{
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* ---------- 16. painel de ajustes ---------- */
.tweaks-panel{background:#03101fe6;border-color:var(--d-hair)}
.tweaks-title{color:var(--d-gold)}

/* ---------- 17. barra de cookies ---------- */
[data-dartha-cookies]{
  background:#000716f2!important;
  border-top:1px solid var(--d-hair)!important;
}

/* ---------- 18. acessibilidade de movimento ---------- */
@media (prefers-reduced-motion:reduce){
  [class*="__hero"][id="top"]::before{animation:none}
  [class*="__btnPrimary"]::after,[class*="__ctaSubmit"]::after{transition:none}
}

/* ---------- 19. ajustes mobile ---------- */
@media (max-width:720px){
  body::before{background-size:96px 111px;opacity:.35}
  [class*="__hero"][id="top"]::before{width:78vw}
  [class*="__hero"][id="top"]::after{height:24vh}
}

/* ---------- 20. blocos autorais DARTHA ---------- */

/* citacao-manifesto da secao de ROI */
.d-quote{
  max-width:820px;margin:0 auto 64px;padding:44px 48px;position:relative;
  border-left:2px solid var(--d-gold);background:linear-gradient(100deg,#8b58111a,transparent 70%);
  border-radius:0 16px 16px 0;
}
.d-quote p{
  margin:0;font-family:var(--ff-display,"Instrument Serif",serif);
  font-size:clamp(1.35rem,2.9vw,2rem);line-height:1.35;font-weight:400;
  color:var(--d-text);letter-spacing:-.01em;
}
.d-quote em{color:var(--d-cyan-glow);font-style:italic}
.d-quote strong{
  font-weight:400;
  background:linear-gradient(100deg,var(--d-gold-light),var(--d-gold-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.d-quote footer{
  margin-top:26px;font-family:var(--ff-mono,"JetBrains Mono",monospace);
  letter-spacing:.18em;text-transform:uppercase;font-size:10px;
  color:var(--d-text);opacity:.5;align-items:center;gap:12px;display:flex;
}
.d-quoteLine{width:28px;height:1px;background:var(--d-gold);display:inline-block}

/* espaco reservado para os depoimentos reais */
.d-slot{
  max-width:820px;margin:56px auto 0;padding:28px 32px;text-align:center;
  border:1px dashed var(--d-hair);border-radius:16px;background:#08192b45;
}
.d-slotTag{
  font-family:var(--ff-mono,"JetBrains Mono",monospace);
  letter-spacing:.2em;text-transform:uppercase;font-size:9.5px;font-weight:600;
  color:var(--d-gold);display:block;margin-bottom:8px;
}
.d-slot p{margin:0;font-size:13.5px;color:var(--d-text);opacity:.55}

/* retrato de "Quem somos" — tres camadas que degradam sozinhas.
   A moldura ja vinha do layout original com .fpVideo (z-index 2),
   .fpFallback (z-index 1), .fpTint e os quatro cantos; o que faltava
   era devolver o video ao lugar do brasao.

   O fundo do .fpFallback empilha, de cima para baixo:
     1. o brasao    — o que aparece enquanto o video carrega
     2. o halo frio — base

   Nao ha poster: ate o primeiro quadro decodificar, o retrato mostra
   o brasao, e retrato-vivo.js so acende .fpVideoVisible quando ha
   quadro pronto — a troca vira um crossfade de .8s em vez de um
   retangulo preto. Se o video sumir, sobra o brasao. */
[class*="__fpFallback"]{
  background:
    url("../brand/dartha-mark.png") center/48% no-repeat,
    radial-gradient(circle at 50% 45%,#014c8c33,transparent 62%);
}
[class*="__fpVideo"]{transition:opacity .8s var(--d-ease)}

/* os "numeros" do hero e dos cards viraram palavras: reduz o corpo
   para caberem sem quebrar o grid original */
[class*="__heroStats"] [class*="__hsVal"],
[class*="__bnVal"],[class*="__tisNum"],[class*="__fsNum"]{
  font-size:clamp(1rem,1.9vw,1.35rem);letter-spacing:.06em;
  font-family:var(--ff-mono,"JetBrains Mono",monospace);font-weight:600;
}
[class*="__fsNum"] small{display:block;font-size:9.5px;opacity:.6;letter-spacing:.14em;margin-top:4px}
[class*="__hsBig"]{font-family:var(--ff-mono,"JetBrains Mono",monospace)}

@media (max-width:720px){.d-quote{padding:30px 24px;margin-bottom:44px}}

/* os quatro pilares do hero sao palavras (nao numeros curtos como no
   layout original): aperta o gap e trava a quebra do rotulo para que
   caibam numa linha so */
[class*="__heroStats"]{gap:18px 26px!important}
[class*="__heroStats"] [class*="__hsLbl"]{white-space:nowrap;font-size:9px;letter-spacing:.12em}
@media (max-width:900px){
  [class*="__heroStats"]{gap:16px 20px!important}
  [class*="__heroStats"] [class*="__hsVal"]{font-size:15px}
  [class*="__heroStats"] [class*="__hsLbl"]{font-size:8.5px;letter-spacing:.08em}
}

/* os dois marcadores viraram palavra + qualificador */
[class*="__fsNum"]{line-height:1.15}

/* ---------- 21. manifesto ---------- */

/* O bloco nascia quase preto (#04131f→#02101a) e afundava entre as
   secoes vizinhas. Painel mais claro, com o ouro e o ciano da marca
   nas quinas e as bordas marcadas, para o manifesto ler como uma
   faixa destacada da pagina. */
[class*="__manifesto"]{
  background:
    radial-gradient(72% 52% at 18% 0,#d6a04945,transparent 62%),
    radial-gradient(72% 52% at 82% 100%,#0ca0e42e,transparent 62%),
    linear-gradient(#0b1e31 0%,#08192a 52%,#0b1e31 100%);
  border-top:1px solid var(--d-hair);
  border-bottom:1px solid var(--d-hair);
  box-shadow:inset 0 1px 0 #fcd07626,inset 0 -1px 0 #fcd0761a;
}
/* a trama de pontos do fundo acompanha o painel mais claro */
[class*="__manifesto"]::before{opacity:.8}

/* a tag "Manifesto" vinha em #4a3208 (marrom escuro) sobre fundo
   escuro: era praticamente invisivel */
[class*="__manifesto"] [class*="__tag"]{
  color:var(--d-gold-light);
  background:#fcd07610;
  border-color:var(--d-hair);
  box-shadow:inset 0 0 18px #d6a0491a;
}
[class*="__manifesto"] [class*="__tagDot"]{
  background:var(--d-gold-light);box-shadow:0 0 10px var(--d-gold);
}

/* assinatura */
[class*="__manifesto"] [class*="__sig"]{color:#eaf2fbd6}
[class*="__manifesto"] [class*="__sigLine"]{
  background:linear-gradient(90deg,transparent,var(--d-gold));width:56px;
}

/* --- revelacao em gradiente --------------------------------------
   O CSS original nasce com .word{opacity:.18} contando com um JS de
   karaoke que nao veio no snapshot. Este e o piso SEM JavaScript: ja
   se le o paragrafo inteiro. */
[class*="__karaoke"] [class*="__word"]{opacity:.72}

/* Com JS, manifesto-karaoke.js marca o paragrafo com .d-reveal e
   escreve --w (0..1) em cada palavra conforme a rolagem. A faixa de
   transicao cobre varias palavras ao mesmo tempo, entao o que
   atravessa o texto e um gradiente, nao uma chave liga/desliga:

     opacity   sobe de .42 a 1
     color     interpola de um azul frio para o branco do corpo
     text-shadow  clarao dourado com pico no MEIO da transicao
                  (w*(1-w) vale 0 nas pontas e .25 em w=.5), que e o
                  que da a aresta luminosa varrendo o paragrafo */
[class*="__karaoke"].d-reveal [class*="__word"]{
  --w:0;
  --w-flare:calc(var(--w) * (1 - var(--w)) * 4);
  opacity:calc(.42 + var(--w) * .58);
  text-shadow:0 0 calc(var(--w-flare) * 18px) rgba(252,208,118,calc(var(--w-flare) * .8));
  transition:opacity .45s var(--d-ease),color .45s var(--d-ease),text-shadow .45s var(--d-ease);
}

/* So as palavras soltas trocam de cor: as que estao dentro de
   <strong>/<em> sao os destaques dourados e precisam manter a cor do
   pai — por isso o combinador de filho direto. */
@supports (color:color-mix(in oklab,#000,#fff)){
  [class*="__karaoke"].d-reveal > [class*="__word"]{
    color:color-mix(in oklab,#7e9ab5,var(--d-text) calc(var(--w) * 100%));
  }
}

/* #8b5811 (dourado profundo) e escuro demais sobre o navy: os destaques
   sumiam. Passa para o dourado claro da marca. */
[class*="__karaoke"] strong{color:var(--d-gold-light);font-weight:500}
[class*="__karaoke"] em{color:var(--d-gold);font-weight:400}

/* ---------- 22. essencia: cartoes reativos ---------- */
/* O markup ja nasce com .spot (um spotlight que le --sx/--sy) e com
   data-tilt nos cartoes, mas o JS que alimentava essas variaveis nao
   veio no snapshot: o brilho ficava parado no centro. why-cards.js
   devolve o rastreamento e acrescenta o ima nos desenhos.

     --sx / --sy   ponteiro em % dentro do cartao
     --vx / --vy   deslocamento magnetico do desenho, em px
     --vs          escala do desenho
     --near        0..1, proximidade do ponteiro a cada ponto */

/* o spotlight original e discreto demais sobre o navy; aqui ele ganha
   o par ouro/ciano da marca */
[class*="__why"] [class*="__spot"]{
  background:
    radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),#d6a04930,transparent 62%),
    radial-gradient(220px circle at var(--sx,50%) var(--sy,50%),#0ca0e422,transparent 58%);
}
[class*="__why"] article[class*="__card"]:hover{
  border-color:var(--d-hair);
  box-shadow:0 22px 60px #00040c66,inset 0 1px 0 #fcd0761f;
}

/* o desenho e puxado pelo cursor */
[class*="__why"] [class*="__visual"]{
  transform:translate3d(var(--vx,0px),var(--vy,0px),0) scale(var(--vs,1));
  will-change:transform;
}

/* cada ponto do desenho acende e cresce quando o cursor passa perto.
   transform-box:fill-box faz o scale girar em torno do proprio
   circulo do SVG, e nao da origem do viewBox */
[class*="__why"] [class*="__visual"] circle{
  transform-box:fill-box;transform-origin:center;
  transform:scale(calc(1 + var(--near,0) * .55));
  filter:drop-shadow(0 0 calc(var(--near,0) * 9px) rgba(252,208,118,calc(var(--near,0) * .9)));
  transition:transform .35s var(--d-ease),filter .35s var(--d-ease);
}
/* o no central ja tinha brilho proprio (secao 8): mantem o piso */
[class*="__why"] [class*="__visual"] [class*="__nodeCenter"]{
  filter:drop-shadow(0 0 calc(6px + var(--near,0) * 10px) rgba(252,208,118,calc(.55 + var(--near,0) * .45)));
}
/* orbita: os planetas giram por animacao, entao aqui so o brilho */
[class*="__why"] [class*="__planet"],[class*="__why"] [class*="__orbitCore"]{
  filter:drop-shadow(0 0 calc(var(--near,0) * 12px) rgba(252,208,118,calc(var(--near,0) * .95)));
  transition:filter .35s var(--d-ease);
}

@media (prefers-reduced-motion:reduce){
  [class*="__why"] [class*="__visual"]{transform:none}
  [class*="__why"] [class*="__visual"] circle{transform:none}
}

/* ---------- 23. revelacao linha a linha ---------- */
/* Usada no Retorno e no Metodo. As linhas dos titulos e da citacao
   foram separadas em .d-ln para poderem subir uma a uma; o <br/>
   saiu junto, porque o span em bloco ja quebra a linha. O estado
   escondido so existe quando linhas.js o aplica (.d-lin, mais a
   classe .d-linhas na secao), entao sem JavaScript tudo nasce
   visivel. */
/* .d-ln e classe nossa e so existe onde quebramos titulo em linhas,
   entao pode valer global — o span em bloco substitui o <br/> */
.d-ln{display:block}

/* A transicao vive no estado de CHEGADA, nao no escondido. Se
   estivesse em .d-lin, aplicar a classe no load animaria a secao de
   visivel para invisivel — ela sumiria em 0,85s antes de aparecer.
   Declarada em .d-lin-on, o esconder e instantaneo e so a entrada
   e animada.

   O escopo em .d-linhas (classe que o script poe na secao) sobe a
   especificidade para (0,2,0): sem ele, .d-quote footer{opacity:.5}
   (0,1,1) venceria .d-lin e a autoria nunca chegaria a esconder. */
/* transition:none e obrigatorio aqui, nao redundante: pecas que ja
   trazem transition:all na propria regra — o botao .hueCta, por
   exemplo — ANIMARIAM o esconder ao receber a classe no load, em vez
   de nascerem escondidas. Como .d-lin-on vem depois com a mesma
   especificidade, a transicao de entrada continua valendo. */
.d-linhas .d-lin{opacity:0;transform:translateY(22px);transition:none}
.d-linhas .d-lin-on{
  opacity:1;transform:none;
  transition:opacity .85s var(--d-ease),transform .85s var(--d-ease);
}
/* a autoria e desenhada a 50% */
.d-linhas .d-quote footer.d-lin-on{opacity:.5}

@media (prefers-reduced-motion:reduce){
  .d-linhas .d-lin{opacity:1;transform:none}
  .d-linhas .d-quote footer.d-lin{opacity:.5}
}

/* ---------- 24. fundo: detalhes finos ---------- */
/* A malha hexagonal de body::before esta mascarada para o topo da
   pagina, e daqui para baixo cada secao tem fundo OPACO — uma camada
   fixa atras do body ficaria escondida por elas. Entao a
   instrumentacao entra DENTRO de cada secao, num ::after com
   z-index:-1: como body>* ja da position:relative e z-index:1 as
   secoes, elas sao contextos de empilhamento, e o -1 cai acima do
   fundo da secao e abaixo do conteudo.

   marks.svg e um ladrilho de 260px com uma cruz, dois tracinhos e
   dois pontos — marcas de instrumento, nao uma trama. */
[class*="__why"]::after,
[class*="__programs"]::after,
[class*="__proofs"]::after,
[class*="__founder"]::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../brand/marks.svg");
  background-size:260px 260px;
  opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
}

/* brilhos de quina onde ainda nao havia nenhum — a secao de provas
   ja traz os seus dois no CSS de componentes */
[class*="__why"]::after,
[class*="__programs"]::after,
[class*="__founder"]::after{
  background-image:
    url("../brand/marks.svg"),
    radial-gradient(58% 40% at 10% 4%,#8b581114,transparent 64%),
    radial-gradient(58% 40% at 90% 96%,#014c8c18,transparent 64%);
  background-size:260px 260px,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat;
}

/* ---------- 25. metodo: o escudo no lugar do globo ---------- */
/* Mesma peca do hero — camadas mascaradas pelo brasao, separadas em
   translateZ — mas dentro da moldura do metodo e com a moldura como
   area de ativacao. O escudo aqui e o assunto do quadro, nao uma
   marca-d'agua: os pisos de opacidade sao bem mais altos que os do
   hero. As variaveis sao escritas por hubs-escudo.js:

     --h-tx / --h-ty   deslocamento magnetico, em px
     --h-rx / --h-ry   inclinacao, em graus
     --h-sc            escala
     --h-hot           0..1, proximidade do ponteiro
     --h-sx / --h-sy   ponteiro em px dentro da caixa do escudo
     --h-mx / --h-my   ponteiro em px dentro da moldura
     --h-spin          giro dos aneis

   Com valores padrao a cena fica montada e estatica sem JavaScript. */
[class*="__hmFrame"]{
  --h-tx:0px;--h-ty:0px;--h-rx:0deg;--h-ry:0deg;
  --h-sc:1;--h-hot:0;--h-sx:50%;--h-sy:45%;
  --h-mx:50%;--h-my:50%;--h-spin:0deg;
}
/* MOUSE TRACKING na moldura: halo frio seguindo o ponteiro */
[class*="__hmFrame"]::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(280px circle at var(--h-mx) var(--h-my),#0ca0e426,transparent 68%);
  opacity:var(--h-hot);
  transition:opacity .5s var(--d-ease);
}

.d-he{
  position:absolute;top:50%;left:50%;z-index:1;
  height:76%;aspect-ratio:454/548;
  perspective:760px;pointer-events:none;
  /* o translate(-50%,-50%) faz offsetLeft/offsetTop caírem no centro
     visual do escudo — e de la que o script tira o campo, sem ler
     layout ja transformado */
  transform:translate3d(calc(-50% + var(--h-tx)),calc(-50% + var(--h-ty)),0);
  will-change:transform;
}
.d-he-3d{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--h-rx)) rotateY(var(--h-ry)) scale(var(--h-sc));
  will-change:transform;
}
.d-he-3d span{
  position:absolute;inset:0;display:block;
  -webkit-mask:url("../brand/dartha-mark-mask.png") center/contain no-repeat;
  mask:url("../brand/dartha-mark-mask.png") center/contain no-repeat;
}

/* o prefixo .d-he-3d e proposital: a regra generica acima usa o
   atalho `mask`, de especificidade (0,1,1), e reescreveria as
   mascaras destas duas camadas */
.d-he-3d .d-he-bloom{
  -webkit-mask:none;mask:none;
  background:radial-gradient(ellipse 52% 48% at 50% 50%,#d6a04945,#0ca0e420 55%,transparent 74%);
  opacity:calc(.4 + var(--h-hot) * .45);
  transform:translateZ(-70px);
}
.d-he-fringe{
  background:var(--d-cyan-bright);
  opacity:calc(.07 + var(--h-hot) * .07);
  transform:translateZ(-22px);
}
.d-he-base{
  background:linear-gradient(168deg,var(--d-gold-light),var(--d-gold) 46%,var(--d-gold-deep));
  opacity:calc(.17 + var(--h-hot) * .13);
}
.d-he-spec{
  background:radial-gradient(190px circle at var(--h-sx) var(--h-sy),
    #fcd076b8 0%,#d6a04966 30%,#0ca0e438 58%,transparent 78%);
  opacity:calc(.1 + var(--h-hot) * .6);
  transform:translateZ(26px);
}
.d-he-3d .d-he-rim{opacity:0}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .d-he-3d .d-he-rim{
    -webkit-mask-image:url("../brand/dartha-mark-mask.png"),url("../brand/dartha-mark-mask.png");
    mask-image:url("../brand/dartha-mark-mask.png"),url("../brand/dartha-mark-mask.png");
    -webkit-mask-size:contain,98.2%;mask-size:contain,98.2%;
    -webkit-mask-position:center,center;mask-position:center,center;
    -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
    -webkit-mask-composite:xor;mask-composite:exclude;
    background:radial-gradient(240px circle at var(--h-sx) var(--h-sy),
      #f9ee8a 0%,var(--d-gold-light) 22%,var(--d-gold) 44%,var(--d-cyan) 70%,#0ca0e400 88%);
    opacity:calc(.32 + var(--h-hot) * .5);
    transform:translateZ(38px);
  }
}
.d-he-sweep{
  background:linear-gradient(104deg,
    transparent 42%,#fcd07600 45%,#fcd0765e 50%,#fcd07600 55%,transparent 58%);
  background-size:280% 100%;
  opacity:.5;transform:translateZ(46px);
  animation:d-he-sweep 7.5s var(--d-ease) infinite;
}
.d-he-anel{
  position:absolute;inset:-16%;
  transform:translateZ(-110px) rotate(var(--h-spin));
  opacity:calc(.3 + var(--h-hot) * .3);
}
.d-he-anel svg{width:100%;height:100%;display:block}
.d-he-ring{fill:none;stroke:var(--d-gold);stroke-opacity:.2;stroke-width:1}
.d-he-tick{stroke:var(--d-cyan-bright);stroke-opacity:.4;stroke-width:1.4}

@keyframes d-he-sweep{
  0%{background-position:180% 0;opacity:0}
  12%{opacity:.5}
  58%{opacity:.5}
  70%,100%{background-position:-80% 0;opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .d-he-sweep{display:none}
  .d-he-anel{transform:none}
}

/* ---------- 26. problema: as tres dores de quem chega ----------
   A pagina inteira falava da Dartha. Esta secao vem antes do
   Manifesto porque o visitante precisa se reconhecer antes de
   ouvir quem somos — e porque cada dor ja e a porta do produto
   que a resolve (o roteamento que o quiz vai fazer um dia). */

.d-problema{position:relative;z-index:1;padding:110px 0 40px}
.d-problemaInner{max-width:1280px;margin:0 auto;padding:0 32px}

.d-problemaHead{max-width:760px;margin:0 auto 54px;text-align:center}
.d-problemaEyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:var(--ff-mono,"JetBrains Mono",monospace);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--d-text);opacity:.55;
}
.d-problemaDash{width:26px;height:1px;background:linear-gradient(90deg,var(--d-cyan),var(--d-gold))}
.d-problemaTitle{
  margin:0;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.1;
  letter-spacing:-.02em;font-weight:500;color:var(--d-text);
}
.d-problemaTitle .d-ln{display:block}
.d-problemaTitle em{
  font-family:var(--ff-display,"Instrument Serif",serif);font-style:italic;
  background:linear-gradient(100deg,var(--d-gold-light),var(--d-gold-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.d-problemaSub{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--d-text);opacity:.6}

.d-dores{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}

.d-dor{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  padding:30px 28px 26px;border:1px solid var(--d-hair);border-radius:18px;
  background:linear-gradient(180deg,#08192b5c,#0007160f);
  transition:border-color .5s var(--d-ease),box-shadow .6s var(--d-ease),transform .6s var(--d-ease);
}
.d-dor::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--d-gold-light) 30%,var(--d-cyan-bright) 72%,transparent);
  transform:scaleX(0);transform-origin:left center;transition:transform .75s var(--d-ease);
}
.d-dor:hover{
  transform:translateY(-6px);border-color:#0ca0e459;
  box-shadow:0 0 0 1px #0ca0e41f,0 22px 60px #00040c8c;
}
.d-dor:hover::after{transform:scaleX(1)}

.d-dorIdx{
  font-family:var(--ff-mono,"JetBrains Mono",monospace);
  font-size:11px;letter-spacing:.16em;color:var(--d-gold);
  text-shadow:0 0 14px #d6a04947;margin-bottom:20px;
}
/* a dor sai na voz do visitante: serifada, como uma fala */
.d-dorFala{
  margin:0 0 16px;font-family:var(--ff-display,"Instrument Serif",serif);
  font-size:clamp(1.15rem,1.75vw,1.45rem);line-height:1.3;
  letter-spacing:-.01em;color:var(--d-text);
}
.d-dorResp{margin:0 0 22px;font-size:14.5px;line-height:1.65;color:var(--d-text);opacity:.62}
.d-dorResp em{font-style:italic;color:var(--d-cyan-glow);opacity:.9}

.d-dorLink{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--ff-mono,"JetBrains Mono",monospace);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--d-gold);text-decoration:none;
  transition:gap .4s var(--d-ease),color .4s var(--d-ease);
}
.d-dorLink:hover{gap:13px;color:var(--d-gold-light)}

@media (max-width:980px){
  .d-dores{grid-template-columns:1fr}
  .d-problema{padding:80px 0 24px}
  .d-problemaInner{padding:0 20px}
}

/* ---------- 27. metodo: o que a comunidade entrega x o que so a
   consultoria entrega ----------
   O Metodo descrevia "entramos na sua operacao" para todos os
   produtos — promessa que so a consultoria cumpre. Este bloco separa
   as duas entregas na propria pagina, antes da compra. */

.d-entrega{
  max-width:1080px;margin:64px auto 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch;
}
.d-entregaCol{
  display:flex;flex-direction:column;
  padding:30px 30px 26px;border:1px solid var(--d-hair);border-radius:18px;
  background:linear-gradient(180deg,#08192b5c,#0007160f);
  transition:border-color .5s var(--d-ease),box-shadow .6s var(--d-ease);
}
.d-entregaCol:hover{border-color:#0ca0e459;box-shadow:0 0 0 1px #0ca0e41f,0 18px 50px #00040c73}
/* a consultoria e o caminho de empresa: ganha a borda dourada */
.d-entregaColDestaque{border-color:#d6a04947;background:linear-gradient(180deg,#8b58111f,#0007160f)}
.d-entregaColDestaque:hover{border-color:#fcd07659;box-shadow:0 0 0 1px #fcd0761f,0 18px 50px #00040c73}

.d-entregaTag{
  font-family:var(--ff-mono,"JetBrains Mono",monospace);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--d-gold);margin-bottom:10px;
}
.d-entregaColDestaque .d-entregaTag{color:var(--d-gold-light)}
.d-entregaTitulo{
  font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:500;line-height:1.3;
  letter-spacing:-.01em;color:var(--d-text);margin-bottom:20px;
}
.d-entregaLista{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.d-entregaLista li{
  position:relative;padding-left:20px;
  font-size:14px;line-height:1.55;color:var(--d-text);opacity:.72;
}
.d-entregaLista li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;
  background:linear-gradient(90deg,var(--d-cyan),var(--d-gold));
}
.d-entregaNota{
  margin:0 0 20px;padding-top:16px;border-top:1px solid var(--d-hair);
  font-size:13.5px;line-height:1.55;color:var(--d-text);opacity:.55;
}
.d-entregaLink{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono,"JetBrains Mono",monospace);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--d-gold);text-decoration:none;
  transition:gap .4s var(--d-ease),color .4s var(--d-ease);
}
.d-entregaLink:hover{gap:13px;color:var(--d-gold-light)}
.d-entregaLink svg{flex-shrink:0}

@media (max-width:900px){
  .d-entrega{grid-template-columns:1fr;margin-top:44px}
}