/* ==========================================================================
   CAPTON: ponte de comando
   Sistema visual: console de embarcacao. Vidro de instrumento sobre metal
   gravado, escala acesa sobre preto, o mar passando atras. Azul #003FF2 e
   superficie, nunca texto sobre escuro.
   ========================================================================== */

/* --- fontes ------------------------------------------------------------- */
@font-face{
  font-family:"Hando";
  src:url("../fonts/Hando-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Hando";
  src:url("../fonts/Hando-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* --- tokens ------------------------------------------------------------- */
:root{
  /* profundidades */
  --abyss:#04090f;
  --hull:#0a141f;
  --deck:#0d1826;
  --bezel:#16212e;
  --bezel-lip:#2c3f55;

  /* marca */
  --blue:#003ff2;
  --blue-deep:#0b2ea8;
  --blue-lit:#4b7bff;

  /* luz */
  --foam:#f2f6fa;
  --lit:#d7e8ff;
  --haze:#94a9c0;
  --haze-dim:#7d93ac;

  --rule:rgba(148,169,192,.16);
  --rule-lit:rgba(148,169,192,.34);

  /* ritmo: base 4px */
  --s1:.25rem;  --s2:.5rem;   --s3:.75rem;  --s4:1rem;
  --s5:1.5rem;  --s6:2rem;    --s7:2.5rem;  --s8:3.5rem;
  --s9:5rem;    --s10:7rem;   --s11:9.5rem; --s12:13rem;

  --gutter:clamp(1.25rem, 5vw, 4rem);
  --measure:66ch;
  --shell:82.5rem;

  /* curva unica: ease-out exponencial */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-quick:cubic-bezier(.33,1,.68,1);
}

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

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

/* o cabecalho e fixo: sem isso a ancora para embaixo dele */
[id]{scroll-margin-top:6rem}

body{
  background:var(--abyss);
  color:var(--foam);
  font-family:"Hando",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--blue);color:#fff}

:focus-visible{
  outline:2px solid var(--blue-lit);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:var(--s4);top:var(--s4);z-index:200;
  padding:var(--s3) var(--s5);background:var(--foam);color:var(--abyss);
  font-weight:700;border-radius:2px;transform:translateY(-200%);
}
.skip:focus{transform:none}

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- tipografia --------------------------------------------------------- */
.display{
  font-weight:700;
  font-size:clamp(2.65rem,7.4vw,5.5rem);
  line-height:.98;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.h2{
  font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3.15rem);
  line-height:1.04;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.h3{
  font-weight:700;
  font-size:clamp(1.3rem,2.1vw,1.8rem);
  line-height:1.15;
  letter-spacing:-.02em;
}
.lede{
  font-size:clamp(1.05rem,1.55vw,1.3rem);
  line-height:1.55;
  color:var(--haze);
  max-width:var(--measure);
}
p{max-width:var(--measure)}

/* rotulo gravado no aro do instrumento */
.engraved{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--haze-dim);
  font-feature-settings:"kern" 1,"tnum" 1;
}
.num{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}

/* --- estrutura ---------------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.band{padding-block:var(--s11)}
.band--tight{padding-block:var(--s9)}

/* cabecalho de secao: hairline + titulo, como friso de console */
.band__head{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  align-items:baseline;
  gap:var(--s5) var(--s6);
  padding-bottom:var(--s5);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s9);
}
.band__head .lede{max-width:38ch}
@media (max-width:760px){
  .band__head{grid-template-columns:1fr}
}

/* --- botoes ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s3);
  padding:.9rem 1.6rem;
  border:0;border-radius:999px;
  font-weight:700;font-size:.975rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:background .25s var(--ease-quick),color .25s var(--ease-quick),
             transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn svg{flex:none}

.btn--primary{
  background:var(--blue);color:#fff;
  box-shadow:0 6px 22px -8px rgba(0,63,242,.9);
}
.btn--primary:hover{
  background:#1a55ff;
  transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(0,63,242,1);
}
.btn--primary:active{transform:translateY(0)}

.btn--ghost{
  background:transparent;color:var(--foam);
  box-shadow:inset 0 0 0 1px var(--rule-lit);
}
.btn--ghost:hover{
  box-shadow:inset 0 0 0 1px var(--foam);
  transform:translateY(-2px);
}

.btn--light{
  background:#fff;color:var(--blue-deep);
}
.btn--light:hover{background:var(--lit);transform:translateY(-2px)}

.btn--lg{padding:1.1rem 2rem;font-size:1.0625rem}

/* --- cabecalho do site -------------------------------------------------- */
.site-head{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .35s var(--ease-quick),box-shadow .35s var(--ease-quick);
}
.site-head[data-stuck]{
  background:var(--hull);
  box-shadow:0 1px 0 var(--rule);
}
.site-head__in{
  display:flex;align-items:center;gap:var(--s6);
  height:76px;
}
.site-head__logo{display:flex;align-items:center;flex:none}
.site-head__logo svg{width:112px;height:auto}
.site-head__nav{
  display:flex;align-items:center;gap:var(--s6);
  margin-left:auto;
}
.site-head__nav a{
  text-decoration:none;font-size:.95rem;color:var(--haze);
  transition:color .2s var(--ease-quick);
  position:relative;
}
.site-head__nav a:hover{color:var(--foam)}
.site-head__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--blue-lit);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.site-head__nav a:hover::after{transform:scaleX(1)}
.site-head__cta{flex:none}
/* o botao do WhatsApp dentro do menu so existe no telefone */
.site-head__nav .btn{display:none}

.burger{display:none;background:none;border:0;padding:var(--s2);cursor:pointer;margin-left:auto}
.burger svg{width:26px;height:26px}

/* ==========================================================================
   HERO: a ponte
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  isolation:isolate;
  padding-top:76px;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--abyss)}
.hero__media video,.hero__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.hero__media video{z-index:1}
/* escurece o mar o suficiente para o texto, e escurece mais na base
   onde mora o instrumento */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,
      rgba(4,9,15,.72) 0%,
      rgba(4,9,15,.20) 22%,
      rgba(4,9,15,.12) 55%,
      rgba(4,9,15,.72) 86%,
      var(--abyss) 100%),
    linear-gradient(to right,
      rgba(4,9,15,.86) 0%,
      rgba(4,9,15,.72) 30%,
      rgba(4,9,15,.18) 58%,
      rgba(4,9,15,.02) 78%,
      rgba(4,9,15,.22) 100%);
}
.hero__in{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s9) var(--s8);
}
.hero__title{max-width:17ch}
.hero__title em{font-style:normal;color:var(--blue-lit)}
.hero__lede{margin-top:var(--s6);max-width:52ch}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:var(--s4);
  margin-top:var(--s8);
}

