/* ═══════════════════════════════════════════════════
   João Vitor Depollo — landing
   Direção: engenharia industrial / terminal, escuro,
   laranja-reator sobre grafite, tipografia técnica.
   ═══════════════════════════════════════════════════ */

:root{
  --ink:        #08090A;
  --ink-2:      #0D0F11;
  --ink-3:      #121517;
  --line:       #1E2327;
  --line-2:     #2A3138;
  --bone:       #F5F1E8;
  --bone-dim:   #A8A49C;
  --bone-mute:  #6E6B65;

  --flare:      #FF5A1F;
  --flare-hi:   #FF8A4C;
  --flare-lo:   #C13B08;
  --cyan:       #4DE0C8;

  --ff-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --ff-body:    'Sora', -apple-system, sans-serif;
  --ff-mono:    'Martian Mono', 'SF Mono', ui-monospace, monospace;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --max: 1240px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

/* clip (não hidden) preserva o position:fixed do nav e do fundo */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip }

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--ff-body);
  font-weight:300;
  font-size:clamp(.95rem,.55vw + .82rem,1.0625rem);
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--flare); color:var(--ink) }

a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
strong{ font-weight:500; color:var(--bone) }
em{ font-style:normal; color:var(--flare-hi) }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut) }
.dim{ color:var(--bone-mute) }

/* ─────────── fundo atmosférico ─────────── */
.bg-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }

.bg-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%);
}

.bg-aurora{ position:absolute; border-radius:50%; filter:blur(120px); opacity:.5 }
.bg-aurora--a{
  width:52vw; height:52vw; top:-18vw; right:-12vw;
  background:radial-gradient(circle, rgba(255,90,31,.30), transparent 66%);
  animation:drift 26s var(--ease) infinite alternate;
}
.bg-aurora--b{
  width:44vw; height:44vw; bottom:-16vw; left:-14vw;
  background:radial-gradient(circle, rgba(77,224,200,.13), transparent 66%);
  animation:drift 34s var(--ease) infinite alternate-reverse;
}
@keyframes drift{ to{ transform:translate3d(5%,7%,0) scale(1.16) } }

.bg-noise{
  position:absolute; inset:0; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-sweep{
  position:absolute; left:0; right:0; height:1px; top:0;
  background:linear-gradient(90deg, transparent, rgba(255,90,31,.55), transparent);
  animation:sweep 9s linear infinite;
  opacity:.6;
}
@keyframes sweep{ 0%{ top:-2% } 100%{ top:102% } }

/* ─────────── trilho de scroll ─────────── */
.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:rgba(255,255,255,.05);
}
.scroll-rail__fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--flare-lo), var(--flare), var(--flare-hi));
  box-shadow:0 0 12px rgba(255,90,31,.7);
}

/* ─────────── nav ─────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:1.15rem var(--gut);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,9,10,.78);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  padding-block:.8rem;
}

.nav__mark{
  position:relative; display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--ff-mono); font-weight:600; font-size:.8rem; letter-spacing:.14em;
}
.nav__mark-glyph{
  padding:.32rem .5rem; border:1px solid var(--line-2);
  background:var(--ink-2); color:var(--bone);
  transition:border-color .3s, color .3s;
}
.nav__mark:hover .nav__mark-glyph{ border-color:var(--flare); color:var(--flare) }
.nav__mark-dot{
  width:5px; height:5px; background:var(--flare); border-radius:50%;
  box-shadow:0 0 10px var(--flare);
  animation:blip 2.4s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

.nav__links{ display:flex; gap:1.75rem; margin-left:auto }
.nav__links a{
  position:relative; font-family:var(--ff-mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim);
  padding-block:.3rem; transition:color .28s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--flare); transition:width .34s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{ color:var(--bone) }
.nav__links a:hover::after,.nav__links a.is-active::after{ width:100% }

/* ─────────── botões ─────────── */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.72rem 1.15rem; border:1px solid var(--line-2);
  position:relative; overflow:hidden;
  transition:color .3s, border-color .3s, transform .3s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--flare);
  transform:translateY(101%); transition:transform .38s var(--ease); z-index:-1;
}
.btn:hover::before{ transform:translateY(0) }
.btn:hover{ color:var(--ink); border-color:var(--flare) }
.btn:active{ transform:translateY(1px) }
.btn > *{ position:relative; z-index:1 }

