/* trng.com.br — apps e dispositivos da TRNG.
   Um só CSS para todas as páginas. Tema claro e escuro pelo sistema
   (prefers-color-scheme); cores só por tokens em :root. */

/* ============ TOKENS ============ */
:root{
  color-scheme: light dark;
  --bg:#f5f6fa;
  --bg-2:#eceef5;
  --surface:#ffffff;
  --surface-2:#f3f4f9;
  --glass:rgba(250,251,254,.72);
  --line:rgba(16,22,44,.09);
  --line-2:rgba(16,22,44,.16);
  --ink:#0a0e1c;
  --ink-2:#363d52;
  --muted:#596077;
  --accent:#4f46e5;
  --accent-ink:#4338ca;
  --accent-soft:rgba(79,70,229,.10);
  --on-accent:#ffffff;
  --ok:#047857;
  --ok-soft:rgba(4,120,87,.10);
  --warn:#a14a06;
  --warn-soft:rgba(180,83,9,.10);
  --grad:linear-gradient(115deg,#6366f1 0%,#3b82f6 35%,#06b6d4 70%,#10b981 100%);
  --grad-text:linear-gradient(115deg,#4f46e5 0%,#2563eb 40%,#0e7490 80%);
  --mesh-1:rgba(99,102,241,.22);
  --mesh-2:rgba(6,182,212,.18);
  --mesh-3:rgba(16,185,129,.12);
  --grid-dot:rgba(16,22,44,.07);
  --shadow-1:0 1px 2px rgba(16,22,44,.05),0 8px 24px -12px rgba(16,22,44,.12);
  --shadow-2:0 2px 6px rgba(16,22,44,.06),0 30px 60px -24px rgba(30,34,80,.28);
  --focus:#4f46e5;

  /* cores dos produtos (ícones e brilho dos cards) */
  --c-vistoria:#059669;
  --c-agenda:#d97706;
  --c-medico:#2563eb;
  --c-salao:#db2777;
  --c-kids:#7c3aed;
  --c-trava:#0891b2;
  --c-locker:#4f46e5;

  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1180px;
  --gutter:clamp(16px,4vw,32px);
  --r-sm:10px;
  --r:18px;
  --r-lg:26px;
  --sec:clamp(72px,10vw,128px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#05070d;
    --bg-2:#0a0d16;
    --surface:#0d111b;
    --surface-2:#131826;
    --glass:rgba(7,9,16,.66);
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.15);
    --ink:#eef1f8;
    --ink-2:#bcc2d4;
    --muted:#8d95ab;
    --accent:#8b8dff;
    --accent-ink:#a5a7ff;
    --accent-soft:rgba(139,141,255,.13);
    --on-accent:#0a0b1e;
    --ok:#34d399;
    --ok-soft:rgba(52,211,153,.12);
    --warn:#fbbf24;
    --warn-soft:rgba(251,191,36,.12);
    --grad:linear-gradient(115deg,#818cf8 0%,#60a5fa 35%,#22d3ee 70%,#34d399 100%);
    --grad-text:linear-gradient(115deg,#a5b4fc 0%,#7dd3fc 45%,#5eead4 90%);
    --mesh-1:rgba(99,102,241,.30);
    --mesh-2:rgba(6,182,212,.20);
    --mesh-3:rgba(16,185,129,.12);
    --grid-dot:rgba(255,255,255,.06);
    --shadow-1:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -16px rgba(0,0,0,.7);
    --shadow-2:0 1px 0 rgba(255,255,255,.06) inset,0 40px 80px -30px rgba(0,0,0,.85);
    --focus:#a5a7ff;
    --c-vistoria:#34d399;
    --c-agenda:#fbbf24;
    --c-medico:#60a5fa;
    --c-salao:#f472b6;
    --c-kids:#a78bfa;
    --c-trava:#22d3ee;
    --c-locker:#8b8dff;
  }
}

/* ============ BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overflow-x:clip;
  font-feature-settings:"ss01","cv11";
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--accent); color:var(--on-accent); }

.wrap{ width:100%; max-width:calc(var(--wrap) + 2*var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:999px; background:var(--ink); color:var(--bg); font-weight:600; font-size:.9rem; }
.skip:focus{ top:12px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.mono{ font-family:var(--mono); }
.grad-text{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.muted{ color:var(--muted); }

/* ============ BOTÕES ============ */
.btn{
  --b-bg:var(--surface); --b-fg:var(--ink); --b-line:var(--line-2);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px; border-radius:999px;
  background:var(--b-bg); color:var(--b-fg); border:1px solid var(--b-line);
  font-weight:600; font-size:.95rem; letter-spacing:-.005em; white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-1); border-color:var(--ink-2); }
.btn:active{ transform:translateY(0); }
.btn .arr{ transition:transform .2s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-primary{ --b-bg:var(--ink); --b-fg:var(--bg); --b-line:transparent; }
.btn-primary:hover{ border-color:transparent; box-shadow:0 10px 30px -10px var(--accent); }
.btn-wa{ --b-bg:#128c4a; --b-fg:#fff; --b-line:transparent; }
.btn-wa:hover{ border-color:transparent; background:#0f7a40; box-shadow:0 10px 30px -12px #128c4a; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-sm{ min-height:40px; padding:0 16px; font-size:.88rem; }

/* ============ CHIPS / ETIQUETAS ============ */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-2);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; line-height:1.3;
  white-space:nowrap;
}
.chip-live{ color:var(--ok); background:var(--ok-soft); border-color:transparent; }
.chip-new{ color:var(--accent-ink); background:var(--accent-soft); border-color:transparent; }
.chip-soon{ color:var(--warn); background:var(--warn-soft); border-color:transparent; }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.chip-live .dot{ animation:pulse 2.4s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent); }
  70%{ box-shadow:0 0 0 7px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:var(--grad); }

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid transparent; transition:border-color .25s, background-color .25s;
}
.nav.scrolled{ border-bottom-color:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; }
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.18rem; letter-spacing:-.04em; }
.logo-mark{
  width:28px; height:28px; border-radius:9px; background:var(--grad); position:relative; flex:none;
  box-shadow:0 6px 18px -6px rgba(79,70,229,.6);
}
.logo-mark::after{ content:""; position:absolute; inset:7px; border-radius:4px; background:var(--bg); opacity:.9; }
.logo small{ font-weight:500; font-size:.78rem; letter-spacing:0; color:var(--muted); margin-left:2px; font-family:var(--mono); }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ padding:8px 14px; border-radius:999px; font-size:.93rem; font-weight:500; color:var(--ink-2); transition:background-color .2s,color .2s; }
.nav-links a:hover{ background:var(--accent-soft); color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); background:var(--surface-2); }
.nav-links .btn{ margin-left:8px; padding:0 18px; min-height:40px; color:var(--bg); }
.nav-links .btn:hover{ background:var(--ink); color:var(--bg); }
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface); cursor:pointer; position:relative;
}
.nav-toggle span,.nav-toggle span::before{ position:absolute; left:12px; right:12px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s var(--ease), top .25s var(--ease); }
.nav-toggle span{ top:17px; }
.nav-toggle span::before{ content:""; left:0; right:0; top:8px; }
.nav.open .nav-toggle span{ top:21px; transform:rotate(45deg); }
.nav.open .nav-toggle span::before{ top:0; transform:rotate(-90deg); }
@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; left:0; right:0; top:68px; flex-direction:column; align-items:stretch; gap:2px;
    padding:10px var(--gutter) 18px; background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-2);
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
    transition:opacity .2s, transform .2s var(--ease), visibility 0s .2s;
  }
  .nav.open .nav-links{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .2s, transform .2s var(--ease); }
  .nav-links a{ padding:13px 12px; font-size:1.02rem; border-radius:12px; }
  .nav-links .btn{ margin:8px 0 0; min-height:48px; }
}

