/* Host Status — site público. Tokens iguais aos de web/shared/theme.css (ver shared/brand/BRAND.md).
   CSP: style-src 'self' → nada de style inline; estados visuais por classes/atributos. */
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-mono-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-ext-var.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-mono-latin-ext-var.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f7f7f8;--panel:#fff;--panel-2:#f1f1f3;--line:#e4e4e8;--line-strong:#d3d4da;
  --fg:#0f1115;--fg-2:#3b3f47;--muted:#62666f;
  --brand:#2e4fe6;--brand-hover:#2643cc;--brand-text:#2a47d4;--brand-fg:#fff;
  --up:#0b7d41;--down:#c8282b;--warn:#a35400;--maint:#6b47d6;
  --up-fill:#12a150;
  --elev-1:0 1px 2px rgb(15 17 21/.05);
  --elev-2:0 1px 2px rgb(15 17 21/.06),0 4px 12px -2px rgb(15 17 21/.08);
  --elev-3:0 2px 4px rgb(15 17 21/.04),0 24px 64px -16px rgb(15 17 21/.22);
  --grid:rgb(15 17 21/.055);
  --r-sm:4px;--r-md:6px;--r-lg:10px;--r-xl:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Yu Gothic UI",Meiryo,"PingFang SC","Microsoft YaHei","Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK JP","Noto Sans CJK SC","Noto Sans CJK KR",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0b0c0e;--panel:#121316;--panel-2:#191b1f;--line:#26282e;--line-strong:#34373e;
  --fg:#ececef;--fg-2:#c4c6cc;--muted:#90939b;
  --brand:#4566ff;--brand-hover:#5876ff;--brand-text:#8ea2ff;
  --up:#34c470;--down:#f2555a;--warn:#e3a33b;--maint:#a68bff;--up-fill:#34c470;
  --elev-1:0 1px 2px rgb(0 0 0/.4);
  --elev-2:0 1px 2px rgb(0 0 0/.4),0 6px 16px -4px rgb(0 0 0/.5);
  --elev-3:0 0 0 1px rgb(255 255 255/.04),0 32px 80px -16px rgb(0 0 0/.75);
  --grid:rgb(255 255 255/.05);
  color-scheme:dark;
}
/* sem JS: segue o sistema */
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#0b0c0e;--panel:#121316;--panel-2:#191b1f;--line:#26282e;--line-strong:#34373e;
  --fg:#ececef;--fg-2:#c4c6cc;--muted:#90939b;--brand:#4566ff;--brand-hover:#5876ff;--brand-text:#8ea2ff;
  --up:#34c470;--down:#f2555a;--warn:#e3a33b;--maint:#a68bff;--up-fill:#34c470;--grid:rgb(255 255 255/.05);color-scheme:dark}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none;cursor:pointer}
img,svg{display:block}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{margin:0;text-wrap:pretty}
::selection{background:color-mix(in oklab,var(--brand) 22%,transparent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:8px 12px;border-radius:var(--r-md);font-size:14px}
.skip:focus{top:12px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted);text-align:center;grid-column:1/-1}

/* marca */
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:18px;letter-spacing:-.035em;line-height:1}
.mark{width:24px;height:24px;flex:none}
.mark.sm{width:16px;height:16px}
.mark rect{fill:var(--brand)}
.mark path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mark circle{fill:#fff}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--r-md);font-size:14px;font-weight:500;white-space:nowrap;border:1px solid transparent;transition:background-color .15s,border-color .15s,color .15s,transform .15s var(--ease)}
.btn-primary{background:var(--brand);color:var(--brand-fg);box-shadow:inset 0 1px 0 rgb(255 255 255/.16),var(--elev-1)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-outline{background:var(--panel);border-color:var(--line-strong);color:var(--fg);box-shadow:var(--elev-1)}
.btn-outline:hover{background:var(--panel-2)}
.btn-quiet{color:var(--fg-2)}.btn-quiet:hover{color:var(--fg);background:var(--panel-2)}
.btn-lg{height:44px;padding:0 20px;font-size:15px;border-radius:8px}
.btn:active{transform:translateY(1px)}
.select{height:30px;font:inherit;font-size:13px;color:var(--fg-2);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:0 6px;cursor:pointer}
.select:hover{border-color:var(--line-strong)}

/* seletor de tema (radiogroup) */
.theme{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2)}
.theme button{display:grid;place-items:center;width:26px;height:24px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s}
.theme button:hover{color:var(--fg)}
.theme button[aria-checked=true]{background:var(--panel);color:var(--fg);box-shadow:var(--elev-1)}
.theme svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* topo */
.top{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent);border-bottom:1px solid transparent;transition:border-color .2s,background-color .2s}
@supports (backdrop-filter:blur(8px)){.top{backdrop-filter:saturate(1.4) blur(10px)}}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;gap:28px;height:60px}
.links{display:flex;gap:4px;font-size:14px;color:var(--fg-2)}
.links a{padding:6px 10px;border-radius:var(--r-md);transition:color .15s,background-color .15s}
.links a:hover{color:var(--fg);background:var(--panel-2)}
.top-act{margin-left:auto;display:flex;align-items:center;gap:8px}

/* hero */
.hero{position:relative;padding:80px 0 72px;overflow:hidden}
.hero-bg{position:absolute;inset:0 0 auto;height:820px;pointer-events:none;z-index:-1}
.hero-bg::after{content:"";position:absolute;left:50%;top:420px;width:900px;height:420px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--brand) 16%,transparent),transparent);opacity:.9}
.hero-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:13px;color:var(--fg-2);box-shadow:var(--elev-1);margin-bottom:28px}
.live{position:relative;width:7px;height:7px;border-radius:50%;background:var(--up-fill);flex:none}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--up-fill);animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}
h1{font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.045em;max-width:900px}
.lead{margin-top:24px;max-width:640px;font-size:clamp(16px,1.6vw,18px);color:var(--fg-2);line-height:1.6}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.fine{margin-top:16px;font-size:13px;color:var(--muted)}

