/* =========================================================
   sena.dev — F1 portfolio · v2 · full speed
   ========================================================= */

:root{
  --bg:            #0a0e14;
  --bg-2:          #12171f;
  --bg-3:          #1a212c;
  --line:          #262d38;
  --text:          #f2f2f2;
  --muted:         #8a929e;
  --red:           #e10600;
  --red-dark:      #a10400;
  --yellow:        #f5c518;
  --purple:        #9d4edd;      /* F1 fastest lap purple */
  --br-green:      #009c3b;      /* Brazil green */
  --br-blue:       #002776;      /* Brazil blue */
  --white-fade:    rgba(255,255,255,0.06);

  --font-display:  "Orbitron", "Inter", system-ui, sans-serif;
  --font-race:     "Racing Sans One", "Orbitron", sans-serif;
  --font-body:     "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, monospace;

  --radius:        4px;
  --radius-lg:     8px;
  --max-w:         1200px;
  --header-h:      72px;
  --pad-x:         24px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }

/* Anchor offset for sticky header */
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

/* ================== TACHOMETER SCROLL PROGRESS ================== */
.tach{
  position:fixed; top:0; left:0; right:0;
  height:3px;
  background:transparent;
  z-index:100;
  padding-top:env(safe-area-inset-top);
}
.tach__fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--br-green) 0%, var(--yellow) 40%, var(--red) 75%, var(--purple) 100%);
  transition:width .05s linear;
  box-shadow:0 0 12px currentColor;
  color:var(--red);
}

