:root{
    /* ---- Miðnætur tokens (afrodite-design, direcao-visual.md §4) ---- */
    --bg:#070A0F; --surface:#0D1219; --surface-2:#131A24;
    --ink:#F4F1EA; --muted:#9AA6B2;
    --line:rgba(244,241,234,.10); --line-solid:#202A36;
    --accent:#FFA24E; --accent-hi:#FFB670; --accent-ink:#070A0F;
    --glow:rgba(255,162,78,.30);

    --font-display:"Besley","Besley Fallback", Georgia, "Times New Roman", serif;
    --font-body:"Inter Tight", system-ui, -apple-system, sans-serif;
    --font-mono:"JetBrains Mono", ui-monospace, monospace;

    --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:100px;

    --space-band:clamp(88px,12vw,160px);
    --space-gap:clamp(20px,4vw,48px);
    --maxw:1280px;
    --pad-x:clamp(20px,5vw,56px);

    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-inout:cubic-bezier(.76,0,.24,1);
    --ease-soft:cubic-bezier(.33,1,.68,1);
    --dur-fast:.35s; --dur-mid:.7s; --dur-slow:1.1s;
  }
  /* metrics-tuned fallback for Besley (CLS mitigation): local Georgia resized to
     approximate Besley's box, so the swap-in at font-display:swap doesn't reflow the H1.
     Values are approximate — safe to re-tune with exact metrics later, but this already
     closes most of the layout jump. */
  @font-face{
    font-family:"Besley Fallback";
    src:local("Georgia"),local("Times New Roman");
    size-adjust:98%;
    ascent-override:96%;
    descent-override:25%;
    line-gap-override:0%;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background-color:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:clamp(15px,1vw,17px);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* fundo aterrado (rodada 5): o gradiente saiu do body — background-attachment:fixed
     força repaint da viewport inteira a cada frame de scroll (jank clássico no
     Chrome/Windows). Camada fixa própria é composited: mesmo visual, custo zero. */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,#0C1119 0%,var(--bg) 62%);
  }
  /* rodada 9: quebra de palavra longa. O islandês forma compostos que não cabem em
     coluna estreita — "leitarvélabestun", "heimasíðugerð", "vefsíðuhönnun" — e o CSS
     não tinha nenhuma regra de quebra, então a palavra estourava o container em vez
     de quebrar. `overflow-wrap:break-word` é rede de segurança: só age quando a
     palavra não cabe de jeito nenhum, sem afetar o texto que já caberia.
     A hifenização vai só no texto de leitura e apenas sob :lang(is) — em inglês os
     compostos são separados por espaço e não precisam, e hífen automático em título
     display grande corta a palavra no meio de um jeito que atrapalha a leitura da
     manchete. applyLang já atualiza documentElement.lang, então o seletor acompanha
     a troca de idioma e o browser usa o dicionário certo. */
  h1,h2,h3,h4,p,li,a,blockquote,dt,dd,figcaption{overflow-wrap:break-word}
  :lang(is) p,:lang(is) li,:lang(is) blockquote,:lang(is) .pkg-line,:lang(is) .work-meta p{hyphens:auto;-webkit-hyphens:auto}
  h1,h2,h3{font-family:var(--font-display);font-weight:560;letter-spacing:-.02em}
  /* Entrelinha por escala, não global. Com line-height:.98 em todos os títulos a
     altura de linha caía ABAIXO do font-size (120px de corpo em 118px de linha),
     deixando as linhas apertadas o suficiente para os descendentes (y, p, g)
     quase tocarem os ascendentes da linha seguinte. Só aparecia em título que
     quebra em 2+ linhas — 10 casos no mobile, 8 no desktop; título de uma linha
     nunca mostrou o defeito, por isso passou batido. Um valor <1 serve a display
     de uma linha, não a título que quebra.
     Revisado na rodada 9: 1.12 no h2 saiu do negativo mas seguia visualmente
     apertado num display serif de 64px ("Explorations, not / client work." era o
     caso pior). Besley tem ascendentes altas e olho grande, então precisa de mais
     ar que uma sans no mesmo corpo — daí 1.06 / 1.18 / 1.3. */
  h1{line-height:1.06}
  h2{line-height:1.18}
  h3{line-height:1.3}
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:.7em;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  ::selection{background:var(--accent);color:var(--accent-ink)}


  /* ---------- preloader (M1) ---------- */
  #preloader{
    position:fixed;inset:0;z-index:200;background:var(--bg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  }
  #preloader .pl-brand{font-family:var(--font-display);font-weight:500;font-size:1.4rem;letter-spacing:-.01em;color:var(--ink)}
  #preloader .pl-count{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.15em;color:var(--accent)}
  #preloader .pl-panel{position:absolute;inset:0;background:var(--surface);transform-origin:top}
  .no-scroll{overflow:hidden;height:100%}

  /* ---------- nav ---------- */
  header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,box-shadow .4s,backdrop-filter .4s}
  header.scrolled{background:rgba(7,10,15,.78);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:76px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:560;font-size:1.2rem;letter-spacing:-.01em}
  .brand .mark{width:20px;height:20px;flex:0 0 auto}
  .nav-links{display:flex;gap:34px;align-items:center}
  .nav-links a{font-size:.92rem;color:var(--muted);font-weight:500;position:relative;transition:color .25s}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
  .btn{
    display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-body);font-weight:600;
    font-size:.92rem;padding:.85em 1.35em;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
    transition:transform .3s var(--ease-soft),background .3s,box-shadow .3s;will-change:transform;
    min-height:44px;
  }
  .btn:hover{background:var(--accent-hi);transform:translateY(-2px);box-shadow:0 16px 40px -14px var(--glow)}
  .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-solid)}
  .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-hi);background:transparent}
  .btn .arw{transition:transform .3s var(--ease-soft)}
  .btn:hover .arw{transform:translateX(4px)}
  .nav .btn{padding:.65em 1.2em}
  .lang-toggle{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-solid);border-radius:100px;padding:3px;flex-shrink:0}
  .lang-btn{background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.06em;padding:5px 10px;border-radius:100px;cursor:pointer;transition:background .2s,color .2s;min-height:28px}
  .lang-btn:hover{color:var(--ink)}
  .lang-btn.active{background:var(--glow);color:var(--accent)}
  /* rodada 8: com .nav-links e .nav .btn ocultos, sobram brand + idioma + hambúrguer.
     O margin-left:auto agrupa os dois controles à direita (space-between sozinho os
     espalharia pela barra). */
  @media(max-width:820px){.lang-toggle{order:2;margin-left:auto;margin-right:10px}}
  @media(max-width:820px){.nav-links{display:none}}
  /* rodada 6: em <=820px o CTA do header colidia com o logo (390px: botão por cima
     da marca). O .sticky-cta já cobre a conversão nessa faixa com "Free audit" +
     WhatsApp, então o botão do header é redundante aqui. */
  @media(max-width:820px){.nav .btn{display:none}}

  /* rodada 8: drawer mobile. Até aqui, abaixo de 820px a .nav-links sumia e o CTA do
     header também — sobrava só o .sticky-cta, ou seja, ZERO navegação entre seções no
     celular. O toggle abaixo devolve os 5 links + o CTA num painel sob o header. */
  .nav-toggle{display:none;background:none;border:1px solid var(--line-solid);border-radius:10px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:0 0 auto;transition:border-color .2s,color .2s}
  .nav-toggle:hover{border-color:var(--accent);color:var(--accent)}
  .nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .nav-toggle .bars{display:block;width:18px;height:12px;position:relative}
  .nav-toggle .bars i{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease-soft),opacity .18s}
  .nav-toggle .bars i:nth-child(1){top:0}
  .nav-toggle .bars i:nth-child(2){top:5px}
  .nav-toggle .bars i:nth-child(3){top:10px}
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .nav-drawer{position:fixed;top:76px;left:0;right:0;z-index:97;display:none;background:rgba(7,10,15,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:6px var(--pad-x) 24px;max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
  .nav-drawer[data-open="true"]{display:block;animation:drawerIn .26s var(--ease-out)}
  @keyframes drawerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .nav-drawer a:not(.btn){display:flex;align-items:center;min-height:52px;padding:4px 2px;font-size:1.06rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav-drawer a:not(.btn):hover{color:var(--accent)}
  .nav-drawer .btn{margin-top:18px;width:100%;justify-content:center}
  .nav-scrim{position:fixed;inset:0;z-index:96;background:rgba(3,5,8,.55);display:none}
  .nav-scrim[data-open="true"]{display:block;animation:scrimIn .26s var(--ease-out)}
  @keyframes scrimIn{from{opacity:0}to{opacity:1}}
  .drawer-open{overflow:hidden}
  /* O painel precisa vencer .sticky-cta (90) e .consent (95), senão ambos seguem
     clicáveis por trás do véu — um modal que não bloqueia o fundo. O header sobe junto
     e SÓ enquanto o drawer está aberto (fora disso o consent deve continuar acima
     dele, como sempre foi), para o botão de fechar não ficar sob o scrim. */
  body.drawer-open #hdr{z-index:98}
  /* O CTA do drawer já cobre a conversão enquanto ele está aberto. */
  body.drawer-open .sticky-cta{display:none}
  @media(max-width:820px){.nav-toggle{display:inline-flex;order:3}}
  @media(min-width:821px){.nav-drawer,.nav-scrim{display:none!important}}
  @media(prefers-reduced-motion:reduce){.nav-drawer[data-open="true"],.nav-scrim[data-open="true"]{animation:none}.nav-toggle .bars i{transition:none}}
  /* PACKAGES + CONCEPT DEMOS (portados de main, sistema visual novo) */
  .pkg-cards{display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}
  @media(min-width:900px){.pkg-cards{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:720px){.pkg-card--featured{order:-1}.pkg-line{font-size:1rem}.pkg-tl{font-size:.93rem}}
  .pkg-card{display:flex;flex-direction:column}
  .pkg-card .btn{margin-top:auto;align-self:flex-start}
  .pkg-card--featured{border:1px solid var(--accent);position:relative;background:rgba(255,162,78,.06)}
  .pkg-badge{position:absolute;top:14px;right:30px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:.3em .7em;border-radius:100px;font-weight:600}
  .pkg-price{font-size:1.02rem;margin:.3rem 0 .75rem;color:var(--muted)}
  .pkg-price span,.pkg-price strong{color:var(--accent);font-weight:700}
  .pkg-line{font-size:.9rem;color:var(--muted);margin:.25rem 0}
  .pkg-line strong,.pkg-care p strong{color:var(--ink)}
  .pkg-tl{font-size:.85rem;color:var(--muted);margin:.6rem 0 1.1rem}
  /* rodada 9: os cards de pacote herdavam o padding do .card genérico (32/30/34)
     somado a 29 itens de lista com gap .5rem — cada card virava um bloco de ~750px
     de altura e a grade 2×2 empurrava o preço do último pacote muito abaixo da
     dobra. Aqui a densidade é apertada só nos pacotes; os .card de services e
     results seguem com o respiro original. */
  .pkg-card{padding:26px 24px 28px}
  .pkg-card h3{font-size:1.22rem}
  .pkg-card .pkg-price{margin:.2rem 0 .6rem}
  .pkg-card ul{margin-top:.85rem;gap:.34rem}
  .pkg-card li{font-size:.86rem}
  .pkg-card .pkg-line{margin:.18rem 0}
  .pkg-card .pkg-tl{margin:.5rem 0 .9rem}
  .pkg-card .btn{padding:.7em 1.15em}
  .pkg-badge{top:12px;right:24px}
  .pkg-care{margin-top:34px;max-width:760px;margin-inline:auto}
  .pkg-note{margin-top:28px;color:var(--muted);font-size:.92rem}
  .concept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
  .concept-grid .work-card{width:auto}
  .concept-grid .work-art{aspect-ratio:16/10;height:auto}
  .concept-grid .work-art::after{content:"CONCEPT";position:absolute;top:10px;left:10px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;color:var(--ink);background:rgba(7,10,15,.55);border:1px solid var(--line);padding:.3em .6em;border-radius:100px;pointer-events:none}
  .concept-grid .tag{color:var(--muted);border:1px solid var(--line-solid);padding:.25em .55em;border-radius:100px}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:168px 0 90px;overflow:hidden}
  .hero .wrap{position:relative;z-index:2}
  /* backdrop do hero (rodada 5, decisão Vitor): a foto/vídeo de aurora saiu — competia
     com a headline (verde/roxo brilhante vs serif + accent) e exigia scrim pesado pra
     manter AA; e eram ~4.7MB no caminho do LCP. No lugar: glow de aurora sutil e
     ESTÁTICO em radial-gradient (sem blur/filter = custo de paint zero no scroll).
     Contraste da headline sobre --bg puro: AAA. */
  .hero::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(58% 42% at 82% 8%,  rgba(61,240,166,.07), transparent 70%),
      radial-gradient(48% 38% at 12% 30%, rgba(76,198,255,.06), transparent 70%),
      radial-gradient(60% 50% at 70% 96%, rgba(255,162,78,.05), transparent 72%);
  }
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
  @media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:34px}}
  h1.title{font-size:clamp(3rem,9vw,7.5rem);font-weight:500;letter-spacing:-.02em}
  h1.title .ln{display:block;overflow:hidden}
  h1.title .ln > span{display:block}
  h1.title em{font-style:italic;color:var(--accent);font-weight:460}
  /* ressalva Argos: o título em islandês (mais longo) quebrava em 2 linhas DENTRO de
     cada .ln (que só tem altura pra 1 linha) — a máscara "vazava" e o hero estourava
     900px de viewport em ~135px. Aperta o clamp só em lang=is, o bastante pra cada
     .ln continuar de 1 linha só nos dois breakpoints testados (1440x900, 1280x800). */
  html[lang="is"] h1.title{font-size:clamp(2.2rem,6.2vw,4.6rem)}
  html[lang="is"] .lead{max-width:40ch}
  .lead{margin-top:1.6rem;max-width:36ch;font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--muted)}
  .hero-cta{margin-top:2.3rem;display:flex;gap:14px;flex-wrap:wrap}
  .hero-side{padding-bottom:8px}
  /* SERP demo (rodada 5) — substitui a spark 3D em fatias CSS (serrilhava feio,
     print do Vitor). Dramatiza a headline ao vivo: busca digitando + o negócio
     do cliente fixo em #1. Fala com qualquer negócio local, não só Islândia. */
  .serp{margin-bottom:18px;background:var(--surface-2);border:1px solid var(--line-solid);border-radius:var(--r-md);padding:16px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
  .serp-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-solid);border-radius:100px;padding:.62em 1em}
  .serp-bar svg{flex:0 0 auto;color:var(--muted)}
  .serp-q{font-family:var(--font-mono);font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden}
  .serp-caret{display:inline-block;width:1px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:serpCaret 1.05s steps(1) infinite}
  @keyframes serpCaret{50%{opacity:0}}
  .serp-hits{margin-top:12px;display:grid;gap:8px}
  .serp-hit{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  .serp-hit--you{border-color:rgba(255,162,78,.55);background:rgba(255,162,78,.07)}
  .serp-hit--you .t{color:var(--ink);font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:8px}
  .serp-hit--you .u{font-family:var(--font-mono);font-size:.68rem;color:var(--accent);margin-top:.3rem;letter-spacing:.04em}
  .serp-rank{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;color:var(--accent-ink);background:var(--accent);border-radius:100px;padding:.28em .6em}
  .serp-hit--ghost{display:grid;gap:6px;padding:12px}
  .serp-hit--ghost i{display:block;height:7px;border-radius:4px;background:var(--line-solid);opacity:.65}
  .serp-hit--ghost i:last-child{width:58%}
  @media(max-width:940px){.serp{padding:13px}.serp-hits{gap:7px}}
  @media(prefers-reduced-motion:reduce){.serp-caret{display:none}}
  .stat-card{
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px;
    box-shadow:0 40px 80px -50px rgba(0,0,0,.7);
  }
  .stat-card .k{font-family:var(--font-display);font-weight:560;font-size:2.9rem;line-height:1;letter-spacing:-.02em}
  .stat-card .k b{color:var(--accent);font-weight:560}
  .stat-card .lbl{color:var(--muted);font-size:.88rem;margin-top:.4rem}
  .stat-card hr{border:0;border-top:1px solid var(--line);margin:18px 0}
  .stat-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;color:var(--muted)}
  .stat-row + .stat-row{margin-top:10px}
  .stat-row span:last-child{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
  .trust{margin-top:26px;font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:.7em}
  .trust .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

  /* ---------- marquee (M7) ---------- */
  .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden;padding:18px 0;position:relative;z-index:2}
  .marquee-track{display:flex;gap:44px;white-space:nowrap;width:max-content;will-change:transform}
  .marquee-track span{font-family:var(--font-display);font-weight:500;font-size:1.1rem;color:var(--muted);display:inline-flex;align-items:center;gap:44px}
  .marquee-track span::after{content:"◆";color:var(--accent);font-size:.6rem}

  /* ---------- generic section ---------- */
  section{position:relative;z-index:2}
  /* fullpage estrito (rodada 4, P0) — só existe enquanto html.fp-active; cada painel vira
     sua própria área de scroll interno (seção mais alta que a viewport rola por dentro
     antes do Observer trocar de seção — ver tryAdvance no JS). */
  html.fp-active .fp-panel{
    position:fixed; inset:0; height:100vh; height:100svh; width:100%;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  html.fp-active .marquee{position:fixed; left:0; right:0; bottom:0; z-index:3}
  .band{padding:var(--space-band) 0}
  /* rodada 9: o max-width:56ch vivia no CONTAINER, então prendia o h2 de 64px na
     mesma medida do parágrafo (~486px, calculada no corpo de 16px) — "Pick what
     makes sense for your business right now." quebrava em 5 linhas numa coluna
     estreita com 1280px livres ao lado. O limite de leitura pertence ao parágrafo;
     o título ganha medida própria em `em`, que escala com o próprio font-size e
     mantém a contagem de linhas estável do mobile ao desktop, em vez de explodir
     só onde a fonte é grande. */
  .sec-head{max-width:none}
  .sec-head > p{max-width:56ch}
  .sec-head h2{max-width:13em}
  .sec-head h2{font-size:clamp(2rem,5vw,4rem);margin-top:1rem;font-weight:500}
  .sec-head p{margin-top:1.1rem;color:var(--muted);font-size:1.05rem;max-width:48ch}
  .reveal{opacity:0;transform:translateY(40px)}
  .basalt-rule{height:0;width:2px;background:var(--line-solid);transform:scaleY(0);transform-origin:top}

  /* problem statement (M10) */
  .statement-wrap{min-height:66vh;display:flex;align-items:center}
  .statement{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,4.5vw,3.4rem);line-height:1.12;letter-spacing:-.01em;max-width:20ch}
  .statement .word{color:var(--muted);display:inline-block}
  .problem-grid{display:grid;grid-template-columns:1fr .8fr;gap:56px;align-items:center}
  @media(max-width:860px){.problem-grid{grid-template-columns:1fr;gap:32px}}
  .problem-aside{border-left:2px solid var(--accent);padding-left:24px;color:var(--muted)}
  .problem-aside p + p{margin-top:1rem}

  /* ---------- WORK gallery (M6, new) ---------- */
  .work-pin{background:var(--surface);overflow:hidden}
  .work-head{padding-top:clamp(64px,9vw,120px);padding-bottom:40px}
  .work-note{margin-top:.9rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;color:var(--muted);opacity:.85}
  .work-viewport{position:relative;padding-bottom:28px}
  /* rodada 6: os cards usavam só --pad-x (56px) enquanto o texto vive no .wrap
     (max-width:1280 + margin auto + padding 56) e começa em 136px num viewport de
     1440 — 80px de desalinhamento. --work-gutter reproduz a calha do .wrap: some a
     margem de centralização ao pad-x, e cai pra só o pad-x abaixo de 1280. */
  .work-pin{--work-gutter:calc(max(0px,(100% - 1280px)/2) + var(--pad-x))}
  .work-track{display:flex;gap:16px;padding:0 var(--work-gutter);align-items:flex-start;will-change:transform}
  @media(min-width:860px){.work-track{gap:26px}}
  /* rodada 9: 78vw deixava o card pequeno; 86vw dava presença mas empurrava o
     próximo para fora (9px visíveis num viewport de 390), matando a afordância de
     swipe — e as setas ficam escondidas abaixo de 640px, então a espiada é o único
     sinal de que há mais. 80vw com gap menor equilibra: card maior que antes e
     ~40px do seguinte à vista. */
  .work-card{
    display:block;flex:0 0 auto;width:min(80vw,420px);border-radius:var(--r-lg);overflow:hidden;
    background:var(--surface-2);border:1px solid var(--line);
    box-shadow:0 40px 80px -50px rgba(0,0,0,.7);
    transition:transform .3s var(--ease-soft),box-shadow .3s;
  }
  .work-card:hover,.work-card:focus-visible{transform:translateY(-4px);box-shadow:0 50px 90px -46px rgba(0,0,0,.8)}
  /* rodada 5: previews são screenshots LANDSCAPE (1100×568/544, 932×837) — o frame
     4:5 portrait + overscan de 120% mostrava só uma fatia do site. 16:10 + cover
     ancorado no topo mostra o hero real de cada projeto. */
  .work-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
  .work-art .art-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--ease-soft)}
  .work-card:hover .art-fill,.work-card:focus-visible .art-fill{transform:scale(1.06)}
  .work-art .art-idx{position:absolute;left:18px;bottom:16px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:rgba(244,241,234,.75)}
  .work-art .art-lines{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(7,10,15,.16) 0 2px,transparent 2px 26px);mix-blend-mode:multiply;opacity:.5}
  .work-meta{padding:18px 20px 20px;overflow:hidden}
  .work-meta .m-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .work-meta h3{font-size:1.1rem;font-weight:500}
  .work-meta .tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;white-space:nowrap}
  .work-meta p{margin-top:.4rem;color:var(--muted);font-size:.88rem}
  .work-bar-row{display:flex;align-items:center;gap:18px;margin-top:0;padding:0 var(--work-gutter) 8px}
  /* rodada 6: setas próprias. A scrollbar nativa do scroller ficava visível (15px,
     cinza, com setas do SO) logo abaixo dos cards — era a "barra feia" da galeria. */
  .work-nav{display:flex;gap:8px;flex:0 0 auto}
  .work-nav button{
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:transparent;border:1px solid var(--line-solid);color:var(--ink);
    cursor:pointer;transition:background .25s,border-color .25s,opacity .25s;
  }
  .work-nav button:hover:not(:disabled){background:var(--surface-2);border-color:var(--accent)}
  .work-nav button:disabled{opacity:.3;cursor:default}
  .work-nav svg{width:15px;height:15px}
  @media(max-width:640px){.work-nav{display:none}}
  .work-counter{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);letter-spacing:.08em;white-space:nowrap}
  .work-counter b{color:var(--accent);font-weight:500}
  .work-progress{flex:1;height:2px;background:var(--line-solid);position:relative;overflow:hidden}
  .work-progress i{position:absolute;inset:0;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
  @media(min-width:860px){
    .work-head{padding-top:clamp(56px,7vw,88px);padding-bottom:44px}
    .work-head .sec-head-work{max-width:64ch}
  }
  /* rodada 9: no desktop os 3 projetos ficam na MESMA tela, sem carrossel.
     Antes a arte era dimensionada pela ALTURA (height:min(42vh,380px) + 16/10),
     o que dava ~608px de largura por card; 3×608 + gaps = ~1824px contra os
     1168px úteis de um viewport 1440 — o 3º card ficava cortado pela borda e só
     aparecia arrastando. Grid de 3 colunas resolve a largura sozinho (1fr) e
     respeita a calha do track, então não há mais nada a rolar: o scroller fica
     sem overflow e as setas/progresso saem de cena (UI morta se ficassem). */
  @media(min-width:1024px){
    .work-viewport.native{overflow-x:hidden;scroll-snap-type:none}
    .work-track{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch}
    .work-card{width:auto}
    .work-art{height:auto;width:100%;aspect-ratio:16/10}
    .work-bar-row{display:none}
  }
  /* mobile / reduced-motion fallback: native horizontal scroll-snap */
  .work-viewport.native{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  /* rodada 6: esconde a scrollbar nativa (o controle passa a ser .work-nav + swipe).
     O scroller continua acessível por teclado — o viewport tem tabindex="0". */
  .work-viewport.native{scrollbar-width:none;-ms-overflow-style:none}
  .work-viewport.native::-webkit-scrollbar{width:0;height:0;display:none}
  .work-viewport.native .work-track{scroll-snap-type:x proximity}
  .work-viewport.native .work-card{scroll-snap-align:start}
  /* rodada 6: sem isto o snap encosta o card na borda do scroller e rola sozinho os
     136px da calha no load — era o que jogava o 1º card contra a margem da tela. */
  .work-viewport.native{scroll-padding-left:var(--work-gutter)}
  /* rodada 4 fix: no fullpage (>=1024px) o snap nativo do browser brigava com o
     scrollLeft que o tryAdvance atribui por wheel (o browser "corrigia" o valor pro
     card mais próximo antes do JS conseguir ler quanto ainda faltava rolar). Nessa
     faixa o JS controla o incremento sozinho via gsap.to(scrollLeft), sem CSS snap. */
  .work-viewport.native.fp-nosnap,
  .work-viewport.native.fp-nosnap .work-track{scroll-snap-type:none}

  /* ---------- always-on / automation (rodada 6) ---------- */
  .auto-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,80px);align-items:center}
  @media(max-width:940px){.auto-grid{grid-template-columns:1fr;gap:44px}}
  .auto-list{margin-top:40px;display:grid;gap:26px}
  .auto-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
  .auto-list .n{
    font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--accent);
    border:1px solid var(--line-solid);border-radius:100px;padding:.35em .7em;line-height:1;margin-top:.15rem;
  }
  .auto-list h3{font-size:1.02rem;font-weight:500}
  .auto-list p{margin-top:.3rem;color:var(--muted);font-size:.92rem;max-width:46ch}
  .auto-cta{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}
  /* mock de conversa: ilustração (aria-hidden) — o conteúdo real vive na lista ao lado */
  .chat{
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:24px 22px;box-shadow:0 40px 80px -50px rgba(0,0,0,.7);display:grid;gap:14px;
  }
  .chat-top{
    display:flex;align-items:center;gap:9px;padding-bottom:14px;border-bottom:1px solid var(--line);
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;
  }
  .chat-dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:0 0 auto}
  .bubble{max-width:82%;padding:11px 14px;border-radius:16px;font-size:.9rem;line-height:1.45}
  .bubble.them{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;justify-self:start}
  .bubble.us{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:5px;justify-self:end}
  .bubble .t{display:block;margin-top:5px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;opacity:.6}

  /* services */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
  @media(max-width:860px){.cards{grid-template-columns:1fr}}
  .card{
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px 34px;
    transition:transform .45s var(--ease-soft),box-shadow .45s,border-color .45s;will-change:transform;
  }
  .card:hover{transform:translateY(-6px);box-shadow:0 40px 80px -50px rgba(0,0,0,.8),0 16px 40px -14px var(--glow);border-color:rgba(255,162,78,.35)}
  .card .ico{width:44px;height:44px;border-radius:12px;background:var(--surface);display:grid;place-items:center;margin-bottom:22px;color:var(--accent)}
  .card h3{font-size:1.4rem;font-weight:500}
  .card p{margin-top:.7rem;color:var(--muted);font-size:.98rem}
  .card ul{list-style:none;margin-top:1.1rem;display:flex;flex-direction:column;gap:.5rem}
  .card li{font-size:.9rem;color:var(--ink);display:flex;gap:.6em;align-items:center}
  .card li::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--accent);flex:0 0 auto;transform:rotate(45deg)}

  /* process (M8) */
  .process{background:var(--surface)}
  .steps{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  @media(max-width:860px){.steps{grid-template-columns:1fr}}
  .step{padding:30px 26px 34px;border-top:1px solid var(--line);position:relative}
  .step:not(:last-child){border-right:1px solid var(--line)}
  @media(max-width:860px){.step:not(:last-child){border-right:0}}
  .step .no{font-family:var(--font-mono);font-weight:500;font-size:.85rem;color:var(--accent);letter-spacing:.08em}
  .step h3{color:var(--ink);font-size:1.3rem;margin-top:22px;font-weight:500}
  .step p{color:var(--muted);font-size:.94rem;margin-top:.6rem}
  .step .bar{width:3px;height:46px;background:var(--line-solid);margin-top:22px;overflow:hidden}
  .step .bar i{display:block;width:100%;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top}

  /* results */
  .results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
  @media(max-width:860px){.results-grid{grid-template-columns:1fr}}
  .metric{padding:30px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
  .metric .k{font-family:var(--font-display);font-weight:560;font-size:clamp(2.6rem,5vw,4rem);letter-spacing:-.02em;line-height:1}
  .metric .k .suf{color:var(--accent)}
  .metric .lbl{color:var(--muted);margin-top:.5rem;font-size:.96rem}
  .quote{margin-top:64px;max-width:46ch}
  .quote blockquote{font-family:var(--font-display);font-weight:460;font-style:italic;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.24;letter-spacing:-.005em}
  .quote .who{margin-top:1.2rem;color:var(--muted);font-size:.94rem}
  .quote .who b{color:var(--ink);font-weight:600}

  /* cta */
  .cta{position:relative;overflow:hidden}
  .cta .panel{
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(48px,7vw,88px);position:relative;overflow:hidden;
  }
  .cta .panel .glow{position:absolute;inset:auto -10% -60% auto;width:70%;height:180%;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
  .cta h2{color:var(--ink);font-size:clamp(2.2rem,5.4vw,4rem);max-width:16ch;position:relative;font-weight:500}
  .cta p{color:var(--muted);margin-top:1.2rem;max-width:42ch;position:relative}
  .cta .hero-cta{position:relative}
  /* form Netlify real (rodada 4) */
  .cta-form{position:relative;margin-top:2rem;max-width:46ch}
  .cta-form-hidden{position:absolute;left:-9999px}
  .cta-form-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .cta-input{
    flex:1;min-width:180px;background:var(--surface);border:1px solid var(--line-solid);
    border-radius:var(--r-sm);color:var(--ink);font-family:var(--font-body);font-size:.95rem;
    padding:.85em 1em;min-height:44px;transition:border-color .2s;
  }
  .cta-input:focus{outline:none;border-color:var(--accent)}
  .cta-input::placeholder{color:var(--muted)}
  select.cta-input{appearance:none;-webkit-appearance:none}
  select.cta-input option{background:var(--surface)}
  .cta-form-note{margin-top:.9rem;color:var(--muted);font-size:.82rem}
  .cta-more{margin:4px 0 14px;border:1px solid var(--line-solid);border-radius:var(--r-sm);background:rgba(255,255,255,.015)}
  .cta-more summary{cursor:pointer;list-style:none;padding:12px 14px;font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px}
  .cta-more summary::-webkit-details-marker{display:none}
  .cta-more summary::before{content:'+';color:var(--accent);font-size:1rem}
  .cta-more[open] summary::before{content:'−'}
  .cta-more textarea.cta-input{width:100%;resize:vertical;min-height:80px;font-family:var(--font-body);margin-bottom:12px}
  .cta-more > .cta-form-row,.cta-more > textarea{margin-left:14px;margin-right:14px;width:calc(100% - 28px)}
  .form-status{min-height:20px;margin-top:.7rem;font-size:.88rem;color:var(--muted)}
  .form-status.error{color:#ff8577}
  .form-success{display:none;margin-top:2rem;max-width:46ch}

  /* footer */
  footer{padding:64px 0 40px;border-top:1px solid var(--line);position:relative;z-index:2}
  .foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
  .foot .brand{margin-bottom:14px}
  .foot p{color:var(--muted);font-size:.92rem;max-width:30ch}
  .foot-cols{display:flex;gap:64px;flex-wrap:wrap}
  .foot-col h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:500}
  .foot-col a{display:block;color:var(--muted);font-size:.95rem;padding:5px 0;transition:color .25s}
  .foot-col a:hover{color:var(--accent)}
  .foot-base{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;font-family:var(--font-mono)}

  /* custom cursor (M9, desktop fine-pointer only) */
  .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:100;border-radius:50%;transform:translate(-50%,-50%);opacity:0}
  /* só aparece depois do primeiro pointermove real (rodada 4 fix: nascia visível parado
     em 0,0/top-left — no touch ficava assim pra sempre, no desktop parecia "logo bugado"
     até o primeiro movimento do mouse). */
  body.has-custom-cursor.cursor-live .cursor-dot,
  body.has-custom-cursor.cursor-live .cursor-ring{opacity:1}
  .cursor-dot{width:6px;height:6px;background:var(--accent)}
  /* crescimento do ring é via GSAP scale (JS, M9) — não animar width/height (layout thrash) */
  .cursor-ring{width:34px;height:34px;border:1px solid rgba(255,162,78,.5);transition:border-color .25s}
  .cursor-ring.big{border-color:var(--accent)}
  body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button{cursor:none}

  /* ---------- WhatsApp widget (rodada 4) ---------- */
  .wa-float{position:fixed;bottom:26px;right:26px;z-index:90}
  .wa-float-btn{
    width:52px;height:52px;border-radius:50%;background:#25D366;color:#07130c;
    display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -10px rgba(37,211,102,.55);
    transition:transform .25s var(--ease-soft);
  }
  .wa-float-btn:hover{transform:scale(1.08)}
  @media(max-width:820px){.wa-float{display:none}}
  .sticky-cta{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:9px;padding:10px 14px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, var(--bg) 55%, transparent);
  }
  .sticky-cta .btn{flex:1;justify-content:center;min-height:46px}
  @media(max-width:820px){.sticky-cta{display:flex}}

  /* ---------- cookie consent (rodada 4, GDPR) ---------- */
  .consent{
    position:fixed;left:18px;bottom:18px;z-index:95;max-width:324px;
    background:var(--surface-2);border:1px solid var(--line-solid);border-radius:var(--r-md);
    padding:14px 14px 12px;box-shadow:0 14px 40px rgba(0,0,0,.42);
  }
  .consent[hidden]{display:none}
  .consent p{font-size:.8rem;color:var(--muted);line-height:1.5;margin-bottom:10px}
  .consent-actions{display:flex;gap:8px;flex-wrap:wrap}
  .consent-actions .btn{font-size:.78rem;padding:.5em .95em;min-height:34px}
  @media(max-width:820px){.consent{left:12px;right:12px;max-width:none;bottom:calc(78px + env(safe-area-inset-bottom))}}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1!important;transform:none!important}
    .basalt-rule{transform:scaleY(1)!important}
    #preloader{display:none!important}
    .cursor-dot,.cursor-ring{display:none!important}
  }