/* ilustração do produto: poucos elementos, formas grandes, peso visual baixo */
.scene{position:relative;max-width:760px;margin:76px auto 0;padding:0 8px}
.scene-card{position:relative;padding:14px;border-radius:24px;background:color-mix(in oklab,var(--panel) 78%,transparent);border:1px solid color-mix(in oklab,var(--line) 70%,transparent);box-shadow:0 1px 2px rgb(15 17 21/.04),0 30px 60px -36px rgb(15 17 21/.35)}
:root[data-theme=dark] .scene-card{background:color-mix(in oklab,var(--panel) 70%,transparent);box-shadow:0 0 0 1px rgb(255 255 255/.03),0 30px 60px -30px rgb(0 0 0/.7)}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plist li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:16px 18px;border-radius:16px;background:var(--panel);border:1px solid var(--line);transition:border-color .5s var(--ease),background-color .5s var(--ease)}
.plist b{font-size:15px;font-weight:500;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdot{position:relative;width:14px;height:14px;border-radius:50%;background:var(--up-fill);transition:background-color .4s var(--ease)}
.sdot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0}
.plist li.is-down{border-color:color-mix(in oklab,var(--down) 35%,var(--line))}
.plist li.is-down .sdot{background:var(--down)}
.plist li.is-down .sdot::after{animation:ring 1.6s var(--ease) infinite}
.sword{font-style:normal;font-size:13px;font-weight:500;color:var(--up);min-width:44px;text-align:right;transition:color .4s}
.plist li.is-down .sword{color:var(--down)}
.beats{display:flex;align-items:center;gap:4px;height:20px}
.beats i{width:6px;height:20px;flex:none;border-radius:3px;background:var(--up-fill);opacity:.85;transform-origin:center}
.beats i.x{background:var(--down);opacity:1}
.beats i.n{animation:beat .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes beat{from{transform:scaleY(.15);opacity:.15}}
.bubble{position:absolute;right:-12px;top:-18px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:12.5px;font-weight:500;box-shadow:0 10px 24px -10px rgb(15 17 21/.45);opacity:0;transform:translateY(6px) scale(.9);transition:opacity .35s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none;white-space:nowrap}
.bubble i{width:7px;height:7px;border-radius:50%;background:var(--down)}
.bubble.ok i{background:var(--up-fill)}
.bubble.show{opacity:1;transform:none}
.scene-status{position:absolute;left:-18px;bottom:-26px;display:inline-flex;align-items:center;gap:10px;padding:10px 12px 10px 12px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 16px 36px -20px rgb(15 17 21/.4);font-size:12.5px}
.ss-name{color:var(--muted);font-family:var(--mono);font-size:11.5px}
.ss-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;background:color-mix(in oklab,var(--up-fill) 12%,transparent);color:var(--up);font-weight:500;transition:background-color .4s,color .4s}
.ss-pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.scene-status.bad .ss-pill{background:color-mix(in oklab,var(--warn) 14%,transparent);color:var(--warn)}
@media (max-width:680px){
  .scene{margin-top:48px;padding:0}
  .scene-card{padding:10px;border-radius:20px}
  .plist li{gap:12px;padding:13px 14px;grid-template-columns:auto minmax(0,1fr) auto}
  .plist b{font-size:14px}
  .beats{display:none}
  .scene-status{position:relative;left:auto;bottom:auto;margin:12px auto 0;display:flex;justify-content:center;flex-wrap:wrap;width:max-content;max-width:100%}
  .bubble{right:8px;top:-14px}
}

/* números */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:28px 24px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact b{display:block;font-size:36px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:8px;color:var(--muted);font-size:14px}