/* ================== START LIGHTS OVERLAY ================== */
.start-lights{
  position:fixed; inset:0;
  z-index:200;
  background:rgba(6,8,12,0.98);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap:36px;
  padding:max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  animation:hideLights .5s ease 4.6s forwards;
}
.start-lights__row{
  display:flex;
  gap:24px;
  padding:20px 30px;
  background:#000;
  border:2px solid #1a1a1a;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
  max-width:100%;
}
.start-lights__pair{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.start-lights__pair i{
  display:block;
  width:34px; height:34px;
  border-radius:50%;
  background:#1a0000;
  border:2px solid #2a0000;
}
/* Light up sequence: each pair 0.9s apart */
.start-lights__pair:nth-child(1) i{ animation:lightOn 0s ease 0.6s forwards; }
.start-lights__pair:nth-child(2) i{ animation:lightOn 0s ease 1.5s forwards; }
.start-lights__pair:nth-child(3) i{ animation:lightOn 0s ease 2.4s forwards; }
.start-lights__pair:nth-child(4) i{ animation:lightOn 0s ease 3.3s forwards; }
.start-lights__pair:nth-child(5) i{ animation:lightOn 0s ease 4.2s forwards; }
/* All off (GO!) at 4.5s */
.start-lights__pair i{ animation-fill-mode:forwards; }
@keyframes lightOn{
  to{ background:#ff1400; box-shadow:0 0 24px #ff1400, 0 0 40px rgba(255,20,0,0.6); }
}
.start-lights__go{
  font-family:var(--font-race);
  font-size:clamp(28px, 8vw, 56px);
  color:var(--br-green);
  letter-spacing:clamp(2px, 1.5vw, 8px);
  opacity:0;
  animation:goFlash 0.6s ease 4.5s forwards;
  text-shadow:0 0 20px var(--br-green);
  text-align:center;
}
@keyframes goFlash{
  0%{ opacity:0; transform:scale(0.6); }
  40%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes hideLights{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
body.no-lights .start-lights{ display:none; }
@media (prefers-reduced-motion:reduce){
  .start-lights{ display:none; }
}

/* ================== RACE BAR (ticker, faster) ================== */
.race-bar{
  background:var(--red);
  color:#fff;
  overflow:hidden;
  border-bottom:2px solid #000;
  position:relative;
}
.race-bar::before,.race-bar::after{
  content:""; position:absolute; top:0; bottom:0; width:min(80px, 12vw);
  z-index:2; pointer-events:none;
}
.race-bar::before{ left:0; background:linear-gradient(90deg, var(--red), transparent); }
.race-bar::after { right:0; background:linear-gradient(270deg, var(--red), transparent); }
.race-bar__track{
  display:flex; gap:0;
  white-space:nowrap;
  animation:marquee 22s linear infinite;
  padding:10px 0;
  width:max-content;
}
.race-bar__text{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  padding-right:40px;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .race-bar__track{ animation:none; }
}

/* ================== NAV ================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,20,0.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header nav{
  max-width:var(--max-w);
  margin:0 auto;
  padding:14px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  min-width:0;
}
.nav__brand{ display:flex; flex-direction:column; flex-shrink:0; }
.nav__logo{
  font-family:var(--font-display);
  font-weight:900;
  font-size:22px;
  letter-spacing:1px;
}
.nav__dot{ color:var(--red); }
.nav__tagline{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--muted);
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.nav__links{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  min-width:0;
  justify-content:flex-end;
}
.nav__links a{
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  transition:color .2s ease;
  position:relative;
  padding:4px 0;
}
.nav__links a:hover{ color:var(--text); }
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.nav__links a:hover::after{ transform:scaleX(1); }

/* ================== HERO ================== */
.hero{
  position:relative;
  max-width:var(--max-w);
  margin:0 auto;
  padding:110px var(--pad-x) 200px;
  overflow:hidden;
}

/* Speed streaks bg */
.hero__streaks{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.hero__streaks span{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(225,6,0,0.6) 50%, transparent 100%);
  animation:streak 3s linear infinite;
  border-radius:2px;
}
.hero__streaks span:nth-child(1){ top:12%;  width:200px; animation-duration:2.4s; animation-delay:0s;   opacity:0.9; }
.hero__streaks span:nth-child(2){ top:22%;  width:340px; animation-duration:1.8s; animation-delay:0.4s; opacity:0.6; background:linear-gradient(90deg, transparent, rgba(245,197,24,0.5), transparent); }
.hero__streaks span:nth-child(3){ top:38%;  width:260px; animation-duration:2.1s; animation-delay:0.9s; opacity:0.5; }
.hero__streaks span:nth-child(4){ top:55%;  width:420px; animation-duration:1.6s; animation-delay:0.2s; opacity:0.7; }
.hero__streaks span:nth-child(5){ top:68%;  width:180px; animation-duration:2.6s; animation-delay:1.3s; opacity:0.4; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); }
.hero__streaks span:nth-child(6){ top:78%;  width:300px; animation-duration:2.0s; animation-delay:0.7s; opacity:0.6; }
.hero__streaks span:nth-child(7){ top:88%;  width:220px; animation-duration:2.3s; animation-delay:1.6s; opacity:0.5; }
.hero__streaks span:nth-child(8){ top:32%;  width:150px; animation-duration:1.9s; animation-delay:2.1s; opacity:0.8; }

@keyframes streak{
  0%{ transform:translateX(-500px); }
  100%{ transform:translateX(calc(100vw + 200px)); }
}
@media (prefers-reduced-motion:reduce){
  .hero__streaks span{ animation:none; }
}

.hero__bg-num{
  position:absolute;
  right:-60px; top:-40px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(180px, 40vw, 500px);
  line-height:1;
  color:var(--white-fade);
  pointer-events:none;
  z-index:0;
  user-select:none;
}
.hero__content{ position:relative; z-index:3; max-width:800px; }
.hero__eyebrow{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--muted);
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0 0 24px;
  display:flex; align-items:center; gap:10px;
}
.hero__eyebrow .light{
  width:10px; height:10px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--br-green);
  box-shadow:0 0 12px var(--br-green);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%    { opacity:0.3; }
}
.hero__title{
  font-family:var(--font-race);
  font-weight:400;
  font-size:clamp(64px, 16vw, 240px);
  line-height:0.85;
  margin:0 0 20px;
  letter-spacing:-2px;
  transform:skewX(-8deg);
  word-break:break-word;
}
.hero__title em{
  font-style:normal;
  background:linear-gradient(180deg, #fff 0%, var(--yellow) 40%, var(--red) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 40px rgba(225,6,0,0.3);
  display:inline-block;
  animation:heroTitleIn .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes heroTitleIn{
  from{ transform:translateX(-40px) skewX(-8deg); opacity:0; }
  to  { transform:translateX(0) skewX(0deg); opacity:1; }
}
.hero__sub{
  font-size:clamp(15px, 2.2vw, 18px);
  color:var(--muted);
  margin:0 0 40px;
  max-width:640px;
}
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* F1 CAR */
.hero__car{
  position:absolute;
  right:-40px; bottom:60px;
  width:min(60%, 700px);
  z-index:2;
  pointer-events:none;
  animation:carDrive 1.2s cubic-bezier(.22,1,.36,1) both;
}
.hero__car svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 20px 40px rgba(225,6,0,0.35)); }
.hero__car .car-streaks line{
  animation:streakPulse 0.6s ease-in-out infinite alternate;
}
@keyframes streakPulse{
  from{ opacity:0.3; }
  to  { opacity:1; }
}
@keyframes carDrive{
  from{ transform:translateX(120%); opacity:0; }
  to  { transform:translateX(0); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .hero__car, .hero__title em{ animation:none; }
  .hero__car .car-streaks line{ animation:none; }
}
@media (max-width: 900px){
  .hero__car{ position:relative; right:auto; bottom:auto; width:100%; margin-top:40px; }
}

.hero__stripe{
  position:absolute;
  left:0; right:0; bottom:0;
  height:14px;
  background:repeating-linear-gradient(-45deg, var(--red) 0 20px, #0a0a0a 20px 40px);
}

/* ================== BUTTONS ================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  min-height:44px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--radius);
  border:2px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  box-shadow:0 0 0 rgba(225,6,0,0);
}
.btn--primary:hover{
  background:var(--red-dark);
  border-color:var(--red-dark);
  box-shadow:0 8px 24px rgba(225,6,0,0.4);
}
.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--text); }
.btn--sm{ padding:10px 18px; font-size:12px; min-height:40px; }

/* ================== TELEMETRY (sector style) ================== */
.telemetry{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
  padding:14px var(--pad-x);
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px;
}
.telemetry__item{ display:flex; align-items:center; gap:8px; }
.telemetry__sector{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  font-weight:700;
  font-size:10px;
  border-radius:3px;
  letter-spacing:0.5px;
  color:#0a0e14;
  flex-shrink:0;
}
.telemetry__sector.s1{ background:#3ea55c; color:#fff; }
.telemetry__sector.s2{ background:var(--yellow); }
.telemetry__sector.s3{ background:var(--red); color:#fff; }
.telemetry__sector.fastest{ background:var(--purple); color:#fff; box-shadow:0 0 12px rgba(157,78,221,0.6); }
.telemetry__label{ color:var(--muted); letter-spacing:1.5px; }
.telemetry__value{ color:var(--text); font-weight:700; }
.status-dot::before{
  content:"●";
  color:#3ea55c;
  margin-right:6px;
  animation:pulse 1.4s ease-in-out infinite;
}

/* ================== SECTIONS ================== */
.section{
  max-width:var(--max-w);
  margin:0 auto;
  padding:100px var(--pad-x);
  position:relative;
}
.section-header{
  display:flex;
  align-items:baseline;
  gap:20px;
  margin-bottom:50px;
  flex-wrap:wrap;
}
.section-number{
  font-family:var(--font-mono);
  color:var(--red);
  font-size:14px;
  font-weight:700;
  letter-spacing:2px;
}
.section-header h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(28px, 5vw, 56px);
  margin:0;
  letter-spacing:-1px;
}
.section-sub{
  flex-basis:100%;
  color:var(--muted);
  margin:8px 0 0;
  font-size:15px;
}

/* ================== ABOUT ================== */
.about__content{
  max-width:820px;
  font-size:17px;
  line-height:1.75;
}
.about__content p{ margin:0 0 20px; }
.about__content strong{ color:var(--text); }
.about__punch{
  border-left:4px solid var(--red);
  padding:12px 0 12px 20px;
  font-size:clamp(17px, 2.5vw, 20px);
  margin-top:32px !important;
  background:linear-gradient(90deg, rgba(225,6,0,0.08), transparent 60%);
}

/* ================== SENNA BLOCK ================== */
.senna-block{
  position:relative;
  padding:80px var(--pad-x);
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(245,197,24,0.08), transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(0,156,59,0.06), transparent 60%),
    var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.senna-block::before,
.senna-block::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:6px;
  background:repeating-linear-gradient(90deg, #009c3b 0 40px, #f5c518 40px 80px, #002776 80px 120px);
  opacity:0.7;
}
.senna-block::before{ top:0; }
.senna-block::after{ bottom:0; }
.senna-block__inner{
  max-width:var(--max-w);
  margin:0 auto;
  display:flex;
  gap:60px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}
.senna-block__helmet{
  flex:0 0 260px;
  max-width:100%;
  animation:helmetFloat 4s ease-in-out infinite;
  filter:drop-shadow(0 20px 40px rgba(245,197,24,0.25));
}
.senna-block__helmet svg,
.senna-block__helmet img{
  width:100%;
  height:auto;
  display:block;
}
@keyframes helmetFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%   { transform:translateY(-10px) rotate(2deg); }
}
@media (prefers-reduced-motion:reduce){
  .senna-block__helmet{ animation:none; }
}
.senna-block__text{
  flex:1 1 400px;
  max-width:560px;
  min-width:0;
}
.senna-block__label{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--yellow);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:16px;
  padding:4px 10px;
  border:1px solid var(--yellow);
  border-radius:3px;
}
.senna-block__quote{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(20px, 3vw, 34px);
  line-height:1.3;
  margin:0 0 16px;
  color:var(--text);
  position:relative;
  padding-left:12px;
}
.senna-block__quote::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--br-green), var(--yellow), var(--br-blue));
}
.senna-block__attr{
  font-family:var(--font-mono);
  color:var(--yellow);
  font-size:14px;
  letter-spacing:2px;
  margin:0 0 20px;
  text-transform:uppercase;
}
.senna-block__note{
  color:var(--muted);
  font-size:15px;
  margin:0;
  line-height:1.65;
}

