/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

/* ========== Tokens ========== */
:root{
  --bg:#0B0C0E; --bg-2:#111216; --surface:#16171C; --surface-2:#1D1F25; --line:#26282F; --line-2:#33363F;
  --text:#F2F4F7; --muted:#A4A9B4; --dim:#7D828D;
  --accent:#C6F432; --accent-ink:#0B0C0E; --accent-soft:rgba(198,244,50,.12);
  --accent-text:#C6F432; --accent-line:#C6F432; /* texto/ícone e bordas de destaque — separados p/ contraste no tema claro */
  --nav-bg:rgba(11,12,14,.78); --chrome:#22242A; --chrome-dot:#3b3e46; --chrome-url:#15161A; --stage-bg:#0d0e11;
  --err:#FF7A6B; --err-text:#FF9C90; --err-bg:rgba(255,122,107,.1); --err-strong:#FFB3AA;
  color-scheme:dark;
  --light:#EDEFF2; --light-2:#FFFFFF; --light-line:#D5D9DF; --ink:#0E1013; --ink-muted:#4A505B;
  --f-sans:'Geist', ui-sans-serif, system-ui, sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;
  --fs-body:1rem; --fs-sm:.875rem; --fs-lead:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-h2:clamp(2rem, 1.4rem + 2.6vw, 3.5rem); --fs-display:clamp(2.75rem, 1.6rem + 5vw, 5.75rem);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
  --wrap:1240px;
  --t-fast:180ms; --t:260ms; --t-slow:400ms;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.5,0,.75,0);
  --nav-h:72px;
}
/* Tema claro — mesmas variáveis, valores próprios (contraste auditado à parte) */
:root[data-theme="light"]{
  --bg:#F6F7F9; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#EEF0F3; --line:#E1E4E9; --line-2:#C9CED6;
  --text:#0E1013; --muted:#4A505B; --dim:#5D6470;
  --accent-soft:rgba(98,140,0,.10); --accent-text:#4A7300; --accent-line:#5C8A00;
  --light:#111216; --light-2:#1A1C21; --light-line:#2C2F36; --ink:#F2F4F7; --ink-muted:#A9AEB8;
  --nav-bg:rgba(246,247,249,.82); --chrome:#E7E9ED; --chrome-dot:#C3C8D0; --chrome-url:#FFFFFF; --stage-bg:#E9ECF0;
  --err:#C0362C; --err-text:#B42318; --err-bg:rgba(192,54,44,.07); --err-strong:#9A1C12;
  color-scheme:light;
}

/* ========== Base ========== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--f-sans); font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent-line); outline-offset:3px; border-radius:6px}
.light :focus-visible{outline-color:var(--ink)}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-64px; z-index:100; background:var(--accent); color:var(--accent-ink); padding:12px 16px; border-radius:var(--r-sm); font-weight:600; text-decoration:none; transition:top var(--t-fast) var(--ease-out)}
.skip:focus{top:16px}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px, 4vw, 40px)}
em{font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:0}

/* ========== Buttons ========== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:44px; padding:0 var(--s5); border-radius:var(--r-pill); font-weight:500; font-size:.9375rem; text-decoration:none; white-space:nowrap; border:1px solid transparent; cursor:pointer; transition:background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out)}
.btn .od-icon{--od-icon-size:18px; transition:transform var(--t-fast) var(--ease-out)}
.btn--lg{min-height:52px; padding:0 var(--s6); font-size:1rem}
.btn--block{width:100%}
.btn--accent{background:var(--accent); color:var(--accent-ink)}
.btn--ghost{border-color:var(--line-2); color:var(--text); background:transparent}
.btn--dark{background:var(--ink); color:var(--light-2)}
.btn--outline{border-color:var(--line-2); background:var(--surface); color:var(--text)}
@media (hover:hover){
  .btn--accent:hover{background:#D6FF55}
  .btn--ghost:hover,.btn--outline:hover{border-color:var(--text); background:var(--surface-2)}
  .btn--dark:hover{opacity:.88}
  .btn:hover .od-icon{transform:translateX(2px)}
}
.btn:active{transform:scale(.98)}
.btn[aria-busy="true"]{opacity:.7; pointer-events:none}

/* ========== Nav ========== */
.nav{position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid transparent; transition:border-color var(--t) var(--ease-out)}
.nav.is-scrolled{border-bottom-color:var(--line)}
.nav__in{display:flex; align-items:center; gap:var(--s5); min-height:var(--nav-h)}
.brand{display:inline-flex; align-items:center; gap:var(--s3); text-decoration:none; color:var(--text)}
.brand__avatar{display:block; width:40px; height:40px; flex:none; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--line-2)}
.brand__name{font-weight:600; letter-spacing:-.01em}
.nav__links{display:flex; align-items:center; gap:var(--s1); margin-left:auto}
.nav__links a:not(.btn){display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s3); color:var(--muted); text-decoration:none; font-size:.9375rem; border-radius:var(--r-sm); transition:color var(--t-fast) var(--ease-out)}
@media (hover:hover){ .nav__links a:not(.btn):hover{color:var(--text)} }
.nav__cta-m{display:none}
.nav__toggle{display:none; place-items:center; margin-left:auto; background:transparent; border:1px solid var(--line-2); border-radius:12px; cursor:pointer}
.nav__toggle .od-icon{--od-icon-size:22px}

