/* =========================================================
   SpaceDev — folha de estilo
   Camadas: reset → tokens → base → layout → components
            → sections → mockups → responsive
   ========================================================= */
@layer reset, tokens, base, layout, components, sections, mockups, responsive;

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg, canvas { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; }
  h1, h2, h3, p, blockquote, ol, ul { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* cor */
    --blue: #2E2BFF;
    --blue-deep: #1C19C9;
    --night: #070833;
    --paper: #F3F4F8;
    --ink: #0D0E1C;
    --lilac: #C7C6FF;
    --muted: #5A5D78;
    --line: #D9DBE6;
    --paper-70: rgba(243, 244, 248, .72);
    --paper-35: rgba(243, 244, 248, .35);

    /* tipo */
    --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-body: 1.0625rem;
    --fs-lede: clamp(1.0625rem, 1.3vw, 1.25rem);
    --fs-h3: 1.3rem;
    --fs-h2: clamp(2.4rem, 5.4vw, 5rem);
    --fs-hero: clamp(3.2rem, 7vw, 7.4rem);
    --fs-mega: clamp(3rem, 9vw, 9.5rem);

    /* espaço */
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --max: 1360px;
    --section: clamp(5rem, 10vw, 9rem);

    /* movimento */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.76, 0, .24, 1);

    /* camadas */
    --z-stage: 1;
    --z-float: 40;
    --z-header: 50;
    --z-preview: 70;
    --z-grain: 80;
    --z-cursor: 90;
    --z-loader: 100;
  }
}

/* ---------- base ---------- */
@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: inherit; }
  ::selection { background: var(--blue); color: #fff; }
  :focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; border-radius: 6px; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }

  .display { font-stretch: 75%; font-weight: 700; letter-spacing: -.025em; line-height: .9; }
  h2.display { font-size: var(--fs-h2); }
  .lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 34em; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* máscaras usadas pelas revelações de texto */
  .wm { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .02em .08em; margin: -.1em -.02em -.08em; }
  .wi { display: inline-block; will-change: transform; }
}

/* ---------- layout ---------- */
@layer layout {
  .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
  .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
  .split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
}