/* ================== GRID DE LARGADA ================== */
.grid-largada{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
}
.grid-largada::before{
  content:"";
  position:absolute;
  left:34px; top:20px; bottom:20px;
  width:2px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
  z-index:0;
}
.grid-slot{
  display:flex;
  align-items:stretch;
  gap:20px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-left:4px solid var(--red);
  border-radius:var(--radius-lg);
  padding:20px 24px 20px 20px;
  position:relative;
  z-index:1;
  transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease;
  min-width:0;
}
.grid-slot:hover{
  transform:translateX(8px);
  border-left-color:var(--yellow);
  box-shadow:-4px 0 20px rgba(245,197,24,0.15);
}
.grid-slot__pos{
  flex:0 0 60px;
  height:60px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--red);
  display:flex;
  align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:900;
  font-size:18px;
  color:var(--text);
  align-self:center;
  box-shadow:inset 0 0 12px rgba(225,6,0,0.2);
}
.grid-slot__pos--flag{
  background:transparent;
  border-color:var(--text);
  padding:0;
  overflow:hidden;
}
.grid-slot__pos--flag svg{ border-radius:50%; width:100%; height:100%; }
.grid-slot__body{ flex:1; min-width:0; }
.grid-slot__meta{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.grid-slot__body h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(17px, 2.5vw, 22px);
  margin:0 0 6px;
  letter-spacing:0.5px;
}
.grid-slot__body p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}
.grid-slot__body p strong{ color:var(--text); }
.grid-slot--finish{
  border-left-color:var(--text);
  background:linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 100%);
}