/* --- coaming: o friso de instrumentos na base da ponte ------------------- */
.coaming{
  position:relative;
  border-top:1px solid var(--rule-lit);
  background:linear-gradient(to bottom, rgba(10,20,31,.86), rgba(4,9,15,.97));
}
.coaming__in{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s6);
  height:88px;
}
.coaming__label{white-space:nowrap}

/* fita de rumo */
.compass{
  position:relative;
  height:52px;
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
}
.compass__tape{
  position:absolute;inset:0;
  width:200%;
  display:flex;
  animation:tape 64s linear infinite;
}
.compass__half{
  width:50%;flex:none;position:relative;
  /* fita de rumo: risco alto a cada 15 graus, tres baixos entre eles */
  background-image:
    repeating-linear-gradient(to right,
      var(--rule-lit) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(to right,
      var(--rule) 0 1px, transparent 1px 25%);
  background-size:4.1667% 13px, 4.1667% 7px;
  background-position:0 calc(100% - 6px), 0 calc(100% - 6px);
  background-repeat:repeat-x;
}
.compass__mark{
  position:absolute;bottom:23px;
  transform:translateX(-50%);
  font-size:.625rem;font-weight:700;letter-spacing:.14em;
  color:var(--haze-dim);
  font-feature-settings:"tnum" 1;
}
.compass__mark[data-card]{color:var(--lit)}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* linha de fe: a seta da Capton marcando o rumo */
.compass__lubber{
  position:absolute;left:50%;top:0;bottom:0;
  transform:translateX(-50%);
  display:flex;align-items:flex-start;justify-content:center;
  pointer-events:none;
}
.compass__lubber::after{
  content:"";position:absolute;top:15px;bottom:6px;width:2px;
  background:linear-gradient(to bottom,var(--blue-lit),rgba(75,123,255,0));
}
.compass__lubber svg{
  width:17px;height:17px;color:var(--blue-lit);
  filter:drop-shadow(0 0 6px rgba(75,123,255,.7));
}

.coaming__read{
  display:flex;align-items:center;gap:var(--s3);
  white-space:nowrap;
}
.coaming__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue-lit);
  box-shadow:0 0 0 3px rgba(75,123,255,.18);
  animation:blip 3.2s var(--ease) infinite;
}
@keyframes blip{0%,72%,100%{opacity:1}80%{opacity:.25}}

