@font-face{font-family:"DM Sans";src:url("../assets/fonts/DMSans-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../assets/fonts/DMSans-Medium.ttf") format("truetype");font-style:normal;font-weight:500 600;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../assets/fonts/DMSans-Bold.ttf") format("truetype");font-style:normal;font-weight:700 900;font-display:swap}

:root{
  color-scheme:dark;
  --ink:#0a0a0b;
  --surface:#161618;
  --raised:#232326;
  --line:#2a2a2e;
  --white:#fafafa;
  --muted:#a5a5ae;
  --quiet:#74747d;
  --blue:#0077fc;
  --action:#0068de;
  --pressed:#0055b8;
  --sans:"DM Sans",system-ui,sans-serif;
  --pad:clamp(20px,4.5vw,72px);
  --max:1440px;
  --fast:160ms;
  --normal:360ms;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;overflow-x:hidden;background:var(--ink);color:var(--white);font:400 16px/1.55 var(--sans);text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
em{font-style:normal}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

.skip-link{position:fixed;left:16px;top:-80px;z-index:120;padding:12px 18px;border-radius:999px;background:var(--white);color:var(--ink);transition:top var(--fast)}
.skip-link:focus{top:16px}

.site-header{position:fixed;z-index:80;top:18px;left:50%;width:min(calc(100% - 32px),1160px);height:60px;transform:translateX(-50%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px 0 18px;border:1px solid #ffffff21;border-radius:18px;background:#0a0a0bd9;backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:9px;width:max-content;font-size:17px;font-weight:700;letter-spacing:-.04em}
.brand img{width:22px;height:22px}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{padding:9px 13px;border-radius:10px;color:var(--muted);font-size:13px;font-weight:500;transition:color var(--fast),background var(--fast)}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:#ffffff0d;color:#fff}
.header-actions{justify-self:end}
.menu-button{width:42px;height:42px;display:none;place-items:center;border:1px solid var(--line);border-radius:12px;background:transparent;color:#fff}
.menu-button span,.menu-button span::before,.menu-button span::after{width:17px;height:1px;display:block;background:currentColor}
.menu-button span{position:relative}
.menu-button span::before,.menu-button span::after{content:"";position:absolute;left:0}
.menu-button span::before{top:-5px}
.menu-button span::after{top:5px}

.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 20px;border:1px solid transparent;border-radius:12px;background:var(--action);color:#fff;font-weight:700;transition:transform var(--fast),background var(--fast),border-color var(--fast)}
.button:hover{transform:translateY(-1px);background:var(--blue)}
.button:active{transform:scale(.98);background:var(--pressed)}
.button-secondary{border-color:var(--line);background:transparent}

.eyebrow{margin:0 0 24px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

.hero-centered{min-height:86svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:150px var(--pad) 80px;text-align:center}
.hero-copy-block{max-width:960px;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:0}
.hero-centered h1{max-width:1040px;margin:0 auto;font-size:clamp(56px,8.5vw,132px);font-weight:700;line-height:.88;letter-spacing:-.075em}
.hero-centered h1 em{color:var(--blue);display:inline}
.hero-copy{max-width:680px;margin:28px auto 0;color:#c9c9cf;font-size:clamp(17px,1.45vw,22px);line-height:1.52}
.store-area{margin-top:38px;display:flex;flex-direction:column;align-items:center}
.availability{margin:0 0 11px;color:var(--quiet);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.store-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.store-badges-centered{justify-content:center}
.store-badge{display:inline-flex;align-items:center;min-height:40px;cursor:default}
.store-badge img{width:auto;height:40px}

.value-strip{width:min(100%,var(--max));margin:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:0 var(--pad);border-block:1px solid var(--line)}
.value-strip span{padding:24px 0;color:var(--quiet);font-size:12px}
.value-strip span+span{padding-left:28px;border-left:1px solid var(--line)}
.value-strip b{margin-left:10px;color:var(--white);font-size:13px}

.decision-section{padding:clamp(100px,13vw,190px) var(--pad);background:var(--white);color:var(--ink)}
.section-heading{width:min(100%,var(--max));margin:auto}
.section-heading .eyebrow{color:#626269}
.section-heading h2{max-width:1060px;margin:0;font-size:clamp(48px,6.8vw,106px);font-weight:700;line-height:.94;letter-spacing:-.065em}
.decision-grid{width:min(100%,var(--max));margin:clamp(70px,9vw,130px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;list-style:none}
.decision-grid li{padding-top:20px;border-top:1px solid #cfcfd4}
.decision-grid span{color:var(--blue);font-size:12px;font-weight:700}
.decision-grid h3{margin:44px 0 12px;font-size:24px;letter-spacing:-.035em}
.decision-grid p{max-width:360px;margin:0;color:#5e5e66;font-size:16px}

.product-section{width:min(100%,var(--max));margin:auto;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(50px,8vw,120px);align-items:center;padding:clamp(100px,13vw,190px) var(--pad)}
.product-image{min-height:680px;overflow:hidden;border-radius:24px;background:var(--surface)}
.product-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.08)}
.product-copy h2{margin:0;font-size:clamp(46px,5.2vw,82px);font-weight:700;line-height:.96;letter-spacing:-.06em}
.product-lead{max-width:590px;margin:28px 0 48px;color:var(--muted);font-size:18px}
.feature-list{margin:0}
.feature-list div{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.feature-list div:last-child{border-bottom:1px solid var(--line)}
.feature-list dt{font-weight:700}
.feature-list dd{margin:0;color:var(--muted)}

.statement-section{padding:clamp(110px,15vw,220px) var(--pad);background:var(--action);color:#fff;text-align:center}
.statement-section p{margin:0 0 10px;font-size:clamp(20px,2.4vw,34px);font-weight:500}
.statement-section h2{margin:0;font-size:clamp(58px,9vw,142px);font-weight:700;line-height:.9;letter-spacing:-.075em}

.download-section{min-height:720px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:110px var(--pad);text-align:center}
.download-mark{width:50px;height:50px;margin-bottom:30px}
.download-section .eyebrow{margin-bottom:18px}
.download-section h2{max-width:880px;margin:0;font-size:clamp(50px,7vw,104px);font-weight:700;line-height:.94;letter-spacing:-.065em}
.download-section>p:not(.eyebrow){max-width:600px;margin:26px auto 30px;color:var(--muted);font-size:18px}
.store-badges-centered{justify-content:center}

.page-hero{min-height:620px;display:grid;align-items:end;padding:160px var(--pad) 90px;border-bottom:1px solid var(--line)}
.page-hero-inner{width:min(100%,var(--max));margin:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:70px;align-items:end}
.page-hero-inner>*{min-width:0}
.page-hero h1{margin:0;font-size:clamp(64px,9vw,132px);font-weight:700;line-height:.86;letter-spacing:-.075em}
.page-hero h1 em{color:var(--blue)}
.page-hero-inner>p,.page-hero-inner>div>p:not(.eyebrow){max-width:560px;margin:0;color:var(--muted);font-size:20px}
.error-hero{min-height:75vh;display:grid;align-items:center}
.error-action{margin-top:24px!important}
.content-shell{width:min(calc(100% - 40px),var(--max));margin:auto;padding:clamp(80px,10vw,150px) 0}

.about-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.about-card{min-height:320px;padding:34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.about-card .num{color:var(--blue);font-size:12px;font-weight:700}
.about-card h2{margin:86px 0 12px;font-size:34px;line-height:1;letter-spacing:-.04em}
.about-card p{max-width:560px;margin:0;color:var(--muted)}

.cta-band{padding:clamp(100px,12vw,180px) var(--pad);background:var(--action);color:#fff;text-align:center}
.cta-band h2{max-width:980px;margin:0 auto;font-size:clamp(54px,7vw,108px);font-weight:700;line-height:.92;letter-spacing:-.065em}
.cta-band p{max-width:620px;margin:28px auto;color:#dbeaff;font-size:18px}
.cta-band .button{background:#fff;color:#111}
.cta-band .button:hover{background:#f0f0f3}

.docs-layout{display:grid;grid-template-columns:220px minmax(0,800px);gap:clamp(50px,8vw,110px);align-items:start}
.docs-nav{position:sticky;top:110px}
.docs-nav a{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}
.docs-nav a:hover{color:#fff}
.docs-content h2{margin:70px 0 14px;font-size:42px;line-height:1;letter-spacing:-.045em}
.docs-content h2:first-child{margin-top:0}
.docs-content p,.docs-content li{color:var(--muted)}
.docs-content strong{color:#fff}
.docs-content{min-width:0}
/* max-width:100% junto do overflow:auto: sem ele o <pre> ainda participa
   do calculo de min-content do container e volta a empurrar a coluna. */
.docs-content pre{max-width:100%;overflow:auto;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:#d6e9ff}
.docs-content code{font-family:"SFMono-Regular",Consolas,monospace}
.legal{max-width:820px}
.legal h2{margin:58px 0 12px;font-size:38px;letter-spacing:-.04em}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted)}

.site-footer{padding:clamp(80px,11vw,140px) var(--pad) 40px;background:#ffffff;color:#0a0a0b;border-top:1px solid #e5e5ea}
.footer-inner{width:min(100%,var(--max));margin:auto;display:flex;flex-direction:column;gap:clamp(60px,8vw,100px)}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.5vw,36px);user-select:none;text-align:center}
.footer-icon{width:clamp(54px,10vw,145px);height:clamp(54px,10vw,145px);color:var(--blue);flex-shrink:0}
.footer-word{font-size:clamp(64px,11.8vw,175px);font-weight:700;line-height:.82;letter-spacing:-.075em;color:#0a0a0b}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;color:#6e6e73;font-size:13px}
.footer-legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.footer-legal-links span{color:#6e6e73}
.footer-legal-links a{color:#44444a;font-weight:500;transition:color var(--fast)}
.footer-legal-links a:hover{color:#000000}
.footer-meta{color:#6e6e73;font-size:13px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

@media(max-width:1000px){
  .site-header{grid-template-columns:1fr auto}
  .site-nav{display:none}
  .menu-button{display:grid}
  .site-nav.is-open{position:fixed;inset:76px 0 auto;display:grid;padding:16px;background:var(--ink);border-bottom:1px solid var(--line)}
  .site-nav.is-open a{min-height:48px;display:flex;align-items:center}
  .hero-centered{min-height:auto;padding:140px var(--pad) 60px}
  .hero-copy-block{max-width:100%;padding:0}
  .hero-centered h1{max-width:100%}
  .product-section{grid-template-columns:1fr}
  .product-image{min-height:560px}
  /* minmax(0,1fr), nao 1fr: `1fr` equivale a `minmax(auto,1fr)`, e esse
     `auto` e o min-content do item. Uma linha longa dentro do <pre> da
     docs.html estourava a coluna para 618px num viewport de 375px, e o
     `overflow-x:hidden` do body cortava o texto em vez de deixar rolar. */
  .page-hero-inner{grid-template-columns:minmax(0,1fr)}
  .docs-layout{grid-template-columns:minmax(0,1fr)}
  .docs-nav{position:static;display:flex;overflow:auto}
  .docs-nav a{min-width:max-content;padding:10px 16px 10px 0;margin-right:16px}
}

@media(max-width:700px){
  :root{--pad:20px}
  .site-header{top:10px;width:calc(100% - 20px)}
  .hero-centered{padding:130px var(--pad) 50px}
  .hero-centered h1{font-size:clamp(46px,14vw,80px)}
  .hero-copy{margin-top:22px;font-size:16px}
  .value-strip{grid-template-columns:1fr;padding:12px 20px}
  .value-strip span{padding:12px 0}
  .value-strip span+span{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .decision-grid{grid-template-columns:1fr;gap:56px}
  .decision-grid h3{margin-top:28px}
  .product-image{min-height:440px;border-radius:18px}
  .feature-list div{grid-template-columns:1fr;gap:5px}
  .download-section{min-height:620px}
  .store-badges{gap:8px}
  .store-badge img{height:36px}
  .page-hero{min-height:540px;padding:140px 20px 70px}
  .page-hero h1{font-size:clamp(40px,13vw,58px)}
  .content-shell{width:calc(100% - 40px);padding-block:70px}
  .legal h2{font-size:clamp(30px,10vw,38px)}
  .about-grid{grid-template-columns:1fr}
  .about-card{min-height:270px;padding:26px}
  .about-card h2{margin-top:60px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-legal-links{gap:14px 20px}
}

@media(max-width:380px){
  /* 320px e o menor viewport que a auditoria pede. Ali os PISOS dos clamp()
     do rodape passam a mandar (o vw ja e menor que eles) e somam mais que a
     caixa disponivel: 54px de icone + 16px de gap + ~253px da palavra = 323px
     contra 280px (320 - 2x --pad). O resultado era ~2px de overflow
     horizontal em TODAS as paginas, escondido pelo `overflow-x:hidden` do
     body. Abaixando os pisos, o vw volta a mandar e a marca encolhe junto. */
  .footer-icon{width:clamp(40px,10vw,145px);height:clamp(40px,10vw,145px)}
  .footer-word{font-size:clamp(44px,11.8vw,175px)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

@media(forced-colors:active){
  .site-header,.button,.about-card,.docs-content pre{border:1px solid ButtonText}
}