/* ============ HERO ============ */
.hero{ position:relative; padding:clamp(40px,7vw,96px) 0 clamp(24px,4vw,48px); isolation:isolate; overflow:hidden; }
.mesh{ position:absolute; inset:-10% -10% 0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 50% at 78% 22%, var(--mesh-1), transparent 70%),
    radial-gradient(35% 45% at 92% 70%, var(--mesh-2), transparent 70%),
    radial-gradient(30% 40% at 10% 10%, var(--mesh-3), transparent 70%);
  filter:blur(10px);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-2%,2%,0) scale(1.06); } }
.gridbg{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%);
  mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%);
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,72px); align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:minmax(0,1fr); } }
.hero h1{
  font-size:clamp(2.45rem,5.2vw,4.25rem); line-height:1.05; letter-spacing:-.045em; font-weight:750;
  margin-top:22px; text-wrap:balance; padding-bottom:.06em;
}
.hero .lede{ font-size:clamp(1.06rem,1.6vw,1.22rem); color:var(--ink-2); max-width:54ch; margin-top:22px; text-wrap:pretty; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:28px; color:var(--muted); font-size:.88rem; }
.hero-meta span{ display:inline-flex; align-items:center; gap:8px; }
.hero-meta svg{ width:16px; height:16px; color:var(--ok); }
@media (max-width:480px){ .hero-actions .btn{ flex:1 1 100%; } }