/* ========== Hero ========== */
.hero{padding-block:clamp(40px, 6vw, 88px) clamp(56px, 8vw, 112px); position:relative; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0 0 auto 0; height:640px; z-index:-1; background:radial-gradient(60% 60% at 75% 30%, rgba(198,244,50,.07), transparent 70%); pointer-events:none}
.hero__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.id-pill{display:inline-flex; align-items:center; gap:var(--s3); padding:6px var(--s4) 6px 6px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--bg-2); margin-bottom:var(--s6)}
.id-pill img{width:40px; height:40px; border-radius:50%; object-fit:cover}
.id-pill strong{font-size:.9375rem; font-weight:600; line-height:1.3}
.id-pill span{font-size:.8125rem; color:var(--muted); line-height:1.3}
.display{font-size:var(--fs-display); line-height:.98; letter-spacing:-.035em; font-weight:500; text-wrap:balance}
.display em{color:var(--accent-text); letter-spacing:-.01em; padding-right:.04em}
.display--md{font-size:clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem)}
.lead{font-size:var(--fs-lead); color:var(--muted); line-height:1.6; max-width:34em; margin-top:var(--s5); text-wrap:pretty}
.hero__ctas{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6)}
.chips li{display:inline-flex; align-items:center; gap:var(--s2); padding:6px 14px; border:1px solid var(--line); border-radius:var(--r-pill); font-size:.8125rem; color:var(--muted)}
.chips li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s5); margin:var(--s7) 0 0; padding-top:var(--s5); border-top:1px solid var(--line)}
.stats dd{margin:0}
.stat__n{font-family:var(--f-serif); font-size:clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height:1; white-space:nowrap}
.stat__l{font-size:.8125rem; color:var(--muted); line-height:1.4; margin-top:var(--s1)}