/* ================== PROJECTS ================== */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap:24px;
}
.card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .3s ease, border-color .2s ease, box-shadow .3s ease;
  display:flex;
  flex-direction:column;
  position:relative;
  perspective:1000px;
  min-width:0;
}
.card:hover{
  transform:translateY(-6px) rotate(-0.5deg);
  border-color:var(--red);
  box-shadow:0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(225,6,0,0.2);
}
.card--fastest{
  border-color:var(--purple);
  box-shadow:0 0 0 1px rgba(157,78,221,0.4), 0 0 30px rgba(157,78,221,0.15);
}
.card--fastest:hover{
  border-color:var(--purple);
  box-shadow:0 20px 40px rgba(0,0,0,0.4), 0 0 0 2px var(--purple), 0 0 40px rgba(157,78,221,0.35);
}
.card__fastest-tag{
  position:absolute;
  top:12px; right:12px;
  background:var(--purple);
  color:#fff;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:10px;
  padding:5px 10px;
  border-radius:3px;
  letter-spacing:1.5px;
  z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 4px 12px rgba(157,78,221,0.4);
  max-width:calc(100% - 24px);
}
.card__fastest-tag span{ font-size:12px; }
.card__img-wrap{
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--bg-3);
  overflow:hidden;
}
.card__svg,
.card__img-wrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .4s ease;
}
.card:hover .card__svg,
.card:hover .card__img-wrap img{ transform:scale(1.05); }
.card__badge{
  position:absolute;
  top:12px; left:12px;
  background:var(--red);
  color:#fff;
  font-family:var(--font-display);
  font-weight:900;
  font-size:14px;
  padding:4px 10px;
  border-radius:var(--radius);
  letter-spacing:1px;
  z-index:2;
}
.card__body{
  padding:22px;
  display:flex; flex-direction:column;
  gap:14px;
  flex:1;
  min-width:0;
}
.card__body h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(18px, 2.5vw, 22px);
  margin:0;
}
.card__body p{
  color:var(--muted);
  font-size:14px;
  margin:0; flex:1;
}
.card__tags{ display:flex; gap:8px; flex-wrap:wrap; }
.card__tags span{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:20px;
}
.card__body .btn{ align-self:flex-start; }