/* janela do app (visual do hero) */
.stage{ position:relative; padding:18px 10px 34px; }
.appwin{
  position:relative; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-2);
  box-shadow:var(--shadow-2); overflow:hidden; will-change:transform;
  transition:transform .4s var(--ease);
}
.appwin::before{ /* borda com brilho */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,rgba(99,102,241,.55),transparent 35%,transparent 65%,rgba(6,182,212,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.win-bar{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.win-dots{ display:flex; gap:6px; }
.win-dots i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.win-url{ flex:1; min-width:0; text-align:center; font-family:var(--mono); font-size:.72rem; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:4px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.win-body{ padding:22px 22px 64px; }
.win-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.win-title{ display:flex; align-items:center; gap:12px; font-weight:650; letter-spacing:-.02em; font-size:1.08rem; }
.win-title small{ display:block; font-weight:400; font-size:.8rem; color:var(--muted); letter-spacing:0; }
.win-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:20px; }
.win-tile{ border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--surface-2); }
.win-tile span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.win-tile i{ display:block; height:6px; border-radius:6px; margin-top:12px; background:var(--grad); opacity:.85; }
.win-tile i + i{ width:62%; opacity:.35; margin-top:6px; }
.win-chart{ margin-top:16px; height:96px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2); padding:12px 12px 0; display:flex; align-items:flex-end; gap:6px; }
.win-chart b{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg,color-mix(in srgb,var(--c-medico) 85%,transparent),color-mix(in srgb,var(--c-medico) 25%,transparent)); transform-origin:bottom; animation:grow 1.2s var(--ease) both; }
.win-chart b:nth-child(2){ animation-delay:.06s } .win-chart b:nth-child(3){ animation-delay:.12s } .win-chart b:nth-child(4){ animation-delay:.18s }
.win-chart b:nth-child(5){ animation-delay:.24s } .win-chart b:nth-child(6){ animation-delay:.3s } .win-chart b:nth-child(7){ animation-delay:.36s } .win-chart b:nth-child(8){ animation-delay:.42s }
@keyframes grow{ from{ transform:scaleY(.1); opacity:0; } to{ transform:none; opacity:1; } }
.win-rows{ margin-top:14px; }
.win-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--ink-2); }
.win-row:last-child{ border-bottom:0; }
.win-row .ok{ color:var(--ok); font-weight:600; display:inline-flex; align-items:center; gap:6px; font-size:.84rem; }
.win-row .ok svg{ width:15px; height:15px; }
.float-card{
  position:absolute; right:-6px; bottom:14px; z-index:2; display:flex; align-items:center; gap:12px;
  padding:12px 16px 12px 12px; border-radius:16px; background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--line-2); box-shadow:var(--shadow-2); will-change:transform;
  transition:transform .4s var(--ease);
}
.float-card b{ display:block; font-size:.92rem; letter-spacing:-.01em; }
.float-card span{ font-size:.78rem; color:var(--muted); }
.float-card .ico{ width:36px; height:36px; }
.float-a{ animation:bob 6s ease-in-out infinite; }
@keyframes bob{ 50%{ translate:0 -6px; } }
@media (max-width:480px){ .float-card{ right:0; } .win-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } .win-cols .win-tile:nth-child(3){ display:none; } }