/* Stage — trio de aparelhos sincronizados */
.hero__stage{position:relative; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); align-items:end; padding-top:var(--s6)}
.dev{margin:0; position:relative; min-width:0}
.dev__screen{background:#000}
.dev__tag{position:absolute; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); background:var(--bg); border:1px solid var(--line-2); font-size:.75rem; color:var(--muted); white-space:nowrap; opacity:0; transform:translateY(4px); transition:opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out)}
.dev__tag .od-icon{--od-icon-size:14px; color:var(--accent-text)}
.hero__stage:hover .dev__tag, .hero__stage:focus-within .dev__tag{opacity:1; transform:none}
.dev--monitor{grid-column:1 / 12; grid-row:1; z-index:1}
.dev--monitor .dev__screen{aspect-ratio:16/10; border:clamp(7px,.9vw,11px) solid #050506; border-radius:16px 16px 0 0; box-shadow:0 0 0 1px #3a3d44, 0 40px 80px -20px rgba(0,0,0,.8)}
.dev__chin{height:clamp(16px,1.8vw,24px); background:linear-gradient(#c9ccd2,#9da1a8); border-radius:0 0 12px 12px; box-shadow:inset 0 1px 0 #e6e8ec}
.dev__stand{width:22%; height:clamp(36px,4.4vw,64px); margin:0 auto; background:linear-gradient(90deg,#8c9097,#c3c6cc 50%,#8c9097); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.dev--monitor .dev__tag{left:12px; top:-14px}
.dev--tablet{grid-column:1 / 5; grid-row:1; z-index:2; margin:0 0 -2% -6%; padding:clamp(6px,.7vw,9px); border-radius:clamp(16px,1.8vw,22px); background:linear-gradient(145deg,#4a4d54,#1b1c20 40%,#2c2e33); box-shadow:0 0 0 1px #5a5e66, 0 30px 60px -10px rgba(0,0,0,.85)}
.dev--tablet .dev__screen{aspect-ratio:820/1180; border-radius:clamp(10px,1.2vw,14px)}
.dev--tablet .dev__tag{left:50%; bottom:-14px; translate:-50% 0}
.dev--phone{grid-column:10 / 13; grid-row:1; z-index:3; margin:0 -4% -4% 0; padding:clamp(5px,.5vw,7px); border-radius:clamp(20px,2.2vw,28px); background:linear-gradient(145deg,#4a4d54,#1b1c20 40%,#2c2e33); box-shadow:0 0 0 1px #5a5e66, 0 30px 60px -10px rgba(0,0,0,.85)}
.dev--phone .dev__screen{aspect-ratio:9/19.5; border-radius:clamp(15px,1.7vw,22px)}
.dev__island{position:absolute; top:clamp(10px,1vw,13px); left:50%; width:30%; height:clamp(8px,.8vw,11px); transform:translateX(-50%); background:#000; border-radius:12px}
.dev--phone .dev__tag{right:0; top:-14px}
.hero__now{position:absolute; right:0; top:-8px; display:inline-flex; align-items:center; gap:var(--s2); padding:6px 12px; border-radius:var(--r-pill); background:var(--bg-2); border:1px solid var(--line); font-size:.75rem; color:var(--muted); white-space:nowrap; z-index:4}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-out infinite}

/* Entrada da abertura */
.hero.is-ready .dev{animation:devIn 900ms var(--ease-out) both}
.hero.is-ready .dev--monitor{animation-delay:250ms; --from:translateY(32px) scale(.96)}
.hero.is-ready .dev--tablet{animation-delay:480ms; --from:translate(-28px, 24px) rotate(-3deg)}
.hero.is-ready .dev--phone{animation-delay:620ms; --from:translate(28px, 24px) rotate(3deg)}
.hero:not(.is-ready) .dev{opacity:0}
.no-js .hero .dev{opacity:1}
@keyframes devIn{from{opacity:0; transform:var(--from)} to{opacity:1; transform:none}}
[data-split] .w{display:inline-block; opacity:0; transform:translateY(.45em); transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out); transition-delay:calc(var(--i) * 45ms)}
.hero.is-ready [data-split] .w{opacity:1; transform:none}

/* Miniaturas do hero */
/* faixa de miniaturas: rola sozinha em loop (conteúdo duplicado no JS); para ao passar o mouse ou focar */
.thumbs{margin-top:var(--s7); padding-block:4px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.thumbs__track{display:flex; gap:12px; padding-right:12px; width:max-content; animation:marquee 40s linear infinite reverse; will-change:transform} /* reverse: anda da esquerda para a direita, contrário da faixa de nomes */
.thumbs__track > *{flex:none}
.thumbs:hover .thumbs__track, .thumbs:focus-within .thumbs__track{animation-play-state:paused}
.thumb{position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:var(--s3); width:216px; min-height:64px; padding:6px 12px 6px 6px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-2); color:var(--muted); text-align:left; cursor:pointer; overflow:hidden; transition:border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out)}
.thumb img{width:56px; height:52px; border-radius:8px; object-fit:cover; object-position:top} /* recorte decorativo do topo da página */
.thumb__t strong{display:block; font-size:.875rem; font-weight:500; color:var(--text); line-height:1.3}
.thumb__t span{display:block; font-size:.75rem; line-height:1.3}
.thumb[aria-selected="true"]{border-color:var(--line-2); background:var(--surface)}
@media (hover:hover){ .thumb:hover{border-color:var(--line-2)} }
.thumb__bar{position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left}

/* Telas em rolagem */
.screen{position:relative; overflow:hidden; contain:paint}
.page{display:block; will-change:transform; transition:opacity var(--t) var(--ease-out)}
.page img{display:block; width:100%; height:auto}
.screen.is-swapping .page{opacity:0}

/* Card: computador + celular */
.card__frame{position:relative}
.card__phone{position:absolute; right:14px; bottom:-18px; width:22%; padding:4px; border-radius:16px; background:linear-gradient(145deg,#4a4d54,#1b1c20 40%,#2c2e33); box-shadow:0 0 0 1px #5a5e66, 0 16px 30px -8px rgba(0,0,0,.8); z-index:2; transition:transform var(--t) var(--ease-out)}
.card__phone .screen{aspect-ratio:9/19.5; border-radius:12px}
.card__devs{display:flex; gap:var(--s2); color:var(--dim)}
.card__devs .od-icon{--od-icon-size:16px}
.card__top{display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.card__frame{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform var(--t) var(--ease-out)}
.card__frame::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgba(198,244,50,.10), transparent 60%); opacity:0; transition:opacity var(--t) var(--ease-out)}
@media (hover:hover){ .card:hover .card__frame::after{opacity:1} .card:hover .card__phone{transform:translateY(-6px)} }
.card.is-moving{transition:none}

/* Processo: linha que se desenha */
.steps{position:relative}
.steps__rail{position:absolute; left:0; right:0; top:52px; height:2px; background:var(--light-line); list-style:none; pointer-events:none}
.steps__fill{display:block; height:100%; background:var(--ink); transform:scaleX(var(--p,0)); transform-origin:left}
.step{position:relative; z-index:1; transition:border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out)}
.step.is-lit{border-color:var(--ink); box-shadow:0 12px 30px -16px rgba(14,16,19,.35)}
.step .step__ic{transition:color var(--t) var(--ease-out)}

/* ========== Marquee ========== */
.marquee{border-block:1px solid var(--line); overflow:hidden; padding-block:var(--s5); background:var(--bg-2)}
.marquee__track{display:flex; gap:var(--s7); width:max-content; animation:marquee 48s linear infinite}
.marquee__track span{display:inline-flex; align-items:center; gap:var(--s7); font-family:var(--f-serif); font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); color:var(--muted); white-space:nowrap}
.marquee__track span::after{content:"✦"; font-family:var(--f-sans); font-size:.9rem; color:var(--accent-text)}

/* ========== Sections ========== */
.section{padding-block:clamp(72px, 9vw, 136px)}
.section--tight{padding-block:clamp(56px, 7vw, 104px)}
.light{background:var(--light); color:var(--ink)}
.light .eyebrow{color:var(--ink-muted)}
.light .eyebrow::before{background:var(--ink)}
.light em{color:inherit}
.sec-head{max-width:760px; margin-bottom:clamp(32px, 4vw, 56px)}
.sec-head--row{max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); flex-wrap:wrap}
.sec-head--row .sec-head__p{max-width:420px}
.eyebrow{display:inline-flex; align-items:center; gap:var(--s2); font-size:.8125rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s4)}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--accent)}
.h2{font-size:var(--fs-h2); line-height:1.04; letter-spacing:-.03em; font-weight:500; text-wrap:balance}
.h2 em{color:var(--accent-text)}
.sec-head__p{color:var(--muted); margin-top:var(--s4); max-width:40em; text-wrap:pretty}

/* Filters */
.filters{--od-rail-pad:0px; margin-bottom:var(--s6)}
.filter{min-height:44px; padding:0 var(--s5); border-radius:var(--r-pill); border:1px solid var(--line-2); background:transparent; color:var(--muted); font-size:.9375rem; cursor:pointer; transition:background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out)}
@media (hover:hover){ .filter:hover{color:var(--text); border-color:var(--text)} }
.filter.is-on{background:var(--text); color:var(--bg); border-color:var(--text)}

/* Project grid */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 2.4vw, 32px)}
.card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2); overflow:hidden; transition:border-color var(--t) var(--ease-out), transform var(--t) var(--ease-out), opacity var(--t) var(--ease-out)}
.card[hidden]{display:none}
@media (hover:hover){ .card:hover{border-color:var(--line-2); transform:translateY(-4px)} }
.card__frame{display:block; width:100%; padding:var(--s3) var(--s3) 0; background:linear-gradient(180deg, var(--surface), var(--bg-2)); border:0; cursor:pointer; text-align:left; color:inherit}
.chrome{display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--chrome); border-radius:10px 10px 0 0}
.chrome i{width:9px; height:9px; border-radius:50%; background:var(--chrome-dot); flex:none}
.chrome__url{flex:1; min-width:0; margin-left:8px; padding:3px 10px; border-radius:6px; background:var(--chrome-url); font-size:.6875rem; color:var(--dim); font-style:normal}
.card__screen{aspect-ratio:16/11; border-radius:0; background:#000}
.card__body{display:flex; flex-direction:column; gap:var(--s2); padding:var(--s5)}
.card__cat{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text)}
.card__name{font-size:1.375rem; font-weight:500; letter-spacing:-.015em; line-height:1.25}
.card__desc{color:var(--muted); font-size:.9375rem; line-height:1.55}
.card__actions{display:flex; gap:var(--s2); margin-top:auto; padding-top:var(--s4); flex-wrap:wrap}
.card__actions .btn{min-height:40px; padding:0 var(--s4); font-size:.875rem}
.card__actions .btn--outline{min-height:44px}
.card__actions .btn--ghost{min-height:44px}