/* ================== SKILLS ================== */
.skills-groups{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.skills-group__label{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:14px;
}
.skills-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.skill-chip{
  padding:10px 18px;
  border:1px solid var(--line);
  background:var(--bg-2);
  border-radius:var(--radius);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
  cursor:default;
  position:relative;
  overflow:hidden;
}
.skill-chip:hover{
  border-color:var(--red);
  background:var(--bg-3);
  transform:translateY(-2px);
}
.skill-chip::before{
  content:"";
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(225,6,0,0.2), transparent);
  transition:left .5s ease;
}
.skill-chip:hover::before{ left:100%; }

/* ================== HIGHLIGHTS ================== */
.highlights-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap:24px;
}
.highlight-item{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex;
  gap:18px;
  align-items:flex-start;
  transition:border-color .2s ease, transform .2s ease;
  min-width:0;
}
.highlight-item:hover{
  border-color:var(--red);
  transform:translateY(-2px);
}
.highlight-item__img-wrap{
  position:relative;
  flex:0 0 90px;
  aspect-ratio:1;
  border-radius:var(--radius);
  overflow:hidden;
}
.highlight-item__img-wrap svg,
.highlight-item__img-wrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.highlight-item__badge{
  position:absolute;
  bottom:4px; right:4px;
  background:var(--red);
  border-radius:50%;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
}
.highlight-item__body{ flex:1; min-width:0; }
.highlight-item__tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:4px;
}
.highlight-item__body h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(16px, 2.2vw, 18px);
  margin:0 0 8px;
}
.highlight-item__body p{
  color:var(--muted);
  font-size:14px;
  margin:0;
}

/* ================== FOOTER ================== */
footer#contact{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  margin-top:60px;
  padding-bottom:env(safe-area-inset-bottom);
}
.footer__stripe{
  height:12px;
  background:repeating-linear-gradient(-45deg, var(--red) 0 20px, #0a0a0a 20px 40px);
}
.footer__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:70px var(--pad-x) 40px;
  text-align:center;
}
.footer__inner .section-header{ justify-content:center; }
.footer__tagline{
  font-size:clamp(16px, 2.5vw, 20px);
  color:var(--muted);
  margin:0 0 20px;
}
.footer__email{
  font-family:var(--font-mono);
  font-size:clamp(15px, 2.5vw, 20px);
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  border-bottom:2px solid var(--red);
  padding-bottom:2px;
  display:inline-block;
  margin-bottom:30px;
  transition:color .2s ease;
  max-width:100%;
  word-break:break-word;
}
.footer__email:hover{ color:var(--red); }
.social-icons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:32px;
}
.social-icons a{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  padding:10px 18px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .2s ease, color .2s ease;
}
.social-icons a:hover{ border-color:var(--red); color:var(--red); }
.footer__copy{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
  letter-spacing:1px;
  margin:0;
}

/* ================== RESPONSIVE ================== */
/* Tablet ↓ */
@media (max-width: 900px){
  :root{ --pad-x: 20px; --header-h: 64px; }

  .senna-block__inner{ gap:40px; text-align:center; }
  .senna-block__quote{ padding-left:0; }
  .senna-block__quote::before{ display:none; }
  .senna-block__helmet{ flex-basis:200px; }
  .hero{ padding:80px var(--pad-x) 100px; }
  .hero__bg-num{ font-size:clamp(180px, 40vw, 320px); right:-30px; }
  .section{ padding:80px var(--pad-x); }
}