.btn--solid{ background:var(--bone); color:var(--ink); border-color:var(--bone) }
.btn--solid::before{ background:var(--flare) }
.btn--wire{ color:var(--bone-dim) }
.btn--ghost{ color:var(--bone-dim); border-color:var(--line-2) }
.nav__cta{ flex-shrink:0 }
@media (max-width:820px){ .nav__cta{ display:none } }

/* ─────────── hero ─────────── */
.hero{
  position:relative; z-index:1; overflow:hidden;
  padding-top:clamp(8rem,17vh,12rem);
  padding-bottom:clamp(3rem,6vh,5rem);
}
.hero__spot{
  position:absolute; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,31,.12), transparent 62%);
  transform:translate(-50%,-50%); left:50%; top:35%;
  transition:left .5s var(--ease), top .5s var(--ease);
  pointer-events:none; filter:blur(30px);
}

.hero__grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
}
@media (max-width:960px){ .hero__grid{ grid-template-columns:1fr } }

.eyebrow{ margin-bottom:1.6rem }
.status{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan);
  border:1px solid rgba(77,224,200,.28); background:rgba(77,224,200,.05);
  padding:.4rem .8rem;
}
.status__dot{
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 rgba(77,224,200,.6); animation:ping 2.2s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(77,224,200,.55) }
  70%{ box-shadow:0 0 0 9px rgba(77,224,200,0) }
  100%{ box-shadow:0 0 0 0 rgba(77,224,200,0) }
}

.hero__title{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(3.2rem,9.5vw,7.4rem);
  line-height:.88; letter-spacing:-.045em; margin-bottom:1.4rem;
}
.hero__title span{ display:block }
.outline{
  color:transparent;
  -webkit-text-stroke:1.4px var(--flare);
  text-shadow:0 0 44px rgba(255,90,31,.32);
}

.hero__role{
  font-family:var(--ff-mono); font-size:clamp(.72rem,1.4vw,.86rem);
  letter-spacing:.06em; display:flex; flex-wrap:wrap; gap:.6rem;
  align-items:baseline; margin-bottom:1.8rem;
}
.tick{ color:var(--flare) }
.sep{ color:var(--line-2) }

.hero__pitch{
  max-width:56ch; color:var(--bone-dim); font-size:1.02rem;
  border-left:2px solid var(--line-2); padding-left:1.2rem;
  margin-bottom:2.2rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem }

/* terminal */
.hero__term{ position:relative }
.term{
  border:1px solid var(--line); background:linear-gradient(160deg,var(--ink-2),var(--ink));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
  position:relative; z-index:2;
}
.term__bar{
  display:flex; align-items:center; gap:.8rem;
  padding:.65rem .9rem; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.term__lights{ display:flex; gap:.35rem }
.term__lights i{ width:9px; height:9px; border-radius:50%; background:var(--line-2) }
.term__lights i:first-child{ background:var(--flare-lo) }
.term__path{ font-family:var(--ff-mono); font-size:.64rem; color:var(--bone-mute); letter-spacing:.06em }

.term__body{
  font-family:var(--ff-mono); font-size:.71rem; line-height:1.95;
  padding:1.15rem 1.1rem 1.4rem; min-height:270px;
  white-space:pre-wrap; word-break:break-word; color:var(--bone-dim);
}
.term__body .c-key{ color:var(--flare) }
.term__body .c-str{ color:var(--cyan) }
.term__body .c-cm{ color:var(--bone-mute); opacity:.7 }
.term__body .c-fn{ color:var(--bone) }
.caret{
  display:inline-block; width:7px; height:1em; background:var(--flare);
  vertical-align:-2px; animation:caret 1s steps(2) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }

.term__glow{
  position:absolute; inset:14% -6% -12% -6%; z-index:1;
  background:radial-gradient(ellipse at center, rgba(255,90,31,.2), transparent 66%);
  filter:blur(50px);
}

/* spec sheet */
.spec{
  margin-top:clamp(3rem,7vh,5rem);
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); background:rgba(255,255,255,.012);
}
@media (max-width:860px){ .spec{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:460px){ .spec{ grid-template-columns:1fr } }

.spec__cell{ padding:1.25rem 1.35rem; border-right:1px solid var(--line); position:relative }
.spec__cell:last-child{ border-right:none }
@media (max-width:860px){
  .spec__cell:nth-child(2n){ border-right:none }
  .spec__cell:nth-child(-n+2){ border-bottom:1px solid var(--line) }
}
@media (max-width:460px){
  .spec__cell{ border-right:none; border-bottom:1px solid var(--line) }
  .spec__cell:last-child{ border-bottom:none }
}
.spec dt{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-mute); margin-bottom:.5rem;
}
.spec dd{ font-size:.92rem; color:var(--bone) }
.num{ font-family:var(--ff-display); font-weight:800; font-size:1.6rem; color:var(--flare); line-height:1 }
.num-suf{ font-family:var(--ff-mono); font-size:.78rem; color:var(--bone-dim); margin-left:.2rem }