/* Segments */
.segs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s5)}
.seg{padding:var(--s6); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2); display:flex; flex-direction:column; gap:var(--s3)}
.seg__n{font-family:var(--f-serif); font-size:2.5rem; line-height:1; color:var(--accent-text)}
.seg h3{font-size:1.375rem; font-weight:500; letter-spacing:-.01em; margin-top:var(--s2)}
.seg>p{color:var(--muted)}
.ticks{display:grid; gap:var(--s2); margin-top:var(--s3); padding-top:var(--s4); border-top:1px solid var(--line)}
.ticks li{display:flex; align-items:center; gap:var(--s2); font-size:.9375rem}
.ticks li::before{content:""; width:16px; height:16px; flex:none; background:var(--accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.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 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Steps (light) */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s5); counter-reset:s}
.step{display:flex; flex-direction:column; gap:var(--s2); padding:var(--s6) var(--s5); background:var(--light-2); border:1px solid var(--light-line); border-radius:var(--r-lg)}
.step__ic{--od-icon-size:28px; color:var(--ink); margin-bottom:var(--s4)}
.step__n{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted)}
.step h3{font-size:1.25rem; font-weight:500; letter-spacing:-.01em}
.step p:last-child{color:var(--ink-muted); font-size:.9375rem}

/* Features */
.feats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.feat{display:flex; flex-direction:column; gap:var(--s2); padding:var(--s6); border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.feat .od-icon{--od-icon-size:26px; color:var(--accent-text); margin-bottom:var(--s3)}
.feat h3{font-size:1.125rem; font-weight:500}
.feat p{color:var(--muted); font-size:.9375rem}

/* Systems */
.systems{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s5)}
.sys{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s6); border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(180deg, var(--surface), var(--bg-2))}
.sys h3{font-family:var(--f-serif); font-size:2rem; font-weight:400; line-height:1.1}
.sys>p{color:var(--muted); font-size:.9375rem}
.tags{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:auto; padding-top:var(--s2)}
.tags li{padding:4px 12px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line-2); font-size:.8125rem; color:var(--text)}
.tags--light li{background:var(--light-2); border-color:var(--light-line); color:var(--ink)}