/* ícone em quadrado colorido */
.ico{
  --c:var(--accent);
  width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center;
  color:var(--c); background:color-mix(in srgb,var(--c) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent);
}
.ico svg{ width:55%; height:55%; }

/* ============ SEÇÕES ============ */
.sec{ padding-block:var(--sec); position:relative; }
.sec-alt{ background:var(--bg-2); border-block:1px solid var(--line); }
.sec-head{ max-width:760px; margin-bottom:clamp(32px,5vw,56px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(2rem,4.4vw,3.35rem); line-height:1.08; letter-spacing:-.04em; font-weight:720; margin-top:16px; text-wrap:balance; }
.sec-head p{ color:var(--ink-2); font-size:clamp(1.02rem,1.4vw,1.14rem); margin-top:16px; max-width:58ch; text-wrap:pretty; }
.sec-head.center p{ margin-inline:auto; }
.sec-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ============ BENTO ============ */
.bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.bento > *{ grid-column:span 2; }
.bento .span-4{ grid-column:span 4; }
.bento .span-3{ grid-column:span 3; }
.bento .span-6{ grid-column:span 6; }
@media (max-width:980px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bento > *, .bento .span-3{ grid-column:span 1; }
  .bento .span-4, .bento .span-6{ grid-column:span 2; }
}
@media (max-width:620px){
  .bento{ grid-template-columns:minmax(0,1fr); }
  .bento > *, .bento .span-3, .bento .span-4, .bento .span-6{ grid-column:auto; }
}

.card{
  --c:var(--accent); --mx:50%; --my:0%;
  position:relative; display:flex; flex-direction:column; gap:14px; min-width:0;
  padding:clamp(22px,2.6vw,30px); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-1); overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card::before{ /* luz que segue o cursor */
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb,var(--c) 16%,transparent), transparent 60%);
}
a.card:hover,.card.hoverable:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb,var(--c) 40%,var(--line)); }
a.card:hover::before,.card.hoverable:hover::before{ opacity:1; }
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card h3{ font-size:clamp(1.3rem,2vw,1.55rem); line-height:1.15; letter-spacing:-.03em; font-weight:680; }
.card p{ color:var(--ink-2); font-size:.98rem; text-wrap:pretty; }
.card-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:auto; padding-top:6px; font-size:.84rem; color:var(--muted); }
.card-meta span{ display:inline-flex; align-items:center; gap:6px; }
.card-meta span + span::before{ content:""; width:3px; height:3px; border-radius:50%; background:currentColor; margin-right:8px; opacity:.6; }
.card-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--ink); }
.card-link .host{ font-family:var(--mono); font-weight:400; font-size:.8rem; color:var(--muted); }
.card-link .arr{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); transition:transform .25s var(--ease), background-color .25s, color .25s, border-color .25s; }
a.card:hover .card-link .arr{ transform:translateX(3px) rotate(-45deg); background:var(--c); border-color:var(--c); color:var(--surface); }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); flex-wrap:wrap; }
.tagline{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c); }

/* card em destaque (Vistoria) */
.card-feature{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px; }
.card-feature .card-main{ display:flex; flex-direction:column; gap:14px; min-width:0; }
@media (max-width:760px){ .card-feature{ grid-template-columns:minmax(0,1fr); } }
.proof{ display:flex; flex-direction:column; gap:10px; justify-content:center; }
.proof-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2); font-size:.9rem; }
.proof-item b{ font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; padding:4px 8px; border-radius:8px; color:var(--c); background:color-mix(in srgb,var(--c) 12%,transparent); }
.proof-item .ok{ margin-left:auto; color:var(--ok); display:inline-flex; }
.proof-item .ok svg{ width:16px; height:16px; }