/* Phone ↓ */
@media (max-width: 720px){
  :root{ --pad-x: 16px; --header-h: 58px; }

  .site-header nav{ padding:12px var(--pad-x); gap:12px; }
  .nav__logo{ font-size:18px; }
  .nav__tagline{ display:none; }
  /* Horizontal scroll for nav links instead of ugly wrap */
  .nav__links{
    gap:16px;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg, black 88%, transparent);
  }
  .nav__links::-webkit-scrollbar{ display:none; }
  .nav__links a{ font-size:13px; white-space:nowrap; flex-shrink:0; }

  .hero{ padding:60px var(--pad-x) 60px; }
  .hero__title{ font-size:clamp(54px, 18vw, 120px); letter-spacing:-1px; }
  .hero__sub{ font-size:16px; margin-bottom:28px; }
  .hero__eyebrow{ font-size:12px; margin-bottom:18px; }
  .hero__ctas{ gap:10px; }
  .hero__ctas .btn{
    padding:12px 18px;
    font-size:13px;
    flex:1 1 calc(50% - 5px);
    justify-content:center;
  }
  .hero__car{ width:100%; margin-top:30px; }
  .hero__streaks span:nth-child(n+5){ display:none; }

  .section{ padding:60px var(--pad-x); }
  .section-header{ gap:14px; margin-bottom:32px; }

  .about__content{ font-size:16px; }
  .about__punch{ font-size:17px; padding:10px 0 10px 16px; }

  .senna-block{ padding:60px var(--pad-x); }
  .senna-block__helmet{ flex-basis:160px; }
  .senna-block__inner{ gap:28px; }
  .senna-block__text{ flex-basis:100%; }

  .grid-largada::before{ left:24px; }
  .grid-slot{ padding:16px; gap:12px; }
  .grid-slot:hover{ transform:translateX(4px); }
  .grid-slot__pos{ flex:0 0 44px; height:44px; font-size:14px; }
  .grid-slot__pos--flag svg{ width:22px; height:22px; }
  .grid-slot__body h3{ font-size:17px; }
  .grid-slot__body p{ font-size:14px; }

  .telemetry{
    font-size:11px;
    padding:14px var(--pad-x);
    gap:12px 16px;
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .telemetry::-webkit-scrollbar{ display:none; }
  .telemetry__item{ flex-shrink:0; }

  .projects-grid{ gap:16px; }
  .card__body{ padding:18px; }
  .card__body h3{ font-size:20px; }
  .card__fastest-tag{ font-size:9px; padding:4px 8px; letter-spacing:1px; }

  .highlight-item{ padding:16px; gap:14px; }
  .highlight-item__img-wrap{ flex:0 0 64px; }
  .highlight-item__body h3{ font-size:16px; }
  .highlight-item__body p{ font-size:13px; }

  .footer__tagline{ font-size:17px; }
  .footer__email{ font-size:16px; }
  .footer__inner{ padding:50px var(--pad-x) 32px; }
  .social-icons{ gap:12px; }

  /* Start lights condensed */
  .start-lights{ gap:24px; }
  .start-lights__row{ gap:12px; padding:12px 14px; }
  .start-lights__pair{ gap:6px; }
  .start-lights__pair i{ width:22px; height:22px; }
  .start-lights__go{ font-size:32px; letter-spacing:3px; }

  .race-bar__text{ font-size:11px; letter-spacing:1.5px; padding-right:28px; }
}

/* Small phone ↓ */
@media (max-width: 400px){
  .start-lights__row{ gap:8px; padding:10px 12px; }
  .start-lights__pair{ gap:5px; }
  .start-lights__pair i{ width:18px; height:18px; border-width:1px; }
  .start-lights__go{ font-size:26px; letter-spacing:2px; }

  .hero__title{ font-size:clamp(48px, 20vw, 100px); }
  .hero__ctas .btn{ flex:1 1 100%; }
  .section-header h2{ font-size:clamp(26px, 8vw, 44px); }
  .senna-block__quote{ font-size:20px; }
  .footer__email{ font-size:15px; word-break:break-all; }
  .social-icons{ gap:10px; }
  .social-icons a{ padding:8px 14px; font-size:11px; }
  .skill-chip{ padding:8px 14px; font-size:12px; }
}

/* Touch / coarse pointer: avoid sticky hover transforms */
@media (hover: none){
  .btn:hover,
  .card:hover,
  .grid-slot:hover,
  .highlight-item:hover,
  .skill-chip:hover{
    transform:none;
  }
  .card:hover .card__svg,
  .card:hover .card__img-wrap img{ transform:none; }
  .skill-chip:hover::before{ left:-100%; }
}

/* ================== A11Y ================== */
:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}