/* About */
.about{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 6vw, 96px); align-items:center}
.about__photo{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); padding:var(--s6); background:var(--light-2); border:1px solid var(--light-line); border-radius:var(--r-lg)}
.about__photo img{width:160px; height:160px; border-radius:50%; object-fit:cover; border:4px solid var(--light)}
.about__photo strong{font-size:1.25rem; font-weight:600}
.about__photo span{color:var(--ink-muted); font-size:.9375rem}
.about__txt{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4)}
.about__txt .h2{margin-bottom:var(--s2)}
.about__txt>p:not(.eyebrow){color:var(--ink-muted); font-size:1.0625rem; max-width:36em}
.about__txt .tags{margin-block:var(--s2) var(--s3); padding:0}

/* FAQ */
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 6vw, 96px); align-items:start}
.faq__list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:64px; padding-block:var(--s4); cursor:pointer; list-style:none; font-size:1.125rem; font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .od-icon{--od-icon-size:22px; color:var(--accent-text); transition:transform var(--t) var(--ease-out)}
.faq details[open] summary .od-icon{transform:rotate(45deg)}
.faq details p{color:var(--muted); padding-bottom:var(--s5); max-width:40em}

/* Contact */
.contact{background:radial-gradient(70% 80% at 0% 100%, rgba(198,244,50,.08), transparent 60%), var(--bg-2); border-top:1px solid var(--line)}
.contact__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 96px); align-items:start}
.socials{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.socials a{display:inline-flex; align-items:center; gap:var(--s2); min-height:48px; padding:0 var(--s5); border:1px solid var(--line-2); border-radius:var(--r-pill); text-decoration:none; font-weight:500; transition:border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out)}
.socials a .od-icon{--od-icon-size:20px}
@media (hover:hover){ .socials a:hover{border-color:var(--accent-text); background:var(--accent-soft)} }
.socials--sm{margin-top:0}
.socials--sm a{min-height:44px; padding:0 var(--s4); font-size:.875rem}