/* ─────────── marquee ─────────── */
.marquee{
  position:relative; z-index:1; overflow:hidden;
  border-block:1px solid var(--line);
  background:rgba(255,255,255,.014);
  padding-block:.85rem; margin-block:clamp(3rem,7vh,5.5rem);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }
.marquee__set{
  display:flex; align-items:center; gap:1.4rem; padding-right:1.4rem;
  font-family:var(--ff-mono); font-size:.75rem; letter-spacing:.08em;
  white-space:nowrap;
}
.marquee__set b{ font-weight:400; color:var(--bone-dim) }
.marquee__set i{ font-style:normal; color:var(--flare); font-size:.55rem }

/* ─────────── seções ─────────── */
.section{ position:relative; z-index:1; padding-block:clamp(3.5rem,9vh,7rem) }

.s-head{
  display:flex; align-items:baseline; gap:1.1rem;
  margin-bottom:clamp(2rem,4vh,3.2rem);
}
.s-head__idx{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em;
  color:var(--flare); flex-shrink:0;
}
.s-head__title{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.7rem,4.2vw,2.9rem); letter-spacing:-.03em; line-height:1;
}
.s-head__rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent) }

/* sobre */
.about{
  display:grid; gap:clamp(1.5rem,3.5vw,3rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
}
@media (max-width:900px){ .about{ grid-template-columns:1fr } }
.about__text p + p{ margin-top:1.05rem }
.lede{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.1rem,2.2vw,1.45rem); line-height:1.45;
  letter-spacing:-.02em; color:var(--bone); margin-bottom:1.4rem !important;
}
.about__text p:not(.lede){ color:var(--bone-dim) }

.about__panel{
  border:1px solid var(--line); background:linear-gradient(165deg,rgba(255,255,255,.026),transparent);
  padding:1.5rem 1.4rem; position:relative;
}
.about__panel::before{
  content:''; position:absolute; top:-1px; left:-1px; width:24px; height:24px;
  border-top:1px solid var(--flare); border-left:1px solid var(--flare);
}
.panel__label{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute); display:block; margin-bottom:1.1rem;
}
.principles{ list-style:none; display:grid; gap:.85rem }
.principles li{
  display:flex; gap:.75rem; font-size:.9rem; line-height:1.55; color:var(--bone-dim);
}
.principles__k{
  font-family:var(--ff-mono); font-size:.66rem; color:var(--flare);
  padding-top:.22rem; flex-shrink:0;
}
.panel__foot{ margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--line) }
.panel__foot .dim{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; display:block; margin-bottom:.7rem;
}
.chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.chips span{
  font-family:var(--ff-mono); font-size:.63rem; letter-spacing:.05em;
  border:1px solid var(--line-2); padding:.28rem .55rem; color:var(--bone-dim);
}

/* cards / stack */
/* 6 cards → 3/2/1 colunas preenchem as linhas sem buracos */
.stack-grid{
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);
}
@media (max-width:900px){ .stack-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .stack-grid{ grid-template-columns:1fr } }

.card{ background:var(--ink); padding:1.6rem 1.4rem; position:relative; transition:background .35s }

/* dentro das grades de 1px, o card mantém o fundo e só o conteúdo revela —
   senão a cor do divisor vaza como um bloco cinza */
.card.reveal{ opacity:1; transform:none }
.card.reveal > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.card.reveal.is-in > *{ opacity:1; transform:none }
.card--stack{ min-height:190px }
.card--stack:hover{ background:var(--ink-3) }
.card--stack::after{
  content:''; position:absolute; left:0; top:0; width:2px; height:0;
  background:var(--flare); transition:height .42s var(--ease);
}
.card--stack:hover::after{ height:100% }
.card--accent{ background:linear-gradient(165deg,rgba(255,90,31,.07),transparent 62%) }
.card--accent:hover{ background:linear-gradient(165deg,rgba(255,90,31,.12),transparent 62%) }