/* seções */
.sec{padding:120px 24px 0}
.sec-head{max-width:680px;margin:0 auto 48px;text-align:center}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-text);margin-bottom:14px}
h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.035em;line-height:1.08}
.sub{margin-top:16px;color:var(--fg-2);font-size:17px}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{position:relative;padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--panel);box-shadow:var(--elev-1);transition:border-color .2s,transform .3s var(--ease)}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card h3{font-size:17px;letter-spacing:-.015em}
.card p{margin-top:8px;color:var(--fg-2);font-size:14.5px;line-height:1.6}
.c-wide{grid-column:span 2}
.types{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.types span{font-family:var(--mono);font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);color:var(--fg-2)}
.timeline{display:flex;align-items:center;gap:3px;margin-top:22px;flex-wrap:wrap}
.timeline i{width:14px;height:22px;border-radius:3px;background:var(--up-fill)}
.timeline i.retry{background:var(--warn)}.timeline i.bad{background:var(--down)}
.tl-tag{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.badges{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.sb{display:inline-flex;border-radius:4px;overflow:hidden;font-family:var(--mono);font-size:11.5px;line-height:20px}
.sb em{font-style:normal;padding:0 7px;background:#3b3f47;color:#fff}
.sb b{font-weight:500;padding:0 7px;background:#0b7d41;color:#fff}

.how{margin-top:120px;padding:96px 0;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how .sec-head{margin-bottom:56px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg);display:flex;flex-direction:column}
.num{font-family:var(--mono);font-size:12px;color:var(--brand-text);margin-bottom:16px}
.step h3{font-size:17px}
.step p{margin-top:8px;color:var(--fg-2);font-size:14.5px;flex:1}
.viz{margin-top:24px;height:112px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:14px;display:flex;flex-direction:column;justify-content:center;gap:8px;font-size:12px}
.f-label{color:var(--muted);font-size:11px}
.f-input{display:flex;align-items:center;height:30px;padding:0 10px;border:1px solid var(--brand);border-radius:var(--r-md);font-family:var(--mono);font-size:12px;box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 18%,transparent);overflow:hidden;white-space:nowrap}
.caret{width:1.5px;height:14px;margin-left:2px;background:var(--fg);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.f-row{display:flex;gap:6px}
.f-pill{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--fg-2)}
.viz-net{padding:6px}
.viz-net svg{width:100%;height:100%}
.wire{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 4}
.node{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:1.5}
.node.t{fill:color-mix(in oklab,var(--up-fill) 20%,var(--panel));stroke:var(--up-fill)}
.core{fill:var(--brand)}
.packet{fill:var(--brand);offset-rotate:0deg}
.p1{offset-path:path("M40 22 C90 22 100 46 120 46 H200");animation:travel 2.8s var(--ease) infinite}
.p2{offset-path:path("M40 70 C90 70 100 46 120 46 H200");animation:travel 2.8s var(--ease) 1.4s infinite}
@keyframes travel{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
.va-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.va-row b{font-weight:500}.va-row em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted)}

.integ-list{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:860px}
.integ-list li{padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--fg-2);font-size:14px;font-weight:500;box-shadow:var(--elev-1);transition:color .15s,border-color .15s}
.integ-list li:hover{color:var(--fg);border-color:var(--line-strong)}

/* preços */
.period{position:relative;display:flex;width:max-content;margin:0 auto 36px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2)}
.period button{position:relative;z-index:1;height:32px;padding:0 18px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .2s;display:inline-flex;align-items:center;gap:6px}
.period button[aria-checked=true]{color:var(--fg)}
.period-thumb{position:absolute;z-index:0;top:3px;left:3px;height:32px;border-radius:999px;background:var(--panel);box-shadow:var(--elev-2);transition:transform .3s var(--ease),width .3s var(--ease)}
.save{font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;background:color-mix(in oklab,var(--up-fill) 14%,transparent);color:var(--up)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--panel);box-shadow:var(--elev-1)}
.plan.feat{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--elev-2)}
.plan h3{font-size:16px;letter-spacing:-.01em}
.plan .d{color:var(--muted);font-size:14px;min-height:44px;margin-top:6px}
.price{margin-top:20px;font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.price small{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:20px 0 0;margin:24px 0 28px;border-top:1px solid var(--line);flex:1;font-size:14px;color:var(--fg-2);display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:none;width:14px;height:14px;margin-top:4px;background:var(--brand-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .btn{width:100%}
.skel{height:420px;border-radius:var(--r-xl);border:1px solid var(--line);background:linear-gradient(90deg,var(--panel) 0%,var(--panel-2) 50%,var(--panel) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* FAQ */
.faq-list{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;font-weight:500;font-size:16px;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;color:var(--muted);transition:transform .25s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--brand-text)}
.faq-list details p{padding:0 4px 22px;color:var(--fg-2);max-width:680px}

/* CTA final */
.final{padding-top:120px}
.final-in{position:relative;overflow:hidden;text-align:center;padding:72px 24px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.final-in::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,var(--line-strong) 1px,transparent 0);background-size:20px 20px;-webkit-mask-image:radial-gradient(ellipse 50% 70% at 50% 100%,#000,transparent 75%);mask-image:radial-gradient(ellipse 50% 70% at 50% 100%,#000,transparent 75%)}
.final-in>*{position:relative}
.final-in p{margin:14px auto 0;max-width:520px;color:var(--fg-2);font-size:17px}
.final .cta{margin-top:30px}

/* rodapé */
.foot{margin-top:120px;border-top:1px solid var(--line);padding:56px 0 32px;font-size:14px}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:32px}
.foot-brand p{margin-top:12px;color:var(--muted);max-width:260px}
.foot-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-col b{font-size:13px;font-weight:500;color:var(--fg)}
.foot-col a{color:var(--muted);transition:color .15s}
.foot-col a:hover{color:var(--fg)}
.foot-legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* ===== refinamento das seções (mesmo padrão do hero) ===== */
:root{--au1:#1f4dff;--au2:#00ccf2;--au3:#4d2ef2;--au4:#59b8ff}
.dot{width:9px;height:9px;border-radius:50%;background:var(--up-fill);flex:none}
.dot.down{background:var(--down)}
.sec{padding:128px 24px 0}
.sec-head{margin-bottom:56px}
.sub{line-height:1.6}

/* números: gradiente discreto na cifra */
.facts{margin-top:120px}
.fact b{background:linear-gradient(180deg,var(--fg) 35%,color-mix(in oklab,var(--brand-text) 75%,var(--fg)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fact span{line-height:1.45}

/* cartões: hover mínimo (só a borda); a vida vem da borda ambiente, abaixo */
.card,.step{transition:border-color .3s var(--ease)}
.card:hover,.step:hover{transform:none;border-color:var(--line-strong)}
.card>*,.step>*{position:relative;z-index:2}
.tile{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:18px;border-radius:10px;color:var(--brand-text);
  background:linear-gradient(140deg,color-mix(in oklab,var(--au2) 16%,transparent),color-mix(in oklab,var(--au1) 12%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--au1) 20%,transparent)}
.tile svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.types span{transition:color .2s,border-color .2s}
.card:hover .types span{border-color:var(--line-strong)}

/* como funciona: linha de progresso que liga os passos */
.how{background:linear-gradient(180deg,var(--panel),color-mix(in oklab,var(--panel) 70%,var(--bg)))}
.steps-line{position:relative;height:2px;margin:0 16.66% -45px;border-radius:2px;background:var(--line);overflow:hidden}
.steps-line i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--au1),var(--au2),var(--au3));transition:transform 1.6s cubic-bezier(.65,0,.35,1) .3s}
.js-motion .steps-line.reveal{transform:none}
.steps-line.in i,html:not(.js-motion) .steps-line i{transform:scaleX(1)}
.step{position:relative;padding-top:24px}
.num{display:grid;place-items:center;width:36px;height:36px;margin:-42px auto 20px;border-radius:50%;background:var(--panel);border:1px solid var(--line);font-size:12px;font-weight:500;box-shadow:0 0 0 6px var(--panel)}
.step h3,.step p{text-align:center}
.viz{border-radius:14px}

/* integrações: faixa contínua lenta com bordas esmaecidas */
.marquee{max-width:980px;margin:0 auto}
.marquee.is-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee.is-marquee .integ-list{flex-wrap:nowrap;max-width:none;margin:0;padding:6px 5px;gap:10px}
.marquee.is-marquee .integ-list li{white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}
.integ-list li{transition:color .2s,border-color .2s,transform .35s var(--ease)}

/* preços: plano em destaque com borda aurora (estática) */
.plan{position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.plan.feat{border-color:transparent;box-shadow:0 24px 60px -30px color-mix(in oklab,var(--au1) 55%,transparent)}
.plan.feat::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(140deg,var(--au2),var(--au1) 40%,var(--au3) 75%,var(--au4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.plan.feat::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 60% at 50% 0%,color-mix(in oklab,var(--au2) 10%,transparent),transparent 70%);pointer-events:none}
.plan{isolation:isolate}
.period{box-shadow:inset 0 1px 2px rgb(15 17 21/.04)}

/* FAQ: abre/fecha com animação de altura (grid-template-rows) */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq-a>div{overflow:hidden;min-height:0}
.faq-list details.is-open .faq-a,html:not(.js-faq) .faq-list details[open] .faq-a{grid-template-rows:1fr}
.faq-list details p{opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.faq-list details.is-open p,html:not(.js-faq) .faq-list details[open] p{opacity:1;transform:none}
.faq-list details.is-open summary::after{transform:rotate(45deg)}
.js-faq .faq-list details[open]:not(.is-open) summary::after{transform:none}
.faq-list summary{transition:color .2s}

/* CTA final: eco da aurora do hero (gradientes CSS, sem segundo WebGL) */
.final-in{isolation:isolate;border-color:color-mix(in oklab,var(--line) 80%,transparent)}
.final-in::before{inset:-40%;background:none;-webkit-mask-image:none;mask-image:none;z-index:-1;
  background:radial-gradient(35% 45% at 30% 70%,color-mix(in oklab,var(--au1) 18%,transparent),transparent 70%),radial-gradient(30% 40% at 70% 65%,color-mix(in oklab,var(--au2) 16%,transparent),transparent 70%),radial-gradient(28% 35% at 52% 95%,color-mix(in oklab,var(--au3) 14%,transparent),transparent 70%);
  animation:drift 22s ease-in-out infinite alternate}
:root[data-theme=dark] .final-in::before{filter:saturate(1.25) brightness(1.15)}
@keyframes drift{to{transform:translate3d(3%,-4%,0) rotate(6deg)}}
.final-in h2{font-size:clamp(30px,4vw,46px)}

/* rodapé */
.foot{position:relative;border-top:0}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--au1) 45%,var(--line)) 30%,color-mix(in oklab,var(--au2) 45%,var(--line)) 70%,transparent)}
.foot-col a{position:relative}
.foot-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.foot-col a:hover::after{transform:scaleX(1)}

@media (max-width:960px){
  .steps-line{display:none}
  .num{margin:0 0 16px}
  .step h3,.step p{text-align:left}
  .step{padding-top:28px}
}
@media (max-width:680px){
  .facts{margin-top:88px}
  .sec{padding:96px 16px 0}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .final-in::before{animation:none}
  .steps-line i{transform:scaleX(1)}
  }

/* revelação ao rolar (só quando JS e movimento estão liberados) */
.js-motion .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-motion .reveal.in{opacity:1;transform:none}

@media (max-width:960px){
  .hide-md{display:none}
  .links{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .hide-sm{display:none}
  .wrap{padding:0 16px}
  .sec{padding:88px 16px 0}
  .hero{padding-top:56px}
  .facts{grid-template-columns:1fr 1fr;margin-top:72px}
  .fact:nth-child(3){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .bento{grid-template-columns:1fr}
  .c-wide{grid-column:auto}
  .how{margin-top:88px;padding:72px 0}
  .final-in{padding:56px 20px}
  .foot-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
/* entrada do hero: só CSS (não depende de JS) */
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.rise{animation:rise .8s var(--ease) both}
.r2{animation-delay:.06s}.r3{animation-delay:.12s}.r4{animation-delay:.18s}.r5{animation-delay:.28s;animation-duration:1s}
/* topo no celular: idioma e tema sempre acessíveis */
@media (max-width:680px){.top-in{gap:10px}.top-act{gap:6px}.top-act .btn-primary{height:30px;padding:0 10px;font-size:13px}.top-act .select{padding:0 2px}}
@media (max-width:400px){.top-act .btn-primary{display:none}.top .brand span{display:none}}

/* logotipo: "host" forte + "status" leve (ver shared/brand/BRAND.md) */
.brand .wm{font-weight:400;color:var(--muted);letter-spacing:-.035em}.brand .wm b{font-weight:700;color:var(--fg)}

/* Ripple do hero (inspirado no Magic UI Ripple, em CSS puro): 8 anéis concêntricos que "respiram"
   com atraso escalonado — o pulso se propagando. Tamanhos via nth-child (CSP sem style inline). */
.ripple{position:absolute;left:0;right:0;top:0;height:760px;pointer-events:none;z-index:-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 92%);mask-image:linear-gradient(to bottom,#000 35%,transparent 92%)}
.ripple i{position:absolute;left:50%;top:290px;width:var(--s);height:var(--s);border-radius:50%;
  border:1px solid color-mix(in oklab,var(--brand) calc(var(--o) * 150%),transparent);
  background:color-mix(in oklab,var(--brand) calc(var(--o) * 15%),transparent);
  box-shadow:0 10px 40px -12px color-mix(in oklab,var(--brand) calc(var(--o) * 60%),transparent);
  transform:translate(-50%,-50%) scale(1);animation:ripple 3.4s cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--d)}
.ripple i:nth-child(1){--s:210px;--o:.24;--d:0s}
.ripple i:nth-child(2){--s:280px;--o:.21;--d:.08s}
.ripple i:nth-child(3){--s:350px;--o:.18;--d:.16s}
.ripple i:nth-child(4){--s:420px;--o:.15;--d:.24s}
.ripple i:nth-child(5){--s:490px;--o:.12;--d:.32s}
.ripple i:nth-child(6){--s:560px;--o:.09;--d:.40s}
.ripple i:nth-child(7){--s:630px;--o:.06;--d:.48s}
.ripple i:nth-child(8){--s:700px;--o:.04;--d:.56s;border-style:dashed}
@keyframes ripple{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(.92)}}
@media (max-width:640px){.ripple i{top:250px}.ripple i:nth-child(n+7){display:none}}
@media (prefers-reduced-motion:reduce){.ripple i{animation:none}}
/* texto com brilho (igual ao ShinyText do app) */
@keyframes shiny{from{background-position:100% 0}to{background-position:0% 0}}
.shiny{background-image:linear-gradient(100deg,color-mix(in oklab,currentColor 72%,transparent) 40%,currentColor 50%,color-mix(in oklab,currentColor 72%,transparent) 60%);background-size:250% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shiny 3.6s cubic-bezier(.6,0,.4,1) infinite}
@media (prefers-reduced-motion:reduce){.shiny{background-image:none;-webkit-text-fill-color:currentColor;animation:none}}
/* seletor de idioma (botão + listbox) */
.lang-dd{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;padding:0 8px}
.lang-btn .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;color:var(--muted)}
.lang-btn .chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:transform .15s}
.lang-btn[aria-expanded=true]{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 20%,transparent)}
.lang-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.lang-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:200px;margin:0;padding:6px;list-style:none;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--elev-3);outline:none;max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;animation:dd-in .14s var(--ease)}
.lang-dd.up .lang-list{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.lang-list[hidden]{display:none}
.lang-list li{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:6px;font-size:13px;color:var(--fg-2);cursor:pointer}
.lang-list li.active{background:var(--panel-2);color:var(--fg)}
.lang-list li[aria-selected=true]{color:var(--fg);font-weight:500}
.lang-list li[aria-selected=true]::after{content:"";width:14px;height:14px;background:var(--brand-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.lang-list li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-dd img.lang-flag{width:20px;height:15px;flex:none;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgb(0 0 0/.08)}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}}
.lang-dd.up .lang-list{animation-name:dd-in-up}
@keyframes dd-in-up{from{opacity:0;transform:translateY(4px)}}
.top-act .lang-btn{padding:0 6px}

/* Shader do hero (hero-shader.js): aurora vibrante atrás do ripple; aparece com fade quando o WebGL inicia. */
.hero-shader{position:absolute;left:0;top:0;width:100%;height:760px;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hero-shader.on{opacity:1}
.hero-shader.on~.ripple i{border-color:color-mix(in oklab,#fff calc(var(--o) * 220%),transparent);background:color-mix(in oklab,#fff calc(var(--o) * 18%),transparent);box-shadow:none}
@media (prefers-reduced-motion:reduce){.hero-shader{transition:none}}
/* emenda suave entre a aurora do hero e o resto da página (só máscara; o shader não muda) */
.hero-shader{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}

/* ===== borda ambiente: arco de luz muito sutil girando devagar (cada cartão em fase própria) ===== */
@property --ba{syntax:"<angle>";inherits:false;initial-value:0deg}
.card,.step,.plan:not(.feat){isolation:isolate}
.card::before,.step::before,.plan:not(.feat)::before{content:"";position:absolute;inset:-1px;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ba),transparent 0deg,color-mix(in oklab,var(--au2) 55%,transparent) 40deg,color-mix(in oklab,var(--au1) 45%,transparent) 80deg,transparent 130deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.32;animation:ba 26s linear infinite}
:root[data-theme=dark] .card::before,:root[data-theme=dark] .step::before,:root[data-theme=dark] .plan:not(.feat)::before{opacity:.42}
@keyframes ba{to{--ba:360deg}}
.bento>:nth-child(2)::before,.steps>:nth-child(2)::before,.plans>:nth-child(2)::before{animation-duration:31s;animation-delay:-9s}
.bento>:nth-child(3)::before,.steps>:nth-child(3)::before,.plans>:nth-child(3)::before{animation-duration:37s;animation-delay:-21s;animation-direction:reverse}
.bento>:nth-child(4)::before,.plans>:nth-child(4)::before{animation-duration:29s;animation-delay:-14s}
.bento>:nth-child(5)::before{animation-duration:34s;animation-delay:-5s;animation-direction:reverse}

/* ===== fumaça colorida ambiente (mesma linguagem da aurora do hero, só CSS) ===== */
.how,.has-smoke{position:relative;isolation:isolate}
.smoke{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.smoke i{position:absolute;width:46vw;max-width:680px;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.34;will-change:transform}
.smoke i:nth-child(1){left:-6%;top:6%;background:radial-gradient(closest-side,var(--au1),transparent);animation:sm1 31s ease-in-out infinite alternate}
.smoke i:nth-child(2){right:-8%;top:-4%;background:radial-gradient(closest-side,var(--au2),transparent);animation:sm2 37s ease-in-out -11s infinite alternate}
.smoke i:nth-child(3){left:30%;bottom:-18%;background:radial-gradient(closest-side,var(--au3),transparent);animation:sm3 23s ease-in-out -6s infinite alternate}
.smoke i:nth-child(4){left:52%;top:18%;width:30vw;background:radial-gradient(closest-side,var(--au4),transparent);animation:sm4 43s ease-in-out -17s infinite alternate}
@keyframes sm1{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(14%,10%,0) scale(1.12)}66%{transform:translate3d(6%,-8%,0) scale(.94)}100%{transform:translate3d(22%,4%,0) scale(1.05)}}
@keyframes sm2{0%{transform:translate3d(0,0,0) scale(1.05)}40%{transform:translate3d(-16%,14%,0) scale(.92)}75%{transform:translate3d(-6%,24%,0) scale(1.1)}100%{transform:translate3d(-22%,6%,0) scale(1)}}
@keyframes sm3{0%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(-18%,-12%,0) scale(1.1)}100%{transform:translate3d(12%,-20%,0) scale(1)}}
@keyframes sm4{0%{transform:translate3d(0,0,0) scale(1)}30%{transform:translate3d(10%,16%,0) scale(1.15)}70%{transform:translate3d(-14%,6%,0) scale(.9)}100%{transform:translate3d(-4%,-12%,0) scale(1.05)}}
:root[data-theme=dark] .smoke i{opacity:.42;filter:blur(80px) saturate(1.2)}
.smoke-soft i{opacity:.16}
:root[data-theme=dark] .smoke-soft i{opacity:.2}
.smoke.paused i{animation-play-state:paused}
.how{background:none}
.how .step{background:color-mix(in oklab,var(--bg) 82%,transparent)}
:root[data-theme=dark] .how .step{background:color-mix(in oklab,var(--bg) 78%,transparent)}
.has-smoke .card,.has-smoke .plan{background:color-mix(in oklab,var(--panel) 92%,transparent)}

/* ===== como funciona: sequência animada (classes ph1/ph2/ph3 em #how-steps via JS) ===== */
.steps-line b{position:absolute;top:-3px;left:0;width:64px;height:8px;margin-left:-32px;border-radius:8px;background:radial-gradient(closest-side,#fff,color-mix(in oklab,var(--au2) 80%,transparent) 45%,transparent);opacity:0;transform:translateX(0);transition:transform 1.1s cubic-bezier(.65,0,.35,1),opacity .4s}
.steps-line{overflow:visible}
.how.ph1 .steps-line b{opacity:1;transform:translateX(0)}
.how.ph2 .steps-line b{opacity:1;transform:translateX(calc(var(--lw,600px) * .5))}
.how.ph3 .steps-line b{opacity:1;transform:translateX(var(--lw,600px))}
.step .num{transition:border-color .4s,color .4s,box-shadow .4s}
.how.ph1 .step:nth-child(1) .num,.how.ph2 .step:nth-child(2) .num,.how.ph3 .step:nth-child(3) .num{border-color:var(--brand);color:var(--brand-text);box-shadow:0 0 0 6px var(--panel),0 0 0 7px color-mix(in oklab,var(--brand) 25%,transparent)}
.viz{position:relative;overflow:hidden}
/* passo 1 */
.viz-form{justify-content:flex-start;gap:12px;padding-top:18px}
.f-input{width:100%;font-size:12px}
.f-url{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap}
.f-mon{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:12.5px;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .35s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}
.f-mon b{font-weight:500}.f-mon em{margin-left:auto;font-style:normal;color:var(--up);font-size:12px;font-weight:500}
.f-mon .dot{width:10px;height:10px}
.how.show-mon .f-mon{opacity:1;transform:none}
/* passo 2 */
.agent{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:1.5;transition:fill .3s,stroke .3s}
.how.ph2 .agent{fill:color-mix(in oklab,var(--au1) 18%,var(--panel));stroke:var(--brand)}
.target{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.5;transition:fill .4s,stroke .4s}
.tick{fill:none;stroke:var(--up);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s var(--ease) .1s}
.how.checked .target{fill:color-mix(in oklab,var(--up-fill) 16%,var(--panel));stroke:var(--up-fill)}
.how.checked .tick{stroke-dashoffset:0}
.ping{fill:var(--brand);opacity:0}
.k1{offset-path:path("M34 20 C100 20 130 48 196 48")}.k2{offset-path:path("M34 48 H196")}.k3{offset-path:path("M34 76 C100 76 130 48 196 48")}
.how.ph2 .ping{animation:travel 1.5s var(--ease) 2}
.how.ph2 .k2{animation-delay:.25s}.how.ph2 .k3{animation-delay:.5s}
/* passo 3 */
.viz-alert{align-items:flex-start;gap:12px}
.al-bubble{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 9px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:500;opacity:0;transform:translateY(8px) scale(.92);transition:opacity .35s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}
.al-bubble>i{width:7px;height:7px;border-radius:50%;background:var(--down)}
.al-ch{padding:1px 7px;border-radius:999px;background:color-mix(in oklab,var(--bg) 18%,transparent);font-family:var(--mono);font-size:10.5px;font-weight:400}
.how.alerted .al-bubble{opacity:1;transform:none}
.al-pill{position:relative;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--up);background:color-mix(in oklab,var(--up-fill) 12%,transparent);transition:color .4s,background-color .4s}
.al-pill>i{width:7px;height:7px;border-radius:50%;background:currentColor}
.al-bad{display:none}
.how.outage .al-pill{color:var(--warn);background:color-mix(in oklab,var(--warn) 14%,transparent)}
.how.outage .al-ok{display:none}.how.outage .al-bad{display:inline}
@media (prefers-reduced-motion:reduce){
  .smoke i{animation:none}
  .card::before,.step::before,.plan:not(.feat)::before{animation:none}
  .f-mon,.al-bubble{opacity:1;transform:none}
  .tick{stroke-dashoffset:0}
}
@media (max-width:960px){.how .step{background:color-mix(in oklab,var(--bg) 88%,transparent)}}

/* ===== espaçamento e fundos de seção sem cortes ===== */
body{overflow-x:clip}
.sec.how{margin-top:clamp(56px,7vw,96px);padding:clamp(104px,11vw,152px) 0;border:0}
.how .sec-head{margin-bottom:clamp(76px,7vw,96px)}
.steps{align-items:stretch}
.step{padding:28px 28px 28px}
.step .viz{margin-top:auto}
.step p{flex:none;margin-bottom:24px}
/* fumaça: largura total da página e além das bordas da seção, com fade suave (sem arestas) */
.smoke{inset:-120px calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.how .smoke{inset:-40px calc(50% - 50vw)}
.has-smoke .smoke{inset:-160px calc(50% - 50vw) -120px}
@media (max-width:960px){
  .sec.how{padding:clamp(88px,14vw,120px) 0}
  .how .sec-head{margin-bottom:48px}
  .steps{gap:16px}
  .step .viz{margin-top:4px}
}
@media (max-width:680px){
  .sec.how{padding:88px 0;margin-top:56px}
  .how .wrap{padding:0 16px}
  .step{padding:24px 20px}
}

/* CTA final: grade de pontos que pega as cores da aurora onde a fumaça passa */
.final-dots{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,var(--au1),var(--au2) 35%,var(--au3) 65%,var(--au4));opacity:.55;
  -webkit-mask-image:radial-gradient(circle at 1px 1px,#000 1.15px,transparent 1.7px),radial-gradient(ellipse 62% 75% at 50% 58%,#000 25%,transparent 78%);-webkit-mask-size:18px 18px,100% 100%;-webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at 1px 1px,#000 1.15px,transparent 1.7px),radial-gradient(ellipse 62% 75% at 50% 58%,#000 25%,transparent 78%);mask-size:18px 18px,100% 100%;mask-composite:intersect}
:root[data-theme=dark] .final-dots{opacity:.7}
.final-in>.final-dots{position:absolute}

/* ===== ajustes finais ===== */
/* como funciona: sem linha e sem números; cartões começam direto no título */
.steps-line{display:none}
.step{padding-top:28px}
.how .sec-head{margin-bottom:clamp(48px,5vw,64px)}

/* uma única técnica de borda: a borda do cartão fica transparente e o pseudo-elemento desenha o anel inteiro
   (cor da linha + arco animado), então não há duas bordas sobrepostas nos cantos */
.card,.step,.plan{--bline:var(--line);border-color:transparent;background-clip:padding-box}
.card:hover,.step:hover,.plan:not(.feat):hover{--bline:var(--line-strong);border-color:transparent}
.card::before,.step::before,.plan:not(.feat)::before{opacity:1;
  background:conic-gradient(from var(--ba),transparent 0deg,color-mix(in oklab,var(--au2) 22%,transparent) 40deg,color-mix(in oklab,var(--au1) 18%,transparent) 80deg,transparent 130deg,transparent 360deg),linear-gradient(var(--bline),var(--bline))}
:root[data-theme=dark] .card::before,:root[data-theme=dark] .step::before,:root[data-theme=dark] .plan:not(.feat)::before{opacity:1;
  background:conic-gradient(from var(--ba),transparent 0deg,color-mix(in oklab,var(--au2) 34%,transparent) 40deg,color-mix(in oklab,var(--au1) 28%,transparent) 80deg,transparent 130deg,transparent 360deg),linear-gradient(var(--bline),var(--bline))}
.plan.feat{border-color:transparent;background-clip:padding-box}

/* recursos: cartões translúcidos, a fumaça aparece por trás (fosco no claro, vidro escuro no escuro) */
#features .card{background:rgb(255 255 255/.66);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
:root[data-theme=dark] #features .card{--bline:rgb(255 255 255/.08);background:color-mix(in oklab,var(--panel) 58%,transparent)}
:root[data-theme=dark] #features .card:hover{--bline:rgb(255 255 255/.14)}
#pricing .plan{background:rgb(255 255 255/.78);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
:root[data-theme=dark] #pricing .plan{--bline:rgb(255 255 255/.09);background:color-mix(in oklab,var(--panel) 72%,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #features .card,#pricing .plan{background:var(--panel)}
  :root[data-theme=dark] #features .card,:root[data-theme=dark] #pricing .plan{background:var(--panel)}
}

/* integrações: logos monocromáticos (máscara + currentColor); cor da marca no hover/foco */
.integ-list li{display:inline-flex;align-items:center;gap:9px}
.pi{width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--pi) center/contain no-repeat;mask:var(--pi) center/contain no-repeat;transition:background-color .2s}
.integ-list li:hover .pi,.integ-list li:focus-visible .pi{background:var(--hx,var(--brand-text))}
.pi-discord{--pi:url(/integrations/discord.svg);--hx:#5865F2}
.pi-slack{--pi:url(/integrations/slack.svg)}
.pi-telegram{--pi:url(/integrations/telegram.svg);--hx:#26A5E4}
.pi-teams{--pi:url(/integrations/teams.svg)}
.pi-googlechat{--pi:url(/integrations/googlechat.svg);--hx:#34A853}
.pi-ntfy{--pi:url(/integrations/ntfy.svg);--hx:#317F6F}
.pi-pushover{--pi:url(/integrations/pushover.svg)}
.pi-gotify{--pi:url(/integrations/gotify.svg)}
.pi-email{--pi:url(/integrations/email.svg)}
.pi-webhook{--pi:url(/integrations/webhook.svg)}

/* ===== multi-localização: mapa pontilhado com locais checando um alvo ===== */
.loc{padding-top:clamp(104px,10vw,136px)}
.loc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.loc-copy h2{text-align:left;margin:0}
.loc-copy .sub{margin-top:16px}
.loc-copy .eyebrow{text-align:left}
.loc-points{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.loc-points li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.loc-points .tile{margin:0}
.loc-points h3{font-size:15.5px;letter-spacing:-.01em}
.loc-points p{margin-top:4px;color:var(--fg-2);font-size:14.5px;line-height:1.55}
.loc-card{position:relative;padding:18px;border:1px solid var(--line);border-radius:22px;background:color-mix(in oklab,var(--panel) 88%,transparent);box-shadow:0 1px 2px rgb(15 17 21/.04),0 30px 60px -40px rgb(15 17 21/.35);overflow:hidden;isolation:isolate}
:root[data-theme=dark] .loc-card{background:color-mix(in oklab,var(--panel) 80%,transparent);box-shadow:0 30px 60px -30px rgb(0 0 0/.7)}
.loc-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 45% 45%,color-mix(in oklab,var(--au2) 10%,transparent),transparent 70%),radial-gradient(40% 40% at 80% 80%,color-mix(in oklab,var(--au3) 8%,transparent),transparent 70%)}
.loc-map{display:block;width:100%;height:auto;overflow:visible}
.dots{fill:none;stroke:color-mix(in oklab,var(--fg) 20%,transparent);stroke-width:3.2;stroke-linecap:round}
:root[data-theme=dark] .dots{stroke:color-mix(in oklab,var(--fg) 22%,transparent)}
.lw{fill:none;stroke:color-mix(in oklab,var(--brand) 45%,transparent);stroke-width:1.2;stroke-dasharray:3 4;transition:stroke .4s,opacity .4s}
.lp{fill:var(--brand);opacity:0;animation:travel 2.4s var(--ease) infinite}
.lp-fra{animation-delay:.5s}.lp-sp{animation-delay:1s}.lp-sg{animation-delay:1.4s}.lp-syd{animation-delay:1.9s}
.pin .pc{fill:var(--up-fill);transition:fill .4s}
.pin .pr{fill:var(--up-fill);opacity:.35;transform-box:fill-box;transform-origin:center;animation:pinring 2.6s var(--ease) infinite}
.pin-fra .pr{animation-delay:.6s}.pin-sp .pr{animation-delay:1.2s}.pin-sg .pr{animation-delay:1.8s}.pin-syd .pr{animation-delay:.3s}
@keyframes pinring{0%{transform:scale(1);opacity:.45}80%,100%{transform:scale(3);opacity:0}}
.pin text{font-family:var(--mono);font-size:12.5px;fill:var(--fg-2);paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
.tgt .tc{fill:var(--brand)}
.tgt .tr{fill:var(--brand);opacity:.25;transform-box:fill-box;transform-origin:center;animation:pinring 2s var(--ease) infinite}
.loc-stage{position:relative}
.loc-target{position:absolute;left:43.67%;top:42.67%;transform:translate(-50%,14px);display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:11.5px;white-space:nowrap;box-shadow:0 8px 20px -10px rgb(15 17 21/.5)}
.loc-target b{font-weight:500;font-family:var(--mono)}
.loc-target i{width:6px;height:6px;border-radius:50%;background:var(--up-fill)}
.loc-badge{position:relative;margin-top:12px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:color-mix(in oklab,var(--up-fill) 11%,var(--panel));color:var(--up);font-size:13px;font-weight:500;transition:background-color .4s,color .4s}
.loc-badge i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
/* estados (classes em #loc-viz via JS) */
.loc-card.blip .pin-sg .pc{fill:var(--warn)}
.loc-card.blip .lw-sg{stroke:color-mix(in oklab,var(--warn) 60%,transparent)}
.loc-card.blip .loc-badge{color:var(--fg-2);background:color-mix(in oklab,var(--warn) 10%,var(--panel))}
.loc-card.fail .pin-fra .pc{fill:var(--down)}
.loc-card.fail .pin-fra .pr{animation:none;opacity:0}
.loc-card.fail .pin-fra text{fill:var(--down)}
.loc-card.fail .lw-fra{opacity:.15}
.loc-card.fail .lp-fra{animation:none;opacity:0}
.loc-card.fail .loc-badge{color:var(--warn);background:color-mix(in oklab,var(--warn) 12%,var(--panel))}
.loc-card.paused *{animation-play-state:paused!important}
@media (max-width:960px){
  .loc-grid{grid-template-columns:1fr}
  .loc-card{order:2}
}
@media (max-width:680px){
  .pin text{font-size:17px}
  .loc-card{padding:12px;border-radius:18px}
  .loc-badge{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.lp,.pin .pr,.tgt .tr{animation:none}}
.lp-va{offset-path:path("M172 87Q217 47 262 128")}.lp-fra{offset-path:path("M314 62Q288 22 262 128")}.lp-sp{offset-path:path("M222 227Q242 88 262 128")}.lp-sg{offset-path:path("M473 172Q368 88 262 128")}.lp-syd{offset-path:path("M552 251Q407 88 262 128")}

/* CJK: sem tracking negativo nos títulos; coreano quebra por palavra */
:is(:lang(ja),:lang(ko),:lang(zh)) :is(h1,h2,h3,.eyebrow){letter-spacing:0}
:lang(ko){word-break:keep-all}