/* ==========================================================================
   PRODUTOS: dois rumos do mesmo leme
   ========================================================================== */
.headings{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule);
}
.heading{
  position:relative;
  padding:var(--s8) var(--s7) var(--s8) 0;
  border-bottom:1px solid var(--rule);
}
.heading + .heading{
  padding-left:var(--s7);padding-right:0;
  border-left:1px solid var(--rule);
}
.heading__name{
  font-weight:700;
  font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.05;letter-spacing:-.03em;
}
/* etiqueta acesa da frente: azul da marca como superficie, canto reto e
   tracking curto, para ler como rotulo estampado e nao como botao */
.heading__claim{
  display:inline-flex;align-items:center;gap:var(--s2);
  margin-top:var(--s4);
  padding:.5rem .85rem .55rem;
  border-radius:3px;
  background:var(--blue);
  color:#fff;
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:-.005em;
  line-height:1;
}
.heading__claim svg{width:15px;height:15px;color:#fff;flex:none}
.heading__body{margin-top:var(--s5);color:var(--haze);font-size:1rem}

/* escala graduada: as etapas do rumo */
.scale{
  margin-top:var(--s7);
  display:grid;
  gap:0;
  border-top:1px solid var(--rule);
}
.scale__step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s4);
  align-items:baseline;
  padding:var(--s4) 0;
  border-bottom:1px solid var(--rule);
  position:relative;
}
/* o risco da escala que acende */
.scale__step::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--blue-lit);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.scale__step:hover::before,.scale__step:focus-within::before{transform:scaleX(1)}
.scale__tick{
  color:var(--haze-dim);
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  font-feature-settings:"tnum" 1;
  padding-top:.35rem;
}
.scale__step:hover .scale__tick{color:var(--blue-lit)}
.scale__name{font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}
.scale__note{display:block;font-weight:400;color:var(--haze);font-size:.95rem;margin-top:.15rem}

/* faixa de capacidades: o escopo do ecossistema, gravado como friso */
.caps{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin-bottom:var(--s6);
}
.caps li{
  background:var(--hull);
  padding:var(--s4) var(--s3);
  text-align:center;
}
.caps__note{
  margin:0 0 var(--s9);
  max-width:none;
  color:var(--haze);
}

/* ==========================================================================
   NUMEROS: o painel de instrumentos
   ========================================================================== */
.console{
  border:1px solid var(--rule);
  border-radius:6px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(75,123,255,.07), transparent 60%),
    linear-gradient(to bottom,var(--deck),var(--hull));
  overflow:hidden;
}
.console__rail{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;
  padding:var(--s4) var(--s6);
  border-bottom:1px solid var(--rule);
  background:linear-gradient(to bottom,rgba(44,63,85,.28),transparent);
}
.console__cluster{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule);
}
.gauge{
  background:var(--hull);
  padding:var(--s6) var(--s3) var(--s6);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.gauge__dial{width:min(224px,62vw);height:auto}
.gauge__value{
  font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.75rem);
  line-height:1;letter-spacing:-.035em;
  fill:var(--foam);
}
.gauge__unit{font-size:.44em;letter-spacing:-.01em;fill:var(--haze)}
.gauge__label{margin-top:var(--s4);max-width:16ch}

/* ==========================================================================
   CTA cafe: a pausa quente
   ========================================================================== */