.card__num{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em;
  color:var(--bone-mute); display:block; margin-bottom:.9rem;
}
.card h3{
  font-family:var(--ff-display); font-weight:600; font-size:1.12rem;
  letter-spacing:-.02em; margin-bottom:1rem;
}

.taglist{ list-style:none; display:flex; flex-wrap:wrap; gap:.38rem }
.taglist li{
  font-family:var(--ff-mono); font-size:.65rem; letter-spacing:.03em;
  color:var(--bone-dim); border:1px solid var(--line-2);
  padding:.26rem .5rem; transition:border-color .28s, color .28s;
}
.card:hover .taglist li{ border-color:var(--line-2) }
.taglist li:hover{ border-color:var(--flare); color:var(--flare) }
.taglist--sm li{ font-size:.62rem; padding:.22rem .45rem }

/* ─────────── timeline ─────────── */
.tl{ list-style:none; position:relative; padding-left:clamp(1.5rem,4vw,2.6rem) }
.tl::before{
  content:''; position:absolute; left:0; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(180deg,var(--flare),var(--line-2) 30%,var(--line));
}
.tl__item{ position:relative; padding-bottom:clamp(1.25rem,3vh,2rem) }
.tl__item:last-child{ padding-bottom:0 }

.tl__node{
  position:absolute; left:calc(clamp(1.5rem,4vw,2.6rem) * -1); top:1.55rem;
  width:9px; height:9px; border-radius:50%;
  background:var(--ink); border:1px solid var(--line-2);
  transform:translateX(-4px);
}
.tl__node--live{
  background:var(--flare); border-color:var(--flare);
  box-shadow:0 0 0 0 rgba(255,90,31,.6); animation:ping-o 2.4s ease-out infinite;
}
@keyframes ping-o{
  0%{ box-shadow:0 0 0 0 rgba(255,90,31,.5) }
  70%{ box-shadow:0 0 0 11px rgba(255,90,31,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,90,31,0) }
}

.tl__card{
  border:1px solid var(--line); padding:1.4rem 1.5rem;
  background:linear-gradient(160deg,rgba(255,255,255,.018),transparent);
  transition:border-color .35s, transform .35s var(--ease), background .35s;
}
.tl__card:hover{
  border-color:var(--line-2); transform:translateX(4px);
  background:linear-gradient(160deg,rgba(255,255,255,.032),transparent);
}

.tl__brand{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  margin-bottom:.9rem;
}
.plate{
  flex-shrink:0; width:78px; height:44px;
  display:grid; place-items:center; padding:.42rem .55rem;
  border:1px solid var(--line-2); background:rgba(255,255,255,.035);
  transition:border-color .32s, background .32s;
}
.tl__card:hover .plate, .card--edu:hover .plate{
  border-color:var(--flare); background:rgba(255,90,31,.07);
}
.plate img{ max-height:100%; width:auto; object-fit:contain }
.plate--wide{ width:104px; height:50px; margin-bottom:1.15rem }
.plate--light{ background:var(--bone) }
.card--edu:hover .plate--light{ background:var(--bone) }
/* flex, não grid: no grid o "vom" e o "." viram itens separados e empilham */
.plate--mono{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-weight:800; font-size:1.15rem;
  letter-spacing:-.05em; color:var(--bone); white-space:nowrap;
}
.plate--mono i{ font-style:normal; color:var(--flare) }

.tl__meta{ min-width:0; flex:1 }
.tl__meta h3{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.02rem,2vw,1.22rem); letter-spacing:-.02em; line-height:1.25;
}
.tl__org{ font-size:.85rem; color:var(--bone-dim); margin-top:.15rem }
.tl__when{
  font-family:var(--ff-mono); font-size:.65rem; letter-spacing:.08em;
  color:var(--bone-mute); margin-left:auto; white-space:nowrap;
}
.now{ color:var(--flare); font-weight:600 }
.tl__desc{ font-size:.92rem; color:var(--bone-dim); margin-bottom:.95rem; max-width:70ch }

/* ─────────── formação ─────────── */
.edu-grid{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:840px){ .edu-grid{ grid-template-columns:1fr } }
.card--edu{ padding:1.6rem 1.4rem; transition:background .35s }
.card--edu:hover{ background:var(--ink-3) }
.card--edu h3{ margin-bottom:.35rem; font-size:1.05rem }
.card__org{ font-size:.85rem; color:var(--bone-dim) }
.card__when{
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.08em;
  color:var(--bone-mute); margin-top:.7rem;
}