.form{display:flex; flex-direction:column; gap:var(--s5); padding:clamp(24px, 3vw, 40px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.field{display:flex; flex-direction:column; gap:var(--s2); border:0; margin:0; padding:0; min-width:0}
.field label, .field legend{font-size:.9375rem; font-weight:500; padding:0}
.field label span[aria-hidden], .field legend span[aria-hidden]{color:var(--accent-text)}
.opt{color:var(--dim); font-weight:400}
.field input, .field textarea{width:100%; min-height:48px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--bg); color:var(--text); transition:border-color var(--t-fast) var(--ease-out)}
.field textarea{resize:vertical; min-height:96px}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent-text); box-shadow:0 0 0 3px var(--accent-soft)}
.field.is-invalid input{border-color:var(--err)}
.field__err{color:var(--err-text); font-size:.875rem}
.radios{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2); margin-top:var(--s2)}
.radios label{position:relative; display:flex; align-items:center; min-height:48px; padding:0 var(--s4); border:1px solid var(--line-2); border-radius:var(--r-sm); cursor:pointer; font-size:.9375rem; font-weight:400; transition:border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out)}
.radios input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.radios label:has(input:checked){border-color:var(--accent-text); background:var(--accent-soft)}
.radios label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.field.is-invalid .radios label{border-color:var(--err)}
.form__err{padding:var(--s3) var(--s4); border-radius:var(--r-sm); background:var(--err-bg); border:1px solid var(--err); color:var(--err-strong); font-size:.9375rem}
.form__err a{color:inherit; font-weight:600}
.form__note{font-size:.8125rem; color:var(--dim); text-align:center}