/* ---------- components ---------- */
@layer components {
  /* botão: o preenchimento nasce do ponto onde o mouse entra */
  .btn {
    --fill: var(--blue); --fill-ink: #fff;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; gap: .7em;
    padding: 1.05em 1.6em; border-radius: 999px; border: 0; cursor: pointer;
    font-weight: 600; font-size: 1rem; text-decoration: none;
    transition: color .45s var(--ease), box-shadow .3s;
    will-change: transform;
  }
  .btn::after {
    content: ""; position: absolute; z-index: -1;
    left: var(--x, 50%); top: var(--y, 50%); width: 260%; aspect-ratio: 1; border-radius: 50%;
    background: var(--fill); transform: translate(-50%, -50%) scale(0);
    transition: transform .65s var(--ease);
  }
  .btn:hover::after, .btn:focus-visible::after { transform: translate(-50%, -50%) scale(1); }
  .btn:hover, .btn:focus-visible { color: var(--fill-ink); }
  .btn svg { width: 1.15em; height: 1.15em; flex: none; }
  .btn-light { background: var(--paper); color: var(--ink); }
  .btn-ghost { --fill: var(--paper); --fill-ink: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper-35); }
  .btn-blue { --fill: var(--night); background: var(--blue); color: #fff; }

  /* header */
  .top { position: fixed; inset: 0 0 auto; z-index: var(--z-header); padding-top: env(safe-area-inset-top, 0px); }
  .top-in {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: calc(100% - 2 * var(--gutter) + 2rem); max-width: calc(var(--max) - 2 * var(--gutter) + 2rem);
    margin: clamp(1rem, 2vw, 1.5rem) auto 0; padding: .6rem .6rem .6rem 1.2rem; border-radius: 999px;
  }
  /* o fundo da pílula fica num pseudo-elemento: blur/transform no próprio .top-in
     prenderiam o menu mobile (position: fixed) dentro da pílula */
  .top-in::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: rgba(7, 8, 51, .93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px -12px rgba(7, 8, 51, .5);
    opacity: 0; transition: opacity .5s;
  }
  .top.scrolled .top-in::before { opacity: 1; }
  .brand img { height: 30px; width: auto; }
  .nav { display: flex; align-items: center; gap: .25rem; }
  .nav a:not(.btn) { position: relative; color: var(--paper); text-decoration: none; font-size: .95rem; font-weight: 500; padding: .55em .95em; }
  .nav a:not(.btn)::after { content: ""; position: absolute; left: .95em; right: .95em; bottom: .35em; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
  .nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
  .nav .btn { padding: .75em 1.25em; margin-left: .4rem; font-size: .95rem; }
  .menu-btn { display: none; background: none; border: 0; padding: .7rem; cursor: pointer; color: var(--paper); }
  .menu-btn span { display: block; width: 24px; height: 2px; margin: 5px 0; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
  .menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* abertura */
  .loader { position: fixed; inset: 0; z-index: var(--z-loader); background: var(--night); color: var(--paper); display: grid; place-items: center; animation: loader-failsafe .5s 8s forwards; }
  /* plano B: se o JavaScript não rodar, a abertura some sozinha */
  @keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
  .loader-inner { display: grid; justify-items: center; gap: 1.5rem; }
  .loader-planet { width: clamp(140px, 22vw, 220px); overflow: visible; }
  .loader-word { font-size: .95rem; color: var(--paper-70); letter-spacing: .01em; }
  .loader-num { position: absolute; right: var(--gutter); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); font-size: clamp(4rem, 12vw, 10rem); font-stretch: 75%; font-weight: 700; line-height: .8; color: var(--lilac); font-variant-numeric: tabular-nums; }
  html:not(.js) .loader, html.intro-seen .loader { display: none; }

  /* cursor */
  .cursor { display: none; }
  html.has-cursor .cursor { display: block; }
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary { cursor: none; }
  .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; }
  .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
  .cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; mix-blend-mode: difference; }
  .cursor.labeled .cursor-ring { mix-blend-mode: normal; }
  .cursor-ring-in {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    border: 1.5px solid #fff;
    transition: transform .5s var(--ease), background-color .3s, border-color .3s;
  }
  .cursor.hover .cursor-ring-in { transform: scale(1.6); }
  .cursor.labeled .cursor-ring-in { transform: scale(2.3); background: var(--blue); border-color: var(--blue); }
  .cursor.labeled .cursor-dot { opacity: 0; }
  .cursor.down .cursor-ring-in { transform: scale(.8); }
  .cursor.gone { opacity: 0; }
  .cursor-label { font-style: normal; font-size: 5.5px; font-weight: 700; color: #fff; opacity: 0; transition: opacity .2s; letter-spacing: .02em; }
  .cursor.labeled .cursor-label { opacity: 1; }

  /* granulado */
  .grain {
    position: fixed; inset: -50%; z-index: var(--z-grain); pointer-events: none; opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1s steps(6) infinite;
  }
  @keyframes grain {
    0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
    60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, 2%); } 100% { transform: translate(0, 0); }
  }

  /* prévia flutuante dos serviços */
  .svc-preview { position: fixed; left: 0; top: 0; z-index: var(--z-preview); pointer-events: none; width: 300px; display: none; }
  html.has-cursor .svc-preview { display: block; }
  .pv-in { transform: scale(0) rotate(-8deg); opacity: 0; transition: transform .55s var(--ease), opacity .3s; transform-origin: 50% 100%; }
  .svc-preview.on .pv-in { transform: none; opacity: 1; }
  .pv-in .mock { max-width: none; }

  /* whatsapp flutuante com anel de progresso da página */
  .wa-float {
    position: fixed; z-index: var(--z-float);
    right: clamp(1rem, 2.5vw, 1.75rem); bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ink); color: #fff; box-shadow: 0 14px 34px -10px rgba(7, 8, 51, .6);
    transform: translateY(160%) rotate(-90deg); transition: transform .8s var(--ease), background-color .25s;
  }
  .wa-float.show { transform: none; }
  .wa-float:hover { background: var(--blue); }
  .wa-ic { width: 26px; height: 26px; }
  .wa-progress { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .wa-progress circle { fill: none; stroke: var(--lilac); stroke-width: 2.5; stroke-linecap: round; }

  /* cortina de transição entre a agência e a SpaceTech */
  .curtain {
    position: fixed; inset: 0; z-index: calc(var(--z-loader) + 1); pointer-events: none;
    display: grid; place-items: center; background: #06061A; color: var(--paper);
    transform: translateY(101%); visibility: hidden;
  }
  .curtain-label { font-size: clamp(3rem, 10vw, 8rem); font-weight: 700; font-stretch: 75%; letter-spacing: -.02em; line-height: 1; }
  html.curtain-in .curtain { transform: none; visibility: visible; animation: curtain-failsafe .01s 4s forwards; }
  html.curtain-go .curtain { transform: none; visibility: visible; pointer-events: auto; transition: transform .75s var(--ease-in-out); }
  html.curtain-out .curtain { transform: translateY(-101%); visibility: visible; transition: transform .9s var(--ease-in-out); }
  /* plano B: se o JavaScript não rodar, a cortina some sozinha */
  @keyframes curtain-failsafe { to { visibility: hidden; } }

  /* link da SpaceTech no menu */
  .nav .nav-tech { display: inline-flex; align-items: center; gap: .45em; }
  .nav .nav-tech::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #B66CFF; box-shadow: 0 0 0 4px rgba(182, 108, 255, .25); }
}

