/* Aro v5 — escuro quente, âmbar #FFAA00 como cor da marca, azul #8AB8F5 de apoio. */
@font-face{font-family:Manrope;src:url('./assets/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('./assets/manrope-600.ttf') format('truetype');font-weight:500 700;font-display:swap}
@font-face{font-family:Manrope;src:url('./assets/manrope-800.ttf') format('truetype');font-weight:800;font-display:swap}

:root{
  --ink:#0A0806;--ink-2:#13100C;--ink-3:#1C1712;--ink-4:#261F17;
  --line:rgba(255,214,150,.1);--line-2:rgba(255,214,150,.2);
  --text:#FFF6E8;--muted:#B9AC98;--dim:#80745F;
  --amber:#FFAA00;--amber-2:#FFC94D;--amber-ink:#140C00;--ember:#FF6A1A;--sky:#8AB8F5;
  --r:10px;--r-lg:20px;
  --wrap:1240px;--gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 17px/1.55 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--amber);color:var(--amber-ink)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
section{scroll-margin-top:64px;overflow-x:clip;position:relative}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amber);color:var(--amber-ink);padding:10px 14px;border-radius:var(--r);font-weight:700}
.skip-link:focus{top:12px}

/* logotipo: símbolo (anel-dimmer) + nome, sempre juntos */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:28px;letter-spacing:-.055em;line-height:1}
.logo-mark{width:1.15em;height:1.15em;flex:none;overflow:visible;transition:transform .6s var(--spring)}
.brand:hover .logo-mark{transform:rotate(-40deg)}
.logo-name{transform:translateY(-.04em)}
.brand small{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-left:1px solid var(--line-2);padding-left:12px;line-height:1.2;white-space:nowrap}

/* tipografia */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.kicker img{border-radius:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,170,0,.2);animation:beat 2s ease-in-out infinite}
@keyframes beat{50%{box-shadow:0 0 0 8px rgba(255,170,0,0)}}
.display{font-weight:800;font-size:clamp(36px,5.6vw,80px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.display>span:not(.ln),.display .ln>span>span{color:var(--dim)}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:560px}
.fine{font-size:13px;color:var(--dim);margin-top:24px;max-width:760px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head{margin-bottom:clamp(36px,5vw,64px)}
.section-head .kicker{margin-bottom:18px}
/* títulos sobem por trás de uma máscara */
.js .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.js .ln>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.js .ln+.ln>span{transition-delay:.09s}
.js .in .ln>span,.js .ln.in>span{transform:none}

/* botões */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--amber);color:var(--amber-ink);font-weight:800;font-size:16px;text-decoration:none;border:0;transition:transform .25s var(--spring),background .2s,box-shadow .3s;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);z-index:-1}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(255,170,0,.65)}
.btn:hover::after{transform:translateX(120%);transition:transform .7s var(--ease)}
.btn:hover .icon{transform:translateX(3px)}
.btn .icon{transition:transform .25s var(--ease)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-lg{min-height:58px;padding:0 28px;font-size:17px}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-ghost:hover{background:rgba(127,127,127,.12);box-shadow:inset 0 0 0 1.5px currentColor}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;transition:background-size .3s var(--ease),color .2s}
.link:hover{color:var(--amber);background-size:0 1.5px;background-position:100% 100%}

/* molduras de tela real */
.frame-phone{position:relative;border-radius:36px;padding:7px;background:#1E1914;box-shadow:inset 0 0 0 1px rgba(255,230,190,.16),0 30px 60px -20px rgba(0,0,0,.8);overflow:hidden}
.frame-phone>img{border-radius:29px;width:100%;aspect-ratio:780/1688;object-fit:cover;object-position:top}
.frame-desk{position:relative;border-radius:16px;padding:6px;background:#1E1914;box-shadow:inset 0 0 0 1px rgba(255,230,190,.16),0 40px 80px -30px rgba(0,0,0,.8)}
.frame-desk>img{border-radius:11px;width:100%;aspect-ratio:1800/969;object-fit:cover}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,backdrop-filter .3s,box-shadow .3s,transform .4s var(--ease)}
.site-header.scrolled{background:rgba(10,8,6,.8);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;gap:24px;height:68px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--amber);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after,.nav-links a.current::after{transform:none}
.nav-links a.current{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-login{font-size:15px;font-weight:600;text-decoration:none;color:var(--muted)}
.nav-login:hover{color:var(--text)}
.menu-button{display:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,230,190,.08);align-items:center;justify-content:center}
.menu-button .icon{width:22px;height:22px}
.mobile-menu{background:rgba(10,8,6,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px var(--gutter) 20px;display:flex;flex-direction:column}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:14px 0;font-size:22px;font-weight:800;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--line);animation:menuIn .4s var(--ease) both}
.mobile-menu a:nth-child(2){animation-delay:.03s}.mobile-menu a:nth-child(3){animation-delay:.06s}.mobile-menu a:nth-child(4){animation-delay:.09s}.mobile-menu a:nth-child(5){animation-delay:.12s}.mobile-menu a:nth-child(6){animation-delay:.15s}.mobile-menu a:nth-child(7){animation-delay:.18s}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}}