/* ============ DISPOSITIVOS ============ */
.dev-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:820px){ .dev-grid{ grid-template-columns:minmax(0,1fr); } }
.dev-art{
  position:relative; height:200px; margin:-4px -4px 6px; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(60% 80% at 70% 20%, color-mix(in srgb,var(--c) 22%,transparent), transparent 70%),
    var(--surface-2);
  border:1px solid var(--line); display:grid; place-items:center;
}
.dev-art svg{ width:auto; height:150px; color:var(--c); transition:transform .5s var(--ease); }
a.card:hover .dev-art svg{ transform:translateY(-4px) scale(1.03); }
.price{ font-weight:700; font-size:1.25rem; letter-spacing:-.02em; color:var(--ink); }
.price small{ font-weight:500; font-size:.82rem; color:var(--muted); letter-spacing:0; }

/* ============ JORNADA (condomínio) ============ */
.journey{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:end; counter-reset:lv; }
@media (max-width:900px){ .journey{ grid-template-columns:minmax(0,1fr); align-items:stretch; } }
.step{ --c:var(--accent); }
@media (min-width:901px){
  .journey .step:nth-child(1){ min-height:300px; }
  .journey .step:nth-child(2){ min-height:350px; }
  .journey .step:nth-child(3){ min-height:400px; }
  .journey.full .step:nth-child(1){ min-height:0; }
  .journey.full .step:nth-child(2){ min-height:0; margin-top:40px; }
  .journey.full .step:nth-child(3){ min-height:0; margin-top:80px; }
  .journey.full{ align-items:start; }
}
.lv{ display:flex; align-items:center; gap:12px; }
.lv-n{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;
  font-weight:750; font-size:1.05rem; color:var(--on-accent); background:var(--grad);
}
.lv-k{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.lv .chip{ margin-left:auto; }
.checks{ display:flex; flex-direction:column; gap:9px; font-size:.95rem; color:var(--ink-2); }
.checks li{ display:flex; gap:10px; align-items:flex-start; }
.checks li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:3px; border-radius:6px;
  background:color-mix(in srgb,var(--ok) 14%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}
@media (prefers-color-scheme: dark){
  .checks li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
}
.prod-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface-2); transition:border-color .2s, transform .2s var(--ease);
}
.prod-link:hover{ border-color:var(--accent); transform:translateX(2px); }
.prod-link b{ font-weight:620; }
.prod-link span{ font-size:.86rem; color:var(--muted); white-space:nowrap; }
.step .btn{ align-self:flex-start; margin-top:auto; }
.note{ font-size:.86rem; color:var(--muted); }