.coffee{
  background:var(--blue);
  color:#fff;
  position:relative;overflow:hidden;
}
.coffee__mark{
  position:absolute;right:-4%;top:50%;
  translate:0 -50%;
  width:min(38rem,52vw);height:auto;
  color:rgba(255,255,255,.07);
  pointer-events:none;
}
.coffee__in{position:relative;padding-block:var(--s10)}
.coffee__q{
  font-weight:700;
  font-size:clamp(1.95rem,4.6vw,3.4rem);
  line-height:1.03;letter-spacing:-.032em;
  max-width:19ch;text-wrap:balance;
}
.coffee__note{margin-top:var(--s5);color:#c3d4ee;max-width:46ch}
.coffee__actions{margin-top:var(--s7);display:flex;flex-wrap:wrap;gap:var(--s4)}
.coffee .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.coffee .btn--ghost:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.08)}

/* ==========================================================================
   CLIENTES: o campo de radar
   ========================================================================== */
.radar{position:relative;overflow:hidden}
.radar__field{
  position:absolute;
  left:50%;top:50%;
  width:min(160vw,1500px);aspect-ratio:1;
  translate:-50% -50%;
  pointer-events:none;
  z-index:0;
}
/* aneis e cruzeta gravados */
.radar__rings{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 78px, rgba(148,169,192,.09) 78px 79px),
    linear-gradient(to right,transparent calc(50% - .5px),rgba(148,169,192,.07) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(to bottom,transparent calc(50% - .5px),rgba(148,169,192,.07) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px));
  mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 72%);
}
/* a varredura */
.radar__sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(75,123,255,.24) 0deg,
    rgba(75,123,255,.13) 10deg,
    rgba(75,123,255,.05) 34deg,
    transparent 72deg,
    transparent 360deg);
  mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 70%);
  animation:sweep 9s linear infinite;
  will-change:transform;
}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.radar__in{position:relative;z-index:1}
.clients{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.client{
  background:rgba(10,20,31,.72);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s6) var(--s5);
  min-height:118px;
}
.client img{
  width:100%;max-width:150px;height:auto;
  opacity:.62;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.client:hover img{opacity:1;transform:scale(1.04)}

/* ==========================================================================
   CASES: o diario de bordo
   ========================================================================== */

/* a leitura grande: o numero real do case */
.readout{
  padding-top:var(--s5);
  border-top:1px solid var(--rule-lit);
}
.readout__v{
  display:block;
  font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.4rem);
  line-height:1;letter-spacing:-.04em;
  color:var(--lit);
  font-feature-settings:"tnum" 1;
}
.readout__k{display:block;margin-top:var(--s3)}
.cases{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s6);
}
.case{
  display:flex;flex-direction:column;
  background:var(--hull);
  border:1px solid var(--rule);
  padding:var(--s7);
  position:relative;
}
/* filete aceso no topo do card, como marcador de instrumento */
.case::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:var(--blue-lit);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.case:hover::before{transform:scaleX(1)}
.case .h3{margin-bottom:0}
.case__kind{margin-top:var(--s2);margin-bottom:var(--s5)}
.case__text{color:var(--haze);flex:1}
.case .readout{margin-top:var(--s6)}
.case__more{
  margin-top:var(--s7);
  align-self:flex-start;
}

/* ==========================================================================
   FECHAMENTO: a placa de caracteristicas
   ========================================================================== */
.hail{
  border-top:1px solid var(--rule);
  background:
    linear-gradient(to bottom,rgba(4,9,15,.42),rgba(4,9,15,.86) 58%,var(--abyss) 88%),
    var(--sea-cta,none) center/cover no-repeat;
}
.hail__in{padding-block:var(--s10) var(--s9)}
/* titulo e acao dividem a mesma linha, ancorados pela base do bloco */
.hail__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6) var(--s8);
  flex-wrap:wrap;
}
.hail__q{max-width:20ch;flex:1 1 24ch}
.hail__actions{display:flex;flex-wrap:wrap;gap:var(--s4);flex:none}

.plate{
  margin-top:var(--s10);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.plate__cell{
  background:var(--hull);
  padding:var(--s6);
}
.plate__cell dt{margin-bottom:var(--s3)}
.plate__cell dd{margin:0;font-size:.975rem;line-height:1.6;color:var(--haze)}
.plate__cell dd strong{color:var(--foam);font-weight:700;display:block}
.plate__cell a{
  color:var(--blue-lit);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease-quick);
}
.plate__cell a:hover{border-bottom-color:currentColor}