/* Footer */
.foot{border-top:1px solid var(--line); padding-top:var(--s8); overflow:hidden}
.foot__in{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap}
.foot__links{display:flex; flex-wrap:wrap; gap:var(--s1); margin-left:auto}
.foot__links a{display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s3); color:var(--muted); text-decoration:none; font-size:.9375rem}
@media (hover:hover){ .foot__links a:hover{color:var(--text)} }
.foot__giant{font-family:var(--f-sans); font-weight:600; font-size:clamp(5rem, 22vw, 20rem); line-height:.8; letter-spacing:-.06em; text-align:center; color:transparent; -webkit-text-stroke:1px var(--line-2); margin-top:var(--s7); user-select:none}
.foot__base{display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3); padding-block:var(--s5); border-top:1px solid var(--line); font-size:.8125rem; color:var(--dim)}

/* ========== Viewer ========== */
.viewer{width:min(1320px, 100vw - 32px); height:min(94vh, 1040px); max-width:none; max-height:none; padding:0; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--bg-2); color:var(--text); overflow:hidden}
.viewer[open]{display:grid; grid-template-rows:auto minmax(0,1fr)}
.viewer::backdrop{background:rgba(5,6,8,.8); backdrop-filter:blur(6px)}
.viewer__bar{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s3) var(--s3) var(--s5); border-bottom:1px solid var(--line); flex-wrap:wrap}
.viewer__t{flex:1 1 180px; min-width:0}
.viewer__cat{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text)}
.viewer__t strong{font-size:1.125rem; font-weight:500}
.seg-tabs{display:inline-flex; padding:4px; border-radius:var(--r-pill); background:var(--bg); border:1px solid var(--line)}
.seg-tabs button{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 var(--s4); border-radius:var(--r-pill); border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:.875rem; transition:background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out)}
.seg-tabs button .od-icon{--od-icon-size:16px}
.seg-tabs button[aria-selected="true"]{background:var(--text); color:var(--bg)}
.viewer__live[aria-pressed="true"]{border-color:var(--accent-text); color:var(--accent-text)}
.viewer__close{display:grid; place-items:center; border:1px solid var(--line-2); background:transparent; border-radius:50%; cursor:pointer}
.viewer__close .od-icon{--od-icon-size:20px}
@media (hover:hover){ .viewer__close:hover{border-color:var(--text)} }
.viewer__body{display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; gap:var(--s3); padding:var(--s5); min-height:0; background:radial-gradient(60% 60% at 50% 0%, rgba(198,244,50,.05), transparent 70%), var(--stage-bg)}
.viewer__hint{font-size:.8125rem; color:var(--dim); text-align:center}
/* Aparelho do visualizador: a altura disponível define a largura via aspect-ratio */
.vdev{--bezel:12px; height:100%; min-height:0; max-width:100%; display:flex; padding:var(--bezel); background:linear-gradient(145deg,#4a4d54,#1b1c20 40%,#2c2e33); box-shadow:0 0 0 1px #5a5e66, 0 40px 80px -20px rgba(0,0,0,.85)}
.vdev[data-mode="desktop"]{aspect-ratio:16/10.4; border-radius:16px; --bezel:10px; background:#050506; box-shadow:0 0 0 1px #3a3d44, 0 40px 80px -20px rgba(0,0,0,.85)}
.vdev[data-mode="tablet"]{aspect-ratio:820/1180; border-radius:26px; --bezel:14px}
.vdev[data-mode="mobile"]{aspect-ratio:9/19.5; border-radius:36px; --bezel:10px}
.vdev__screen{position:relative; flex:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; background:#000; scrollbar-width:thin; scrollbar-color:#3a3d44 transparent}
.vdev[data-mode="desktop"] .vdev__screen{border-radius:6px}
.vdev[data-mode="tablet"] .vdev__screen{border-radius:14px}
.vdev[data-mode="mobile"] .vdev__screen{border-radius:28px}
.vdev__screen.is-live{overflow:hidden}
.vdev__screen iframe{position:absolute; top:0; left:0; border:0; transform-origin:0 0; background:#fff}
.vdev__loading{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.875rem; background:var(--stage-bg)}
.vdev.is-switching{animation:devSwap var(--t-slow) var(--ease-out)}
@keyframes devSwap{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}

/* Toast */
.toast{position:fixed; left:16px; right:16px; bottom:24px; width:fit-content; margin-inline:auto; z-index:80; max-width:calc(100vw - 32px); padding:var(--s3) var(--s5); border-radius:var(--r-pill); background:var(--text); color:var(--bg); font-weight:500; font-size:.9375rem; box-shadow:0 12px 30px rgba(0,0,0,.4); animation:pop var(--t) var(--ease-out)}

/* ========== Reveal ========== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay:var(--d, 0ms)}
.reveal.is-in{opacity:1; transform:none}
.no-js .reveal{opacity:1; transform:none}

@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,244,50,.5)}100%{box-shadow:0 0 0 10px rgba(198,244,50,0)}}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.985)}to{opacity:1; transform:none}}

/* ========== Responsive ========== */
@media (max-width:1024px){
  .steps__rail{display:none}
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__stage{max-width:720px; margin-inline:auto; width:100%}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .segs{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .feats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq .sec-head{margin-bottom:var(--s5)}
}
@media (max-width:860px){
  .nav__toggle{display:grid}
  .nav__toggle{margin-left:auto}
  .nav__in{gap:var(--s3)}
  .nav__cta{display:none}
  .nav__links{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:var(--s3) clamp(20px,4vw,40px) var(--s5); background:var(--bg); border-bottom:1px solid var(--line); visibility:hidden; opacity:0; transform:translateY(-8px); transition:opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), visibility 0s linear var(--t)}
  .nav.is-open .nav__links{visibility:visible; opacity:1; transform:none; transition-delay:0s}
  .nav__links a:not(.btn){min-height:52px; font-size:1.0625rem; border-bottom:1px solid var(--line); border-radius:0; padding:0}
  .nav__cta-m{display:inline-flex; margin-top:var(--s4)}
  .about,.contact__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hero__stage{display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--s5); scrollbar-width:none}
  .hero__stage .dev{flex:none; margin:0; scroll-snap-align:center}
  .dev--monitor{width:92%} .dev--tablet{width:62%} .dev--phone{width:44%}
  .dev__tag{opacity:1; transform:none}
  .seg-tabs button span{display:none}
  .viewer__body{padding:var(--s3)}
  .grid,.steps,.feats,.systems{grid-template-columns:minmax(0,1fr)}
  .stats{gap:var(--s3)}
  .stat__l{font-size:.75rem}
  .radios{grid-template-columns:minmax(0,1fr)}
  .hero__ctas .btn{flex:1 1 100%}
  .hero__now{display:none}
  .viewer{width:100vw; height:100dvh; border-radius:0; border:0}
  .viewer__body{padding:var(--s3)}
  .viewer__bar{padding:var(--s3)}
  .viewer__bar .btn{order:3}
  .foot__links{margin-left:0; width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .reveal{opacity:1; transform:none}
  .hero .dev,[data-split] .w{opacity:1!important; transform:none!important; animation:none!important}
  .card__frame{transform:none!important}
  .thumbs{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .thumbs__track{animation:none!important}
}

/* Ajustes finos do tema claro */
:root[data-theme="light"] .hero::before{background:radial-gradient(60% 60% at 75% 30%, rgba(160,210,0,.14), transparent 70%)}
:root[data-theme="light"] .dev--monitor .dev__screen, :root[data-theme="light"] .dev--tablet, :root[data-theme="light"] .dev--phone, :root[data-theme="light"] .card__phone{box-shadow:0 0 0 1px #5a5e66, 0 30px 60px -18px rgba(20,24,30,.45)}
:root[data-theme="light"] .thumb[aria-selected="true"]{box-shadow:0 8px 20px -12px rgba(20,24,30,.35)}
:root[data-theme="light"] .card{box-shadow:0 1px 0 rgba(20,24,30,.03)}
@media (hover:hover){ :root[data-theme="light"] .card:hover{box-shadow:0 20px 40px -24px rgba(20,24,30,.35)} }