/* UEBI WORK — estilos do site
   Tema escuro (padrão) e claro: as cores ficam em tokens com light-dark() e o tema
   é trocado pelo color-scheme. A seção Projetos usa o esquema inverso do resto da página. */

@layer reset, base, ui;

/* ===== Reset ===== */
@layer reset {
  *, ::before, ::after { box-sizing: border-box; border: 0 solid; }
  html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
  body { margin: 0; }
  h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
  h1, h2, h3 { font-size: inherit; font-weight: inherit; }
  ol, ul { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: inherit; }
  img, svg { display: block; vertical-align: middle; }
  img { max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; }
  button { background: none; cursor: pointer; }
  button:disabled { cursor: default; }
  textarea { resize: vertical; }
  ::placeholder { opacity: 1; }
  [hidden] { display: none !important; }
}

/* ===== Tokens e base ===== */
@layer base {
  :root {
    color-scheme: dark;
    --bg: light-dark(rgb(238 245 252), rgb(4 8 15));
    --line: light-dark(rgb(198 216 236), rgb(38 66 100));
    --field: light-dark(rgb(232 241 250), rgb(7 16 29));
    --ink: light-dark(rgb(70 92 124), rgb(150 170 198));
    --fg: light-dark(rgb(8 22 45), #fff);
    --cyan: light-dark(rgb(24 82 170), rgb(132 196 255));
    --glow: light-dark(rgb(37 99 235), rgb(196 228 255));
    --dot: light-dark(#b5c9e0, #2a4566);
    --placeholder: light-dark(#9a9fae, #666b7a);
    --lbl: light-dark(#343846, #d8dbe3);
    --header-bg: light-dark(rgb(244 249 255 / .7), rgb(4 8 15 / .62));
    --footer-bg: light-dark(rgb(255 255 255 / .5), rgb(2 5 10 / .55));
    --logo-glow: drop-shadow(0 0 10px rgb(77 163 255 / .55));
    --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    --header-h: 68px;
  }
  :root[data-site-theme="light"] {
    color-scheme: light;
    --logo-glow: drop-shadow(0 0 8px rgb(37 99 235 / .25));
  }

  html { scroll-behavior: smooth; scroll-padding-top: 88px; font-family: var(--sans); }
  body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  h1, h2, h3 { text-wrap: balance; }
  h1, h2 { font-weight: 500; line-height: 1.02; letter-spacing: -.025em; }
  h3 { letter-spacing: -.015em; }
  :focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

/* ===== Componentes ===== */
@layer ui {
  /* --- Utilitários de layout --- */
  .gutter { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .wrap { margin-inline: auto; max-width: 1520px; }
  .mono { font-family: var(--mono); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .eyebrow { font: 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
  .title { font-size: 30px; color: var(--fg); }
  @media (width >= 640px) { .title { font-size: 36px; } }

  .grad, .accent, .wm { -webkit-background-clip: text; background-clip: text; color: transparent; }
  .grad { background-image: linear-gradient(100deg, #7cc0ff 0%, #fff 55%, #7cc0ff 100%); }
  [data-site-theme="light"] .grad { background-image: linear-gradient(100deg, #1d5fd0 0%, #0b1b3f 60%, #1d5fd0 100%); }

  /* marcas de cruz nos cantos das seções */
  .plus {
    position: absolute; z-index: 1; width: 16px; height: 16px; opacity: .55; pointer-events: none;
    &:first-of-type { top: 92px; right: 3%; }
    &:last-of-type { bottom: 24px; left: 3%; }
    &::before, &::after { content: ""; position: absolute; background: color-mix(in srgb, var(--fg) 60%, transparent); }
    &::before { inset: 7.5px 0 auto; height: 1px; }
    &::after { inset: 0 auto 0 7.5px; width: 1px; }
  }

  .pulse-dot {
    position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--glow);
    &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
  }
  @keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

  .reveal { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .reveal.d2 { animation-delay: .16s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }

  /* --- Cabeçalho --- */
  .site-header {
    position: fixed; inset: 0 0 auto; z-index: 50;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .bar { display: flex; height: var(--header-h); align-items: center; justify-content: space-between; gap: 12px; }
  @media (width >= 768px) { .bar { display: grid; grid-template-columns: 1fr auto 1fr; } }
  .bar-end { display: flex; align-items: center; justify-content: end; }

  .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .brand img { height: 40px; width: auto; aspect-ratio: 338 / 360; }
  .brand-name { display: none; white-space: nowrap; font-size: 18px; line-height: 28px; font-weight: 800; letter-spacing: .14em; color: var(--fg); }
  @media (width >= 640px) { .site-header .brand-name { display: inline; } }

  .logo { filter: var(--logo-glow); }
  .logo-light, [data-site-theme="light"] .logo-dark { display: none; }
  [data-site-theme="light"] .logo-light { display: block; }

  .nav {
    display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 9999px;
    & a { padding: 8px; border-radius: 9999px; font-size: 12.5px; font-weight: 600; color: var(--ink); transition: color .2s ease, background .2s ease; }
    & a:hover, & a[aria-current="true"] { color: var(--fg); }
    & a[aria-current="true"] { background: rgb(255 255 255 / .14); }
  }
  [data-site-theme="light"] .nav a[aria-current="true"] { background: rgb(37 99 235 / .12); }
  @media (width >= 640px) { .nav a { padding: 8px 18px; font-size: 14px; } }

  .theme-btn {
    display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 9999px;
    color: var(--fg); background: color-mix(in srgb, var(--ink) 14%, transparent); transition: background .2s ease, transform .2s ease;
    &:hover { background: color-mix(in srgb, var(--ink) 26%, transparent); }
    &:active { transform: translateY(1px) scale(.97); }
  }
  .theme-btn .i-moon, [data-site-theme="light"] .theme-btn .i-sun { display: none; }
  [data-site-theme="light"] .theme-btn .i-moon { display: block; }

  /* --- Seções: cada uma ocupa uma tela inteira --- */
  .screen { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; scroll-margin-top: -88px; }
  .slab { border-top: 1px solid rgb(150 190 235 / .14); padding-block: calc(var(--header-h) + 2.5rem) 2.5rem; }

  /* fundos com brilhos desfocados (Serviços e Contato) */
  .glows {
    overflow: hidden;
    &::before, &::after { content: ""; position: absolute; border-radius: 9999px; pointer-events: none; }
    & > .gutter { position: relative; z-index: 1; }
  }

  /* --- Hero --- */
  #home {
    overflow: hidden; padding-top: var(--header-h);
    background:
      radial-gradient(42% 55% at 82% 10%, rgb(205 230 255 / .3) 0%, rgb(205 230 255 / 0) 70%),
      radial-gradient(60% 70% at 100% 100%, rgb(40 110 175 / .55) 0%, rgb(40 110 175 / 0) 70%),
      linear-gradient(135deg, #02050a 0%, #061425 48%, #0f2f52 100%);
    & > .plus:first-of-type { top: 96px; right: 4%; }
    & > .plus:last-of-type { bottom: 28px; }
  }
  [data-site-theme="light"] #home {
    background:
      radial-gradient(42% 55% at 82% 10%, rgb(255 255 255 / .95) 0%, rgb(255 255 255 / 0) 70%),
      linear-gradient(135deg, #f6faff 0%, #d4e6f7 55%, #8dbbe0 100%);
  }
  .hero-grid {
    --grid-line: light-dark(rgb(37 99 235 / .07), rgb(160 164 176 / .06));
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(70% 70% at 70% 20%, #000 0%, transparent 75%);
  }
  .orbit {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--cyan);
    & :is(circle, ellipse) { stroke: color-mix(in srgb, var(--fg) 14%, transparent); }
  }
  .hero-shell { position: relative; width: 100%; }
  .hero { margin-inline: auto; width: 100%; max-width: 1680px; padding-block: 24px; }
  .hero-main { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
  .hero-copy { margin-block: auto; padding-block: 24px; }
  .hero-copy .eyebrow { margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
  #hero-title { font-size: 48px; color: var(--fg); }
  .accent { background-image: linear-gradient(to right, var(--cyan), #2f6bff); }
  .lead { margin-top: 32px; max-width: 48rem; font-size: 18px; line-height: 1.625; color: var(--ink); }
  .cta-row { margin-top: 40px; }
  @media (width >= 640px) {
    #hero-title { font-size: 72px; }
    .lead { font-size: 20px; line-height: 28px; }
  }
  @media (width >= 1024px) {
    #hero-title { font-size: 96px; }
    .lead { font-size: 24px; line-height: 32px; }
  }
  @media (width >= 1280px) {
    .hero { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 64px; padding-block: 40px; }
    .hero-main { min-height: calc(100svh - 9rem); }
  }
  @media (width >= 1536px) { #hero-title { font-size: 7.5rem; } }

  /* título digitado ao vivo: fica oculto até o script começar a digitar */
  .js #hero-title:not(.typing) { visibility: hidden; }
  .tw { visibility: hidden; }
  .tw.on { visibility: visible; }
  .tw-caret {
    display: inline-block; width: 0; height: .82em; position: relative; vertical-align: -.04em;
    &::after { content: ""; position: absolute; left: 3px; inset-block: 0; width: .07em; min-width: 3px; border-radius: 2px; background: var(--glow); box-shadow: 0 0 12px var(--glow); animation: twblink 1s steps(1) infinite; }
  }
  @keyframes twblink { 50% { opacity: 0; } }

  .btn-hero {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 20px 40px; border: 1px solid rgb(255 255 255 / .45); border-radius: 9999px;
    font-size: 18px; line-height: 28px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #5aa2e6 0%, #1f5fae 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 14px 34px -12px rgb(30 100 190 / .9);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
    & svg { transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
    &:hover { filter: brightness(1.12); border-color: var(--glow); box-shadow: 0 0 34px -2px rgb(125 211 252 / .7), inset 0 0 14px -8px #fff, 0 16px 38px -12px rgb(37 99 235); }
    &:hover svg { transform: translateX(4px); }
    &:active { transform: translateY(1px) scale(.99); }
  }

  .stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    border-top: 1px solid var(--line); padding-top: 24px; font: 12px/16px var(--mono); color: var(--ink);
    & > div { padding-right: 8px; }
    & dt { color: color-mix(in srgb, var(--ink) 70%, transparent); }
    & dd { margin-top: 4px; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--fg); }
  }
  @media (width >= 640px) {
    .stats { font-size: 14px; line-height: 20px; }
    .stats dd { font-size: 30px; line-height: 36px; }
  }

  /* marca com gradiente que acompanha a estrela em órbita */
  .hero-brand { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 40px; }
  @media (width >= 1280px) { .hero-brand { display: flex; } }
  #brand { position: relative; display: flex; flex-direction: column; align-items: center; }
  #star-layer { position: absolute; inset: 0; pointer-events: none; }
  .logo-fx {
    height: 38svh; max-height: 400px; aspect-ratio: 902 / 960;
    mask: url("../img/logo-mark.webp") center / contain no-repeat;
    background: radial-gradient(circle 300px at var(--mx, -999px) var(--my, -999px), #8ccdfb 0%, #7fb0f6 28%, #bcd6fa 58%, #eef5ff 82%, #fff 100%);
  }
  [data-site-theme="light"] .logo-fx {
    background: radial-gradient(circle 300px at var(--mx, -999px) var(--my, -999px), #4a8ff0 0%, #4b6fc0 32%, #2a3f78 62%, #14244f 86%, #0b1b3f 100%);
  }
  .wordmark {
    margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 20px;
    font-size: 36px; line-height: 1; letter-spacing: .2em;
    & > span { margin-right: -.2em; }
  }
  @media (width >= 1536px) { .wordmark { font-size: 48px; } }
  .wm-line { display: inline-block; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 80%, transparent), transparent); }
  .wordmark > .wm-line { margin-right: 0; }
  .wm { display: inline-block; background-image: radial-gradient(circle 230px at var(--mx, -999px) var(--my, -999px), #38bdf8 0%, #8ccdfb 38%, #fff 100%); }
  [data-site-theme="light"] .wm { background-image: radial-gradient(circle 230px at var(--mx, -999px) var(--my, -999px), #2563eb 0%, #3b5fb0 38%, #0b1b3f 100%); }
  .wm-uebi { font-weight: 800; }
  .wm-work { font-weight: 300; }

  .star {
    position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; will-change: transform;
    filter: drop-shadow(0 0 7px #7dd3fc) drop-shadow(0 0 16px rgb(56 189 248 / .8));
    & svg { width: 100%; height: 100%; animation: starspin 4s linear infinite; }
  }
  @keyframes starspin { to { transform: rotate(360deg); } }
  .trail { position: absolute; left: 0; top: 0; border-radius: 9999px; background: #bfe6ff; will-change: transform; }
  [data-site-theme="light"] {
    & .star { filter: drop-shadow(0 0 6px rgb(37 99 235 / .7)); }
    & .star path { fill: #2563eb; }
    & .trail { background: #5b8def; }
  }

  /* --- Serviços --- */
  #servicos {
    background: linear-gradient(165deg, #03070e 0%, #07182d 55%, #123a63 130%);
    &::before, &::after { filter: blur(70px); opacity: .55; }
    &::before { width: 520px; height: 520px; left: -140px; top: 20%; background: radial-gradient(circle, rgb(60 140 235 / .55), transparent 70%); }
    &::after { width: 560px; height: 560px; right: -160px; bottom: -120px; background: radial-gradient(circle, rgb(130 200 255 / .35), transparent 70%); }
  }
  [data-site-theme="light"] #servicos {
    background: linear-gradient(165deg, #f7fbff 0%, #dcebf8 100%);
    &::before { opacity: .35; }
  }

  .sec-head {
    display: grid; gap: 24px;
    & .eyebrow { margin-bottom: 12px; }
    & > p { max-width: 28rem; color: var(--ink); }
  }
  @media (width >= 1024px) {
    .sec-head { grid-template-columns: 1.1fr .9fr; align-items: end; }
    .sec-head > p { justify-self: end; }
  }

  .svc-grid { margin-top: 32px; display: grid; gap: 16px; }
  @media (width >= 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (width >= 1024px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* card de vidro com brilho e borda que seguem o cursor */
  .glass-card {
    --mx: -999px; --my: -999px;
    position: relative; overflow: hidden; isolation: isolate;
    &::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
    &::after {
      content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }
  }

  .svc-card {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-content: start; align-items: center;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(155deg, rgb(255 255 255 / .085), rgb(255 255 255 / .02));
    box-shadow: 0 30px 60px -34px rgb(0 0 0 / .8);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: translate .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
    &::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgb(120 190 255 / .22), transparent 60%); }
    &::after { background: radial-gradient(240px circle at var(--mx) var(--my), rgb(190 228 255), transparent 65%), linear-gradient(155deg, rgb(255 255 255 / .28), rgb(255 255 255 / .05) 55%, rgb(120 190 255 / .2)); }
    &:hover, &:focus-within { transform: translateY(-8px); box-shadow: 0 40px 70px -30px rgb(40 120 220 / .65), 0 0 0 1px rgb(150 210 255 / 0); }
    & > * { position: relative; z-index: 1; }

    & .num {
      position: absolute; z-index: 0; right: 16px; bottom: -30px;
      font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
      color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--cyan) 22%, transparent);
      transition: -webkit-text-stroke-color .3s ease, transform .4s ease;
    }
    &:hover .num { -webkit-text-stroke-color: color-mix(in srgb, var(--cyan) 70%, transparent); transform: translateY(-6px); }

    & .svc-icon {
      display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 15px; color: #fff;
      background: linear-gradient(140deg, #6db3f2 0%, #1f5fae 100%);
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 12px 26px -8px rgb(40 130 230 / .9);
      transition: transform .35s ease;
    }
    &:hover .svc-icon { transform: rotate(-6deg) scale(1.08); }

    & h3 { font-size: 1.1rem; line-height: 1.25; font-weight: 700; color: var(--fg); }
    & p { grid-column: 1 / -1; margin-top: 14px; line-height: 1.625; color: var(--ink); }
    & .tags { grid-column: 1 / -1; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
    & > .badge-impact { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
  }
  [data-site-theme="light"] .svc-card {
    &, &:hover, &:focus-within { background: linear-gradient(155deg, rgb(255 255 255 / .92), rgb(255 255 255 / .6)); box-shadow: 0 26px 50px -30px rgb(20 70 140 / .5); }
    &::after { background: radial-gradient(240px circle at var(--mx) var(--my), rgb(37 99 235), transparent 65%), linear-gradient(155deg, #fff, rgb(150 190 235 / .5)); }
  }

  .badge-impact {
    display: inline-flex; width: fit-content; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); border-radius: 9999px;
    font: 11px/1.5 var(--mono); letter-spacing: .02em; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent);
  }
  [data-site-theme="light"] .badge-impact { background: rgb(29 78 216 / .08); border-color: rgb(29 78 216 / .3); }

  /* entrada escalonada dos cards */
  .js .svc-grid .svc-card { opacity: 0; translate: 0 28px; }
  .js .svc-grid.in .svc-card { opacity: 1; translate: 0 0; }
  .svc-grid.in .svc-card { transition-delay: calc(var(--i, 0) * .08s), calc(var(--i, 0) * .08s), 0s, 0s; }
  .svc-card:nth-child(2) { --i: 1; } .svc-card:nth-child(3) { --i: 2; } .svc-card:nth-child(4) { --i: 3; }
  .svc-card:nth-child(5) { --i: 4; } .svc-card:nth-child(6) { --i: 5; }

  /* --- Projetos: "slide" no esquema oposto ao do restante da página --- */
  #projetos {
    color-scheme: light; color: var(--fg); overflow-x: clip;
    background: linear-gradient(135deg, #fff 0%, #e8f1fb 45%, #a5c8e8 100%);
  }
  [data-site-theme="light"] #projetos {
    color-scheme: dark;
    background: linear-gradient(165deg, #03070e 0%, #07182d 55%, #123a63 130%);
  }

  .proj-head { text-align: center; max-width: 820px; margin: 0 auto; }
  .proj-eyebrow { display: inline-block; margin: 0 0 14px; }
  .proj-title { font-size: clamp(2rem, 4.4vw, 3.4rem); color: var(--fg); }
  .proj-sub { margin-top: 14px; font-size: clamp(.95rem, 1.3vw, 1.1rem); color: var(--ink); }

  .proj-band-wrap { position: relative; width: 100vw; left: 50%; margin: 32px 0 0 -50vw; }
  .proj-band {
    position: relative; height: clamp(300px, 48svh, 500px); container-type: size; overflow: hidden;
    cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: -2px;
    &.is-drag { cursor: grabbing; }
  }
  .proj-stage {
    position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    .is-ready > & { opacity: 1; }
  }
  .tgh-tile { position: absolute; transform-style: preserve-3d; will-change: transform; backface-visibility: hidden; }
  .tgh-slice { position: absolute; top: 0; overflow: hidden; cursor: pointer; }
  .tgh-inner {
    position: absolute; top: 0; max-width: none; container-type: size;
    & * { pointer-events: none; }
    & .pulse-dot, & .pulse-dot::after { animation: none; }
  }

  .proj-controls { margin: 20px auto 0; display: flex; max-width: 1520px; align-items: center; justify-content: center; gap: 32px; }
  #proj-dots { display: flex; align-items: center; gap: 8px; }
  .proj-arrows { display: flex; align-items: center; gap: 12px; }
  .proj-dot {
    width: 8px; height: 8px; padding: 0; border-radius: 9999px; background: var(--dot); transition: width .25s ease, background .25s ease;
    &[aria-current="true"] { width: 26px; background: var(--cyan); }
  }
  .proj-nav {
    display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 9999px;
    color: var(--fg); border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent); background: rgb(77 163 255 / .04);
    transition: background .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .2s ease;
    &:hover { background: rgb(77 163 255 / .14); border-color: var(--glow); box-shadow: 0 0 22px -4px rgb(125 211 252 / .6); }
    &:active { transform: translateY(1px); }
  }
  [data-site-theme="light"] .proj-nav {
    &, &:hover { border-color: rgb(37 99 235 / .45); background: rgb(37 99 235 / .05); }
    &:hover { border-color: #2563eb; box-shadow: 0 8px 22px -10px rgb(37 99 235 / .5); }
  }

  /* card de projeto (molde clonado nas fatias da faixa 3D) */
  .proj-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    width: 100%; height: 100%; color: #fff; border: 1px solid rgb(255 255 255 / .28); border-radius: 24px;
    background: linear-gradient(155deg, #3d78b0 0%, #1a4170 48%, #0b2140 100%);
    /* o conteúdo acompanha o tamanho real do card; no desktop bate com 24px / 11px / 14px / 16px */
    padding: clamp(10px, calc(4px + 7.5cqh), 24px);
    &::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 9999px; background: radial-gradient(circle, rgb(255 255 255 / .28), transparent 70%); pointer-events: none; }
    & .badge-dev { font-size: clamp(9px, calc(5.5px + 4.7cqh), 11px); color: #fff; border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .1); box-shadow: none; }
    & .pulse-dot { background: #fff; }
    & .art { flex: 1; min-height: 0; overflow: hidden; margin: clamp(4px, calc(2px + 5.2cqh), 16px) 0; color: rgb(255 255 255 / .4); }
    & .art svg { width: 100%; height: 100%; }
    & .count { font: clamp(10px, calc(7px + 2.6cqh), 14px)/20px var(--mono); letter-spacing: .1em; color: rgb(255 255 255 / .85); }
  }
  .badge-dev {
    display: inline-flex; width: fit-content; align-items: center; gap: .5em; padding: .35em .8em; white-space: nowrap;
    border: 1px solid rgb(125 211 252 / .45); border-radius: 9999px; font-family: var(--mono); color: var(--glow);
    background: rgb(125 211 252 / .07); box-shadow: 0 0 14px -4px rgb(125 211 252 / .5);
  }
  [data-site-theme="light"] .proj-card .badge-dev { border-color: rgb(37 99 235 / .45); background: rgb(29 78 216 / .08); }

  /* Projetos no celular: a seção inteira cabe em uma tela, senão os controles do carrossel ficam abaixo da dobra */
  @media (width <= 640px) {
    .proj-head { padding: 0 4px; }
    #projetos { padding-block: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1rem) 1.25rem; }
    .proj-eyebrow { margin-bottom: 10px; }
    .proj-title { font-size: clamp(1.5rem, 6.6vw, 2rem); }
    .proj-sub { margin-top: 10px; font-size: .9rem; }
    .proj-band-wrap { margin-top: 1rem; }
    .proj-band { height: clamp(200px, 30svh, 300px); }
    .proj-controls { margin-top: .75rem; gap: 1.25rem; }
    .proj-nav { width: 42px; height: 42px; }
  }
  /* notebooks e tablets de tela baixa */
  @media (width > 640px) and (561px <= height <= 800px) {
    .proj-band { height: clamp(260px, 42svh, 440px); }
  }
  /* celular deitado: sobra pouca altura, então o rótulo decorativo sai de cena */
  @media (height <= 560px) and (orientation: landscape) {
    #projetos { padding-block: calc(var(--header-h) + env(safe-area-inset-top, 0px) + .5rem) .75rem; }
    .proj-eyebrow { display: none; }
    .proj-title { font-size: clamp(1.25rem, 3.4vw, 1.75rem); }
    .proj-sub { margin-top: 8px; font-size: .85rem; }
    .proj-band-wrap { margin-top: .5rem; }
    .proj-band { height: clamp(140px, 38svh, 220px); }
    .proj-controls { margin-top: .5rem; }
    .proj-nav { width: 38px; height: 38px; }
  }

  /* detalhes do projeto (<dialog> nativo) */
  .deck {
    inset: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none;
    padding: 16px; background: transparent; color: #fff; overflow: hidden;
    &[open] { display: flex; align-items: center; justify-content: center; }
    &::backdrop { background: rgb(3 7 14 / .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: deckfade .25s ease both; }
  }
  html:has(.deck[open]) { overflow: hidden; }
  .deck-card {
    position: relative; display: flex; flex-direction: column; width: min(1100px, 100%); max-height: calc(100svh - 32px); overflow: auto;
    border: 1px solid rgb(255 255 255 / .28); border-radius: 28px;
    background: linear-gradient(155deg, #3d78b0 0%, #1a4170 45%, #0b2140 100%);
    box-shadow: 0 40px 120px -30px rgb(0 0 0 / .7); animation: deckin .35s cubic-bezier(.2, .8, .2, 1) both;
  }
  .deck-media {
    position: relative; flex: none; height: clamp(240px, 50svh, 520px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgb(3 12 28 / .45);
    & img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  }
  .deck-art { width: min(560px, 75%); color: rgb(255 255 255 / .4); & svg { width: 100%; height: 100%; } }
  .deck-body { padding: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
  .deck-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .85); & .pulse-dot { background: #fff; } }
  .deck-title { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
  .deck-client { font-size: 15px; letter-spacing: .08em; color: rgb(255 255 255 / .7); }
  .deck-text { font-size: 1.15rem; line-height: 1.65; color: rgb(255 255 255 / .85); }
  .deck-label { margin-top: 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
  .deck-tech { display: flex; flex-wrap: wrap; gap: 8px; & li { border: 1px solid rgb(255 255 255 / .4); background: rgb(255 255 255 / .1); border-radius: 9999px; padding: 8px 16px; font-size: 15px; } }
  .deck-x {
    position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
    border-radius: 9999px; border: 1px solid rgb(255 255 255 / .4); background: rgb(3 12 28 / .4); color: #fff;
    &:hover { background: rgb(255 255 255 / .2); }
  }
  @keyframes deckfade { from { opacity: 0; } }
  @keyframes deckin { from { opacity: 0; transform: translateY(18px) scale(.98); } }

  /* --- Contato --- */
  #contato {
    background: linear-gradient(200deg, #03070e 0%, #08203b 60%, #1b5486 130%);
    &::before, &::after { filter: blur(80px); opacity: .5; }
    &::before { width: 520px; height: 520px; left: -160px; bottom: -60px; background: radial-gradient(circle, rgb(60 140 235 / .5), transparent 70%); }
    &::after { width: 560px; height: 560px; right: -140px; top: -120px; background: radial-gradient(circle, rgb(130 200 255 / .32), transparent 70%); }
  }
  [data-site-theme="light"] #contato {
    background: linear-gradient(200deg, #f4f9ff 0%, #c9def2 100%);
    &::before, &::after { opacity: .3; }
  }
  #contato-title { max-width: 42rem; }
  #contato .wrap > .eyebrow { margin-bottom: 12px; }
  .contact-grid { margin-top: 32px; display: grid; gap: 32px; }
  @media (width >= 1024px) {
    .contact-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; }
    .steps-aside { padding-top: 8px; }
  }

  .steps-aside > .eyebrow { margin-bottom: 20px; }
  .steps {
    & li { display: flex; gap: 20px; }
    & li > div:first-child { display: flex; flex-direction: column; align-items: center; }
    & li:not(:last-child) > div + div { padding-bottom: 24px; }
    & h3 { font-weight: 700; color: var(--fg); transition: color .2s ease; }
    & li:hover h3 { color: var(--glow); }
    & p { margin-top: 6px; font-size: 15px; line-height: 1.625; color: var(--ink); }
  }
  .step-dot {
    display: inline-flex; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px;
    font: 600 14px/1.5 var(--mono); color: #fff;
    background: linear-gradient(140deg, #6db3f2, #1f5fae);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 10px 24px -8px rgb(40 130 230 / .9);
  }
  .step-line { width: 1px; flex: 1; margin-top: 6px; background: linear-gradient(to bottom, rgb(109 179 242 / .8), rgb(109 179 242 / 0)); }

  .wa-box { margin-top: 28px; & p { margin-bottom: 12px; font-size: 15px; color: var(--ink); } }
  .btn-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 28px; border-radius: 9999px;
    font-weight: 700; color: #fff; background: #16a34a; box-shadow: 0 10px 30px -12px rgb(22 163 74 / .9);
    transition: filter .2s ease, transform .2s ease;
    &:hover { filter: brightness(1.12); }
    &:active { transform: translateY(1px) scale(.99); }
  }
  .lgpd-note {
    margin-top: 24px; padding: 16px; border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent); border-radius: 16px;
    font: 12px/1.625 var(--mono); color: var(--ink);
    background: linear-gradient(155deg, rgb(255 255 255 / .08), rgb(255 255 255 / .02));
  }
  [data-site-theme="light"] .lgpd-note { background: rgb(255 255 255 / .7); }

  .ct-card {
    padding: 24px; border-radius: 28px;
    background: linear-gradient(145deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
    box-shadow: 0 40px 80px -36px rgb(0 0 0 / .8);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    &::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgb(120 190 255 / .2), transparent 60%); }
    &::after { background: radial-gradient(260px circle at var(--mx) var(--my), rgb(190 228 255), transparent 65%), linear-gradient(155deg, rgb(255 255 255 / .3), rgb(255 255 255 / .05) 55%, rgb(120 190 255 / .22)); }
  }
  @media (width >= 640px) { .ct-card { padding: 32px; } }
  [data-site-theme="light"] .ct-card {
    background: rgb(255 255 255 / .7); box-shadow: 0 30px 60px -34px rgb(20 70 140 / .5);
    &::after { background: radial-gradient(260px circle at var(--mx) var(--my), rgb(37 99 235), transparent 65%), linear-gradient(155deg, #fff, rgb(150 190 235 / .5)); }
  }
  .ct-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--fg); }
  .ct-sub { margin-top: 6px; font-size: 15px; color: var(--ink); }

  /* formulário */
  #contact-form { margin-top: 24px; display: grid; gap: 16px; }
  @media (width >= 640px) {
    #contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #contact-form .full { grid-column: span 2 / span 2; }
  }
  .lbl { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--lbl); }
  .field {
    width: 100%; padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent); border-radius: 14px;
    font-size: 15px; color: var(--fg); background: rgb(255 255 255 / .05);
    transition: border-color .2s ease, box-shadow .2s ease;
    &::placeholder { color: var(--placeholder); }
    &:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 16%, transparent), 0 0 26px -8px color-mix(in srgb, var(--cyan) 70%, transparent); }
    & option { background: var(--field); color: var(--fg); }
  }
  select.field { appearance: none; }
  [data-site-theme="light"] .field { background: rgb(255 255 255 / .8); }

  .consent {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer; line-height: 1.625; color: var(--ink);
    & input { margin-top: 4px; width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px; accent-color: #2563eb; }
    & a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; &:hover { color: var(--glow); } }
  }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  #form-error { margin-bottom: 12px; padding: 12px 16px; border: 1px solid rgb(239 68 68 / .4); border-radius: 8px; font-size: 14px; line-height: 20px; color: #fca5a5; background: rgb(239 68 68 / .1); }
  [data-site-theme="light"] #form-error { color: #b91c1c; background: rgb(239 68 68 / .08); }

  .btn-primary {
    position: relative; overflow: hidden; display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 12px;
    padding: 16px 24px; border: 1px solid rgb(255 255 255 / .4); border-radius: 16px; font-size: 16px; line-height: 24px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #5aa2e6 0%, #1f5fae 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 16px 36px -12px rgb(30 100 190 / .95);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    &::after { content: ""; position: absolute; inset-block: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent); transform: skewX(-20deg); transition: left .7s ease; }
    &:hover { filter: brightness(1.12); transform: translateY(-2px); }
    &:hover::after { left: 130%; }
    &:disabled { opacity: .85; }
  }
  @media (width >= 640px) { .btn-primary { width: auto; padding-inline: 40px; } }
  .spinner { width: 18px; height: 18px; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  #form-done {
    margin-top: 32px; padding: 24px; border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: 16px;
    background: color-mix(in srgb, var(--cyan) 5%, transparent);
    & #done-title { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--fg); }
    & #done-text { margin-top: 8px; font-size: 15px; color: var(--ink); }
  }

  /* --- Rodapé --- */
  .site-footer { padding-block: 40px; border-top: 1px solid var(--line); background: var(--footer-bg); }
  .foot-grid { display: grid; gap: 48px; }
  @media (width >= 768px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  .site-footer .brand img { height: 48px; }
  .site-footer .brand-name { display: inline; font-size: 20px; line-height: 28px; }
  .foot-about { margin-top: 20px; max-width: 28rem; font-size: 15px; line-height: 1.625; color: var(--ink); }
  .foot-label { margin-top: 24px; font: 12px/16px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: color-mix(in srgb, var(--ink) 70%, transparent); }
  .foot-mail { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; user-select: all; & svg { color: var(--cyan); } }
  .footer-link { color: var(--ink); transition: color .2s ease; &:hover { color: var(--fg); } }
  .foot-col {
    & .eyebrow { margin-bottom: 16px; }
    & ul { font-size: 15px; color: var(--ink); }
    & li + li { margin-top: 12px; }
  }
  .secure { display: flex; align-items: center; gap: 8px; font: 12px/16px var(--mono); color: var(--cyan); }
  .foot-bottom {
    margin-top: 48px; padding-top: 24px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line);
    font: 12px/16px var(--mono); color: color-mix(in srgb, var(--ink) 70%, transparent);
  }
  @media (width >= 640px) { .foot-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

  /* --- Telas pequenas --- */
  @media (width <= 420px) {
    .nav { gap: 0; }
    .nav a { padding: 8px 6px; font-size: 12px; }
    .svc-card { padding: 18px; }
    .svc-card .num { font-size: 72px; }
    .deck-card { border-radius: 22px; }
    .deck-media { height: clamp(180px, 34svh, 300px); }
  }
  @media (width <= 350px) {
    .nav a { padding: 7px 4px; font-size: 11px; }
    .bar { gap: 6px; }
    .theme-btn { width: 34px; height: 34px; }
  }

  /* --- Menos movimento --- */
  @media (prefers-reduced-motion: reduce) {
    .reveal, .pulse-dot::after, .spinner, .star svg, .deck-card, .deck::backdrop { animation: none; }
    .svc-card { transition: none; }
    .js .svc-grid .svc-card { opacity: 1; translate: 0 0; }
  }
}