/* --- rodape ------------------------------------------------------------- */
.site-foot{border-top:1px solid var(--rule);padding-block:var(--s7)}
.site-foot__in{
  display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;
}
.site-foot__logo svg{width:104px;height:auto}
.site-foot__nav{display:flex;gap:var(--s5);flex-wrap:wrap;margin-left:auto}
.site-foot__nav a{text-decoration:none;color:var(--haze);font-size:.925rem}
.site-foot__nav a:hover{color:var(--foam)}
.site-foot__social{display:flex;gap:var(--s3)}
.site-foot__social a{
  display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;box-shadow:inset 0 0 0 1px var(--rule-lit);
  color:var(--haze);
  transition:color .2s var(--ease-quick),box-shadow .2s var(--ease-quick);
}
.site-foot__social a:hover{color:var(--foam);box-shadow:inset 0 0 0 1px var(--foam)}
.site-foot__social svg{width:18px;height:18px}
.site-foot__legal{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  max-width:none;
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--rule);
}

/* ==========================================================================
   TIMELINE: a carta nautica
   ========================================================================== */
.chart-hero{
  position:relative;
  padding-top:calc(76px + var(--s10));
  padding-bottom:var(--s9);
  isolation:isolate;
}
.chart-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(4,9,15,.82),var(--abyss) 92%),
    var(--deep-sea,none) center/cover no-repeat;
}
.chart-hero__title{max-width:15ch}
.chart-hero__lede{margin-top:var(--s6)}

/* trilho */
.voyage{
  position:relative;
  padding-bottom:var(--s10);
}
.voyage__track{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  overflow:visible;
}
.voyage__wake-bed{
  fill:none;
  stroke:var(--rule);
  stroke-width:2;
  stroke-dasharray:2 9;
  stroke-linecap:round;
}
/* sem filtro aqui de proposito: um drop-shadow sobre um traco de 5000px
   obriga o navegador a rasterizar o filtro inteiro a cada quadro em que o
   dashoffset muda, e o rastro passa a ficar para tras do ponteiro durante a
   rolagem. O brilho vive no ponteiro, que e pequeno e barato. */
.voyage__wake{
  fill:none;
  stroke:var(--blue-lit);
  stroke-width:2.5;
  stroke-linecap:round;
}
/* o ponteiro: a propria seta da Capton percorrendo a rota */
.voyage__pointer-mark{
  fill:var(--lit);
  filter:drop-shadow(0 0 8px rgba(75,123,255,.9));
}

/* estacoes */
.stations{
  position:relative;
  display:grid;
  gap:var(--s12);
  padding-block:var(--s10);
}
.station{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s6);
  align-items:start;
}
.station__card{grid-column:1/6}
.station:nth-child(even) .station__card{grid-column:8/13}

.station__year{
  display:flex;align-items:center;gap:var(--s4);
  margin-bottom:var(--s5);
}
.station__year b{
  font-size:clamp(2.6rem,5.4vw,4rem);
  font-weight:700;line-height:.9;letter-spacing:-.045em;
  color:var(--foam);
  font-feature-settings:"tnum" 1;
}
.station__year i{
  flex:1;height:1px;background:var(--rule);font-style:normal;
}
.station__name{
  font-weight:700;
  font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.15;letter-spacing:-.02em;
}
.station__kind{margin-top:var(--s2)}
/* linhas de registro: o diario de bordo do ano, mes a mes */
.station__log{
  margin-top:var(--s6);
  border-top:1px solid var(--rule);
}
.logline{
  display:grid;
  grid-template-columns:8.5rem 1fr;
  gap:var(--s4);
  padding:var(--s4) 0;
  border-bottom:1px solid var(--rule);
  position:relative;
}
/* o risco que acende ao passar, como marcador de escala */
.logline::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--blue-lit);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.logline:hover::before{transform:scaleX(1)}
.logline__when{
  color:var(--haze-dim);
  padding-top:.15rem;
  max-width:none;
}
.logline:hover .logline__when{color:var(--blue-lit)}
.logline__when span{display:block;opacity:.6;margin-top:.15rem}
.logline__what{display:grid;gap:var(--s2)}
.logline__what li{color:var(--haze);font-size:.975rem;line-height:1.55}
/* marco do ano: azul aceso, nao o #003FF2 da marca, que reprova em
   contraste sobre fundo escuro (2,85:1 contra 5,31:1) */