/* ─────────── certificações ─────────── */
.certs{ list-style:none; border-top:1px solid var(--line) }
.certs__row{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.05rem .4rem; border-bottom:1px solid var(--line);
  transition:padding-left .38s var(--ease), background .32s;
}
.certs__row:hover{ padding-left:1.2rem; background:rgba(255,255,255,.02) }
.certs__k{ font-family:var(--ff-mono); font-size:.66rem; color:var(--bone-mute); flex-shrink:0 }
.certs__t{ font-size:.96rem; color:var(--bone-dim); transition:color .3s }
.certs__row:hover .certs__t{ color:var(--bone) }
.certs__mark{ margin-left:auto; color:var(--line-2); font-size:.8rem; transition:color .3s, transform .4s var(--ease) }
.certs__row:hover .certs__mark{ color:var(--flare); transform:rotate(90deg) }

/* ─────────── cta ─────────── */
.section--cta{ padding-block:clamp(4.5rem,12vh,9rem) }
.cta{
  border:1px solid var(--line); padding:clamp(2rem,5vw,3.6rem);
  background:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(255,90,31,.1), transparent 58%),
    linear-gradient(165deg, rgba(255,255,255,.024), transparent);
  position:relative; overflow:hidden;
}
.cta::after{
  content:''; position:absolute; right:-1px; bottom:-1px; width:44px; height:44px;
  border-right:1px solid var(--flare); border-bottom:1px solid var(--flare);
}
.cta__eyebrow{
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--flare); display:block; margin-bottom:1rem;
}
.cta__title{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(2.2rem,6.5vw,4.6rem); line-height:.94;
  letter-spacing:-.045em; margin-bottom:1.2rem;
}
.cta__sub{ color:var(--bone-dim); max-width:52ch; margin-bottom:2.4rem }

.cta__links{ display:grid; border-top:1px solid var(--line) }
.linkrow{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:1.1rem .2rem; border-bottom:1px solid var(--line);
  transition:padding-left .38s var(--ease);
}
.linkrow:hover{ padding-left:1rem }
.linkrow__k{
  font-family:var(--ff-mono); font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute); width:96px; flex-shrink:0;
}
.linkrow__v{ font-size:.95rem; color:var(--bone-dim); transition:color .3s; word-break:break-all }
.linkrow:hover .linkrow__v{ color:var(--flare) }
.linkrow__arrow{ margin-left:auto; color:var(--line-2); transition:color .3s, transform .38s var(--ease) }
.linkrow:hover .linkrow__arrow{ color:var(--flare); transform:translateX(5px) }

/* ─────────── footer ─────────── */
.foot{
  position:relative; z-index:1; border-top:1px solid var(--line);
  padding-block:1.8rem; font-family:var(--ff-mono); font-size:.64rem;
  letter-spacing:.06em; color:var(--bone-mute);
}
.foot__grid{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between }

/* ─────────── ajustes de tela estreita ─────────── */
@media (max-width:820px){
  /* nav vira uma faixa rolável em vez de quebrar linha */
  .nav__links{
    gap:1.1rem; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px;
  }
  .nav__links::-webkit-scrollbar{ display:none }
  .nav__links a{ white-space:nowrap }
}

@media (max-width:640px){
  .hero{ padding-top:7rem }
  .hero__pitch{ font-size:.95rem }
  .hero__actions .btn{ flex:1 1 auto; justify-content:center }

  /* a data sai do canto e vira legenda acima do cargo */
  .tl__brand{ gap:.85rem }
  .tl__when{ margin-left:0; order:-1; flex-basis:100% }
  .tl__card{ padding:1.15rem 1.1rem }
  .tl__card:hover{ transform:none }

  .about__panel{ padding:1.25rem 1.15rem }
  .cta__links .linkrow{ gap:.3rem }
  .linkrow__k{ width:100%; }
  .linkrow__arrow{ margin-left:auto }
  .certs__row{ gap:.8rem; align-items:flex-start }
  .foot__grid{ gap:.6rem; flex-direction:column }
}

/* ─────────── animações de entrada ─────────── */
.rise{ opacity:0; transform:translateY(26px); animation:rise .95s var(--ease) forwards; animation-delay:var(--d,0ms) }
@keyframes rise{ to{ opacity:1; transform:none } }

.reveal{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--d,0ms) }
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .rise,.reveal{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}