/* ===================================================================
   STORK MARKETING — CSS compartilhado (index.html + páginas de conteúdo)
   Extraído do <style> inline do index.html. Versionar via ?v=N no <link>.
   =================================================================== */
  /* ===================================================================
     STORK MARKETING — Design System (tokens do MIV oficial)
     =================================================================== */
  :root{
    --navy:#0C3B59; --teal:#0397A3; --mist:#EEEBF5;
    --navy-900:#07293E; --navy-800:#0A3049; --navy-700:#0C3B59;
    --navy-600:#14507A; --navy-300:#7FA6C0; --navy-100:#D6E2EC;
    --teal-800:#015E6B; --teal-700:#017180; --teal-600:#028A96;
    --teal-500:#0397A3; --teal-300:#63C4CD; --teal-100:#D3EDF0; --teal-50:#EDF7F9;
    --paper:#F6F8F9; --line:#D7DEE6; --mute:#A8B6C2; --text-2:#5A6B7D;
    --success:#0E7C63; --danger:#B3261E; --amber:#FFB020;
    --bg:#FFFFFF; --surface:#FFFFFF; --text:#07293E;
    --accent:#017180; --accent-solid:#0397A3;

    --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
    --font-body:"Noto Sans","Segoe UI",Arial,sans-serif;
    --font-mono:"Noto Sans Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
    --t-display:clamp(2.5rem,1.6rem + 4vw,4rem);
    --t-h1:clamp(2.125rem,1.5rem + 2.8vw,3.25rem);
    --t-h2:clamp(1.75rem,1.35rem + 1.8vw,2.5rem);
    --t-h3:clamp(1.375rem,1.2rem + .8vw,1.75rem);
    --t-body:1.0625rem; --t-small:.9375rem; --t-caption:.8125rem;

    --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
    --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
    --r-sm:6px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
    --sh-1:0 1px 2px rgba(12,59,89,.06), 0 1px 3px rgba(12,59,89,.08);
    --sh-2:0 4px 12px rgba(12,59,89,.08), 0 1px 3px rgba(12,59,89,.06);
    --sh-3:0 12px 32px rgba(12,59,89,.12), 0 2px 8px rgba(12,59,89,.06);
    --sh-cta:0 8px 20px rgba(1,113,128,.28);

    --container:1160px;
    /* Gradiente oficial do kit (arquivo Gradiente/GRADIENTE) — 115°, branco -> mist -> teal -> navy */
    --gradiente:linear-gradient(115deg,#FFFFFF 0%,#D9E8EB 28%,#0397A3 72%,#0C3B59 100%);
  }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  picture{display:contents}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
  body{font-family:var(--font-body);font-size:var(--t-body);line-height:1.65;color:var(--navy);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}

  h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance}
  .display{font-size:var(--t-display);font-weight:800;line-height:1.02;letter-spacing:-.03em}
  h1{font-size:var(--t-h1);font-weight:800;line-height:1.08;letter-spacing:-.025em}
  h2{font-size:var(--t-h2);font-weight:700;line-height:1.15;letter-spacing:-.02em}
  h3{font-size:var(--t-h3);font-weight:700;line-height:1.25;letter-spacing:-.01em}
  h4{font-size:1.25rem;font-weight:600;line-height:1.35}
  p{max-width:65ch}
  .lead{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);font-weight:400;line-height:1.6;color:var(--text-2)}
  .small{font-size:var(--t-small);line-height:1.55}
  .overline{display:inline-block;font-family:var(--font-display);font-size:.75rem;font-weight:700;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-4)}
  .overline.on-navy{color:var(--teal-300)}

  a{color:var(--accent);text-underline-offset:3px;transition:color .18s ease}
  a:hover{color:var(--teal-800)}

  .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
  main > section{padding-block:48px}
  @media (min-width:768px){ main > section{padding-block:88px} }
  .section-head{max-width:60ch;margin-bottom:var(--s-7)}
  .section-head p{margin-top:var(--s-3)}

  :focus-visible{outline:3px solid var(--accent-solid);outline-offset:2px;border-radius:var(--r-sm)}
  .skip-link{position:absolute;left:var(--s-4);top:-64px;z-index:200;background:var(--navy);color:#fff;padding:var(--s-3) var(--s-5);border-radius:var(--r-md);font-weight:700;transition:top .2s ease}
  .skip-link:focus{top:var(--s-4);color:#fff}

  /* ---------- Logo (SVG oficial do kit) ---------- */
  .brand-sprite{position:absolute;width:0;height:0;overflow:hidden}
  .brand{display:inline-flex;align-items:center;gap:var(--s-3);text-decoration:none}
  .brand:hover{opacity:.85}
  .brand .bird{width:42px;height:42px;flex:none}
  .brand .wordmark{height:40px;width:auto}
  @media (max-width:480px){ .brand .bird{width:36px;height:36px} .brand .wordmark{height:34px} }
  /* Cores da identidade visual Stork: símbolo + "STORK" em teal, "MARKETING" em navy */
  .brand .bird{color:var(--teal-500)}
  .brand .wm-a{color:var(--teal-500)} /* "STORK" */
  .brand .wm-b{color:var(--navy)}     /* "MARKETING" */
  .site-footer .brand .bird,
  .site-footer .brand .wm-a,
  .site-footer .brand .wm-b{color:#fff}

  /* ---------- Botões: CTA "Liquid Glass" + header "Pearl" (paleta Stork) ---------- */
  .btn-glass{
    position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;isolation:isolate;
    border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
    border-radius:var(--r-pill);padding:0 34px;min-height:56px;
    font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:.01em;line-height:1;
    color:var(--navy);
    background:rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(8px) saturate(1.3);
            backdrop-filter:blur(8px) saturate(1.3);
    box-shadow:
      0 0 6px rgba(0,0,0,.03),
      0 2px 6px rgba(0,0,0,.10),
      inset 3px 3px .5px -3px rgba(0,0,0,.9),
      inset -3px -3px .5px -3px rgba(0,0,0,.85),
      inset 1px 1px 1px -.5px rgba(0,0,0,.6),
      inset -1px -1px 1px -.5px rgba(0,0,0,.6),
      inset 0 0 6px 6px rgba(0,0,0,.12),
      inset 0 0 2px 2px rgba(0,0,0,.06),
      0 0 12px rgba(255,255,255,.15);
    transition:transform .3s cubic-bezier(.4,0,.2,1),filter .2s ease,box-shadow .3s ease;
  }
  a.btn-glass,a.btn-glass:visited{color:var(--navy)}
  a.btn-glass:hover{color:var(--navy)}
  .btn-glass:hover{transform:scale(1.05)}
  .btn-glass:active{transform:scale(.985)}
  .btn-glass:focus-visible{outline:3px solid var(--accent-solid);outline-offset:3px}
  .btn-glass svg{width:18px;height:18px;flex:none}
  /* Liquid Glass sobre seções escuras: mesmo vidro transparente, contorno e texto claros */
  .pain .btn-glass, .method .btn-glass, .cta-final .btn-glass,
  .site-footer .btn-glass, .page-hero .btn-glass, .cta-band .btn-glass, .faq-section .btn-glass,
  .pain a.btn-glass, .pain a.btn-glass:hover, .pain a.btn-glass:visited,
  .method a.btn-glass, .method a.btn-glass:hover, .method a.btn-glass:visited,
  .cta-final a.btn-glass, .cta-final a.btn-glass:hover, .cta-final a.btn-glass:visited,
  .page-hero a.btn-glass, .page-hero a.btn-glass:hover, .page-hero a.btn-glass:visited,
  .cta-band a.btn-glass, .cta-band a.btn-glass:hover, .cta-band a.btn-glass:visited,
  .site-footer a.btn-glass, .site-footer a.btn-glass:hover, .site-footer a.btn-glass:visited{
    color:#fff;
  }
  .pain .btn-glass, .method .btn-glass, .cta-final .btn-glass,
  .site-footer .btn-glass, .page-hero .btn-glass, .cta-band .btn-glass{
    background:rgba(255,255,255,.08);
    box-shadow:
      0 0 6px rgba(0,0,0,.06),
      0 2px 8px rgba(0,0,0,.18),
      inset 3px 3px .5px -3px rgba(255,255,255,.9),
      inset -3px -3px .5px -3px rgba(255,255,255,.85),
      inset 1px 1px 1px -.5px rgba(255,255,255,.6),
      inset -1px -1px 1px -.5px rgba(255,255,255,.6),
      inset 0 0 6px 6px rgba(255,255,255,.12),
      inset 0 0 2px 2px rgba(255,255,255,.06),
      0 0 12px rgba(0,0,0,.15);
  }
  .btn-glass[disabled],.btn-glass[aria-disabled="true"]{filter:grayscale(.5) brightness(.85);cursor:not-allowed;pointer-events:none}
  .btn-glass-lg{min-height:64px;padding:0 44px;font-size:1.0625rem}
  @media (max-width:640px){ .btn-glass{width:100%} }
  @media (prefers-reduced-motion:reduce){ .btn-glass{transition:filter .2s ease} .btn-glass:hover{transform:none} }

  .section-cta{margin-top:var(--s-7)}
  @media (min-width:768px){ .section-cta{margin-top:var(--s-8)} }

  .btn-pearl{
    --pb-bg:#0A3049;
    position:relative;display:inline-block;border:0;outline:none;cursor:pointer;text-decoration:none;
    border-radius:var(--r-pill);background-color:var(--pb-bg);transition:box-shadow .2s ease,transform .2s ease;
    box-shadow:
      inset 0 .18rem .55rem rgba(214,226,236,.32),
      inset 0 -.06rem .2rem rgba(0,0,0,.5),
      inset 0 -.26rem .55rem rgba(99,196,205,.4),
      0 1.4rem 1.4rem rgba(7,41,62,.2),
      0 .5rem .5rem -.35rem rgba(7,41,62,.5);
  }
  .btn-pearl .wrap{position:relative;overflow:hidden;display:block;border-radius:inherit;
    padding:13px 26px;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.01em;color:rgba(255,255,255,.94)}
  .btn-pearl .wrap p{display:flex;align-items:center;gap:9px;margin:0;transition:transform .2s ease;transform:translateY(2%);
    -webkit-mask-image:linear-gradient(to bottom,#fff 64%,rgba(255,255,255,.62));
            mask-image:linear-gradient(to bottom,#fff 64%,rgba(255,255,255,.62))}
  .btn-pearl .wrap p .pb-ico{color:var(--teal-300);font-size:1.05em;line-height:1}
  .btn-pearl .wrap p .pb-alt{display:none}
  .btn-pearl:hover .wrap p .pb-def{display:none}
  .btn-pearl:hover .wrap p .pb-alt{display:inline-block}
  .btn-pearl .wrap::before,.btn-pearl .wrap::after{content:"";position:absolute;transition:all .3s ease}
  .btn-pearl .wrap::before{left:-15%;right:-15%;bottom:25%;top:-100%;border-radius:50%;background-color:rgba(214,226,236,.13)}
  .btn-pearl .wrap::after{left:6%;right:6%;top:12%;bottom:40%;border-radius:14px 14px 0 0;
    box-shadow:inset 0 8px 6px -8px rgba(255,255,255,.7);
    background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%)}
  .btn-pearl:hover{box-shadow:
    inset 0 .18rem .35rem rgba(214,226,236,.42),
    inset 0 -.06rem .2rem rgba(0,0,0,.5),
    inset 0 -.26rem .55rem rgba(99,196,205,.62),
    0 1.4rem 1.4rem rgba(7,41,62,.2),
    0 .5rem .5rem -.35rem rgba(7,41,62,.5)}
  .btn-pearl:hover .wrap::before{transform:translateY(-5%)}
  .btn-pearl:hover .wrap::after{opacity:.4;transform:translateY(5%)}
  .btn-pearl:hover .wrap p{transform:translateY(-4%)}
  .btn-pearl:active{transform:translateY(3px)}
  .btn-pearl:focus-visible{outline:3px solid var(--accent-solid);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){ .btn-pearl,.btn-pearl .wrap p,.btn-pearl .wrap::before,.btn-pearl .wrap::after{transition:none} }

  /* ---------- Header ---------- */
  /* Header liquid glass (mesmo estilo do footer) */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:12px;background:transparent;pointer-events:none}
  .site-header .container{pointer-events:auto}
  .site-header .container{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
    min-height:60px;padding-top:8px;padding-bottom:8px;
    border-radius:var(--r-xl);isolation:isolate;color:#fff;
    background:rgba(10,48,73,.34);
    -webkit-backdrop-filter:blur(24px) saturate(1.4);
            backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:
      0 0 6px rgba(0,0,0,.05),
      0 18px 50px rgba(7,41,62,.28),
      inset 3px 3px .5px -3px rgba(255,255,255,.95),
      inset -3px -3px .5px -3px rgba(255,255,255,.85),
      inset 1px 1px 1px -.5px rgba(255,255,255,.7),
      inset -1px -1px 1px -.5px rgba(255,255,255,.7),
      inset 0 0 8px 8px rgba(255,255,255,.10),
      inset 0 0 2px 2px rgba(255,255,255,.06),
      0 0 14px rgba(255,255,255,.18);
  }
  @media (prefers-reduced-motion:reduce){ .site-header .container{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} }
  .site-header .brand .bird,
  .site-header .brand .wm-a,
  .site-header .brand .wm-b{color:#fff}
  .header-cta{display:none}
  @media (min-width:768px){ .header-cta{display:inline-block} }

  /* ---------- Hero (gradiente oficial) ---------- */
  .hero{position:relative;z-index:2;overflow:clip;color:#fff;background:var(--gradiente) center/cover no-repeat}
  /* Símbolo da cegonha "encostado" na lateral: recortado pela borda da página, sem scroll horizontal */
  .hero-sticker{position:absolute;right:-17%;bottom:-52px;z-index:6;
    width:clamp(360px,50vw,620px);height:auto;line-height:0;pointer-events:none}
  @media (max-width:767px){ .hero-sticker{right:-30%;bottom:-64px;width:min(62vw,240px)} }
  .hero-sticker svg{width:100%;height:auto;color:var(--teal-300);
    filter:drop-shadow(0 8px 20px rgba(7,41,62,.35))}
  /* Vídeo de fundo (assets/hero-loop) */
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center;z-index:0;pointer-events:none}
  @media (min-width:768px){ .hero-video{object-position:center} }
  /* Véu sobre o vídeo: mantém o texto navy legível (WCAG AA) e o tom da marca */
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(118deg,rgba(255,255,255,.86) 0%,rgba(238,235,245,.60) 38%,rgba(3,151,163,.20) 74%,rgba(12,59,89,.32) 100%)}
  @media (min-width:768px){
    .hero::before{background:linear-gradient(112deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.66) 32%,rgba(214,226,236,.30) 56%,rgba(3,151,163,.14) 100%)}
  }
  .hero .container{position:relative;z-index:2;padding-block:64px}
  @media (min-width:768px){ .hero .container{padding-block:120px} }
  .hero .overline{color:var(--navy)}
  .hero h1{color:var(--navy);max-width:16ch}
  .hero h1 .accent{color:var(--teal-700)}
  .hero .lead{color:var(--navy-800);margin-top:var(--s-4);max-width:52ch}
  .hero .btn-wrap{margin-top:var(--s-6)}
  @media (prefers-reduced-motion:reduce){
    .hero-video{display:none}
    .hero{background:linear-gradient(112deg,rgba(255,255,255,.85),rgba(214,226,236,.35)),url("assets/hero-poster.jpg?v=6") 64% center/cover no-repeat}
  }

  /* ---------- Faixa de prova (navy + grafismo de ondas a 10%) ---------- */
  .proof{position:relative;overflow:clip;background:linear-gradient(180deg,#FFFFFF 0%,#EDF4F5 100%);color:var(--navy)}
  .proof .container{position:relative;z-index:2}
  .metric-grid{display:grid;gap:var(--s-5);grid-template-columns:1fr;margin-top:var(--s-6);list-style:none}
  @media (min-width:768px){ .metric-grid{grid-template-columns:repeat(3,1fr)} }
  .metric-card{background:rgba(255,255,255,.86);backdrop-filter:blur(3px);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-2)}
  .metric-card .num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,2rem + 2vw,3.25rem);line-height:1.05;color:var(--navy);letter-spacing:-.02em}
  .metric-card .num.text{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);color:var(--accent)}
  .metric-card .label{font-size:1.25rem;font-weight:600;color:var(--navy);margin-top:var(--s-3);font-family:var(--font-display)}

  /* Fundo "Luminous Topography" (adaptado de motiq.dev — MIT), versão clara */
  .lumitopo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
  .lumitopo svg{width:100%;height:100%;display:block}
  .lumitopo .lt-layer{transform-box:fill-box}
  .lumitopo .lt-dim path,.lumitopo .lt-bright path{fill:none;vector-effect:non-scaling-stroke}
  .lumitopo .lt-bright{filter:drop-shadow(0 0 3px color-mix(in oklab, var(--accent-solid) 60%, transparent))}
  .lumitopo.is-animated .lt-layer{animation:lt-drift var(--dur,18s) ease-in-out infinite alternate;will-change:transform}
  .lumitopo.is-animated .lt-sweep{animation:lt-sweep 14s ease-in-out infinite alternate;will-change:transform}
  @keyframes lt-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,0),var(--dy,0),0)}}
  @keyframes lt-sweep{from{transform:translateX(-330px)}to{transform:translateX(330px)}}
  .lumitopo[data-paused="true"] .lt-layer,.lumitopo[data-paused="true"] .lt-sweep{animation-play-state:paused!important}
  @media (prefers-reduced-motion:reduce){
    .lumitopo .lt-layer,.lumitopo .lt-sweep{animation:none!important}
    .lumitopo .lt-cursor{display:none}
  }
  @media (forced-colors:active){
    .lumitopo .lt-bright,.lumitopo .lt-wash,.lumitopo .lt-cursor{display:none}
    .lumitopo svg{forced-color-adjust:none}
    .lumitopo .lt-dim path{stroke:CanvasText!important;stroke-opacity:.5!important}
  }

  /* ---------- Dor & solução — timeline orbital ---------- */
  .pain{position:relative;overflow:clip;background:var(--navy-900);color:#fff;isolation:isolate}
  .pain::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(58% 46% at 50% 46%,rgba(3,151,163,.18),transparent 72%),
      radial-gradient(42% 40% at 84% 10%,rgba(20,80,122,.30),transparent 72%),
      radial-gradient(46% 44% at 12% 92%,rgba(1,113,128,.22),transparent 74%)}
  .pain .overline{color:var(--teal-300)}
  .pain h2{color:#fff;max-width:24ch}
  .orbit-hint{display:none}

  /* Layout dor: copy (título + CTA) e círculo */
  .pain-layout{display:flex;flex-direction:column;gap:var(--s-6)}
  .pain-copy{display:contents}
  .pain-copy>.section-head{order:1;margin-bottom:0}
  .pain-layout>.orbit,.pain-layout>.orbit.is-ready{order:2;margin-top:0}
  .pain-copy>.section-cta{order:3;margin-top:0}
  @media (max-width:979px){ .pain-layout>.orbit.is-ready{padding-bottom:34px} }
  @media (min-width:980px){
    .pain-layout{
      display:grid;
      grid-template-columns:minmax(280px,360px) minmax(400px,460px);
      justify-content:center;
      column-gap:clamp(32px,4.5vw,76px);
      align-items:center}
    .pain-copy{display:flex;flex-direction:column;gap:var(--s-6);align-self:center}
    .pain-copy>.section-head,.pain-copy>.section-cta{order:0}
    .pain-copy>.section-head{margin-bottom:0}
    .pain-layout>.orbit,.pain-layout>.orbit.is-ready{
      margin:0;align-self:center;
      display:flex;flex-direction:column;align-items:center}
    /* stage um pouco menor que a coluna: os rótulos ganham folga */
    .pain-layout>.orbit .orbit-stage{width:min(100%,400px)}
    .pain-layout>.orbit.is-ready .orbit-hint{
      position:static;margin:0 0 var(--s-4);text-align:center}
    .pain h2{max-width:15ch}
  }

  .orbit{margin-top:var(--s-7)}
  /* Fallback sem JS: dores empilhadas */
  .orbit-stage{display:none}
  .orbit-panels{display:grid;gap:var(--s-4);max-width:64ch;margin-inline:auto}
  .orbit-card{
    position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);color:#fff}
  .orbit-card h3{font-family:var(--font-display);font-size:var(--t-h3);color:#fff;margin:0 0 var(--s-3)}
  .orbit-pain{color:rgba(255,255,255,.78);line-height:1.6;margin:0 0 var(--s-4);font-size:var(--t-body)}
  .orbit-sol{color:#fff;line-height:1.6;margin:0;padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.14);font-size:var(--t-body)}
  .orbit-sol strong{color:var(--teal-300);font-weight:700}
  .orbit-close{display:none}

  /* Modo orbital (JS ativo) */
  .orbit.is-ready{position:relative;margin-top:var(--s-6)}
  .orbit.is-ready .orbit-hint{
    display:flex;align-items:center;gap:8px;text-align:left;color:rgba(255,255,255,.78);
    font-size:var(--t-small);font-weight:600;letter-spacing:.02em;margin:0 0 var(--s-5)}
  .orbit-hint-ico{width:17px;height:17px;flex:none;color:var(--teal-300)}
  .orbit.is-ready .orbit-stage{
    display:block;position:relative;width:clamp(300px,84vw,480px);aspect-ratio:1;margin:0 auto}
  .orbit.is-ready .orbit-panels{
    position:absolute;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;
    pointer-events:none;padding:0 12px;padding-top:calc(8% + 86px)}
  .orbit.is-ready .orbit-card{display:none;position:relative;width:min(340px,92%);overflow:visible;pointer-events:auto;
    background:rgba(7,41,62,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 24px 64px rgba(0,0,0,.55);animation:orbit-pop .35s ease both}
  .orbit.is-ready .orbit-card::before{content:"";position:absolute;top:-13px;left:50%;width:1px;height:12px;background:rgba(255,255,255,.5)}
  .orbit.is-ready .orbit-card:not([hidden]){display:block}
  .orbit.is-ready .orbit-card h3{font-size:var(--t-h3);padding-right:28px}
  .orbit.is-ready .orbit-pain,.orbit.is-ready .orbit-sol{font-size:var(--t-small)}
  .orbit.is-ready .orbit-close{
    display:inline-flex;align-items:center;justify-content:center;position:absolute;top:12px;right:12px;
    width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
    background:transparent;color:#fff;cursor:pointer;line-height:0;transition:background .2s ease}
  .orbit.is-ready .orbit-close:hover{background:rgba(255,255,255,.14)}
  .orbit.is-ready .orbit-close svg{width:14px;height:14px}
  @keyframes orbit-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

  .orbit-core{
    position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:999px;
    transform:translate(-50%,-50%);z-index:5;
    background:linear-gradient(135deg,var(--teal-500),var(--navy-600) 55%,var(--teal-700));
    box-shadow:0 0 34px rgba(3,151,163,.55)}
  .orbit-core::before{content:"";position:absolute;inset:-8px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
  /* brilho pulsante — anima só transform+opacity (composto na GPU, sem repaint) */
  .orbit-core::after{content:"";position:absolute;inset:-20px;border-radius:999px;
    background:radial-gradient(circle,rgba(3,151,163,.5) 0%,rgba(3,151,163,0) 70%);
    animation:orbit-pulse 3s cubic-bezier(.4,0,.6,1) infinite}
  .orbit-core i{position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:999px;transform:translate(-50%,-50%);background:rgba(255,255,255,.85)}
  @keyframes orbit-pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}

  .orbit-ring{position:absolute;left:50%;top:50%;width:84%;height:84%;transform:translate(-50%,-50%);border-radius:999px;border:1px solid rgba(255,255,255,.12);z-index:1}

  .orbit-node{
    position:absolute;left:50%;top:50%;display:block;width:44px;height:44px;padding:0;border:0;
    background:transparent;cursor:pointer;will-change:transform;
    transition:opacity .5s ease}
  /* durante o giro livre não há transição de transform (o rAF move quadro a quadro);
     ela só entra quando um card abre, pra bolinha deslizar até o topo */
  .orbit.has-active .orbit-node{transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .5s ease}
  /* halo / brilho atrás da bolinha */
  .orbit-node::before{
    content:"";position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);
    border-radius:999px;pointer-events:none;opacity:.55;
    background:radial-gradient(circle,rgba(99,196,205,.30) 0%,rgba(99,196,205,0) 70%);
    transition:opacity .35s ease,transform .35s ease,width .35s ease,height .35s ease}
  .orbit-ico{
    position:relative;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;
    background:var(--navy-900);border:1.5px solid rgba(255,255,255,.32);color:#fff;
    box-shadow:0 0 0 5px var(--navy-900);
    transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease}
  .orbit-ico svg{width:18px;height:18px}
  .orbit-label{
    position:absolute;top:52px;left:50%;transform:translateX(-50%);white-space:nowrap;
    font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.03em;
    color:rgba(255,255,255,.72);transition:color .3s ease,transform .3s ease}
  .orbit-node:hover .orbit-ico{border-color:#fff;background:var(--navy-700)}
  .orbit-node:hover::before{opacity:.9}
  .orbit-node:focus-visible{outline:none}
  .orbit-node:focus-visible .orbit-ico{outline:3px solid var(--teal-300);outline-offset:3px}

  /* convite ao clique: halo pulsa (só transform+opacity = sem repaint) até a 1ª interação */
  .orbit:not(.interacted) .orbit-node:not(.is-active)::before{
    animation-name:orbit-invite;animation-duration:2.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
  .orbit-node[data-i="1"]::before{animation-delay:.52s}
  .orbit-node[data-i="2"]::before{animation-delay:1.04s}
  .orbit-node[data-i="3"]::before{animation-delay:1.56s}
  .orbit-node[data-i="4"]::before{animation-delay:2.08s}
  @keyframes orbit-invite{
    0%,100%{opacity:.22;transform:translate(-50%,-50%) scale(.7)}
    50%{opacity:.6;transform:translate(-50%,-50%) scale(1.45)}
  }
  .orbit-node.is-active .orbit-ico{
    background:var(--teal-500);border-color:#fff;color:#fff;transform:scale(1.5);
    box-shadow:0 0 0 5px var(--navy-900),0 6px 26px rgba(3,151,163,.8)}
  .orbit-node.is-active::before{
    opacity:1;width:118px;height:118px;
    background:radial-gradient(circle,rgba(99,196,205,.45) 0%,rgba(99,196,205,0) 70%);
    animation:orbit-glow 2s ease-in-out infinite}
  .orbit-node.is-active .orbit-label{color:#fff;transform:translateX(-50%) scale(1.18);top:58px}
  @keyframes orbit-glow{0%,100%{opacity:.7}50%{opacity:1}}
  @media (min-width:768px){ .orbit-label{font-size:.8rem} }
  @media (prefers-reduced-motion:reduce){
    .orbit-core,.orbit-node::before,.orbit-node.is-active::before,.orbit-node .orbit-ico{animation:none}
    .orbit-card{animation:none}
    .orbit-node,.orbit-ico,.orbit-label,.orbit-node::before{transition:none}
  }

  /* ---------- Método (accordion + fundo shader "Mesh drift") ---------- */
  .method{position:relative;overflow:clip;background:var(--navy-900);color:#fff}
  .method .mesh-bg{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
  .method::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(120% 90% at 15% 0%,rgba(7,41,62,.62),rgba(7,41,62,.34) 55%,rgba(7,41,62,.5))}
  .method > .container{position:relative;z-index:2}
  .method .overline{color:var(--teal-300)}
  .cta-final .overline{color:var(--teal-300)}
  #method-title{color:#fff}
  .mtd-accordion{display:flex;gap:var(--s-3);margin-top:var(--s-6);list-style:none;min-height:340px}
  .mtd-item{display:flex;flex:1 1 0;min-width:72px;
    transition:flex-grow .6s cubic-bezier(.4,0,.2,1)}
  .mtd-item:has(.mtd-panel[aria-expanded="true"]){flex-grow:10;min-width:0}
  .mtd-panel{
    position:relative;overflow:hidden;isolation:isolate;
    height:340px;flex:1 1 auto;width:100%;
    border:none;border-radius:var(--r-xl);
    background:var(--navy);color:#fff;cursor:pointer;
    font-family:var(--font-body);text-align:left;padding:0;
    transition:background-color .4s ease;
  }
  .mtd-panel{background:rgba(7,41,62,.44);border:1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2)}
  .mtd-panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(7,41,62,0) 30%,rgba(7,41,62,.6) 100%);opacity:0;transition:opacity .4s}
  .mtd-panel[aria-expanded="true"]{background:rgba(10,48,73,.66)}
  .mtd-panel[aria-expanded="true"]::after{opacity:1}
  /* numeral gigante e discreto preenche o card aberto */
  .mtd-panel::before{
    content:attr(data-num);position:absolute;z-index:1;right:-6px;bottom:-56px;
    font-family:var(--font-display);font-weight:800;font-size:11rem;line-height:1;
    color:rgba(255,255,255,.05);pointer-events:none;letter-spacing:-.03em;
    opacity:0;transition:opacity .5s ease .1s}
  .mtd-panel[aria-expanded="true"]::before{opacity:1}
  .mtd-panel:hover,.mtd-panel:focus-visible{outline:none}
  .mtd-panel:focus-visible{box-shadow:0 0 0 3px var(--accent-solid),0 0 0 6px rgba(3,151,163,.35)}

  .mtd-num{position:absolute;top:22px;left:0;right:0;z-index:2;text-align:center;
    font-family:var(--font-mono);font-weight:700;font-size:1rem;color:var(--teal-300);transition:all .4s ease}
  .mtd-panel[aria-expanded="true"] .mtd-num{left:32px;right:auto;text-align:left}

  .mtd-title{position:absolute;z-index:2;left:50%;bottom:110px;
    transform:translate(-50%,50%) rotate(-90deg);transform-origin:center;
    white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:1.125rem;
    letter-spacing:-.01em;transition:all .45s cubic-bezier(.4,0,.2,1)}
  .mtd-panel[aria-expanded="true"] .mtd-title{
    left:32px;bottom:auto;top:52px;transform:none;font-size:var(--t-h3);line-height:1.2;
    max-width:calc(100% - 64px);white-space:normal}

  /* descrição flui logo abaixo do título (em vez de grudada no rodapé do card) */
  .mtd-desc{position:absolute;z-index:2;left:32px;right:32px;bottom:32px;top:auto;
    color:var(--mist);font-size:var(--t-small);line-height:1.6;max-width:46ch;
    opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,top .45s cubic-bezier(.4,0,.2,1)}
  .mtd-panel[aria-expanded="true"] .mtd-desc{
    top:112px;bottom:auto;opacity:1;transform:none;transition-delay:.28s}

  @media (max-width:767px){
    .mtd-accordion{flex-direction:column;gap:var(--s-3);min-height:0}
    .mtd-item,.mtd-item:has(.mtd-panel[aria-expanded="true"]){flex:none;width:100%}
    .mtd-panel,.mtd-panel[aria-expanded="true"]{flex:none;width:100%;height:auto;
      display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);
      padding:24px 26px;background:var(--navy)}
    .mtd-panel::after,.mtd-panel::before{display:none}
    .mtd-num,.mtd-title,.mtd-desc{position:static;transform:none;left:auto;right:auto;bottom:auto;top:auto}
    .mtd-num{text-align:left}
    .mtd-title{white-space:normal;font-size:var(--t-h3);max-width:none}
    .mtd-desc{opacity:1;max-width:none;transition:none}
  }

  /* ---------- Prova social (carrossel de depoimentos) ---------- */
  .testimonials{background:var(--paper)}
  .tst-carousel{margin-top:var(--s-7);max-width:1000px;margin-inline:auto;touch-action:pan-y}
  .tst-stage{position:relative;display:flex;flex-direction:column;align-items:center}
  .tst-photo{
    position:relative;width:100%;max-width:420px;aspect-ratio:1;flex:none;
    border-radius:var(--r-xl);overflow:hidden;background:var(--navy-100);box-shadow:var(--sh-2)}
  .tst-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .45s ease}
  .tst-photo img.is-active{opacity:1}
  .tst-card{
    position:relative;z-index:2;width:100%;max-width:560px;margin-top:calc(-1 * var(--s-6));
    background:var(--navy-900);color:#fff;border-radius:var(--r-xl);padding:28px 26px;
    box-shadow:0 24px 60px rgba(7,41,62,.30)}
  .tst-slide{display:none}
  .tst-slide.is-active{display:block;animation:tst-fade .45s ease both}
  @keyframes tst-fade{from{opacity:0}to{opacity:1}}
  .tst-card h3{font-family:var(--font-display);font-size:var(--t-h3);color:#fff;margin:0;line-height:1.1}
  .tst-card .role{font-size:var(--t-small);color:var(--teal-300);margin:5px 0 0;font-weight:600}
  .tst-card blockquote{margin:18px 0 0;font-size:1.0625rem;line-height:1.62;color:rgba(255,255,255,.9)}
  @media (min-width:900px){
    .tst-stage{flex-direction:row;align-items:center;min-height:440px}
    .tst-photo{width:440px;max-width:none;margin:0}
    .tst-card{margin:0 0 0 -72px;padding:40px}
    .tst-card blockquote{font-size:1.125rem}
  }

  .tst-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:var(--s-6)}
  .tst-arrow{
    width:48px;height:48px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);
    display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-1);
    transition:background .2s ease,transform .2s ease}
  .tst-arrow:hover{background:var(--paper);transform:scale(1.05)}
  .tst-arrow:focus-visible{outline:3px solid var(--accent-solid);outline-offset:3px}
  .tst-arrow svg{width:22px;height:22px}
  /* área de toque de 24x24 (mínimo WCAG 2.5.8) com o pontinho visual de 11px
     centralizado via ::before, pra não mudar a aparência */
  .tst-dots{display:flex}
  .tst-dot{width:24px;height:24px;display:flex;align-items:center;justify-content:center;
    border-radius:999px;border:0;padding:0;background:transparent;cursor:pointer}
  .tst-dot::before{content:"";width:11px;height:11px;border-radius:999px;background:var(--navy-100);transition:background .2s ease}
  .tst-dot.is-active::before{background:var(--navy)}
  .tst-dot:focus-visible{outline:3px solid var(--accent-solid);outline-offset:1px}
  @media (prefers-reduced-motion:reduce){
    .tst-photo img{transition:none}
    .tst-slide.is-active{animation:none}
    .tst-arrow{transition:none}
  }

  /* ---------- Quem é a Stork ---------- */
  .about{background:var(--bg)}
  /* Accordion de imagens dos fundadores (expande no hover / foco) */
  .fdr-accordion{display:flex;gap:var(--s-3);margin-top:var(--s-6);min-height:520px;list-style:none}
  .fdr-card{
    position:relative;overflow:hidden;isolation:isolate;
    flex:1 1 0;min-width:0;border-radius:var(--r-xl);
    background:var(--navy);color:#fff;cursor:pointer;
    transition:flex-grow .45s cubic-bezier(.4,0,.2,1);
  }
  .fdr-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-solid),0 0 0 6px rgba(3,151,163,.35)}
  .fdr-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;z-index:0}
  .fdr-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(7,41,62,0) 32%,rgba(7,41,62,.55) 62%,rgba(7,41,62,.86) 100%)}
  .fdr-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:rgba(7,41,62,.4);opacity:0;transition:opacity .4s}
  .fdr-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px;display:flex;flex-direction:column;gap:6px}
  .fdr-name{font-family:var(--font-display);font-weight:800;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.01em;color:#fff}
  .fdr-role{font-family:var(--font-display);font-size:var(--t-caption);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--teal-300)}
  .fdr-bio{font-size:var(--t-small);line-height:1.6;color:var(--mist);max-width:44ch;
    opacity:0;max-height:0;transform:translateY(6px);
    transition:opacity .3s ease,transform .3s ease,max-height .45s ease,margin-top .3s ease}
  .fdr-card:hover,.fdr-card:focus-visible{flex-grow:4}
  .fdr-accordion:hover .fdr-card:not(:hover)::after,
  .fdr-accordion:focus-within .fdr-card:not(:focus-visible)::after{opacity:1}
  .fdr-card:hover .fdr-bio,.fdr-card:focus-visible .fdr-bio{opacity:1;max-height:18em;transform:none;margin-top:4px}

  @media (max-width:767px){
    .fdr-accordion{flex-direction:column;gap:var(--s-4);min-height:0}
    .fdr-card,.fdr-card:hover,.fdr-card:focus-visible{flex:none;min-height:380px}
    .fdr-card::after{display:none}
    .fdr-bio{opacity:1;max-height:none;transform:none;margin-top:4px}
    /* Toque amplia a foto */
    .fdr-photo{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
    .fdr-card:active .fdr-photo{transform:scale(1.04)}
    .fdr-card.zoomed .fdr-photo{transform:scale(1.09)}
  }
  @media (prefers-reduced-motion:reduce){ .fdr-card,.fdr-bio,.fdr-photo{transition:none} }

  /* ---------- Formulário + CTA final (gradiente oficial) ---------- */
  .cta-final{position:relative;overflow:clip;color:#fff;background:var(--navy-900)}
  .cta-final .wave-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
  .cta-final .wave-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .cta-final::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(115deg,rgba(7,41,62,.5) 0%,rgba(7,41,62,.28) 45%,rgba(1,94,107,.26) 100%)}
  .cta-final .container{position:relative;z-index:2}
  .cta-grid{display:grid;gap:var(--s-7);grid-template-columns:1fr;align-items:start}
  @media (min-width:900px){ .cta-grid{grid-template-columns:1fr 1fr;gap:var(--s-8)} }
  .cta-copy h2{color:#fff}
  .cta-copy .lead{color:var(--mist)}

  .lead-form{
    position:relative;isolation:isolate;
    border-radius:var(--r-xl);padding:clamp(24px,4vw,40px);color:var(--navy);
    background:rgba(10,48,73,.34);
    -webkit-backdrop-filter:blur(24px) saturate(1.4);
            backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:
      0 0 6px rgba(0,0,0,.05),
      0 18px 50px rgba(7,41,62,.28),
      inset 3px 3px .5px -3px rgba(255,255,255,.95),
      inset -3px -3px .5px -3px rgba(255,255,255,.85),
      inset 1px 1px 1px -.5px rgba(255,255,255,.7),
      inset -1px -1px 1px -.5px rgba(255,255,255,.7),
      inset 0 0 8px 8px rgba(255,255,255,.10),
      inset 0 0 2px 2px rgba(255,255,255,.06),
      0 0 14px rgba(255,255,255,.18);
  }
  @media (prefers-reduced-motion:reduce){ .lead-form{backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} }
  .field{display:flex;flex-direction:column;margin-bottom:var(--s-5)}
  .field label{font-family:var(--font-display);font-weight:600;font-size:.9375rem;margin-bottom:var(--s-2);color:#fff}
  .field .req{color:var(--danger)}
  .field input,.field select{height:56px;padding:0 16px;font-family:var(--font-body);font-size:16px;color:var(--navy);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.85);border-radius:var(--r-md);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
  .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
  .field input::placeholder{color:var(--navy);opacity:.5}
  .field input:hover,.field select:hover{border-color:#fff;background:rgba(255,255,255,.92)}
  .field input:focus,.field select:focus{outline:none;border-color:var(--accent-solid);box-shadow:0 0 0 4px rgba(3,151,163,.22)}
  .field .help{font-size:.8125rem;color:var(--mist);margin-top:var(--s-2)}
  .field .error-msg{font-size:.8125rem;color:var(--danger);margin-top:var(--s-2);display:none}
  .field.has-error input,.field.has-error select{border-color:var(--danger);box-shadow:0 0 0 4px rgba(179,38,30,.14)}
  .field.has-error .error-msg{display:block}
  .consent{display:flex;gap:var(--s-3);align-items:flex-start;margin-bottom:var(--s-5)}
  .consent input{width:22px;height:22px;flex:none;accent-color:var(--accent-solid);margin-top:2px}
  .consent label{font-size:var(--t-small);color:var(--mist);line-height:1.5}
  .form-status{display:none;margin-top:var(--s-4);padding:var(--s-4);border-radius:var(--r-md);font-size:var(--t-small);font-weight:600}
  .form-status.ok{display:block;background:rgba(14,124,99,.12);color:var(--success)}
  .form-status-txt{margin:0 0 var(--s-4)}
  .form-status .form-status-wa{display:flex;width:100%}

  /* FAQ — mesmo painel "liquid glass" do formulário, sobre o fundo animado */
  .faq-wrap{margin-top:var(--s-9)}
  .faq-wrap .section-head{max-width:64ch}
  .faq-wrap .section-head h2{color:#fff}
  .faq-panel{
    margin-top:var(--s-6);
    border-radius:var(--r-xl);padding:clamp(6px,1.5vw,14px) clamp(10px,2vw,20px);
    background:rgba(10,48,73,.34);
    -webkit-backdrop-filter:blur(24px) saturate(1.4);
            backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:
      0 0 6px rgba(0,0,0,.05),
      0 18px 50px rgba(7,41,62,.28),
      inset 3px 3px .5px -3px rgba(255,255,255,.95),
      inset -3px -3px .5px -3px rgba(255,255,255,.85),
      inset 1px 1px 1px -.5px rgba(255,255,255,.7),
      inset -1px -1px 1px -.5px rgba(255,255,255,.7),
      inset 0 0 8px 8px rgba(255,255,255,.10),
      inset 0 0 2px 2px rgba(255,255,255,.06),
      0 0 14px rgba(255,255,255,.18);
  }
  @media (prefers-reduced-motion:reduce){ .faq-panel{backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} }
  .faq-item{border-bottom:1px solid rgba(255,255,255,.14)}
  .faq-item:last-child{border-bottom:0}
  .faq-item summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
    padding:var(--s-5) var(--s-3);
    font-family:var(--font-display);font-weight:600;font-size:var(--t-body);line-height:1.4;color:#fff;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:"";width:20px;height:20px;flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2363C4CD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform .3s ease;
  }
  .faq-item[open] summary::after{transform:rotate(180deg)}
  .faq-item summary:hover{color:var(--teal-300)}
  .faq-item summary:focus-visible{outline:3px solid var(--teal-300);outline-offset:-3px;border-radius:var(--r-md)}
  .faq-answer{padding:0 var(--s-3) var(--s-5);color:var(--mist);line-height:1.65;font-size:var(--t-small);max-width:70ch}
  .faq-answer p{margin:0}
  .faq-item[open] .faq-answer{animation:faq-in .26s ease both}
  @keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .faq-item summary::after{transition:none} .faq-item[open] .faq-answer{animation:none} }

  /* ---------- Footer (liquid glass, mesmo estilo do formulário) ---------- */
  .site-footer{display:block;position:relative;z-index:2;color:#fff;margin-top:var(--s-8);padding:0}
  .site-footer .container{
    position:relative;isolation:isolate;
    display:flex;flex-wrap:wrap;gap:var(--s-6) var(--s-7);justify-content:space-between;align-items:center;
    border-radius:var(--r-xl);
    padding:clamp(24px,4vw,40px);
    background:rgba(10,48,73,.34);
    -webkit-backdrop-filter:blur(24px) saturate(1.4);
            backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:
      0 0 6px rgba(0,0,0,.05),
      0 18px 50px rgba(7,41,62,.28),
      inset 3px 3px .5px -3px rgba(255,255,255,.95),
      inset -3px -3px .5px -3px rgba(255,255,255,.85),
      inset 1px 1px 1px -.5px rgba(255,255,255,.7),
      inset -1px -1px 1px -.5px rgba(255,255,255,.7),
      inset 0 0 8px 8px rgba(255,255,255,.10),
      inset 0 0 2px 2px rgba(255,255,255,.06),
      0 0 14px rgba(255,255,255,.18);
  }
  @media (prefers-reduced-motion:reduce){ .site-footer .container{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} }
  .site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-5)}
  .site-footer a{color:var(--teal-300)}
  .site-footer a:hover{color:#fff}
  .site-footer .footer-cta{align-self:center}
  .footer-social{list-style:none;display:flex;gap:var(--s-3);align-self:center}
  .footer-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);color:#fff;transition:background .2s ease,border-color .2s ease}
  .footer-social a:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
  .footer-social a:focus-visible{outline:3px solid var(--teal-300);outline-offset:2px}
  .footer-social svg{width:20px;height:20px}
  .site-footer .small{color:rgba(255,255,255,.62);margin-top:var(--s-4);width:100%}

  /* ---------- Barra fixa mobile ---------- */
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:var(--s-3);background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(12,59,89,.10);transform:translateY(120%);transition:transform .3s ease}
  .mobile-bar.visible{transform:translateY(0)}
  .mobile-bar .btn-pearl{display:block;width:100%;text-align:center}
  .mobile-bar .btn-pearl .wrap{padding:17px 26px}
  .mobile-bar .btn-pearl .wrap p{justify-content:center}
  @media (min-width:768px){ .mobile-bar{display:none} }
  @media (max-width:767px){ body.has-mobile-bar{padding-bottom:84px} }

  /* Banner de consentimento (LGPD) */
  /* Banner de consentimento — mesmo "liquid glass" do formulário e do FAQ */
  .consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;flex-wrap:wrap;
    align-items:center;justify-content:center;gap:var(--s-3) var(--s-5);
    padding:var(--s-4) var(--s-5);color:#fff;
    background:rgba(7,41,62,.62);
    -webkit-backdrop-filter:blur(24px) saturate(1.4);
            backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:
      0 -6px 24px rgba(7,41,62,.35),
      inset 3px 3px .5px -3px rgba(255,255,255,.9),
      inset -3px -3px .5px -3px rgba(255,255,255,.8),
      inset 1px 1px 1px -.5px rgba(255,255,255,.6),
      inset 0 0 8px 8px rgba(255,255,255,.08),
      0 0 14px rgba(255,255,255,.14);
    animation:consent-in .35s ease both}
  .consent-bar[hidden]{display:none}
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .consent-bar{background:rgba(7,41,62,.94)}
  }
  @keyframes consent-in{from{transform:translateY(100%)}to{transform:none}}
  .consent-txt{margin:0;font-size:var(--t-small);line-height:1.55;max-width:62ch;color:rgba(255,255,255,.94)}
  .consent-actions{display:flex;gap:var(--s-3);flex:none}
  .consent-btn{font:inherit;font-weight:700;font-size:var(--t-small);cursor:pointer;
    padding:10px 22px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.4);transition:background .2s ease,color .2s ease}
  .consent-decline{background:rgba(255,255,255,.06);color:#fff}
  .consent-decline:hover{background:rgba(255,255,255,.16)}
  /* teal-500 com texto branco dava 3.52:1 (reprova WCAG AA, precisa 4.5:1).
     teal-700 dá 5.71:1. */
  .consent-accept{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
  .consent-accept:hover{background:var(--teal-800);border-color:var(--teal-800)}
  .consent-btn:focus-visible{outline:3px solid var(--teal-300);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){ .consent-bar{animation:none} }

  /* ---------- Reveal on scroll ----------
     A animação move SÓ o transform (sobe 26px). A opacidade fica sempre 1, de
     propósito: assim todo o conteúdo nasce visível pra quem não rola a página
     (crawlers, geradores de preview, ferramentas de screenshot, monitores) e o
     efeito não some se a timeline de scroll falhar. Sem JS o elemento fica
     parado; com JS a animação roda ligada à posição do scroll (ver @supports)
     ou, no fallback, quando o IntersectionObserver marca .is-visible. */
  .reveal{opacity:1}
  .js .reveal.is-visible{animation:reveal-rise .7s cubic-bezier(.16,1,.3,1) both}
  .js .reveal.reveal-d1.is-visible{animation-delay:.08s}
  .js .reveal.reveal-d2.is-visible{animation-delay:.16s}
  @keyframes reveal-rise{
    from{transform:translateY(26px)}
    to{transform:none}
  }
  /* Onde houver suporte (Safari 26+, Chrome 115+) a animação passa a ser ligada
     à POSIÇÃO do scroll, não a um evento. Medido no simulador iOS 26: num flick
     a página anda mais de 500px entre dois quadros, então o bloco pula a zona de
     gatilho inteira e qualquer trigger por evento (IntersectionObserver, listener
     de scroll e loop de rAF disparam todos no mesmo quadro, foi medido) chega com
     o bloco já no meio da tela, ou acima dela. Ligado ao scroll isso não existe:
     o progresso é função da posição do bloco na viewport.
     Requer que nenhum ancestral seja scroll container, daí overflow:clip nas seções.
     Sem suporte, cai no IntersectionObserver do JS. */
  @supports (animation-timeline: view()){
    .js .reveal,.js .reveal.is-visible{
      animation:reveal-rise 1s linear both;
      animation-timeline:view();
      /* faixa curta logo depois da barra fixa — só o tempo de o bloco subir */
      animation-range:cover 100px cover 240px;
    }
    .js .reveal.reveal-d1,.js .reveal.reveal-d1.is-visible{animation-range:cover 140px cover 280px}
    .js .reveal.reveal-d2,.js .reveal.reveal-d2.is-visible{animation-range:cover 180px cover 320px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
    .js .reveal,.js .reveal.is-visible{transform:none;animation:none}
  }

  /* ===================================================================
     PÁGINAS DE CONTEÚDO (trafego-pago, posicionamento, guias, caso...)
     Reusa tokens e componentes do index. Só estilos que o index não tem.
     =================================================================== */
  /* Capa "minimalist hero": headline partida + cegonha da marca no círculo em gradiente */
  .page-hero{position:relative;overflow:clip;background:var(--navy-900);color:#fff;
    padding-block:124px 40px;min-height:min(86vh,720px);display:flex;align-items:center}
  @media (min-width:900px){ .page-hero{padding-block:160px 0;min-height:min(94vh,860px);align-items:stretch} }
  .page-hero .lumitopo{position:absolute;inset:0 0 auto 0;height:55%;background:radial-gradient(120% 80% at 20% 0%,rgba(3,151,163,.20),transparent 70%);pointer-events:none;z-index:0}
  .page-hero .container{position:relative;z-index:2;width:100%;
    display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
  @media (min-width:900px){ .page-hero .container{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} }
  .page-hero .crumbs{font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-300);margin-bottom:var(--s-5)}
  .page-hero .crumbs a{color:var(--teal-300)}
  .page-hero h1{font-size:clamp(2.5rem,1.5rem + 4.4vw,4.6rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin-bottom:var(--s-5);text-wrap:balance}
  .page-hero h1 .accent{color:var(--teal-300)}
  .page-hero .lead{color:var(--mist);max-width:44ch;font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
  .page-hero .btn-wrap{margin-top:var(--s-6)}

  .ph-text{position:relative;z-index:2}
  .ph-visual{position:relative;z-index:1;min-height:300px;display:flex;justify-content:center;align-items:flex-end}
  @media (min-width:900px){ .ph-visual{position:absolute;right:clamp(-24px,1vw,40px);top:0;bottom:0;width:44%;min-height:0} }
  .ph-circle{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
    width:clamp(250px,66vw,440px);aspect-ratio:1;border-radius:50%;
    background:var(--gradiente);box-shadow:0 40px 120px rgba(3,151,163,.26)}
  @media (min-width:900px){ .ph-circle{bottom:11%;width:clamp(300px,29vw,470px)} }
  .ph-cegonha{position:relative;z-index:1;align-self:flex-end;width:clamp(210px,56vw,380px);height:auto;
    margin-bottom:-2px;filter:drop-shadow(0 26px 50px rgba(6,40,58,.42))}
  @media (min-width:900px){ .ph-cegonha{width:clamp(290px,31vw,450px)} }
  .ph-foot{grid-column:1;z-index:3;margin-top:var(--s-6);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4)}
  @media (min-width:900px){ .ph-foot{margin-top:var(--s-8);margin-bottom:56px} }

  /* Animação de entrada da capa (stagger, estilo framer-motion da referência).
     Só com .js (setado antes do 1º paint); sem JS ou reduced-motion, tudo nasce visível. */
  @keyframes ph-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes ph-rise-lg{from{opacity:0;transform:translateY(52px)}to{opacity:1;transform:none}}
  @keyframes ph-pop{from{opacity:0;transform:translateX(-50%) scale(.82)}to{opacity:1;transform:translateX(-50%) scale(1)}}
  .js .page-hero .crumbs   {animation:ph-rise .55s ease .05s both}
  .js .page-hero h1        {animation:ph-rise .7s cubic-bezier(.22,1,.36,1) .18s both}
  .js .page-hero .lead     {animation:ph-rise .7s ease .95s both}
  .js .page-hero .btn-wrap {animation:ph-rise .7s ease 1.1s both}
  .js .page-hero .ph-foot  {animation:ph-rise .6s ease 1.25s both}
  .js .page-hero .ph-circle{animation:ph-pop .85s cubic-bezier(.22,1,.36,1) .2s both}
  .js .page-hero .ph-cegonha{animation:ph-rise-lg 1s cubic-bezier(.22,1,.36,1) .42s both}
  @media (prefers-reduced-motion:reduce){
    .js .page-hero .crumbs,.js .page-hero h1,.js .page-hero .lead,.js .page-hero .btn-wrap,
    .js .page-hero .ph-foot,.js .page-hero .ph-circle,.js .page-hero .ph-cegonha{animation:none}
  }
  .ph-foot .footer-social a{border-color:rgba(255,255,255,.32)}
  .ph-foot .ph-loc{font-size:var(--t-small);color:rgba(255,255,255,.7)}

  /* Faixa animada (WebGL) atrás de CTA + FAQ + rodapé (seções grudadas) */
  .dark-run{position:relative;isolation:isolate;background:var(--navy-900)}
  .dark-run > .grad-bg{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:0;opacity:.78;pointer-events:none}
  .dark-run::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(7,41,62,.22),rgba(7,41,62,.42))}
  .dark-run > .cta-band,
  .dark-run > .faq-section,
  .dark-run > .site-footer{position:relative;z-index:1;background:transparent}
  .dark-run > .site-footer--pages{background:transparent}
  .dark-run > .cta-band{padding-block:clamp(88px,13vh,150px) clamp(80px,11vh,130px)}
  .dark-run > .faq-section{padding-block:clamp(40px,6vh,80px) clamp(96px,15vh,160px)}
  @media (prefers-reduced-motion:reduce){ .dark-run > .grad-bg{opacity:.6} }

  .prose{max-width:70ch}
  .prose > * + *{margin-top:var(--s-4)}
  .prose h2{margin-top:var(--s-8);font-size:var(--t-h2)}
  .prose h3{margin-top:var(--s-6);font-size:var(--t-h3)}
  .prose h2 + p, .prose h3 + p{margin-top:var(--s-3)}
  .prose ul,.prose ol{padding-left:1.25em}
  .prose li + li{margin-top:var(--s-2)}
  .prose strong{color:var(--navy)}
  .prose a{font-weight:600}
  .content-section{background:var(--bg)}
  .content-section.alt{background:var(--paper)}
  .content-section .container{max-width:900px}
  /* seções de conteúdo em sequência não somam padding (evita rasgo de espaço em branco) */
  .content-section + .content-section{padding-top:0}
  .content-section + .content-section.alt,
  .content-section.alt + .content-section{padding-top:var(--s-7)}

  /* Linha de números em dinheiro (caso / resultado) */
  .money-row{list-style:none;display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--s-6)}
  .money-row li{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);background:var(--surface)}
  .money-row .num{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1.05;color:var(--accent);letter-spacing:-.02em}
  .money-row .label{font-size:var(--t-small);color:var(--text-2);margin-top:var(--s-2)}

  /* Passos numerados (método, o que a Stork faz) */
  .steps{list-style:none;counter-reset:step;display:grid;gap:var(--s-4);margin-top:var(--s-6)}
  .steps li{position:relative;counter-increment:step;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5) var(--s-5) var(--s-5) 68px;background:var(--surface)}
  .steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:var(--s-5);top:var(--s-5);font-family:var(--font-display);font-weight:800;color:var(--teal-500);font-size:1.25rem}
  .steps li h3{font-size:1.125rem;margin-bottom:var(--s-2)}
  .steps li p{font-size:var(--t-small);color:var(--text-2);margin:0}

  /* Banda de CTA no meio/fim das páginas de conteúdo */
  .cta-band{background:var(--navy-900);color:#fff;text-align:center}
  .cta-band .container{max-width:640px}
  .cta-band h2{font-size:var(--t-h2)}
  .cta-band p{margin:var(--s-3) auto 0;color:var(--mist)}
  .cta-band .btn-wrap{margin-top:var(--s-6);display:flex;justify-content:center}

  /* FAQ das páginas de conteúdo: painel escuro isolado (reusa .faq-item) */
  .faq-section{background:var(--navy-900);color:#fff}
  .faq-section .container{max-width:820px}

  /* Rodapé em colunas (home + páginas de conteúdo) */
  .site-footer--pages{background:var(--navy-900);margin-top:0;padding-block:var(--s-7)}
  .cta-final .site-footer--pages{margin-top:var(--s-8);background:transparent}
  .site-footer--pages .container{display:block}
  .site-footer--pages .footer-top{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-6);align-items:center;justify-content:space-between}
  .site-footer--pages .footer-actions{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
  .site-footer--pages .footer-nav{
    display:grid;grid-template-columns:1fr;gap:var(--s-5) var(--s-6);
    margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.14)}
  @media (min-width:480px){ .site-footer--pages .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (min-width:720px){ .site-footer--pages .footer-nav{grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--s-7)} }
  .site-footer--pages .footer-col-title{font-family:var(--font-display);font-size:var(--t-caption);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:var(--s-3)}
  .site-footer--pages .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
  .site-footer--pages .footer-col a{color:var(--teal-300);font-size:var(--t-small)}
  .site-footer--pages .footer-col a:hover{color:#fff}
  .site-footer--pages .small{margin-top:var(--s-6)}