/* HERO */
.hero{min-height:calc(var(--vh,1svh) * 100);padding:110px 0 72px;display:flex;align-items:center;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:saturate(.6) sepia(.25) blur(2px);animation:heroZoom 20s var(--ease) both}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.97) 0%,rgba(10,8,6,.88) 45%,rgba(10,8,6,.76) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(10,8,6,0) 35%)}
@keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1.03)}}
.glow{position:absolute;z-index:1;border-radius:50%;pointer-events:none}
.g1{width:70vmax;height:70vmax;right:-22vmax;top:-26vmax;background:radial-gradient(circle,rgba(255,150,0,.22),rgba(255,150,0,0) 62%);animation:drift1 16s ease-in-out infinite alternate}
.g2{width:55vmax;height:55vmax;left:-20vmax;bottom:-30vmax;background:radial-gradient(circle,rgba(255,90,20,.14),rgba(255,90,20,0) 62%);animation:drift2 19s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-9vmax,10vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(10vmax,-7vmax) scale(.92)}}
.spot{position:absolute;z-index:1;width:520px;height:520px;left:var(--mx,70%);top:var(--my,40%);translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,190,80,.13),rgba(255,190,80,0) 65%);pointer-events:none;transition:opacity .4s;opacity:0}
.hero:hover .spot{opacity:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero-title{font-weight:800;font-size:clamp(54px,6.6vw,112px);line-height:.92;letter-spacing:-.055em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line>span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) .1s forwards}
.hero-title .line+.line>span{animation-delay:.22s}
.amber{color:var(--amber)}
.hero-title .amber>span{background:linear-gradient(100deg,var(--amber) 0%,var(--amber-2) 30%,var(--amber) 55%,var(--ember) 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1.1s var(--ease) .22s forwards,shine 6s ease-in-out 1.4s infinite alternate}
@keyframes rise{to{transform:none}}
@keyframes shine{to{background-position:100% 0}}
.hero-lead{margin-top:26px;font-size:clamp(18px,1.6vw,21px);color:#D8CCBA;max-width:480px;opacity:0;animation:fadeUp .9s var(--ease) .5s forwards}
.hero-actions{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:22px;opacity:0;animation:fadeUp .9s var(--ease) .62s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.works-with{margin-top:44px}
.works-with p{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px;opacity:0;animation:fadeUp .8s var(--ease) .75s forwards}
.icon-row{display:flex;flex-wrap:wrap;gap:10px}
.icon-row li{opacity:0;transform:translateY(14px) scale(.6);animation:pop .7s var(--spring) forwards;animation-delay:calc(.85s + var(--i,0) * 60ms)}
.icon-row li:nth-child(2){--i:1}.icon-row li:nth-child(3){--i:2}.icon-row li:nth-child(4){--i:3}.icon-row li:nth-child(5){--i:4}.icon-row li:nth-child(6){--i:5}.icon-row li:nth-child(7){--i:6}.icon-row li:nth-child(8){--i:7}
@keyframes pop{to{opacity:1;transform:none}}
.icon-row li img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px rgba(255,255,255,.12);transition:transform .3s var(--spring)}
.icon-row li:hover img{transform:translateY(-5px) rotate(-6deg) scale(1.08)}
.icon-row li.plus{margin-left:14px;position:relative}
.icon-row li.plus::before{content:"";position:absolute;left:-13px;top:8px;bottom:8px;width:1px;background:var(--line-2)}
.hero-stage{position:relative;display:grid;place-items:center;perspective:1200px}
.dial{position:absolute;width:min(620px,118%);aspect-ratio:1;fill:none;pointer-events:none;opacity:0;animation:fadeIn 1.2s ease .3s forwards}
@keyframes fadeIn{to{opacity:1}}
.dial-track{stroke:rgba(255,190,90,.07);stroke-width:2}
.dial-ticks{stroke:rgba(255,190,90,.16);stroke-width:10;stroke-dasharray:1.5 23;animation:spin 90s linear infinite reverse;transform-origin:300px 300px}
.dial-arc{stroke:var(--amber);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s var(--ease) .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dial-orbit{transform-origin:300px 300px;animation:spin 14s linear infinite}
.dial-dot{fill:#FFE7B0}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-phone{width:min(300px,calc((calc(var(--vh,1svh) * 100) - 200px) * .466));transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transition:transform .5s var(--ease);opacity:0;animation:phoneIn 1.3s var(--ease) .35s forwards,float 6s ease-in-out 1.7s infinite}
@keyframes phoneIn{from{opacity:0;translate:0 60px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@keyframes float{50%{translate:0 -12px}}

/* APPS */
.apps-strip{background:var(--amber);color:var(--amber-ink);padding:clamp(72px,9vw,128px) 0}
.apps-strip .display>span:not(.ln),.apps-strip .display .ln>span>span{color:rgba(20,12,0,.55)}
.app-grid{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.app-grid li{background:#FFF8EA;border-radius:var(--r-lg);padding:22px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 18px 30px -22px rgba(80,40,0,.6);transition:transform .45s var(--spring),box-shadow .3s;transform:perspective(700px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.app-grid li:hover{box-shadow:0 1px 0 rgba(0,0,0,.08),0 28px 40px -22px rgba(80,40,0,.75)}
.app-grid img{width:64px;height:64px;border-radius:16px;margin-bottom:14px;box-shadow:0 0 0 1px rgba(0,0,0,.06);transition:transform .45s var(--spring)}
.app-grid li:hover img{transform:translateY(-4px) scale(1.06)}
.app-grid b{font-size:17px;letter-spacing:-.02em}
.app-grid small{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#6B5434}
.apps-plus{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:700;color:#5A4420}
.apps-plus img{border-radius:8px}
.apps-plus b{color:var(--amber-ink);margin-right:10px}

/* STORY (preso na rolagem) */
.story{height:calc(calc(var(--vh,1svh) * 100) + 4 * 55 * var(--vh,1svh));background:var(--ink)}
.story-sticky{position:sticky;top:0;height:calc(var(--vh,1svh) * 100);display:flex;align-items:center;padding-top:64px;overflow:hidden}
.story-sticky::before{content:"";position:absolute;width:80vmin;height:80vmin;right:6%;top:50%;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,150,0,.13),transparent 65%);pointer-events:none}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:center;position:relative}
.story-copy .kicker{margin-bottom:22px}
.story-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:34px}
.story-tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:0 0 14px;text-align:left;color:var(--dim);font-weight:700;font-size:15px;transition:color .3s}
.story-tabs b{font-size:12px;letter-spacing:.1em}
.story-tabs button[aria-selected="true"]{color:var(--text)}
.story-tabs button[aria-selected="true"] b{color:var(--amber)}
.progress{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:rgba(255,220,160,.12);overflow:hidden}
.progress i{position:absolute;inset:0;background:linear-gradient(90deg,var(--ember),var(--amber));transform-origin:left;transform:scaleX(var(--p,0))}
.story-panels{display:grid}
.story-panel{grid-area:1/1}
.story-panel[hidden]{display:block;visibility:hidden}
.story-panel:not([hidden]) h3,.story-panel:not([hidden]) p,.story-panel:not([hidden]) .chips{animation:panelIn .55s var(--ease) both}
.story-panel:not([hidden]) p{animation-delay:.06s}
@keyframes panelIn{from{opacity:0;transform:translateY(16px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.story-panel h3{font-size:clamp(30px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin-bottom:16px}
.story-panel p{color:var(--muted);font-size:clamp(17px,1.4vw,19px);max-width:480px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chips button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 8px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,230,190,.04);font-size:14px;font-weight:700;color:var(--muted);transition:background .25s,color .25s,transform .3s var(--spring)}
.chips button:hover{transform:translateY(-2px)}
.chips button img{border-radius:6px}
.chips button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.story-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;min-height:0}
.story-phone{width:min(340px,100%,calc((calc(var(--vh,1svh) * 100) - 150px) * .466));aspect-ratio:794/1702}
.story-phone .layer{position:absolute;left:7px;top:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:29px;object-fit:cover;object-position:top;opacity:0;clip-path:inset(0 0 100% 0 round 29px);transition:clip-path .8s var(--ease),opacity .2s .6s;z-index:1}
.story-phone[data-state="before"] .layer-before,.story-phone[data-state="connect"] .layer-connect,.story-phone[data-state="style"] .layer-style,.story-phone[data-state="live"] .layer-live{opacity:1;clip-path:inset(0 0 0 0 round 29px);transition:clip-path .8s var(--ease),opacity 0s;z-index:2}
.scan{position:absolute;left:var(--scan-left,24%);width:var(--scan-w,52%);top:var(--scan-from,37%);margin-top:-1.5px;height:3px;border-radius:3px;background:var(--amber);box-shadow:0 0 14px 2px rgba(255,170,0,.8);z-index:3;opacity:0;pointer-events:none}
.story-phone[data-state="connect"][data-flow="qr"] .scan{opacity:1;animation:scan 1.4s ease-in-out infinite alternate}
@keyframes scan{from{top:var(--scan-from,32%)}to{top:var(--scan-to,54%)}}
.stage-label{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em}

/* SHOWCASE */
.showcase{padding:clamp(88px,10vw,150px) 0;background:linear-gradient(180deg,var(--ink) 0%,#120E09 100%)}
.desk-stage{perspective:1600px}
.showcase-desk{max-width:1100px;margin:0 auto;transform-origin:50% 100%;transform:rotateX(calc(var(--sp,1) * 24deg)) scale(calc(1 - var(--sp,1) * .12)) translateY(calc(var(--sp,1) * 40px));will-change:transform}
.pin{position:absolute;display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:var(--amber-ink);font-size:13px;font-weight:800;border-radius:999px;padding:6px 12px 6px 6px;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);white-space:nowrap;opacity:0;transform:translateY(10px) scale(.8);transition:opacity .5s var(--ease),transform .6s var(--spring)}
.pin b{width:22px;height:22px;border-radius:50%;background:var(--amber-ink);color:var(--amber);display:grid;place-items:center;font-size:12px}
.showcase-desk.pins-on .pin{opacity:1;transform:none}
.showcase-desk.pins-on .pin-b{transition-delay:.15s}
.showcase-desk.pins-on .pin-c{transition-delay:.3s}
.pin-a{left:7%;top:10%}
.pin-b{right:5%;top:34%}
.pin-c{right:5%;top:62%}
.phone-switch{display:none}
.phones{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.phones li{display:flex;flex-direction:column}
.phones .frame-phone{width:min(280px,100%);margin:0 auto 24px;transition:transform .6s var(--spring)}
.phones li:nth-child(2) .frame-phone{transform:translateY(-28px)}
.phones li:hover .frame-phone{transform:translateY(-12px) rotate(-1.5deg)}
.phones li:nth-child(2):hover .frame-phone{transform:translateY(-40px) rotate(1.5deg)}
.phones h3{font-size:22px;font-weight:800;letter-spacing:-.03em;text-align:center}
.phones p{color:var(--muted);text-align:center;font-size:16px;margin-top:6px}
.showcase .fine{margin-left:auto;margin-right:auto;text-align:center;margin-top:48px}

/* CHATGPT */
.gpt{background:#0E0B08;padding:clamp(88px,10vw,150px) 0;isolation:isolate}
.aurora{position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.a1{width:60vmax;height:60vmax;left:-15vmax;top:-20vmax;background:radial-gradient(circle,rgba(255,140,0,.16),transparent 62%);animation:drift1 18s ease-in-out infinite alternate}
.a2{width:50vmax;height:50vmax;right:-15vmax;bottom:-20vmax;background:radial-gradient(circle,rgba(138,184,245,.1),transparent 62%);animation:drift2 22s ease-in-out infinite alternate}
.gpt .display>span:not(.ln),.gpt .display .ln>span>span{color:var(--amber)}
.gpt-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 60px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.gpt-head .kicker{grid-column:1/-1}
.gpt-demo{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(20px,3vw,40px);align-items:center}
.gpt-chat{background:#212121;border-radius:22px;padding:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);display:flex;flex-direction:column;min-height:440px}
.gpt-bar{display:flex;align-items:center;gap:10px;padding:4px 4px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.gpt-bar img{border-radius:6px}
.gpt-conn{margin-left:auto;font-size:12px;font-weight:700;color:var(--amber);display:inline-flex;align-items:center;gap:6px}
.gpt-conn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);animation:beat 2s ease-in-out infinite;box-shadow:0 0 0 3px rgba(255,170,0,.2)}
.gpt-msgs{flex:1;display:flex;flex-direction:column;gap:14px;padding:22px 4px}
.msg-user{align-self:flex-end;background:#303030;border-radius:20px;padding:12px 16px;max-width:86%;font-size:16px;min-height:1.55em}
.msg-tool{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#FFD48A;border-radius:999px;padding:6px 12px;align-self:flex-start;background:linear-gradient(90deg,rgba(255,170,0,.12) 0%,rgba(255,170,0,.32) 50%,rgba(255,170,0,.12) 100%) 0 0/200% 100%}
.msg-tool .icon{width:16px;height:16px}
.gpt-demo[data-phase="tool"] .msg-tool{animation:shimmer 1.1s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.gpt-demo[data-phase="tool"] .msg-tool .icon{animation:spin 1.2s linear infinite}
.msg-bot{font-size:16px;color:#ECECEC;line-height:1.55}
.gpt-input{display:flex;align-items:center;gap:10px;background:#303030;border-radius:999px;padding:10px 10px 10px 18px;color:#8E8E8E;font-size:15px}
.gpt-input i{margin-left:auto;width:34px;height:34px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center}
.js .gpt-demo .msg-user,.js .gpt-demo .msg-tool,.js .gpt-demo .msg-bot{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .5s var(--spring)}
.js .gpt-demo:is([data-phase="ask"],[data-phase="tool"],[data-phase="done"]) .msg-user,
.js .gpt-demo:is([data-phase="tool"],[data-phase="done"]) .msg-tool,.js .gpt-demo[data-phase="done"] .msg-bot{opacity:1;transform:none}
.gpt-screen{position:relative}
.gpt-desk,.gpt-phone{display:grid;overflow:hidden}
.gpt-desk>img,.gpt-phone>img{grid-area:1/1}
.gpt-phone{display:none;width:min(300px,100%);margin:0 auto}
.gpt-screen .after{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.gpt-demo[data-phase="done"] .gpt-screen .after{clip-path:inset(0 0 0 0)}
.wipe{position:absolute;left:6px;right:6px;top:6px;height:3px;border-radius:3px;background:var(--amber);box-shadow:0 0 24px 6px rgba(255,170,0,.55);opacity:0;z-index:2;pointer-events:none}
.gpt-demo[data-phase="done"] .wipe{animation:wipe 1.2s var(--ease) forwards}
@keyframes wipe{0%{opacity:1;top:6px}90%{opacity:1}100%{opacity:0;top:calc(100% - 9px)}}
.gpt-state{margin-top:14px;font-size:13px;font-weight:700;color:var(--muted);text-align:center}
.gpt-state .s-after{display:none;color:var(--amber)}
.gpt-demo[data-phase="done"] .s-before{display:none}
.gpt-demo[data-phase="done"] .s-after{display:inline}
.replay{position:absolute;left:0;bottom:-56px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--amber-2);font-weight:700;font-size:14px;padding:8px 0}
.replay:hover{color:#fff}
.replay:hover .icon{animation:spin .8s var(--ease)}
.gpt-can{margin-top:96px;display:flex;flex-wrap:wrap;gap:10px}
.gpt-can li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,190,90,.08);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:700;font-size:15px}
.gpt-can .icon{color:var(--amber)}
.gpt-cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.gpt-cta .fine{margin:0;max-width:620px}

/* RECURSOS */
.features{padding:clamp(88px,10vw,140px) 0}
.bento{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;min-height:240px;display:flex;flex-direction:column;gap:16px;transition:transform .5s var(--spring),border-color .3s}
.card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.card-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.card-tag img{border-radius:6px}
.card h3,.card blockquote{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.card-alexa{background:#0C2230;border-color:transparent}
.card-alexa .card-tag{color:#9CC8DC}
.card-alexa blockquote{margin-top:auto;font-size:clamp(28px,2.6vw,36px);color:var(--sky)}
.card-ai .ai-answer{margin-top:auto;background:rgba(255,170,0,.1);border-radius:14px;padding:14px;color:#FFE2A8;font-size:15px}
.timeline{display:grid;gap:10px;margin-top:auto}
.timeline li{display:flex;gap:14px;font-weight:700;font-size:15px}
.timeline time{color:var(--amber);font-variant-numeric:tabular-nums}
.card-pwa{background:var(--amber);color:var(--amber-ink);border-color:transparent}
.card-pwa .card-tag{color:rgba(20,12,0,.7)}
.card-pwa h3{margin-top:auto}

/* HUB */
.hub{padding:clamp(88px,10vw,140px) 0;background:#0D0A07;border-top:1px solid var(--line)}
.presale{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.hub-head .lead{margin-top:20px}
.hub-figure{margin-top:clamp(36px,5vw,56px);border-radius:var(--r-lg);overflow:hidden;background:#000}
.hub-figure img{width:100%;aspect-ratio:16/8;object-fit:cover;transform:scale(calc(1.12 - var(--hp,0) * .12));will-change:transform}
.hub-figure figcaption{font-size:13px;color:var(--dim);padding:12px 16px}
.family{margin-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.family li{border-top:2px solid var(--amber);padding-top:14px;color:var(--muted);font-size:15px}
.family b{display:block;color:var(--text);font-size:18px;margin-bottom:2px}
.split{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.split>div{border-radius:var(--r-lg);padding:22px;background:var(--ink-3)}
.split-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin-bottom:6px}
.split-local .icon{color:var(--amber)}
.split-cloud .icon{color:var(--sky)}
.split p:not(.split-title){color:var(--muted)}
.hub-cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.hub-cta p{color:var(--dim);font-size:14px}

/* PLANOS */
.pricing{background:#F7F0E3;color:#140C00;padding:clamp(88px,10vw,140px) 0}
.pricing .kicker{color:#8A5A00}
.billing{margin-top:28px;display:inline-flex;background:#EADFCB;border-radius:999px;padding:5px}
.billing button{border:0;background:none;border-radius:999px;padding:10px 18px;font-weight:700;font-size:15px;color:#6B5434;transition:background .3s,color .3s}
.billing button[aria-pressed="true"]{background:#140C00;color:#fff}
.billing em{font-style:normal;font-size:12px;font-weight:800;color:#8A5A00;margin-left:6px}
.billing button[aria-pressed="true"] em{color:var(--amber)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{position:relative;background:#fff;border-radius:22px;padding:30px;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(0,0,0,.05),0 20px 40px -28px rgba(80,40,0,.4);transition:transform .5s var(--spring)}
.plan:hover{transform:translateY(-8px)}
.plan h3{font-size:26px;font-weight:800;letter-spacing:-.03em}
.plan-desc{color:#6B5434;margin-top:6px}
.price{margin-top:24px;display:flex;align-items:baseline;gap:6px}
.price strong{font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.price span{font-weight:700;color:#6B5434}
.price-note{font-size:13px;color:#6B5434;margin-top:6px;min-height:2.6em}
.plan ul{margin:22px 0 28px;display:grid;gap:10px}
.plan li{display:flex;gap:10px;font-size:15px}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:#FFE7B0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140C00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.plan .btn{margin-top:auto}
.plan-featured{background:#140C00;color:#fff}
.plan-featured .plan-desc,.plan-featured .price span,.plan-featured .price-note{color:#B9AC98}
.plan-featured li::before{background-color:var(--amber)}
.plan-flag{position:absolute;top:-13px;left:30px;background:var(--amber);color:var(--amber-ink);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.pricing .fine{color:#6B5434}
.pro{margin-top:40px;background:#140C00;color:var(--text);border-radius:26px;padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:28px 48px;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.pro::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-140px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,0,.28),transparent 65%);animation:drift1 14s ease-in-out infinite alternate}
.pro-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.pro h3{font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.pro h3>span:not(.ln),.pro h3 .ln>span>span{color:var(--amber)}
.pro-list{margin-top:22px;display:grid;gap:10px}
.pro-list li{display:flex;gap:12px;font-weight:600;color:#E8DCC8}
.pro-list li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--amber)}
.pro-cta p{margin-top:14px;font-size:13px;color:var(--dim)}

/* ORIGEM */
.origin{background:var(--amber);color:var(--amber-ink);padding:clamp(80px,9vw,128px) 0}
.origin-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.origin-numbers{display:grid;gap:22px}
.origin-numbers strong{display:block;font-size:clamp(84px,11vw,160px);font-weight:800;letter-spacing:-.06em;line-height:.85;font-variant-numeric:tabular-nums}
.origin-numbers p>span{font-weight:700;font-size:17px}
.origin .kicker{color:rgba(20,12,0,.7);margin-bottom:16px}
.origin .display{font-size:clamp(32px,4vw,56px)}

.origin-copy>p:not(.kicker):not(.signature){margin-top:20px;font-size:18px;max-width:560px}
.signature{margin-top:28px;font-size:15px}
.signature strong{display:block;font-size:20px}

/* FAQ */
.faq{padding:clamp(80px,9vw,128px) 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px)}
.faq .kicker{margin-bottom:18px}
.faq .display{margin-bottom:26px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:700;font-size:19px;position:relative;transition:color .2s}
.faq-list summary:hover{color:var(--amber-2)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:50%;translate:0 -50%;font-size:26px;font-weight:400;color:var(--amber);transition:rotate .35s var(--spring)}
.faq-list details[open] summary::after{rotate:45deg}
.faq-list details[open] p{animation:fadeUp .45s var(--ease)}
.faq-list p{color:var(--muted);padding:0 0 22px;max-width:640px}

/* FINAL */
.final{overflow:hidden;padding:clamp(110px,14vw,210px) 0;text-align:center;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(255,150,0,.18),transparent 70%),var(--ink);border-top:1px solid var(--line);isolation:isolate}
.final-dial{pointer-events:none;position:absolute;z-index:-1;left:50%;top:50%;width:min(900px,140vw);translate:-50% -50%;fill:none;opacity:.5}
.final-dial path{stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease)}
.final-dial circle{fill:#FFE7B0;opacity:0;transition:opacity .6s 2s}
.final.in .final-dial path{stroke-dashoffset:0}
.final.in .final-dial circle{opacity:1}
.mega{font-weight:800;font-size:clamp(42px,7vw,108px);line-height:.95;letter-spacing:-.055em;text-wrap:balance}
.mega>span:not(.ln),.mega .ln>span>span{color:var(--amber)}
.final .btn{margin-top:40px}
.final p{margin-top:18px;color:var(--muted)}

/* FOOTER */
.footer{border-top:1px solid var(--line);padding:40px 0 32px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.footer-bottom{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;font-size:14px;color:var(--dim)}
.footer-bottom button{background:none;border:0;padding:0;color:var(--dim);font-size:14px;text-decoration:underline}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;background:rgba(255,230,190,.06)!important;border:0;border-radius:999px;padding:8px 14px!important;font-size:13px!important;font-weight:600;color:var(--muted)!important;text-decoration:none!important}
.motion-toggle:hover{color:var(--text)!important}
.footer-bottom a{text-decoration:none}
.trademark{margin-top:18px;font-size:12px;color:#6A604F}
dialog{max-width:min(520px,calc(100vw - 32px));border:0;border-radius:var(--r-lg);background:var(--ink-3);color:var(--text);padding:26px}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.dialog-head h2{font-size:22px}
.dialog-head button{background:rgba(255,230,190,.08);border:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
dialog p{color:var(--muted);margin-top:10px}

/* revelar ao rolar */
.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .app-grid li.reveal{transform:translateY(40px) scale(.94)}
.js .app-grid li.reveal.in{transform:perspective(700px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}

/* RESPONSIVO */
@media (max-width:1100px){
  .nav-links,.nav-login{display:none}
  .menu-button{display:inline-flex}
  .app-grid{grid-template-columns:repeat(3,1fr)}
  .bento{grid-template-columns:1fr 1fr}
  .gpt-demo{grid-template-columns:1fr 1fr}
  .gpt-desk{display:none}
  .gpt-phone{display:grid}
}
@media (max-width:900px){
  .hero{padding:96px 0 48px;min-height:auto;flex-direction:column}
  .hero-grid{grid-template-columns:1fr}
  .hero-stage{margin-top:28px}
  .hero-phone{width:min(250px,62vw)}
  .dial{width:min(480px,128vw)}
  .story-sticky{align-items:stretch;padding:72px 0 20px}
  .story-sticky::before{right:auto;left:50%;translate:-50% -30%;top:60%}
  .story-grid{display:flex;flex-direction:column;gap:14px;height:100%;min-height:0}
  .story-copy{flex:none}
  .story-copy .kicker{display:none}
  .story-tabs{margin-bottom:14px}
  .story-panel h3{font-size:24px;margin-bottom:6px}
  .story-panel p{font-size:15px}
  .chips{gap:6px;margin-bottom:8px}
  .chips button{min-height:32px;font-size:12px;padding:0 10px 0 5px}
  .chips button img{width:18px;height:18px}
  .story-stage{flex:1;min-height:0;justify-content:center}
  .story-phone{width:var(--pw,200px);height:var(--ph,428px);max-width:none;aspect-ratio:auto}
  .stage-label{display:none}
  .gpt-head{grid-template-columns:1fr}
  .origin-grid,.faq-grid{grid-template-columns:1fr}
  .pin{font-size:11px;padding:4px 9px 4px 4px}
  .pin b{width:18px;height:18px;font-size:10px}
  .plans{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .pro{grid-template-columns:1fr}
  .family{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav{height:60px}
  .btn-sm{display:none}
  .logo{font-size:27px}
  .app-grid{grid-template-columns:1fr 1fr;gap:10px}
  .app-grid li{padding:16px 14px}
  .app-grid img{width:52px;height:52px;margin-bottom:10px}
  .bento{grid-template-columns:1fr}
  .card{min-height:0}
  .gpt-demo{grid-template-columns:1fr}
  .gpt-chat{min-height:0}
  .gpt-msgs{padding:16px 2px;gap:10px}
  .gpt-phone{width:min(260px,72vw)}
  .replay{position:static;margin-top:4px}
  .gpt-can{margin-top:40px}
  .split{grid-template-columns:1fr}
  .pin{display:none}
  .icon-row{gap:7px;flex-wrap:nowrap}
  .icon-row li img{width:34px;height:34px;border-radius:9px}
  .icon-row li.plus{margin-left:10px}
  .icon-row li.plus::before{left:-9px}
  .story-tabs button{font-size:13px}
  /* telas: um celular por vez, com seletor (sem rolagem lateral) */
  .phone-switch{display:flex;justify-content:center;gap:6px;margin-top:48px;background:var(--ink-3);border-radius:999px;padding:5px;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
  .phone-switch button{border:0;background:none;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;color:var(--muted);position:relative;overflow:hidden}
  .phone-switch button[aria-selected="true"]{background:var(--amber);color:var(--amber-ink)}
  .phone-switch button[aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(20,12,0,.35);transform-origin:left;animation:fill var(--cycle,4s) linear}
  .motion-paused .phone-switch button::after,.phones-held .phone-switch button::after{display:none}
  @keyframes fill{from{transform:scaleX(0)}}
  .phones{display:grid;grid-template-columns:1fr;margin-top:8px;overflow:hidden;padding:24px 0 30px}
  .phones li{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(18px) scale(.94);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .6s}
  .phones li.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
  .phones li.reveal:not(.in){opacity:0}
  .phones .frame-phone,.phones li:nth-child(2) .frame-phone{transform:none;width:min(260px,70vw)}
}
@media (max-width:360px){.btn-lg{font-size:15px;padding:0 20px}.hero-title{font-size:48px}}
/* telas baixas: sem prender na rolagem */
@media (max-height:599px){
  .story{height:auto}
  .story-sticky{position:relative;height:auto;padding:88px 0 64px}
  .story-grid{height:auto}
  .story-phone{height:auto;width:min(260px,70vw);margin:0 auto;aspect-ratio:794/1702}
}

/* movimento */
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-title .line>span,.js .ln>span{transform:none!important}
  .hero-lead,.hero-actions,.works-with p,.icon-row li,.hero-phone,.dial{opacity:1!important;transform:none!important}
  .dial-arc{stroke-dashoffset:0}
  .js .reveal{opacity:1!important;transform:none!important}
  .showcase-desk{transform:none!important}
  .pin{opacity:1;transform:none}
}

/* ===== v6 ===== */
.kicker-dark{color:rgba(20,12,0,.72);margin-bottom:16px}
.showcase-video{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1440/800;object-fit:cover;border-radius:11px;background:#121614}

/* INSTALAR: o app abre como app (ícone → abertura → tela cheia) */
.install{padding:clamp(88px,10vw,140px) 0;background:linear-gradient(180deg,#0A0806,#120D08)}
.install-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:center}
.install-copy .kicker{margin-bottom:18px}
.install-copy .lead{margin-top:20px}
.install-list{margin-top:26px;display:grid;gap:10px}
.install-list li{display:flex;align-items:center;gap:10px;font-weight:700}
.install-list .icon{color:var(--amber)}
.install-stage{display:flex;justify-content:center}
.install-phone{width:min(300px,72vw);aspect-ratio:794/1702}
.install-phone>*{position:absolute;left:7px;top:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:29px}
.homescreen{background:radial-gradient(ellipse at 30% 20%,#5b3a1a,#1b120a 60%,#0b0806);display:flex;flex-direction:column;align-items:center;padding:16% 10% 0;overflow:hidden}
.hs-time{font-size:44px;font-weight:300;letter-spacing:-.02em;color:#fff;margin-bottom:18%}
.hs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 14px;width:100%}
.hs-app,.hs-aro{aspect-ratio:1;border-radius:22%;background:var(--c);opacity:.85;display:block}
.hs-aro{background:#140C00;opacity:1;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,170,0,.4);animation:aroPress 7s var(--ease) infinite}
.hs-aro svg{width:62%;height:62%}
.hs-tap{position:absolute;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.35);left:66%;top:52%;opacity:0;transform:scale(.4);animation:tap 7s ease-out infinite}
.launch{display:grid;place-items:center;background:#0A0806;opacity:0;animation:launch 7s var(--ease) infinite}
.launch svg{width:28%;height:28%}
.launched{object-fit:cover;object-position:top;opacity:0;animation:launched 7s var(--ease) infinite}
@keyframes tap{0%,14%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1)}26%,100%{opacity:0;transform:scale(1.4)}}
@keyframes aroPress{0%,16%{transform:none}20%{transform:scale(.86)}24%,100%{transform:none}}
@keyframes launch{0%,22%{opacity:0;clip-path:inset(46% 26% 38% 58% round 18px)}30%{opacity:1;clip-path:inset(0 0 0 0 round 29px)}44%{opacity:1}52%,100%{opacity:0;clip-path:inset(0 0 0 0 round 29px)}}
@keyframes launched{0%,44%{opacity:0;transform:scale(1.04)}54%,90%{opacity:1;transform:none}100%{opacity:0}}

/* RECURSOS v6 */
.features .kicker{margin-bottom:18px}
.bento{grid-template-columns:repeat(3,1fr)}
.card-note{display:flex;gap:8px;font-size:14px;color:#9CC8DC;margin-top:auto}
.card-note .icon{flex:none;margin-top:2px}
.card-alexa blockquote{margin-top:0}
.card-spotify{background:#0E1F14;border-color:transparent}
.card-spotify .card-tag{color:#9FDDB2}
.eq{margin-top:auto;display:flex;align-items:flex-end;gap:5px;height:42px}
.eq i{width:8px;border-radius:3px;background:#1DB954;height:30%;animation:eq 1.1s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}.eq i:nth-child(5){animation-delay:-.45s}
@keyframes eq{to{height:100%}}
.game-logos{margin-top:auto;display:flex;gap:10px}
.game-logos img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.card-plan{background:var(--amber);color:var(--amber-ink);border-color:transparent}
.card-plan .card-tag{color:rgba(20,12,0,.7)}
.card-plan h3{margin-top:auto}

/* ARO HUB v6: hub flutuando, anéis girando, marcas em volta */
.hub{background:radial-gradient(ellipse 60% 70% at 75% 50%,rgba(255,150,0,.12),transparent 70%),#0B0907}
.hub-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.hub-copy .lead{margin-top:20px}
.hub-points{margin-top:28px;display:grid;gap:16px}
.hub-points li{display:flex;gap:14px;color:var(--muted);font-size:16px}
.hub-points b{color:var(--text)}
.hub-points .icon{flex:none;width:22px;height:22px;color:var(--amber);margin-top:1px}
.hub-buy{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.hub-price{display:flex;flex-direction:column;line-height:1.1}
.hub-price span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.hub-price strong{font-size:clamp(40px,4.4vw,56px);font-weight:800;letter-spacing:-.04em}
.hub-price em{font-style:normal;color:var(--muted);font-weight:600}
.hub-stage{position:relative;aspect-ratio:1;display:grid;place-items:center}
.hub-rings{position:absolute;inset:0;width:100%;height:100%;fill:none}
.hub-rings .r1{stroke:rgba(255,190,90,.08);stroke-width:2}
.hub-rings .r2{stroke:rgba(255,190,90,.14);stroke-width:8;stroke-dasharray:1.5 22;transform-origin:300px 300px;animation:spin 80s linear infinite reverse}
.hub-rings .r3{stroke:var(--amber);stroke-width:3;stroke-linecap:round;transform-origin:300px 300px;animation:spin 30s linear infinite}
.hub-rings .r-orbit{transform-origin:300px 300px;animation:spin 12s linear infinite}
.hub-rings .r-orbit circle{fill:#FFE7B0}
.hub-device{position:relative;z-index:2;width:62%;filter:drop-shadow(0 40px 40px rgba(0,0,0,.55));animation:float 6s ease-in-out infinite}
.brand-orbit{position:absolute;inset:0;z-index:3;pointer-events:none}
.brand-orbit li{position:absolute;left:calc(50% + var(--x) * var(--k,1));top:calc(50% + var(--y) * var(--k,1));width:clamp(46px,5.4vw,74px);translate:-50% -50%;animation:bob 5s ease-in-out infinite;animation-delay:var(--d)}
.brand-orbit li.small{width:clamp(38px,4.2vw,58px);z-index:-1;opacity:.85}
.brand-orbit img{width:100%;height:auto;border-radius:24%;box-shadow:0 14px 28px -10px rgba(0,0,0,.7)}
@keyframes bob{50%{transform:translateY(-10px)}}

@media (max-width:1100px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .install-grid,.hub-grid{grid-template-columns:1fr}
  .hub-stage{max-width:520px;margin:0 auto;width:100%}
}
@media (max-width:640px){.bento{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .launched{opacity:1!important}.launch,.hs-tap{display:none}
}
.hub .display{font-size:clamp(34px,4.2vw,60px)}
.hub-device{width:58%}
@media (max-width:640px){.brand-orbit{--k:.8}.brand-orbit li{width:46px}}
/* v6b: celular — vídeo recortado na casa, marcadores embaixo do vídeo */
@media (max-width:640px){
  .showcase-video{aspect-ratio:1/1;object-position:51% 50%}
  .showcase-desk{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
  .showcase-desk .showcase-video{flex:0 0 100%}
  .showcase-desk .pin{position:static;margin-top:4px}
}
/* v6c: Aro HUB em destaque, flutuando sobre uma base dourada elíptica; marcas orbitando soltas */
.hub-stage{display:block;aspect-ratio:1/1;perspective:1300px;isolation:isolate}
.hub-floor{position:absolute;left:50%;top:66%;width:98%;aspect-ratio:1;translate:-50% -50%;transform:rotateX(72deg);pointer-events:none;z-index:0}
.hub-glow{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(255,170,0,.35) 0%,rgba(255,150,0,.16) 45%,transparent 70%);animation:hubglow 6s ease-in-out infinite}
.hub-floor::before{content:"";position:absolute;inset:22%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#FFE7A8 0%,#FFC94D 34%,#F5A300 66%,#B86F00 100%);
  box-shadow:0 0 0 3px rgba(255,236,190,.55),0 0 60px 18px rgba(255,170,0,.45),inset 0 0 40px rgba(120,60,0,.45)}
.hub-floor::after{content:"";position:absolute;inset:30%;border-radius:50%;border:2px solid rgba(255,250,230,.6);box-shadow:inset 0 0 30px rgba(255,255,240,.5)}
.hub-floor .hub-rings{position:absolute;inset:0;width:100%;height:100%;fill:none}
.hub-floor .r1{stroke:rgba(255,205,120,.28);stroke-width:2.5}
.hub-floor .r2{stroke:rgba(255,205,120,.42);stroke-width:9;stroke-dasharray:1.5 20;transform-origin:300px 300px;animation:spin 70s linear infinite reverse}
.hub-floor .r3{stroke:var(--amber);stroke-width:5;stroke-linecap:round;transform-origin:300px 300px;animation:spin 26s linear infinite}
.hub-floor .r4{stroke:rgba(255,236,190,.55);stroke-width:2}
.hub-floor .r-orbit{transform-origin:300px 300px;animation:spin 11s linear infinite}
.hub-floor .r-orbit circle{fill:#FFF1CC}
.hub-stage .hub-device{position:absolute;left:50%;top:42%;width:62%;translate:-50% -50%;z-index:2;
  filter:drop-shadow(0 0 46px rgba(255,170,0,.3)) drop-shadow(0 34px 30px rgba(0,0,0,.5));animation:hubfloat 6s ease-in-out infinite}
@keyframes hubfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes hubglow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.82;transform:scale(.95)}}
.brand-orbit{z-index:auto}
.brand-orbit li{left:0;top:0;translate:none;animation:none;width:clamp(42px,4.8vw,66px);will-change:transform,opacity}
.brand-orbit li img{box-shadow:0 16px 30px -12px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.6)}
@media (max-width:640px){.brand-orbit li{width:40px}.hub-stage .hub-device{width:58%}.hub-stage{margin:-6% 0 -18%}}
@media (prefers-reduced-motion:reduce){.hub-stage .hub-device,.hub-glow{animation:none}}
/* v6d: telas do app com Mídia e Gamer; no celular a seção trava e as telas avançam com a rolagem */
.phones{grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px)}
.phones .frame-phone{width:min(230px,100%)}
.phones li:nth-child(2) .frame-phone{transform:none}
.phones li:nth-child(even) .frame-phone{transform:translateY(-28px)}
.phones li:nth-child(2):hover .frame-phone,.phones li:nth-child(4):hover .frame-phone{transform:translateY(-40px) rotate(1.5deg)}
.phones h3{font-size:19px}
.phones p{font-size:15px}
@media (max-width:1000px) and (min-width:641px){.phones{grid-template-columns:repeat(3,1fr);row-gap:48px}}
@media (max-width:640px){
  /* só rolagem vertical: as seções já cortam o que sobra; no html só o "elástico" lateral é desligado */
  html{overscroll-behavior-x:none}
  .apps-plus{display:none}
  .apps-strip,.showcase,.gpt,.features,.hub,.pricing,.origin,.faq,.install{padding-top:56px;padding-bottom:56px}
  .final{padding:72px 0}
  .section-head{margin-bottom:28px}
  .showcase .fine{margin-top:16px}
  .phones-story{height:calc(calc(var(--vh,1svh) * 100) + 4 * 50 * var(--vh,1svh));margin-top:20px}
  .phones-sticky{position:sticky;top:60px;height:calc(calc(var(--vh,1svh) * 100) - 60px);display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:hidden}
  .phone-switch{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;width:100%;margin:0;padding:4px;border-radius:16px}
  .phone-switch button{padding:9px 2px 11px;font-size:12.5px;border-radius:12px}
  .phone-switch button[aria-selected="true"]::after{display:none}
  .phone-switch button i{position:absolute;left:18%;right:18%;bottom:4px;height:2px;border-radius:2px;background:rgba(255,220,160,.16);overflow:hidden}
  .phone-switch button i::before{content:"";position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(var(--p,0))}
  .phones{margin:0;padding:0;overflow:visible;width:100%;grid-template-columns:1fr}
  .phones li{transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .45s}
  .phones li.on{transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s}
  .phones .frame-phone,.phones li:nth-child(2) .frame-phone,.phones li:nth-child(even) .frame-phone{transform:none;width:min(72vw,calc((calc(var(--vh,1svh) * 100) - 60px - 150px) * .462));margin-bottom:12px}
  .phones h3{font-size:18px}
  .phones p{font-size:14px;margin-top:2px}
}
@media (max-width:640px) and (max-height:560px){.phones-story{height:auto}.phones-sticky{position:relative;top:0;height:auto}}
@media (max-width:640px) and (min-height:600px){
  .story-stage{justify-content:flex-start;overflow:visible}
  .story-sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--ink));pointer-events:none;z-index:3}
}
/* Sem os links do menu (até 1100 px), os botões ficam encostados na direita */
@media (max-width:1100px){.nav-actions{margin-left:auto}}
/* Pedido no ChatGPT: a bolha reserva a frase inteira; a digitação aparece por cima */
.msg-user{position:relative}
.msg-user .ghost{visibility:hidden}
.msg-user .typed{position:absolute;left:16px;right:16px;top:12px}
/* O celular da história não encolhe dentro da coluna: mantém a proporção e a linha do QR no lugar */
.story-phone{flex:none}
/* Bônus da pré-venda do Aro HUB */
.hub-bonus{margin-top:26px;max-width:520px;border:1px solid rgba(255,170,0,.35);border-radius:20px;padding:18px 20px;background:linear-gradient(135deg,rgba(255,170,0,.12),rgba(255,170,0,.03))}
.hub-bonus-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.hub-bonus-title .icon{width:18px;height:18px}
.hub-bonus ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.hub-bonus li{display:flex;flex-direction:column;background:rgba(255,230,190,.05);border-radius:14px;padding:12px 14px}
.hub-bonus li b{font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.hub-bonus li span{color:var(--muted);font-size:14px;font-weight:600}
.hub-bonus-note{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.5}
/* App aberto na animação "Instale": mesmo encaixe da tela inicial dentro da moldura */
.install-phone>img.launched{width:calc(100% - 14px);height:calc(100% - 14px);max-width:none}
/* Automações agendadas: título em destaque, relógio âmbar e horários acendendo em sequência */
.card-auto{gap:18px}
.auto-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.auto-head h3{margin-top:10px}
.card-auto .card-tag{color:var(--amber)}
.auto-clock{flex:none;width:64px;height:64px;filter:drop-shadow(0 0 14px rgba(255,170,0,.35))}
.auto-clock .face{fill:rgba(255,170,0,.08);stroke:var(--amber);stroke-width:2.5}
.auto-clock .ticks line{stroke:rgba(255,214,140,.7);stroke-width:2;stroke-linecap:round}
.auto-clock .hand-h,.auto-clock .hand-m{stroke:#FFF1D6;stroke-linecap:round;transform-origin:32px 32px}
.auto-clock .hand-h{stroke-width:3.4;animation:spin 72s linear infinite}
.auto-clock .hand-m{stroke-width:2.4;stroke:var(--amber);animation:spin 6s linear infinite}
.auto-clock .pin{fill:var(--amber)}
.card-auto .timeline{gap:8px}
.card-auto .timeline li{align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,230,190,.04);animation:autoOn 6s ease-in-out infinite}
.card-auto .timeline li:nth-child(2){animation-delay:2s}
.card-auto .timeline li:nth-child(3){animation-delay:4s}
.card-auto .timeline time{font-size:17px}
@keyframes autoOn{0%,40%,100%{background:rgba(255,230,190,.04);box-shadow:none}8%,30%{background:rgba(255,170,0,.14);box-shadow:inset 0 0 0 1px rgba(255,170,0,.4)}}
@media (prefers-reduced-motion:reduce){.auto-clock .hand-h,.auto-clock .hand-m,.card-auto .timeline li{animation:none}}
/* Celular: sem a barrinha de rolagem desenhada pela página (o Safari do iPhone ainda mostra a dele por instantes) */
@media (max-width:900px){html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}}

.pro-more{margin-top:18px;color:var(--amber)}