.logline__what li.marco{
  color:var(--blue-lit);
  font-weight:700;
}
.logline__what li + li{padding-top:var(--s2);border-top:1px solid var(--rule)}


/* ==========================================================================
   MOVIMENTO
   ========================================================================== */
/* padrao ja visivel: so a versao com JS esconde antes de revelar */
.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
}
.js [data-reveal].is-in{
  opacity:1;
  transform:none;
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js [data-reveal][data-reveal="2"].is-in{transition-delay:.09s}
.js [data-reveal][data-reveal="3"].is-in{transition-delay:.18s}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:960px){
  :root{--s10:5rem;--s11:6rem;--s12:7rem}

  .site-head__nav{
    position:fixed;inset:76px 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--hull);
    border-bottom:1px solid var(--rule);
    padding:var(--s4) var(--gutter) var(--s6);
    margin-left:0;
    transform:translateY(-120%);
    transition:transform .4s var(--ease);
    visibility:hidden;
  }
  .site-head__nav[data-open]{transform:none;visibility:visible}
  .site-head__nav a{padding:var(--s4) 0;font-size:1.1rem;color:var(--foam);border-bottom:1px solid var(--rule)}
  .site-head__nav a::after{display:none}
  .burger{display:block}
  .site-head__cta{display:none}
  .site-head__nav .btn{display:inline-flex;margin-top:var(--s5);justify-content:center}

  /* sem a fita de rumo, o friso vira duas linhas gravadas empilhadas */
  .coaming__in{
    grid-template-columns:1fr;
    height:auto;
    padding-block:var(--s4);
    gap:var(--s2);
  }
  .coaming__label,.coaming__read{white-space:normal;letter-spacing:.14em}
  .compass{display:none}

  .headings{grid-template-columns:1fr}
  .heading{padding:var(--s7) 0}
  .heading + .heading{padding-left:0;border-left:0}

  .console__cluster{grid-template-columns:repeat(2,1fr)}

  .cases{grid-template-columns:1fr}
  .caps{grid-template-columns:repeat(3,1fr)}

  .station{grid-template-columns:1fr;gap:var(--s6);padding-left:var(--s7)}
  .station__card,
  .station:nth-child(even) .station__card{grid-column:1/-1}
  .stations{gap:var(--s10)}
}

@media (max-width:640px){
  body{font-size:1rem}
  .hero__actions .btn{width:100%;justify-content:center}
  .hail__head{flex-direction:column;align-items:stretch}
  .hail__actions .btn{width:100%;justify-content:center}
  .console__cluster{grid-template-columns:1fr}
  .clients{grid-template-columns:repeat(2,1fr)}
  .caps{grid-template-columns:repeat(2,1fr)}
  .logline{grid-template-columns:1fr;gap:var(--s2)}
  .case{padding:var(--s6)}
  .site-foot__in{flex-direction:column;align-items:flex-start;gap:var(--s5)}
  .site-foot__nav{margin-left:0}
  .coffee__mark{width:130%;right:-40%;opacity:.6}
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .compass__tape,.radar__sweep,.coaming__dot{animation:none}
  .hero__media video{display:none}
  .hero__media img{display:block}
}

/* instrumento: arco e marcador sobem quando o painel entra em quadro */
.js .gauge__arc{
  stroke-dasharray:var(--len,320);
  stroke-dashoffset:var(--len,320);
}
.js .gauge__pin{
  transform-box:view-box;
  transform-origin:100px 100px;
  transform:rotate(calc(-1 * var(--travel)));
}
.js .gauge.is-in .gauge__arc{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.7s var(--ease) .15s;
}
.js .gauge.is-in .gauge__pin{
  transform:rotate(0);
  transition:transform 1.7s var(--ease) .15s;
}
@media (prefers-reduced-motion:reduce){
  .js .gauge__arc{stroke-dashoffset:0}
  .js .gauge__pin{transform:none}
}

/* fundos fotograficos ancorados ao arquivo, nao ao HTML */
.hail{--sea-cta:url("../img/sea-cta.webp")}
.chart-hero{--deep-sea:url("../img/deep-sea.jpg")}