:root{
  /* Cor por vertical: TEMPERATURA E UMIDADE */
  --v-accent:#0FA8C4;
  --v-accent-soft:#D4EFF4;
  --v-accent-deep:#074C58;
  --v-accent-rgb:15,168,196;
}
/* Nota de identidade: o plano original (HANDOFF pré-produção) previa
   ice-blue #4190C8 pra esta página — a mesma cor que, nesse meio tempo,
   já foi usada como identidade do segmento Cadeia do Frio. Como esta
   solução aparece lado a lado com esse segmento em cross-links (nos dois
   sentidos), reaproveitar a cor exata confundiria solução com segmento.
   Nova cor: ciano/gelo mais saturado — mesma família semântica (frio,
   monitoramento), mas perceptualmente distinta de Cadeia do Frio (mais
   azul/arquivo) e de Geotab (azul-céu puro). Registrado em
   production-board-phase1.md. */


  section{position:relative; overflow:hidden;}

  /* ---------- GRAFISMOS (vocabulário visual reutilizável) ---------- */
  .gfx{position:absolute; pointer-events:none;}
  .gfx-stroke{stroke:var(--v-accent-soft);}
  .gfx-stroke-strong{stroke:var(--v-accent);}
  .gfx-dot{fill:var(--v-accent);}
  .gfx-dot-soft{fill:var(--v-accent-soft);}
  .gfx-dot-coral{fill:var(--pink);}
  .gfx-dot-lavender{fill:var(--lavender);}
  .gfx-L{position:absolute; pointer-events:none; font-family:'Switzer',sans-serif; font-weight:900; line-height:1; color:#fff; opacity:.045; user-select:none;}
  .gfx-wave{position:absolute; pointer-events:none;}

  /* ---------- SP-HERO ---------- */
  .sp-hero{background:var(--chumbo); padding-top:150px; padding-bottom:80px;}
  .sp-hero-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .sp-hero-wash{position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(6,20,24,.96) 0%, rgba(8,22,26,.88) 36%, rgba(10,24,26,.45) 68%, rgba(12,26,28,.16) 100%);
  }
  .sp-hero .gfx-arc{top:-220px; right:-220px; z-index:1; opacity:.75;}
  .sp-hero .gfx-route{bottom:26px; right:60px; z-index:1; opacity:.6;}
  .sp-breadcrumb{position:relative; z-index:2; max-width:1220px; margin:0 auto 40px auto; padding:0 80px; font-size:12.5px; color:rgba(255,255,255,.5);}
  .sp-breadcrumb a{color:rgba(255,255,255,.7);}
  .sp-breadcrumb a:hover{color:#fff;}
  /* hero vivo: aproximação muito lenta da foto + leitura discreta respirando.
     Mesmo princípio da seção da noite: movimento calmo, nada de alarme. */
  .sp-hero-media{animation:tuHeroDrift 26s ease-in-out infinite alternate; transform-origin:60% 40%;}
  @keyframes tuHeroDrift{from{transform:scale(1);}to{transform:scale(1.07);}}
  .tu-live{position:absolute; z-index:2; right:80px; bottom:96px; display:flex; align-items:center; gap:12px;
    padding:12px 18px; border-radius:999px; background:rgba(3,24,29,.62); border:1px solid rgba(111,214,232,.28);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:13px;}
  .tu-live-dot{width:8px; height:8px; border-radius:999px; background:#5FD3E6; box-shadow:0 0 0 0 rgba(95,211,230,.55); animation:tuBreathe 3.2s ease-in-out infinite;}
  .tu-live-place{color:rgba(255,255,255,.62); font-weight:500;}
  .tu-live-val{font-family:'Switzer',sans-serif; font-weight:800; font-size:16px; font-variant-numeric:tabular-nums;}
  .tu-live-state{font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#6FD6E8;}
  @keyframes tuBreathe{0%,100%{box-shadow:0 0 0 0 rgba(95,211,230,.45);}50%{box-shadow:0 0 0 7px rgba(95,211,230,0);}}
  @media (prefers-reduced-motion:reduce){ .sp-hero-media,.tu-live-dot{animation:none !important;} }
  @media (max-width:900px){ .tu-live{display:none;} }
  .sp-hero-inner{position:relative; z-index:2; max-width:1220px; margin:0 auto; padding:0 80px;}
  .sp-label{display:inline-flex; align-items:center; gap:10px; background:rgba(var(--v-accent-rgb),.16); border-radius:999px; padding:8px 14px; color:#fff; font-size:13px; font-weight:500; margin-bottom:22px;}
  .sp-label .dot{width:8px; height:8px; border-radius:999px; background:var(--v-accent);}
  .sp-hero h1{font-weight:900; font-size:46px; line-height:1.12; letter-spacing:-1.2px; color:#fff; max-width:720px; margin-bottom:20px;}
  .sp-hero .sub{color:rgba(255,255,255,.85); font-size:17px; line-height:1.6; max-width:600px; margin-bottom:28px;}
  .sp-micro{margin-top:22px; font-size:13.5px; color:rgba(255,255,255,.58); max-width:560px; line-height:1.5;}

  /* ---------- SP-ANSWER (SEO/GEO answer-first) ---------- */
  .sp-answer{background:#fff; padding:70px 80px 20px 80px;}
  .sp-answer-box{position:relative; overflow:hidden; max-width:820px; margin:0 auto; border-left:4px solid var(--v-accent); background:linear-gradient(135deg,#fff 0%, var(--v-accent-soft) 220%); border-radius:0 22px 22px 0; padding:32px 38px;}
  .sp-answer-box .gfx-signal{top:-18px; right:-14px; opacity:.5;}
  .sp-answer-kicker{position:relative; z-index:1; font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent-deep); text-transform:uppercase; margin-bottom:12px;}
  .sp-answer-box h2{position:relative; z-index:1; font-weight:700; font-size:25px; letter-spacing:-.4px; line-height:1.3; margin-bottom:14px;}
  .sp-answer-box p{position:relative; z-index:1; font-size:15.5px; color:var(--ink); line-height:1.65; max-width:640px;}

  /* ---------- SP-PROBLEM ---------- */
  .sp-problem{background:#fff; padding:70px 80px 120px 80px;}
  .sp-problem-wrap{max-width:1220px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:stretch;}
  .sp-problem-media{border-radius:22px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(36,36,48,.35); min-height:420px;}
  .sp-problem-media img{display:block; width:100%; height:100%; object-fit:cover;}
  .sp-problem-content{display:flex; flex-direction:column; gap:34px;}
  .sp-problem-copy h2{font-weight:700; font-size:32px; letter-spacing:-.8px; line-height:1.2; margin-bottom:18px;}
  .sp-problem-copy p{font-size:15.5px; color:var(--ink); line-height:1.65; margin-bottom:14px;}
  .sp-pain-list{display:flex; flex-direction:column; gap:2px;}
  .sp-pain-item{display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid rgba(36,36,48,.1);}
  .sp-pain-item:first-child{padding-top:0;}
  .sp-pain-dot{flex-shrink:0; width:8px; height:8px; border-radius:999px; background:var(--orange); margin-top:8px;}
  .sp-pain-item span{font-size:14px; color:var(--ink); line-height:1.5;}
  .sp-impact{max-width:1220px; margin:56px auto 0 auto; border-top:1px solid rgba(36,36,48,.12); padding-top:36px;}
  .sp-impact p{font-family:'Switzer',sans-serif; font-weight:700; font-size:26px; letter-spacing:-.5px; line-height:1.35; max-width:760px; color:var(--chumbo);}

  /* ---------- SP-INDICATORS ---------- */
  .sp-indicators{background:var(--offwhite); padding:120px 80px;}
  .sp-sec-head{max-width:680px; margin:0 auto 46px auto;}
  .sp-sec-head h2{font-weight:700; font-size:36px; letter-spacing:-.8px; line-height:1.2; margin-bottom:14px;}
  .sp-sec-head p{font-size:16px; color:var(--ink); line-height:1.6;}
  .sp-ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1220px; margin:0 auto;}
  .sp-ind-card{position:relative; overflow:hidden; background:#fff; border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:16px; border:1.5px solid transparent; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
  .sp-ind-card:hover{transform:translateY(-4px); border-color:var(--v-accent); box-shadow:0 14px 30px -18px rgba(var(--v-accent-rgb),.45);}
  .sp-ind-card::after{content:""; position:absolute; top:-34px; right:-34px; width:100px; height:100px; border-radius:50%; background:radial-gradient(circle, rgba(var(--v-accent-rgb),.12), transparent 72%); pointer-events:none;}
  .sp-ind-card:nth-child(3n+2)::after{background:radial-gradient(circle, rgba(159,140,233,.16), transparent 72%);}
  .sp-ind-chip{position:relative; z-index:1; width:46px; height:46px; border-radius:999px; background:var(--v-accent-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .sp-ind-chip::before{content:""; position:absolute; inset:-7px; border-radius:999px; border:1.5px dashed rgba(var(--v-accent-rgb),.45);}
  .sp-ind-card:nth-child(3n+2) .sp-ind-chip{background:rgba(159,140,233,.16);}
  .sp-ind-card:nth-child(3n+2) .sp-ind-chip::before{border-color:rgba(159,140,233,.45);}
  .sp-ind-card:nth-child(3n) .sp-ind-chip{background:rgba(var(--v-accent-rgb),.14);}
  .sp-ind-card h3{position:relative; z-index:1; font-weight:700; font-size:17px;}
  .sp-ind-card p{position:relative; z-index:1; font-size:13.5px; color:var(--ink); line-height:1.5;}

  /* ---------- TU-NIGHT — momento memorável: uma noite monitorada ----------
     Percepção-alvo: tranquilidade, previsibilidade, controle sobre o invisível.
     Por isso: ritmo lento (linha desenha em ~3,6s), nenhum elemento piscando
     em loop, um único ponto de atenção que aparece e se acalma, muito respiro.
     Fundo escuro de "noite" mantém o ritmo claro/escuro da página no mesmo
     lugar onde antes ficava o sp-process. */
  .tu-night{position:relative; padding:130px 80px 110px; color:#fff; overflow:hidden;
    background:radial-gradient(80% 70% at 78% 30%, rgba(var(--v-accent-rgb),.13) 0%, rgba(var(--v-accent-rgb),0) 60%), linear-gradient(180deg,#062A31 0%,#03181D 100%);}
  .tu-night-wrap{max-width:1220px; margin:0 auto;}
  .tu-night-head{max-width:680px; margin-bottom:56px;}
  .tu-night-kicker{display:block; font-size:12.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#6FD6E8; margin-bottom:18px;}
  .tu-night-head h2{font-weight:700; font-size:40px; letter-spacing:-1px; line-height:1.18; margin-bottom:18px;}
  .tu-night-head p{font-size:16.5px; color:rgba(255,255,255,.72); line-height:1.7;}

  .tu-night-stage{display:grid; grid-template-columns:1.75fr 1fr; gap:28px; align-items:stretch;}
  .tu-chart,.tu-log{background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:24px;}
  .tu-chart{padding:34px 34px 22px 64px;}
  .tu-chart-plot{position:relative; height:300px;}
  .tu-chart-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
  .tu-band{fill:rgba(var(--v-accent-rgb),.09); opacity:0; transition:opacity 1.6s ease;}
  .tu-grid{stroke:rgba(255,255,255,.06); stroke-width:1; vector-effect:non-scaling-stroke;}
  .tu-alert-line{stroke:rgba(240,186,92,.55); stroke-width:1; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .9s ease 3.1s;}
  .tu-line{fill:none; stroke:#5FD3E6; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
    stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 6px rgba(95,211,230,.55)); transition:stroke-dashoffset 3.6s cubic-bezier(.45,.05,.35,1) .3s;}
  .tu-band-label{position:absolute; left:-46px; transform:translateY(-50%); font-size:11.5px; font-weight:600; color:rgba(255,255,255,.45);}
  .tu-band-top{top:20%;} .tu-band-bottom{top:80%;}
  .tu-band-caption{position:absolute; left:12px; top:calc(80% - 26px); font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:rgba(111,214,232,.7);}
  .tu-event-dot{position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:999px; background:#F0BA5C;
    box-shadow:0 0 0 0 rgba(240,186,92,.5); opacity:0; transform:scale(.4); transition:opacity .6s ease 2.9s, transform .6s cubic-bezier(.22,1,.36,1) 2.9s;}
  .tu-event-label{position:absolute; font-size:12px; font-weight:600; white-space:nowrap; color:#F5D49A; background:rgba(3,24,29,.85);
    border:1px solid rgba(240,186,92,.3); border-radius:999px; padding:6px 12px; opacity:0; transform:translateY(4px); transition:opacity .7s ease 3.2s, transform .7s ease 3.2s;}
  .tu-chart-axis{display:flex; justify-content:space-between; margin-top:14px; font-size:11.5px; font-weight:600; color:rgba(255,255,255,.42);}

  .tu-night-stage.in .tu-band{opacity:1;}
  .tu-night-stage.in .tu-line{stroke-dashoffset:0;}
  .tu-night-stage.in .tu-alert-line{opacity:1;}
  .tu-night-stage.in .tu-event-dot{opacity:1; transform:scale(1); animation:tuSettle 2.4s ease-out 3.5s 1 both;}
  .tu-night-stage.in .tu-event-label{opacity:1; transform:translateY(0);}
  @keyframes tuSettle{0%{box-shadow:0 0 0 0 rgba(240,186,92,.5);}100%{box-shadow:0 0 0 14px rgba(240,186,92,0);}}

  .tu-log{padding:30px 30px 26px;}
  .tu-log-title{display:block; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:20px;}
  .tu-log ol{list-style:none; display:flex; flex-direction:column;}
  .tu-log li{position:relative; display:grid; grid-template-columns:52px 1fr; column-gap:14px; row-gap:2px; padding:12px 0 12px 0; border-top:1px solid rgba(255,255,255,.06);
    opacity:0; transform:translateY(6px); transition:opacity .7s ease, transform .7s ease;}
  .tu-log li:first-child{border-top:none; padding-top:0;}
  .tu-log time{grid-row:span 2; font-family:'Switzer',sans-serif; font-weight:700; font-size:13.5px; color:#6FD6E8; font-variant-numeric:tabular-nums;}
  .tu-log b{font-size:14px; font-weight:700; color:#fff;}
  .tu-log li span{font-size:12.5px; color:rgba(255,255,255,.55);}
  .tu-log li.is-event time{color:#F0BA5C;}
  .tu-log li.is-final b{color:#B9EEF6;}
  .tu-night-stage.in .tu-log li{opacity:1; transform:translateY(0);}
  .tu-night-stage.in .tu-log li:nth-child(1){transition-delay:.6s;}
  .tu-night-stage.in .tu-log li:nth-child(2){transition-delay:3.1s;}
  .tu-night-stage.in .tu-log li:nth-child(3){transition-delay:3.5s;}
  .tu-night-stage.in .tu-log li:nth-child(4){transition-delay:3.9s;}
  .tu-night-stage.in .tu-log li:nth-child(5){transition-delay:4.5s;}

  .tu-night-close{margin-top:48px; display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .tu-night-close p{font-size:22px; font-weight:600; letter-spacing:-.3px; color:#fff;}
  .tu-night-note{font-size:12px; color:rgba(255,255,255,.38);}

  @media (prefers-reduced-motion:reduce){
    .tu-band,.tu-alert-line,.tu-line,.tu-event-dot,.tu-event-label,.tu-log li{transition:none !important; animation:none !important;}
  }
  @media (max-width:1000px){
    .tu-night-stage{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .tu-night{padding:90px 24px 80px;}
    .tu-night-head h2{font-size:28px;}
    .tu-chart{padding:24px 18px 16px 50px;}
    .tu-chart-plot{height:220px;}
    .tu-band-label{left:-38px; font-size:10.5px;}
    .tu-event-label{font-size:10.5px; padding:5px 9px;}
    .tu-night-close p{font-size:18px;}
  }

  /* ---------- TU-CONTEXT — o sistema diz quando, a Logos mostra a operação ---------- */
  .tu-context{background:#fff; padding:120px 80px;}
  .tu-context-wrap{max-width:1220px; margin:0 auto;}
  .tu-context-head{max-width:720px; margin-bottom:52px;}
  .tu-context-kicker{display:block; font-size:12.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--v-accent-deep); margin-bottom:16px;}
  .tu-context-head h2{font-weight:700; font-size:38px; letter-spacing:-.9px; line-height:1.18; color:var(--chumbo); margin-bottom:18px;}
  .tu-context-head p{font-size:16px; color:var(--ink); line-height:1.65;}
  .tu-context-grid{display:grid; grid-template-columns:1fr 56px 1.6fr; align-items:stretch;}
  .tu-ctx-col{border-radius:22px; padding:32px 30px;}
  .tu-ctx-label{display:block; font-size:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; margin-bottom:22px;}
  .tu-ctx-basic{background:var(--offwhite); border:1px dashed rgba(36,36,48,.18);}
  .tu-ctx-basic .tu-ctx-label{color:rgba(36,36,48,.5);}
  .tu-ctx-basic ul{list-style:none; display:flex; flex-direction:column; gap:16px;}
  .tu-ctx-basic li{display:flex; gap:14px; align-items:baseline; font-size:15px; color:rgba(36,36,48,.62);}
  .tu-ctx-basic time{font-family:'Switzer',sans-serif; font-weight:700; font-size:13.5px; color:rgba(36,36,48,.45); font-variant-numeric:tabular-nums; min-width:44px;}
  .tu-ctx-arrow{display:flex; align-items:center; justify-content:center; color:var(--v-accent);}
  .tu-ctx-logos{background:linear-gradient(160deg,#062A31 0%,#03181D 100%); color:#fff; box-shadow:0 30px 60px -36px rgba(3,24,29,.7);}
  .tu-ctx-logos .tu-ctx-label{color:#6FD6E8;}
  .tu-ctx-item{display:grid; grid-template-columns:120px 1fr; gap:18px; padding:16px 0; border-top:1px solid rgba(255,255,255,.08);}
  .tu-ctx-item:first-of-type{border-top:none; padding-top:0;}
  .tu-ctx-item b{font-size:16px; font-weight:800; color:#B9EEF6;}
  .tu-ctx-item p{font-size:14.5px; color:rgba(255,255,255,.78); line-height:1.6;}
  .tu-context-note{margin-top:22px; font-size:12.5px; color:rgba(36,36,48,.48);}
  @media (max-width:1000px){
    .tu-context-grid{grid-template-columns:1fr;}
    .tu-ctx-arrow{height:48px; transform:rotate(90deg);}
    .tu-why-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    .tu-context,.tu-why{padding:90px 24px;}
    .tu-context-head h2,.tu-why-head h2{font-size:28px;}
    .tu-ctx-col{padding:26px 22px;}
    .tu-ctx-item{grid-template-columns:1fr; gap:6px;}
    .tu-why-grid{grid-template-columns:1fr;}
  }

  /* ---------- SP-HEAVY (não é só o caminhão — armazenamento estático) ---------- */
  .sp-heavy{position:relative; min-height:92vh; display:flex; align-items:flex-end; background:var(--chumbo); overflow:hidden;}
  .sp-heavy-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.02);}
  .sp-heavy-wash{position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(0deg, rgba(6,14,16,.86) 0%, rgba(6,14,16,.32) 32%, rgba(6,14,16,.04) 55%),
      linear-gradient(100deg, rgba(6,14,16,.55) 0%, rgba(6,14,16,.1) 42%, rgba(6,14,16,0) 62%);
  }
  .sp-heavy-copy-card{position:relative; z-index:3; max-width:460px; margin:0 0 72px 80px; background:rgba(10,18,20,.5); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:32px 36px; color:#fff;}
  .sp-heavy-kicker{color:var(--v-accent-soft); font-size:13px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; margin-bottom:12px;}
  .sp-heavy-copy-card h2{font-weight:700; font-size:27px; letter-spacing:-.5px; line-height:1.22; margin-bottom:12px; color:#fff;}
  .sp-heavy-copy-card p{font-size:14.5px; color:rgba(255,255,255,.82); line-height:1.6;}
  @media (max-width:900px){
    .sp-heavy{min-height:78vw;}
    .sp-heavy-copy-card{margin:0 20px 28px 20px; max-width:none;}
  }
  @media (max-width:760px){
    /* modo faixa da cena investigável vem do componente (motion.css); aqui só o respiro do card */
    .sp-heavy-copy-card{padding:30px 24px 40px;}
  }

  /* ---------- SP-BENEFITS ---------- */
  .sp-benefits{background:var(--offwhite); padding:120px 80px;}
  .sp-benefits .gfx-wave{bottom:-10px; right:-20px; opacity:.5;}
  .sp-ben-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1220px; margin:0 auto; position:relative; z-index:1;}
  .sp-ben-card{background:#fff; border-radius:22px; padding:24px; border-top:3px solid var(--v-accent);}
  .sp-ben-card:nth-child(2n){border-top-color:var(--v-accent-deep);}
  .sp-ben-card b{display:block; font-weight:900; font-size:20px; margin-bottom:8px; letter-spacing:-.3px;}
  .sp-ben-card span{font-size:13.5px; color:var(--ink); line-height:1.5;}

  /* ---------- SP-PILLARS (contextos relacionados) ---------- */
  .sp-pillars{background:#fff; padding:120px 80px;}
  .sp-pil-grid{position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:820px; margin:0 auto;}
  .sp-pil-grid::before{content:""; position:absolute; top:52px; left:7%; right:7%; height:1.5px; background:linear-gradient(90deg, transparent, rgba(var(--v-accent-rgb),.4) 12%, rgba(var(--v-accent-rgb),.4) 88%, transparent); z-index:0;}
  .sp-pil-card{position:relative; z-index:1; background:var(--offwhite); border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:14px; border:1.5px solid transparent; transition:transform .25s ease, background .25s ease, border-color .25s ease;}
  .sp-pil-card:hover{transform:translateY(-4px); background:#fff; border-color:var(--v-accent);}
  .sp-pil-chip{position:relative; width:56px; height:56px; border-radius:999px; background:rgba(var(--v-accent-rgb),.12); display:flex; align-items:center; justify-content:center;}
  .sp-pil-chip::before{content:""; position:absolute; inset:-6px; border-radius:999px; border:1.5px solid rgba(var(--v-accent-rgb),.35);}
  .sp-pil-card svg{stroke:var(--v-accent-deep) !important;}
  .sp-pil-card h3{font-weight:700; font-size:17px;}
  .sp-pil-card p{font-size:13.5px; color:var(--ink); line-height:1.5;}

  /* ---------- SP-SEGMENTS ---------- */
  .sp-segments{background:var(--offwhite); padding:120px 80px;}
  .sp-seg-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:820px; margin:0 auto 30px auto;}
  .sp-seg-card{background:#fff; border-radius:22px; padding:22px; display:flex; flex-direction:column; gap:12px; transition:transform .25s ease, box-shadow .25s ease;}
  .sp-seg-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px -20px rgba(var(--v-accent-rgb),.5);}
  .sp-seg-card h3{font-size:15.5px; font-weight:700;}
  .sp-seg-card p{font-size:13px; color:var(--ink); line-height:1.5;}
  .sp-seg-cta{max-width:1220px; margin:0 auto; text-align:center;}
  .sp-seg-cta a{display:inline-flex; font-size:14.5px; font-weight:700; color:var(--v-accent-deep); border-bottom:2px solid var(--v-accent); padding-bottom:2px;}

  /* ---------- SP-CONTENT (conteúdos relacionados) ---------- */
  .sp-content{background:#fff; padding:120px 80px;}
  .sp-cont-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1220px; margin:0 auto;}
  .sp-cont-card{background:var(--offwhite); border-radius:22px; padding:24px; display:flex; flex-direction:column; gap:10px; transition:transform .25s ease;}
  .sp-cont-card:hover{transform:translateY(-4px);}
  .sp-cont-tag{font-size:11.5px; font-weight:700; letter-spacing:.6px; color:var(--v-accent-deep); text-transform:uppercase;}
  .sp-cont-card h3{font-size:15.5px; font-weight:700; line-height:1.35;}
  .sp-cont-card p{font-size:13px; color:var(--ink); line-height:1.5;}

  /* ---------- SP-RELATED SOLUTIONS ---------- */
  .sp-relsol{background:var(--offwhite); padding:80px 80px;}
  .sp-relsol-head{max-width:1220px; margin:0 auto 24px auto; font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--chumbo); opacity:.6; text-transform:uppercase;}
  .sp-relsol-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1220px; margin:0 auto;}
  .sp-relsol-card{background:#fff; border-radius:20px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; min-height:130px; border-top:3px solid var(--v-accent); border-left:1.5px solid transparent; border-right:1.5px solid transparent; border-bottom:1.5px solid transparent; transition:transform .25s ease, border-color .25s ease;}
  .sp-relsol-card:hover{transform:translateY(-4px); border-color:var(--v-accent);}
  .sp-relsol-card.geotab-card{border-top-color:var(--geotab-accent);}
  .sp-relsol-card.geotab-card:hover{border-color:var(--geotab-accent);}
  .sp-relsol-body h3{font-size:16px; font-weight:700; margin-bottom:8px;}
  .sp-relsol-body p{font-size:13px; color:var(--ink); line-height:1.5;}
  .sp-relsol-foot{display:flex; align-items:center; justify-content:flex-end;}
  .sp-relsol-arrow{flex-shrink:0; width:30px; height:30px; border-radius:999px; background:var(--chumbo); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;}
  .sp-relsol-card.geotab-card .sp-relsol-arrow{background:var(--geotab-accent);}

  /* ---------- SP-CASE ---------- */
  /* ---------- TU-WHY — por que resolver isso com a Logos (substitui o case genérico) ---------- */
  .tu-why{background:var(--chumbo); padding:120px 80px; color:#fff;}
  .tu-why-wrap{max-width:1220px; margin:0 auto;}
  .tu-why-head{max-width:760px; margin-bottom:56px;}
  .tu-why-kicker{display:block; font-size:12.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#6FD6E8; margin-bottom:16px;}
  .tu-why-head h2{font-weight:700; font-size:36px; letter-spacing:-.8px; line-height:1.22;}
  .tu-why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .tu-why-item{padding:28px 24px 30px; border-top:1.5px solid rgba(var(--v-accent-rgb),.45); background:linear-gradient(180deg,rgba(var(--v-accent-rgb),.07),rgba(var(--v-accent-rgb),0) 70%); border-radius:0 0 18px 18px;}
  .tu-why-num{display:block; font-family:'Switzer',sans-serif; font-weight:900; font-size:14px; color:var(--v-accent); margin-bottom:18px; letter-spacing:.5px;}
  .tu-why-item h3{font-size:17px; font-weight:800; line-height:1.3; margin-bottom:12px;}
  .tu-why-item p{font-size:14px; color:rgba(255,255,255,.72); line-height:1.6;}

  /* ---------- FAQ ---------- */
  .faq{background:#fff; padding:120px 80px;}
  .faq-head{max-width:720px; margin:0 auto 50px auto;}
  .faq-kicker{font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent-deep); text-transform:uppercase; margin-bottom:14px;}
  .faq-head h2{font-weight:700; font-size:36px; letter-spacing:-.5px; line-height:1.25; margin-bottom:16px;}
  .faq-head p{font-size:16px; color:var(--ink); line-height:1.6; max-width:640px;}
  .faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  .faq-item{background:var(--offwhite); border-radius:20px; padding:22px 26px; transition:background .25s ease;}
  .faq-item[open]{background:#EAF6F8;}
  .faq-item summary{display:flex; justify-content:space-between; align-items:center; gap:20px; font-weight:700; font-size:16px; list-style:none; cursor:pointer;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-icon{flex-shrink:0; width:26px; height:26px; border-radius:999px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:400; color:var(--chumbo); transition:transform .25s ease, background .25s ease, color .25s ease;}
  .faq-item[open] .faq-icon{transform:rotate(45deg); background:var(--v-accent); color:#fff;}
  .faq-item p{font-size:14.5px; color:var(--ink); line-height:1.6; margin-top:14px; padding-right:40px;}

  /* ---------- SP-CTAFINAL ---------- */
  .sp-ctafinal{background:var(--chumbo); padding:110px 80px; color:#fff; text-align:center;}
  .sp-ctafinal::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 700px 420px at 12% 100%, rgba(var(--v-accent-rgb),.18), transparent 60%),
      radial-gradient(ellipse 500px 320px at 92% 0%, rgba(236,26,94,.10), transparent 60%);
  }
  .sp-ctafinal .gfx-route-lg{bottom:-10px; left:-10px; opacity:.55;}
  .sp-ctafinal-inner{position:relative; z-index:2; max-width:640px; margin:0 auto;}
  .sp-ctafinal h2{font-weight:700; font-size:32px; letter-spacing:-.6px; line-height:1.25; margin-bottom:16px;}
  .sp-ctafinal p{font-size:16px; color:rgba(255,255,255,.78); line-height:1.6; margin-bottom:28px;}
  .sp-ctafinal .actions{justify-content:center;}

  @media (max-width:1100px){
    .navbar{padding-left:24px; padding-right:24px;}
    .sp-hero-inner,.sp-breadcrumb,.sp-answer,.sp-problem,.sp-indicators,.sp-benefits,.sp-pillars,.sp-segments,.sp-content,.sp-relsol,.tu-why,.faq,.sp-ctafinal,.footer{padding-left:24px; padding-right:24px;}
    .sp-problem-wrap{flex-direction:column; gap:34px;}
    .sp-pain-list{flex:1;}
    .sp-ind-grid,.sp-relsol-grid{grid-template-columns:1fr 1fr;}
    .sp-seg-grid,.sp-cont-grid,.sp-ben-grid,.sp-pil-grid{grid-template-columns:1fr 1fr;}
    .sp-hero h1{font-size:34px;}
    .faq-item p{padding-right:0;}
  }
  @media (max-width:640px){
    .sp-ind-grid,.sp-pil-grid,.sp-relsol-grid,.sp-seg-grid,.sp-cont-grid,.sp-ben-grid,.sp-problem-wrap{grid-template-columns:1fr;}
  }

/* régua da noite: o cursor percorre as leituras (acabamento 15/10) */
.tu-chart-plot{cursor:crosshair; touch-action:pan-y;}
.tu-cross{position:absolute; top:0; bottom:0; width:0; pointer-events:none; opacity:0; transition:opacity .25s ease; z-index:3;}
.tu-cross.is-on{opacity:1;}
.tu-cross i{position:absolute; top:0; bottom:0; left:0; border-left:1px dashed rgba(255,255,255,.45);}
.tu-cross b{position:absolute; left:-6px; width:12px; height:12px; margin-top:-6px; border-radius:999px; background:#5FD3E6; box-shadow:0 0 0 5px rgba(95,211,230,.25);}
.tu-cross span{position:absolute; top:-30px; left:10px; white-space:nowrap; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; padding:5px 10px; border-radius:999px; background:rgba(8,20,26,.85); border:1px solid rgba(95,211,230,.4);}
.tu-cross.flip span{left:auto; right:10px;}
.tu-cross.is-out b{background:#E94D35; box-shadow:0 0 0 5px rgba(233,77,53,.3);}
.tu-cross.is-out span{border-color:rgba(233,77,53,.6);}
@media (prefers-reduced-motion:reduce){ .tu-cross{transition:none;} }