/* i9 Dental: vidro escuro "cinematografico". Vidro so no que fica por cima;
   dentro do painel e translucido sem blur, pra nao pesar no celular. */

/* Fundo: luz suave em vez de manchas fortes, com as cores da marca bem discretas */
html{background:#000}
body{background:transparent!important}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;transform:translateZ(0);
  background:
    radial-gradient(60vmax 45vmax at 12% -10%,rgba(255,255,255,.09),transparent 60%),
    radial-gradient(38vmax 38vmax at 0% 10%,rgba(139,124,255,.16),transparent 62%),
    radial-gradient(36vmax 36vmax at 105% 35%,rgba(79,227,193,.09),transparent 62%),
    radial-gradient(40vmax 40vmax at 40% 110%,rgba(255,181,71,.07),transparent 62%),
    #000}
/* Granulado de filme por cima de tudo, bem leve */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Superficie de vidro: base escura, reflexo quente no canto de cima e frio no de baixo */
.app,.sheet,.ar-panel,.inner,.area-switch a,.perfil,.ar-tabs,.faq details,.box,.enter a{
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(254,234,225,.05),transparent 55%),
    radial-gradient(120% 90% at 100% 100%,rgba(192,206,242,.045),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 45%,rgba(255,255,255,0)),
    rgba(12,12,12,.62)!important;
  border-color:transparent!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 30px 60px -36px rgba(0,0,0,.85)}
.ar-panel,.perfil,.faq details,.box,.area-switch a,.enter a{position:relative}

/* Pilulas (menu, abas): vidro mais claro e fino, como barra de navegacao */
.area-switch a,.perfil,.ar-tabs,.enter a{
  background:rgba(30,30,30,.62)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 8px 24px -18px rgba(0,0,0,.5)}

/* Luz que segue o mouse na borda (desktop) */
.app::after,.sheet::after,.ar-panel::after,.inner::after,.faq details::after,.box::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  opacity:var(--lg-on,0);transition:opacity .3s;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.35),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* Dentro do painel: translucido, sem blur proprio (o painel ja borra o fundo) */
.app aside{background:rgba(255,255,255,.02)!important}
.app .kpi,.app .case,.app .row,.app .box{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))!important;
  border-color:rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.app .box::after{display:none}

/* Botao secundario em vidro */
.btn.ghost,.b2{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

/* Toque responde na hora */
.btn,.b1,.b2,.perfil button,.ar-tabs button,.area-switch a,.enter a,.tab{transition:transform .1s ease-out}
.btn:active,.b1:active,.b2:active,.perfil button:active,.ar-tabs button:active,.area-switch a:active,.enter a:active,.tab:active{transform:scale(.97)}

/* Vidro de verdade so onde tem conteudo atras: gaveta lateral */
.sheet.on{-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)}