/* ============ SOB MEDIDA ============ */
.custom{
  position:relative; border-radius:calc(var(--r-lg) + 6px); padding:1px; background:var(--grad);
  box-shadow:0 40px 90px -40px rgba(79,70,229,.55);
}
.custom-in{
  position:relative; border-radius:inherit; background:var(--surface); overflow:hidden;
  padding:clamp(28px,5vw,64px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px);
}
.custom-in::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:radial-gradient(50% 60% at 100% 0%, var(--mesh-1), transparent 70%), radial-gradient(40% 60% at 0% 100%, var(--mesh-2), transparent 70%); }
.custom-in > *{ position:relative; }
@media (max-width:900px){ .custom-in{ grid-template-columns:minmax(0,1fr); } }
.custom h2{ font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.08; letter-spacing:-.04em; font-weight:720; margin-top:16px; text-wrap:balance; }
.custom p{ color:var(--ink-2); font-size:1.06rem; margin-top:16px; max-width:52ch; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.pills li{ padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); font-size:.9rem; font-weight:500; }
.who{ display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:var(--r); border:1px solid var(--line); background:color-mix(in srgb,var(--surface-2) 80%,transparent); align-self:start; }
.who-id{ display:flex; align-items:center; gap:14px; }
.avatar{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#0a0e1c; background:var(--grad); flex:none; }
.who-id b{ display:block; font-size:1.02rem; }
.who-id div span{ font-size:.86rem; color:var(--muted); }
.who ul{ display:flex; flex-direction:column; gap:12px; }
.who li{ font-size:.93rem; color:var(--ink-2); padding-left:16px; position:relative; }
.who li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.text-link{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--accent-ink); }
.text-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ============ CONTATO ============ */
.contact{
  position:relative; overflow:hidden; text-align:center; border-radius:calc(var(--r-lg) + 6px);
  padding:clamp(40px,7vw,88px) clamp(20px,5vw,64px);
  background:#0a0e1c; color:#eef1f8; isolation:isolate; border:1px solid rgba(255,255,255,.08);
}
.contact .grad-text{ background-image:linear-gradient(115deg,#a5b4fc 0%,#7dd3fc 45%,#5eead4 90%); }
.contact::before{ content:""; position:absolute; inset:-30%; z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%, rgba(99,102,241,.35), rgba(6,182,212,.25), rgba(16,185,129,.2), rgba(99,102,241,.35));
  filter:blur(60px); opacity:.55; animation:spin 30s linear infinite; }
@keyframes spin{ to{ transform:rotate(1turn); } }
.contact .eyebrow{ color:#a9b0c4; }
.contact h2{ font-size:clamp(2rem,4.6vw,3.5rem); line-height:1.08; letter-spacing:-.04em; font-weight:720; margin-top:16px; text-wrap:balance; }
.contact p{ color:#c3c9d9; margin:16px auto 0; max-width:52ch; font-size:1.08rem; }
.contact-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
.contact .btn-ghost{ --b-bg:transparent; --b-fg:#eef1f8; --b-line:rgba(238,241,248,.3); }
.contact .btn-ghost:hover{ border-color:#eef1f8; box-shadow:none; }
.btn .k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7; font-weight:500; }
@media (max-width:480px){ .contact-actions .btn{ flex:1 1 100%; } }

.contact :focus-visible{ outline-color:#a5b4fc; }

/* ============ FLUXO (Locker) ============ */
.flow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:f; position:relative; }
@media (max-width:980px){ .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .flow{ grid-template-columns:minmax(0,1fr); } }
.flow li{ position:relative; padding:26px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.flow-n{ font-family:var(--mono); font-size:.8rem; color:var(--accent-ink); display:flex; align-items:center; gap:10px; }
.flow-n::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }
.flow h3{ font-size:1.2rem; letter-spacing:-.025em; margin-top:18px; font-weight:660; }
.flow p{ color:var(--ink-2); font-size:.95rem; margin-top:8px; }

/* ============ PLANOS ============ */
.plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
@media (max-width:940px){ .plans{ grid-template-columns:minmax(0,1fr); max-width:520px; margin-inline:auto; } }
.plan{ gap:18px; }
.plan .amount{ font-size:clamp(2.4rem,4vw,3rem); font-weight:750; letter-spacing:-.045em; line-height:1; }
.plan .amount small{ font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:4px; }
.plan .fit{ color:var(--muted); font-size:.93rem; min-height:2.9em; }
.plan .checks{ padding-top:18px; border-top:1px solid var(--line); }
.plan .btn{ margin-top:auto; width:100%; }
.plan-hl{ border-color:transparent; background:
  linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box; border:1.5px solid transparent;
  box-shadow:0 30px 70px -30px rgba(79,70,229,.5); }
.plans-note{ text-align:center; color:var(--muted); font-size:.92rem; margin-top:24px; }

/* ============ TABELA (condomínio) ============ */
.table-box{ border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-1); overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; min-width:560px; font-size:.95rem; }
th,td{ padding:15px 18px; text-align:center; border-bottom:1px solid var(--line); }
tbody tr:last-child th,tbody tr:last-child td{ border-bottom:0; }
thead th{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--surface-2); }
tbody th{ text-align:left; font-weight:500; color:var(--ink); }
td.y{ color:var(--ok); font-weight:700; }
td.n{ color:var(--muted); }
td.p{ font-size:.88rem; color:var(--ink-2); }
@media (max-width:560px){
  table{ min-width:0; font-size:.86rem; }
  th,td{ padding:12px 8px; }
  thead th{ font-size:.62rem; letter-spacing:.02em; white-space:nowrap; }
  td.p{ font-size:.78rem; }
}

/* ============ HERO DE PRODUTO (Locker) ============ */
.locker-art{ position:relative; margin-inline:auto; width:100%; max-width:420px; }
.locker-art svg{ width:100%; height:auto; overflow:visible; }
.locker-art .door-open{ transform-box:fill-box; transform-origin:left center; animation:door 6s var(--ease) infinite; }
@keyframes door{ 0%,15%{ transform:perspective(400px) rotateY(0); } 30%,70%{ transform:perspective(400px) rotateY(-58deg); } 85%,100%{ transform:perspective(400px) rotateY(0); } }
.locker-art .glow{ animation:glow 6s var(--ease) infinite; }
@keyframes glow{ 0%,15%{ opacity:0; } 30%,70%{ opacity:1; } 85%,100%{ opacity:0; } }

/* ============ PÁGINAS DE TEXTO ============ */
.doc{ max-width:760px; margin-inline:auto; padding:clamp(40px,7vw,88px) var(--gutter) var(--sec); }
.doc h1{ font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.04em; line-height:1.08; font-weight:740; margin-top:16px; }
.doc .updated{ color:var(--muted); font-size:.92rem; margin-top:12px; font-family:var(--mono); }
.doc .intro{ font-size:1.12rem; color:var(--ink); margin-top:32px; padding:22px 24px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); }
.doc h2{ font-size:1.3rem; letter-spacing:-.025em; font-weight:660; margin-top:44px; padding-top:20px; border-top:1px solid var(--line); }
.doc p,.doc li{ color:var(--ink-2); font-size:1.02rem; line-height:1.72; }
.doc p{ margin-top:14px; }
.doc ul{ margin-top:12px; display:flex; flex-direction:column; gap:8px; padding-left:4px; }
.doc ul li{ position:relative; padding-left:20px; }
.doc ul li::before{ content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.doc a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* ============ 404 ============ */
.nf{ min-height:calc(100svh - 68px - 220px); display:grid; place-items:center; text-align:center; padding:64px 0; position:relative; isolation:isolate; overflow:hidden; }
.nf-code{ font-size:clamp(6rem,24vw,13rem); font-weight:800; letter-spacing:-.07em; line-height:.9; }
.nf h1{ font-size:clamp(1.6rem,3.4vw,2.2rem); letter-spacing:-.03em; margin-top:18px; }
.nf p{ color:var(--ink-2); margin-top:10px; }
.nf .hero-actions{ justify-content:center; }

/* ============ RODAPÉ ============ */
.foot{ border-top:1px solid var(--line); padding:56px 0 40px; background:var(--bg); }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .foot-brand{ grid-column:1 / -1; } }
@media (max-width:420px){ .foot-grid{ grid-template-columns:minmax(0,1fr); } }
.foot-brand p{ color:var(--muted); font-size:.93rem; margin-top:14px; max-width:36ch; }
.foot h2{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.foot ul{ display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.foot ul a{ display:inline-block; padding:4px 0; font-size:.94rem; color:var(--ink-2); transition:color .2s; }
.foot ul a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.foot-legal{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; font-size:.84rem; color:var(--muted); }
.foot-legal a{ text-decoration:underline; text-underline-offset:3px; }
.foot-legal a:hover{ color:var(--ink); }

/* ============ ENTRADAS AO ROLAR ============ */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s); }
.js .reveal.in{ opacity:1; transform:none; }

/* ============ MOVIMENTO REDUZIDO ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  .js .reveal{ opacity:1; transform:none; }
  .mesh,.contact::before,.float-a,.win-chart b{ animation:none !important; }
  .locker-art .door-open{ animation:none !important; transform:perspective(400px) rotateY(-58deg); }
  .locker-art .glow{ animation:none !important; opacity:1; }
}