/* ---------- sections ---------- */
@layer sections {

  /* HERO */
  .hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: 7.5rem 4rem; background: var(--blue); color: var(--paper); }
  .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 78% 45%, rgba(199, 198, 255, .3), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(7, 8, 51, .45), transparent 70%); }
  .stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hero-grid { position: relative; z-index: var(--z-stage); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem; width: 100%; }
  .hero-title { font-size: var(--fs-hero); line-height: .88; perspective: 600px; }
  .hero-title .ln { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
  .hero-title .ln > span { display: block; }
  .hero-title .soft { color: var(--lilac); }
  .hero-title .word { display: inline-block; white-space: nowrap; }
  .hero-title .ch { display: inline-block; transform-origin: 50% 100%; will-change: transform; }
  .hero .lede { margin: 2rem 0 2.4rem; color: rgba(243, 244, 248, .86); }

  .stage { position: relative; width: min(100%, 640px); aspect-ratio: 1; margin-inline: auto; justify-self: center; }
  .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .ring-back { z-index: 1; }
  .ring-front { z-index: 3; }
  .planet {
    position: absolute; z-index: 2; left: 26%; top: 26%; width: 48%; height: 48%; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 68% 26%, #9C9AFF 0, #4744F0 22%, #1B1AA8 48%, #0A0B4F 72%, #05062A 100%);
    box-shadow: inset -18px -26px 60px rgba(5, 6, 42, .55), inset 10px 12px 30px rgba(199, 198, 255, .25), 0 40px 90px -20px rgba(7, 8, 51, .55), 0 0 120px rgba(199, 198, 255, .25);
  }
  .planet::before { /* faixas que deslizam: dão a sensação de rotação */
    content: ""; position: absolute; inset: -20% -60%;
    background: repeating-linear-gradient(-22deg, transparent 0 22px, rgba(199, 198, 255, .07) 22px 34px, transparent 34px 52px, rgba(7, 8, 51, .18) 52px 60px);
    animation: bands 14s linear infinite;
  }
  .planet::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .35), transparent 35%); }
  @keyframes bands { to { transform: translateX(-104px); } }

  .sat { position: absolute; left: 0; top: 0; z-index: 4; text-decoration: none; will-change: transform; }
  .sat-in {
    --dp: 1;
    display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
    padding: .55em 1em .55em .7em; border-radius: 999px; background: var(--paper); color: var(--ink);
    font-size: clamp(.8rem, 1.05vw, .95rem); font-weight: 600;
    box-shadow: 0 12px 28px -10px rgba(7, 8, 51, .55);
    opacity: calc(.4 + var(--dp) * .6); filter: blur(calc((1 - var(--dp)) * 1.4px));
    transition: background-color .25s, color .25s;
  }
  .sat-in::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--blue); }
  .sat:hover .sat-in { background: var(--ink); color: var(--paper); }
  .sat:hover .sat-in::before { background: var(--lilac); }
  html:not(.js) .sats { display: none; }

  .hero-foot { position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: var(--z-stage); display: flex; justify-content: space-between; align-items: center; font-size: .875rem; color: var(--paper-70); }
  .scroll-cue { display: inline-flex; align-items: center; gap: .6rem; }
  .scroll-cue i { position: relative; display: block; width: 1px; height: 34px; overflow: hidden; background: var(--paper-35); }
  .scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--paper); animation: cue 2.2s var(--ease) infinite; }
  @keyframes cue { to { top: 110%; } }

  /* FAIXA GIGANTE */
  .ticker { overflow: hidden; padding-block: clamp(2rem, 4vw, 3.5rem); background: var(--paper); border-bottom: 1px solid var(--line); }
  .ticker-line { will-change: transform; }
  .ticker-row { display: flex; align-items: center; width: max-content; will-change: transform; }
  .ticker-row > * { flex: none; }
  .ticker-row span { padding-inline: clamp(1rem, 2vw, 2rem); font-size: clamp(3rem, 9vw, 8.5rem); font-stretch: 75%; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); }
  .ticker-row span.o { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
  .ticker-line + .ticker-line .ticker-row span { color: var(--blue); }
  .ticker-line + .ticker-line .ticker-row span.o { color: transparent; -webkit-text-stroke-color: var(--blue); }
  .t-planet { width: clamp(2.2rem, 5vw, 4.5rem); height: auto; overflow: visible; fill: var(--blue); stroke: var(--blue); stroke-width: 5; animation: tspin 9s linear infinite; }
  .t-planet ellipse { fill: none; }
  .ticker-line + .ticker-line .t-planet { fill: var(--ink); stroke: var(--ink); }
  @keyframes tspin { to { transform: rotate(360deg); } }

  /* CLIENTES */
  .clients { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
  .clients-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
  .clients-head p { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.2; max-width: 22em; }
  .clients-head small { color: var(--muted); font-size: .95rem; }
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-track { --gap: clamp(2.5rem, 5vw, 5rem); display: flex; align-items: center; gap: var(--gap); width: max-content; animation: marquee 70s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee img { height: clamp(44px, 5vw, 64px); width: auto; max-width: 200px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .62; transition: filter .4s, opacity .4s, transform .5s var(--ease); }
  .marquee img.light { filter: grayscale(1) brightness(.55) contrast(1.6); } /* logos claros (dourados) somem no cinza */
  .marquee img:hover { filter: none; opacity: 1; transform: scale(1.12); }
  @keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

  /* selo Hostinger no hero */
  .hero-partner { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.8rem; text-decoration: none; color: rgba(243, 244, 248, .8); font-size: .85rem; line-height: 1.3; }
  .hero-partner img { height: 44px; width: auto; border-radius: 10% / 26.7%; box-shadow: 0 10px 26px -10px rgba(7, 8, 51, .6); transition: transform .5s var(--ease); }
  .hero-partner:hover img { transform: translateY(-3px) rotate(-2deg); }

  /* PARCEIRO HOSTINGER */
  .partner { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--night); color: var(--paper); }
  .partner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 70% at 25% 50%, rgba(103, 61, 230, .35), transparent 70%); }
  .partner-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .partner-badge { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; }
  .partner-badge img { position: relative; width: min(100%, 440px); height: auto; border-radius: 10% / 26.7%; box-shadow: 0 0 0 1px rgba(199, 198, 255, .2), 0 40px 90px -30px rgba(103, 61, 230, .9); animation: partner-float 6s ease-in-out infinite; }
  @keyframes partner-float { 50% { transform: translateY(-12px); } }
  .partner-orbit { position: absolute; inset: -10% -6%; width: 112%; height: 120%; max-width: none; overflow: visible; fill: none; stroke: rgba(199, 198, 255, .3); stroke-width: 1.5; stroke-dasharray: 3 9; animation: partner-spin 60s linear infinite; }
  .partner-orbit .o2 { stroke: rgba(199, 198, 255, .1); stroke-dasharray: none; }
  @keyframes partner-spin { to { transform: rotate(360deg); } }
  .partner-k { margin-bottom: 1.2rem; font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); }
  .partner h2 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); max-width: 12ch; }
  .partner .lede { margin-top: 1.5rem; color: rgba(243, 244, 248, .75); }
  .partner-list { display: grid; gap: .7rem; margin-top: 1.8rem; }
  .partner-list li { display: flex; gap: .75rem; align-items: center; font-weight: 600; }
  .partner-list li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: rgba(199, 198, 255, .14); color: var(--lilac); font-size: .8em; }

  /* PROBLEMA */
  .problem { padding-block: clamp(5rem, 11vw, 10rem); }
  .big-say { font-size: clamp(1.9rem, 4.1vw, 3.9rem); font-weight: 600; font-stretch: 88%; line-height: 1.08; letter-spacing: -.02em; max-width: 25ch; }
  .big-say .w { color: #C2C4D4; transition: color .25s; }
  .big-say .w.on { color: var(--ink); }
  .pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 2rem; border-top: 1px solid var(--line); }
  .pain-ic { width: 48px; height: 48px; margin-bottom: 1.2rem; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  .pain-ic .spin { transform-origin: 24px 24px; animation: tspin 12s linear infinite; }
  .pain-ic .hand { transform-origin: 24px 24px; animation: tspin 6s linear infinite; }
  .pain-ic .type { stroke-dasharray: 20; animation: type 2.4s var(--ease) infinite; }
  @keyframes type { 0% { stroke-dashoffset: 20; } 60%, 100% { stroke-dashoffset: 0; } }
  .pains h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: .6rem; font-weight: 700; }
  .pains p { color: var(--muted); max-width: 30em; }

  /* SERVIÇOS */
  .services { padding-bottom: var(--section); }
  .services-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .services-head p { color: var(--muted); max-width: 30em; }
  .svc { border-top: 1px solid var(--ink); }
  .svc:last-child { border-bottom: 1px solid var(--ink); }
  .svc-btn {
    position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto; align-items: center; gap: 1.5rem;
    width: 100%; padding: clamp(1.1rem, 2.4vw, 1.9rem) 0; background: none; border: 0; text-align: left; cursor: pointer; transition: color .4s;
  }
  .svc-btn::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--gutter)); background: var(--blue); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
  .svc-btn:hover::before, .svc-btn:focus-visible::before, .svc.open .svc-btn::before { transform: scaleY(1); }
  .svc-btn:hover, .svc-btn:focus-visible, .svc.open .svc-btn { color: var(--paper); }
  .svc-name { font-size: clamp(2rem, 5.4vw, 4.9rem); font-stretch: 75%; font-weight: 700; line-height: .95; letter-spacing: -.025em; transition: transform .6s var(--ease), letter-spacing .6s var(--ease); }
  .svc-btn:hover .svc-name, .svc.open .svc-name { transform: translateX(.18em); letter-spacing: -.005em; }
  .svc-sum { font-size: 1rem; line-height: 1.45; opacity: .8; max-width: 26em; }
  .svc-plus { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: transform .6s var(--ease), background-color .3s; }
  .svc-plus::before, .svc-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
  .svc-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
  .svc.open .svc-plus { transform: rotate(135deg); background: var(--paper); color: var(--blue); }
  .svc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
  .svc.open .svc-panel { grid-template-rows: 1fr; }
  .svc-panel > div { overflow: hidden; }
  .svc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(220px, 300px); gap: 1.5rem 2rem; align-items: start; padding: 2rem 0 2.6rem; }
  .svc-body > p { font-size: 1.15rem; line-height: 1.5; max-width: 28em; }
  .svc-body ul { display: flex; flex-wrap: wrap; gap: .5rem; align-content: start; }
  .svc-body li { padding: .4em .9em; border-radius: 999px; background: #E6E7F0; font-size: .9rem; font-weight: 500; }
  .svc-body > * { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .7s var(--ease); }
  .svc.open .svc-body > * { opacity: 1; transform: none; }
  .svc.open .svc-body > :nth-child(2) { transition-delay: .08s; }
  .svc.open .svc-body > :nth-child(3) { transition-delay: .16s; }

  /* MERGULHO */
  .warp { position: relative; background: var(--paper); }
  .warp-sticky { position: relative; display: grid; place-items: center; align-content: center; gap: clamp(1.5rem, 4vh, 3rem); min-height: 70vh; padding-block: 4rem; overflow: hidden; }
  html.motion .warp { height: 280vh; }
  html.motion .warp-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding-block: 0; }
  .warp-planet { position: relative; width: clamp(240px, 38vmin, 420px); aspect-ratio: 1; }
  .warp-planet svg { position: absolute; inset: -40%; width: 180%; height: 180%; max-width: none; overflow: visible; }
  .warp-rings.back { z-index: 1; }
  .warp-rings.front { z-index: 3; }
  .warp-disc { position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 68% 28%, #1F1D8F 0, var(--night) 55%); will-change: transform; }
  .warp-text { position: relative; z-index: 4; font-size: clamp(2rem, 5vw, 4.4rem); text-align: center; max-width: 16ch; padding-inline: var(--gutter); }

  /* MÉTODO */
  .method { position: relative; background: var(--night); color: var(--paper); padding-bottom: var(--section); overflow: hidden; }
  .method-pin { padding-top: var(--section); }
  .method-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
  .method-head p { color: var(--paper-70); max-width: 30em; }
  .h-wrap { margin-top: clamp(3rem, 6vw, 5rem); }
  .h-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
  .step { position: relative; display: grid; align-content: start; gap: 1.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(199, 198, 255, .25); }
  .step::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 0 6px rgba(199, 198, 255, .15); }
  .step-n { font-size: clamp(3rem, 5vw, 4.6rem); font-stretch: 75%; font-weight: 700; line-height: .85; color: transparent; -webkit-text-stroke: 1.5px var(--lilac); }
  .step h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: .5rem; }
  .step p { color: var(--paper-70); font-size: 1rem; }
  .h-progress { display: none; }

  html.motion.wide .method-pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 5rem; }
  html.motion.wide .h-track { display: flex; gap: 0; width: max-content; max-width: none; margin: 0; padding-inline: var(--gutter) 0; }
  html.motion.wide .step { width: clamp(380px, 38vw, 560px); padding-right: clamp(2rem, 4vw, 4rem); grid-template-columns: auto 1fr; gap: 1.8rem; }
  html.motion.wide .step-n { font-size: clamp(5rem, 9vw, 9rem); transition: color .5s, -webkit-text-stroke-color .5s; }
  html.motion.wide .step.on .step-n { color: var(--lilac); }
  html.motion.wide .h-progress { display: flex; align-items: center; gap: 1.5rem; margin-top: clamp(2rem, 5vh, 3.5rem); width: 100%; }
  .h-bar { position: relative; flex: 1; height: 2px; background: rgba(199, 198, 255, .2); overflow: hidden; }
  .h-bar i { position: absolute; inset: 0; background: var(--lilac); transform: scaleX(0); transform-origin: left; }
  .h-count { font-variant-numeric: tabular-nums; color: var(--paper-70); font-size: .95rem; }
  .h-count em { font-style: normal; color: var(--paper); font-weight: 700; }

  .promise { display: grid; gap: .1em; margin-top: clamp(5rem, 10vw, 9rem); }
  .promise span { display: block; font-size: clamp(2.6rem, 7.5vw, 7.6rem); font-stretch: 75%; font-weight: 700; line-height: .9; letter-spacing: -.025em; }
  .promise span:nth-child(2) { padding-left: clamp(1rem, 10vw, 10rem); color: var(--lilac); }
  .promise span:nth-child(3) { padding-left: clamp(2rem, 20vw, 20rem); }
  .promise-note { margin: 2.5rem 0 0 auto; max-width: 28em; color: var(--paper-70); }

  /* CASES */
  .cases { padding-block: var(--section) 0; }
  .cases-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .cases-head p { color: var(--muted); max-width: 30em; }
  .case {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(1.25rem, 3vw, 3rem); align-items: start; padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  }
  .case::before { /* a linha de cima se desenha quando o case entra na tela */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink);
    transform-origin: left; transform: scaleX(var(--line, 1));
  }
  .case:last-child { border-bottom: 1px solid var(--line); }
  .case-num { display: grid; gap: .5rem; }
  .case-num span { font-size: clamp(3.6rem, 8.5vw, 8rem); font-stretch: 75%; font-weight: 700; line-height: .85; letter-spacing: -.03em; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .case-num i { font-style: normal; font-size: .42em; letter-spacing: 0; vertical-align: .9em; } /* moeda e "mil" menores que o número */
  .case-num small { font-size: 1rem; font-weight: 600; color: var(--ink); }
  .case-info h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-stretch: 85%; line-height: 1.15; margin-bottom: .6rem; }
  .case-info > p { color: var(--muted); max-width: 30em; }
  .case-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
  .case-tags li { padding: .3em .8em; border-radius: 999px; background: #E6E7F0; font-size: .85rem; font-weight: 500; }
  .case-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; margin: 0; align-content: start; }
  .case-stats div { padding-left: 1rem; border-left: 2px solid var(--lilac); }
  .case-stats dt { font-size: .85rem; color: var(--muted); }
  .case-stats dd { margin: .15rem 0 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
  .cases-note { margin-top: 1.5rem; font-size: .85rem; color: var(--muted); }

  .case-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
  .case-tab { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.25em; border: 0; border-radius: 999px; background: #E6E7F0; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background-color .3s, color .3s; }
  .case-tab:hover { background: #D9DBE6; }
  .case-tab span { min-width: 1.7em; padding: .1em .55em; border-radius: 999px; background: rgba(13, 14, 28, .08); font-size: .8rem; text-align: center; }
  .case-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .case-tab[aria-selected="true"] span { background: var(--blue); color: #fff; }
  .case-tab:disabled { cursor: default; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
  .case-tab em { font-style: normal; font-weight: 500; font-size: .8rem; }

  /* websites (aba dos cases) */
  .seg-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
  .seg-chip { padding: .45em 1em; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); font-size: .9rem; font-weight: 500; cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
  .seg-chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .seg-chip span { margin-left: .2em; font-size: .8em; color: var(--muted); }
  .seg-chip[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: none; }
  .seg-chip[aria-pressed="true"] span { color: var(--lilac); }
  .site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem); }
  .site a { display: block; color: inherit; text-decoration: none; }
  .site-frame {
    overflow: hidden; border-radius: 14px; background: #fff;
    box-shadow: 0 20px 40px -26px rgba(7, 8, 51, .45), 0 0 0 1px rgba(13, 14, 28, .08);
    transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  }
  .site a:hover .site-frame, .site a:focus-visible .site-frame { transform: translateY(-6px); box-shadow: 0 34px 60px -28px rgba(46, 43, 255, .5), 0 0 0 1px rgba(46, 43, 255, .3); }
  .site-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: #E6E7F0; }
  .site-bar i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #C0C2D3; }
  .site-bar span { flex: 1; min-width: 0; margin-left: 10px; padding: 3px 10px; border-radius: 99px; background: #fff; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #EEF0F5; }
  /* no hover a página rola dentro do quadro; --shift e --dur vêm do JS conforme a altura da captura */
  .site-view img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 1.2s var(--ease); }
  .site a:hover .site-view img, .site a:focus-visible .site-view img { transform: translateY(var(--shift, 0px)); transition: transform var(--dur, 6s) cubic-bezier(.45, 0, .55, 1); }
  .site-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .9rem; }
  .site-meta h3 { font-size: 1.05rem; line-height: 1.3; }
  .site-meta span { flex: none; font-size: .82rem; color: var(--muted); }

  /* social media (aba dos cases): perfis dentro de uma moldura de celular */
  .phones-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
  .phones-head p { color: var(--muted); max-width: 34em; }
  .phones-nav { display: flex; gap: .5rem; flex: none; }
  .phones-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); cursor: pointer; transition: background-color .3s, color .3s, opacity .3s; }
  .phones-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .phones-arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
  .phones-arrow:disabled { opacity: .3; cursor: default; }
  .phones {
    display: flex; gap: clamp(1.25rem, 2.5vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 1.6rem var(--gutter) 2.5rem; scroll-padding-inline: var(--gutter); cursor: grab;
  }
  .phones::-webkit-scrollbar { display: none; }
  .phones.dragging { cursor: grabbing; scroll-snap-type: none; }
  .phones.dragging a { pointer-events: none; }
  .phones li { flex: none; scroll-snap-align: start; }
  .phone-card { display: block; width: clamp(220px, 21vw, 268px); color: inherit; text-decoration: none; }
  .phone {
    position: relative; aspect-ratio: 9 / 19.3; padding: 9px; border-radius: 46px;
    background: linear-gradient(145deg, #2E2F3A, #0D0E1C 40%, #1D1E29);
    box-shadow: inset 0 0 0 1.5px #4C4D5A, inset 0 0 0 4px #0D0E1C, 0 30px 50px -26px rgba(7, 8, 51, .55);
    transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  }
  .phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2E2F3A; } /* botões laterais */
  .phone::before { left: -3px; top: 22%; height: 11%; }
  .phone::after { right: -3px; top: 27%; height: 15%; }
  .phone-card:hover .phone, .phone-card:focus-visible .phone { transform: translateY(-10px) rotate(-1.5deg); box-shadow: inset 0 0 0 1.5px #4C4D5A, inset 0 0 0 4px #0D0E1C, 0 44px 60px -28px rgba(46, 43, 255, .55); }
  .phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 38px; background: #fff; }
  .phone-screen::before { /* ilha */
    content: ""; position: absolute; z-index: 2; top: 9px; left: 50%; width: 32%; height: 22px; transform: translateX(-50%); border-radius: 20px; background: #000;
  }
  .phone-status { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 22px 0 28px; background: #fff; color: #000; font-size: .72rem; }
  .phone-status b { font-weight: 600; }
  .phone-status i { position: relative; display: block; width: 22px; height: 11px; border: 1.5px solid #000; border-radius: 3.5px; } /* bateria */
  .phone-status i::after { content: ""; position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 1px; background: #000; }
  .phone-screen img { display: block; width: 100%; height: calc(100% - 40px); object-fit: cover; object-position: top; -webkit-user-drag: none; user-select: none; }
  .phone-meta { margin-top: 1.1rem; padding-left: .3rem; }
  .phone-meta h3 { font-size: 1.05rem; line-height: 1.3; }
  .phone-meta span { font-size: .85rem; color: var(--muted); }

  /* FUNDADOR */
  .founder { padding-block: var(--section); }
  .founder-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
  .portrait { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
  .portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .portrait img { position: absolute; z-index: 2; left: 15%; top: 15%; width: 70%; height: 70%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: #ddd; }
  .founder blockquote { margin-bottom: 1.8rem; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 600; font-stretch: 88%; line-height: 1.12; letter-spacing: -.015em; }
  .founder .lede { color: var(--muted); }
  .sign { display: grid; margin: 2rem 0 2.2rem; }
  .sign strong { font-size: 1.15rem; line-height: 1.3; }
  .sign span { color: var(--muted); font-size: .95rem; }

  /* FAQ */
  .faq { padding-bottom: var(--section); }
  .faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .faq details { border-top: 1px solid var(--line); }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; line-height: 1.3; transition: color .3s, padding .5s var(--ease); }
  .faq summary:hover { color: var(--blue); padding-left: .5rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary i { position: relative; flex: none; width: 16px; height: 16px; }
  .faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
  .faq summary i::after { transform: rotate(90deg); }
  .faq details[open] summary i::after { transform: rotate(0); }
  .faq .ans { overflow: hidden; padding: 0 2.5rem 1.6rem 0; color: var(--muted); max-width: 40em; }
  .faq .ans ul { padding-left: 1.1rem; list-style: disc; }

  /* CTA FINAL */
  .final { position: relative; overflow: hidden; padding-top: clamp(5rem, 11vw, 10rem); background: var(--blue); color: var(--paper); }
  .final::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 85% 20%, rgba(199, 198, 255, .25), transparent 70%); }
  .final-in { position: relative; }
  .final h2 { font-size: var(--fs-mega); line-height: .86; max-width: 11ch; }
  .final .lede { margin: 2.2rem 0 2.4rem; color: rgba(243, 244, 248, .86); }
  .mini-planet { position: absolute; right: var(--gutter); top: 0; width: clamp(120px, 22vw, 300px); aspect-ratio: 1; }
  .mini-planet svg { width: 100%; height: 100%; overflow: visible; }
  .foot { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; margin-top: clamp(5rem, 9vw, 8rem); padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(243, 244, 248, .25); font-size: .95rem; }
  .foot img { height: 26px; width: auto; }
  .foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
  .foot a { text-decoration: none; color: rgba(243, 244, 248, .85); }
  .foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
  .foot small { color: rgba(243, 244, 248, .6); font-size: .875rem; }
}

/* ---------- mockups dos serviços ---------- */
@layer mockups {
  .mock {
    position: relative; overflow: hidden; width: 100%; max-width: 320px; aspect-ratio: 4 / 3; padding: 14px;
    border-radius: 18px; background: var(--night); color: var(--paper); font-size: 11px; line-height: 1.2;
    box-shadow: 0 30px 60px -20px rgba(7, 8, 51, .5), inset 0 0 0 1px rgba(199, 198, 255, .12);
  }
  /* as animações só rodam quando a peça está visível */
  .mock, .mock * { animation-play-state: paused !important; }
  .svc.open .mock, .svc.open .mock *, .svc-preview.on .mock, .svc-preview.on .mock * { animation-play-state: running !important; }

  .mk-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
  .mk-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(199, 198, 255, .35); }
  .mk-bar span { margin-left: auto; padding: 3px 8px; border-radius: 99px; background: rgba(46, 43, 255, .45); color: var(--lilac); font-weight: 600; }

  /* tráfego */
  .mk-chart { display: flex; align-items: flex-end; gap: 6px; height: 52%; }
  .mk-chart span { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 1px 1px; background: linear-gradient(var(--lilac), var(--blue)); transform-origin: bottom; animation: bar 2.6s var(--ease) var(--d) infinite; }
  @keyframes bar { 0% { transform: scaleY(.1); } 45%, 80% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
  .mk-trend { position: absolute; left: 14px; right: 14px; top: 34px; width: calc(100% - 28px); height: 50%; overflow: visible; }
  .mk-trend polyline { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 320; animation: trend 2.6s var(--ease) infinite; }
  @keyframes trend { 0% { stroke-dashoffset: 320; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -320; } }
  .mk-legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--paper-70); }
  .mk-legend b { width: 8px; height: 8px; border-radius: 2px; background: var(--lilac); }
  .mk-legend b.alt { margin-left: 8px; background: #fff; }

  /* redes */
  .mock-social { background: linear-gradient(140deg, var(--night), #12137A); }
  .mk-phone { position: absolute; left: 50%; top: 10px; bottom: -30px; width: 46%; transform: translateX(-62%); padding: 10px 8px; border-radius: 18px; background: var(--paper); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .5); }
  .mk-prof { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
  .mk-prof i { width: 18px; height: 18px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--lilac); }
  .mk-prof span { flex: 1; height: 5px; border-radius: 3px; background: #D5D6E3; }
  .mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .mk-grid b { aspect-ratio: 1; border-radius: 3px; background: var(--lilac); }
  .mk-grid b:nth-child(3n+1) { background: var(--blue); }
  .mk-grid b:nth-child(4n) { background: var(--night); }
  .mk-grid b.hit { animation: pop 2.4s var(--ease) infinite; }
  @keyframes pop { 0%, 40% { transform: scale(1); } 55% { transform: scale(1.25); } 70%, 100% { transform: scale(1); } }
  .mk-heart { position: absolute; left: 40%; top: 46%; width: 30px; fill: #FF4D8D; opacity: 0; animation: heart 2.4s var(--ease) infinite; }
  @keyframes heart { 0%, 45% { opacity: 0; transform: translateY(0) scale(.4); } 60% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { opacity: 0; transform: translateY(-40px) scale(.9); } }
  .mk-notif { position: absolute; right: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5); opacity: 0; animation: notif 4.8s var(--ease) infinite; }
  .mk-notif i { width: 8px; height: 8px; border-radius: 50%; background: #25D366; }
  .mk-notif.n1 { top: 22%; }
  .mk-notif.n2 { top: 50%; animation-delay: 1.2s; }
  .mk-notif.n2 i { background: var(--blue); }
  @keyframes notif { 0% { opacity: 0; transform: translateX(30px); } 12%, 60% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; transform: translateY(-8px); } }

  /* site */
  .mock-site { padding: 0; background: var(--paper); color: var(--ink); }
  .mk-browser { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #E3E4EE; }
  .mk-browser i { width: 7px; height: 7px; border-radius: 50%; background: #C0C2D3; }
  .mk-browser span { margin-left: 10px; flex: 1; padding: 3px 8px; border-radius: 99px; background: #fff; color: var(--muted); font-size: 9px; }
  .mk-page { position: relative; padding: 14px; display: grid; gap: 6px; }
  .mk-h { width: 58%; height: 12px; border-radius: 3px; background: var(--ink); transform-origin: left; animation: grow 3.2s var(--ease) infinite; }
  .mk-h.short { width: 40%; background: var(--blue); animation-delay: .1s; }
  .mk-p { width: 50%; height: 5px; border-radius: 3px; background: #C9CBDA; transform-origin: left; animation: grow 3.2s var(--ease) .2s infinite; }
  .mk-cta { justify-self: start; margin-top: 6px; padding: 6px 12px; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 600; font-size: 9px; animation: press 3.2s var(--ease) infinite; }
  .mk-img { position: absolute; right: 14px; top: 14px; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 65% 30%, #9C9AFF, var(--blue) 45%, var(--night)); }
  .mk-cursor { position: absolute; width: 18px; fill: var(--ink); stroke: #fff; stroke-width: 1.5; left: 70%; top: 85%; animation: aim 3.2s var(--ease) infinite; }
  @keyframes grow { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
  @keyframes aim { 0%, 30% { left: 75%; top: 88%; } 55%, 70% { left: 20%; top: 74%; } 100% { left: 75%; top: 88%; } }
  @keyframes press { 0%, 56% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 43, 255, .5); } 62% { transform: scale(.92); } 72% { transform: scale(1); box-shadow: 0 0 0 12px rgba(46, 43, 255, 0); } 100% { transform: scale(1); } }

  /* design */
  .mock-design { background: var(--paper); color: var(--ink); }
  .mk-guides { position: absolute; inset: 0; background-image: linear-gradient(rgba(46, 43, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 43, 255, .12) 1px, transparent 1px); background-size: 20px 20px; }
  .mk-aa { position: absolute; left: 16px; top: 4px; font-size: 76px; font-stretch: 75%; font-weight: 700; letter-spacing: -.03em; animation: weight 3s var(--ease) infinite alternate; }
  @keyframes weight { from { font-weight: 300; font-stretch: 100%; } to { font-weight: 800; font-stretch: 75%; } }
  .mk-sw { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; }
  .mk-sw b { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); animation: swatch 3s var(--ease) infinite; box-shadow: 0 0 0 2px #fff; }
  .mk-sw b:nth-child(2) { background: var(--night); animation-delay: .12s; }
  .mk-sw b:nth-child(3) { background: var(--lilac); animation-delay: .24s; }
  .mk-sw b:nth-child(4) { background: #fff; animation-delay: .36s; box-shadow: 0 0 0 1px var(--line); }
  @keyframes swatch { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-8px); } 40% { transform: translateY(0); } }
  .mk-logo { position: absolute; right: 18px; top: 50%; width: 44%; transform: translateY(-50%); overflow: visible; fill: var(--blue); stroke: var(--ink); stroke-width: 4; animation: tspin 8s linear infinite; }
  .mk-logo ellipse { fill: none; }

  /* conteúdo */
  .mk-video { position: relative; height: 62%; border-radius: 10px; background: linear-gradient(135deg, var(--blue), #6B69FF 60%, var(--lilac)); display: grid; place-items: center; overflow: hidden; }
  .mk-play { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .95); position: relative; animation: pulse 2s var(--ease) infinite; }
  .mk-play::after { content: ""; position: absolute; left: 15px; top: 11px; border: 8px solid transparent; border-left: 12px solid var(--blue); border-right: 0; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }
  .mk-prog { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
  .mk-prog i { position: absolute; inset: 0; border-radius: 3px; background: #fff; transform-origin: left; animation: grow 4s linear infinite; }
  .mk-lines { display: grid; gap: 6px; margin-top: 12px; }
  .mk-lines span { height: 6px; border-radius: 3px; background: rgba(199, 198, 255, .6); transform-origin: left; animation: grow 4s steps(14) infinite; }
  .mk-lines span:nth-child(2) { width: 82%; animation-delay: .5s; }
  .mk-lines span:nth-child(3) { width: 56%; animation-delay: 1s; }
}


/* ---------- responsive ---------- */
@layer responsive {
  /* telas médias: o menu inteiro precisa caber numa linha */
  @media (min-width: 981px) and (max-width: 1240px) {
    .nav a:not(.btn) { padding-inline: .6em; font-size: .88rem; }
    .nav a:not(.btn)::after { left: .6em; right: .6em; }
    .nav .btn { padding: .7em 1em; font-size: .88rem; margin-left: .2rem; }
  }
  .nav a { white-space: nowrap; }
  @media (max-width: 980px) {
    .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: .4rem; background: var(--night); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
    .nav a:not(.btn) { font-size: 2rem; font-stretch: 80%; font-weight: 700; transform: translateY(20px); transition: transform .6s var(--ease); }
    .menu-open .nav a:not(.btn) { transform: none; }
    .nav .btn { margin: 1.2rem 0 0; font-size: 1.05rem; }
    .menu-open .nav { opacity: 1; visibility: visible; }
    .menu-btn { display: block; }
    .hero { padding-block: 6.5rem 4.5rem; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .stage { order: -1; width: min(88%, 460px); margin-bottom: -.5rem; }
    .services-head, .method-head, .founder-grid, .faq-grid, .cases-head, .partner-grid { grid-template-columns: minmax(0, 1fr); }
    .partner-badge { max-width: 460px; }
    .partner-badge img { width: min(78%, 380px); }
  }
  @media (max-width: 640px) {
    /* no celular o selo vira um detalhe acima do título, sem órbita */
    .partner-grid { gap: 1.6rem; }
    .partner-badge { aspect-ratio: auto; justify-items: start; max-width: none; }
    .partner-badge img { width: 160px; animation: none; box-shadow: 0 16px 40px -16px rgba(103, 61, 230, .9); }
    .partner-orbit { display: none; }
  }
  @media (max-width: 980px) {
    .case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .case-num { grid-column: 1 / -1; }
    .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-btn { grid-template-columns: minmax(0, 1fr) auto; }
    .svc-sum { display: none; }
    .svc-body { grid-template-columns: minmax(0, 1fr); }
    .h-track { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
    .mini-planet { opacity: .55; }
  }
  @media (max-width: 640px) {
    .pains, .h-track, .case, .site-grid { grid-template-columns: minmax(0, 1fr); }
    .seg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
    .seg-chips::-webkit-scrollbar { display: none; }
    .seg-chip { flex: none; }
    .phones-nav { display: none; } /* no celular se arrasta com o dedo */
    .phone-card { width: min(68vw, 250px); }
    .case-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
    .case-tabs::-webkit-scrollbar { display: none; }
    .case-tab { flex: none; padding: .6em 1em; font-size: .9rem; }
    .svc-plus { width: 42px; height: 42px; }
    .hero-foot { display: none; }
    .stage { width: 62%; margin-top: .5rem; margin-bottom: 1.5rem; }
    .sat-in { font-size: .72rem; padding: .45em .8em .45em .6em; }
    .btn { width: 100%; justify-content: center; }
    .nav .btn { width: auto; }
    .promise span:nth-child(2), .promise span:nth-child(3) { padding-left: 0; }
    .loader-num { font-size: 4.5rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    html:not(.force-motion) *, html:not(.force-motion) *::before, html:not(.force-motion) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html:not(.force-motion) .loader, html:not(.force-motion) .grain { display: none; }
    html:not(.force-motion) .big-say .w { color: var(--ink); }
  }
}