/* Fundo atras das janelas volta a desfocar */
.scrim{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.scrim.on,.dent-dialog::backdrop{-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}


/* Navegador sem suporte: fundo solido, texto sempre legivel */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .app,.sheet,.ar-panel,.inner,.area-switch a,.perfil,.ar-tabs,.faq details,.box,.enter a{background:rgba(14,14,14,.95)!important}
}
/* Quem pediu menos transparencia no sistema: vidro fosco quase solido */
@media (prefers-reduced-transparency:reduce){
  .app,.sheet,.ar-panel,.inner,.area-switch a,.perfil,.ar-tabs,.faq details,.box,.enter a{
    background:rgba(14,14,14,.92)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Acabamento editorial: preto puro, branco quente, titulo leve e apertado, botao creme em pilula */
:root{--txt:#f2ede4;--muted:rgba(242,237,228,.6);--line:rgba(242,237,228,.1)}
html{background:#000}
body{color:#f2ede4}
h1,h2,.top h1,.sec h2.t{font-weight:500!important;letter-spacing:-.035em!important}
.hero h1{font-weight:400!important;line-height:1!important}
.hero .kicker{display:inline-block;padding:5px 14px;border:1px solid rgba(242,237,228,.18);border-radius:999px;font-family:inherit;font-size:12px;letter-spacing:.1em}

.b1,.btn:not(.ghost){background:#efe8dc!important;color:#0b0a09!important;border-radius:999px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px -12px rgba(239,232,220,.35)!important}
.b1:hover,.btn:not(.ghost):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 38px -12px rgba(239,232,220,.5)!important}
.b2,.btn.ghost{border-radius:999px!important;background:rgba(20,19,18,.7)!important;border:1px solid rgba(242,237,228,.12)!important;
  }
.btn.full{background:var(--acc)!important;color:#0b0a09!important}
.enter a.b1{background:#efe8dc!important;color:#0b0a09!important;-webkit-backdrop-filter:none;backdrop-filter:none}

/* Gravuras do i9: arte atras, vidro por cima (so na pagina inicial) */
.hero{position:relative}
.hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-120px;bottom:-60px;left:50%;width:min(1400px,100vw);transform:translateX(-50%) translateZ(0);
  background:url(/img/hero.webp) right center/auto 100% no-repeat;opacity:.32;
  -webkit-mask-image:linear-gradient(90deg,transparent 74%,#000 96%),linear-gradient(180deg,transparent,#000 18%,#000 75%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 74%,#000 96%),linear-gradient(180deg,transparent,#000 18%,#000 75%,transparent);mask-composite:intersect}
.ar-panel{overflow:hidden}
.ar-panel::before{content:"";position:absolute;top:0;right:0;width:56%;height:560px;pointer-events:none;z-index:0;opacity:.5;transform:translateZ(0);
  background:var(--art) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(270deg,#000 35%,transparent),linear-gradient(180deg,#000 50%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(270deg,#000 35%,transparent),linear-gradient(180deg,#000 50%,transparent);mask-composite:intersect}
.ar-panel>*{position:relative;z-index:1}
#ar-lab{--art:url(/img/lab.webp)}
#ar-dentista{--art:url(/img/dentista.webp)}
#ar-cadista{--art:url(/img/cadista.webp)}
.ar-steps li{background:rgba(10,10,10,.55)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:rgba(242,237,228,.1)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
@media (max-width:760px){
  .hero::before{opacity:.12;background-position:70% center}
  .ar-panel{padding-top:150px!important}
  .ar-panel::before{width:100%;height:190px;opacity:.4;
    -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
}
@media (prefers-reduced-transparency:reduce){.ar-steps li,.sheet{background:rgba(14,14,14,.94)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}
.hero p{text-shadow:0 2px 18px rgba(0,0,0,.85)}

/* Secoes abaixo da dobra so sao desenhadas quando chegam perto da tela */
.sec{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ── Padrões de referência (Apple · Linear · Vercel · Raycast) ─────────────
   Menu flutuante de vidro que acompanha a rolagem, uma escala só de cantos,
   etiqueta em frase normal, título maior e mais respiro entre as seções. */
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Menu: pílula de vidro presa no topo, o conteúdo passa por baixo */
header{position:sticky;top:12px;z-index:50;margin:12px auto 0!important;max-width:1140px!important;
  padding:8px 8px 8px 18px!important;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(10,10,12,.55);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(242,237,228,.09),inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px -18px rgba(0,0,0,.85)}
header .enter a{border-color:transparent!important;background:transparent!important;box-shadow:none!important}
header .enter a:not(.b1):hover{background:rgba(255,255,255,.06)!important}
@media (max-width:760px){header{top:8px;margin:8px 10px 0!important;padding:6px 6px 6px 14px!important}}
@media (prefers-reduced-transparency:reduce){header{background:#0e0e11;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Etiqueta do topo em frase normal, sem caixa alta espaçada */
.hero .kicker{text-transform:none!important;letter-spacing:0!important;font-size:13px!important}

/* Título com mais presença; texto de apoio mais estreito e arejado */
.hero{margin-top:64px!important}
.hero h1{font-size:clamp(40px,6vw,72px)!important;line-height:1!important;letter-spacing:-.04em!important}
.hero p{max-width:600px;margin-inline:auto;line-height:1.55}

/* Uma escala de cantos: blocos 24 · itens 16 · ícones 12 · botões em pílula */
:is(.ar-panel,.start,.founder){border-radius:24px!important}
:is(.ar-steps li,.ar-row,.ar-feat,.faq details,.combo div,.fund>div){border-radius:16px!important}
:is(.ico,.proof){border-radius:12px!important}
.cta{border-radius:999px!important}

/* Respiro entre seções e títulos de seção maiores */
.sec{margin-top:clamp(72px,9vw,128px)!important}
.sec h2.t{font-size:clamp(30px,4vw,48px)!important;letter-spacing:-.035em!important;line-height:1.05}
.ar{margin-top:clamp(40px,6vw,72px)!important}
.foot{margin-top:clamp(72px,9vw,120px)!important;border-top-color:rgba(242,237,228,.08)!important}