/* ============================================================
   SMIT RAMI — SECURITY ENGINEER PORTFOLIO
   Theme: Black / Alert Red — terminal + HUD inspired
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  color-scheme: dark;

  /* ---- colors ---- */
  --bg:            #050506;
  --bg-elevated:   #0b0b0e;
  --bg-elevated-2: #121216;
  --bg-card:       #0d0d11;

  --red:           #ff2142;
  --red-bright:    #ff5470;
  --red-dim:       #7a0f20;
  --red-glow:      rgba(255, 33, 66, .45);
  --red-glow-soft: rgba(255, 33, 66, .14);

  --white:         #f3f3f6;
  --text-muted:    #9a9aa4;
  --text-faint:    #5c5c66;

  --border:        rgba(255,255,255,.08);
  --border-red:    rgba(255,33,66,.28);
  --border-strong: rgba(255,255,255,.16);

  /* ---- type ---- */
  --font-display: 'Space Grotesk', 'JetBrains Mono', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ---- scale ---- */
  --gap-xs: .5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4rem;
  --gap-2xl: 7rem;

  --radius: 2px;
  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1240px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

html.intro-lock, html.intro-lock body{
  overflow:hidden;
  height:100%;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

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

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}

/* ---- scrollbar ---- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--red-dim); border:2px solid var(--bg); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

/* ============================================================
   layout helpers
   ============================================================ */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

.section{
  position:relative;
  padding:var(--gap-2xl) 0;
  border-top:1px solid var(--border);
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-bottom:var(--gap-xl);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--red);
}

.section-title{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.02;
  font-size:clamp(2.2rem, 5.4vw, 4.2rem);
  margin:0;
}

.section-sub{
  color:var(--text-muted);
  max-width:60ch;
  font-size:1.02rem;
}

.glow-text{
  color:var(--red);
  text-shadow:0 0 24px var(--red-glow);
}

.hairline{
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 70ms); }

/* ============================================================
   background texture (grid + scanlines + glow)
   ============================================================ */
.bg-fx{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.bg-fx::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px,
    transparent 1px, transparent 3px
  );
  opacity:.5;
}
.bg-glow{
  position:fixed; top:-20%; right:-10%;
  width:60vw; height:60vw;
  max-width:900px; max-height:900px;
  background:radial-gradient(circle, var(--red-glow-soft) 0%, transparent 70%);
  z-index:0; pointer-events:none;
  filter:blur(10px);
}

main, header, footer{ position:relative; z-index:1; }

/* ============================================================
   intro / swarm loader
   ============================================================ */
#intro{
  position:fixed; inset:0;
  z-index:9999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#intro canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
#intro.is-done{
  animation:introOut .5s var(--ease) forwards;
  pointer-events:none;
}
@keyframes introOut{
  to{ opacity:0; visibility:hidden; }
}

.intro-panel{
  position:relative;
  z-index:2;
  font-family:var(--font-mono);
  color:#e8e8ec;
  width:min(90vw, 460px);
  padding:1.4rem 1.6rem;
  background:rgba(8,8,10,.55);
  border:1px solid var(--border-red);
  backdrop-filter:blur(6px);
}
.intro-panel .line{
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  opacity:0;
}
.intro-panel .line.on{ opacity:1; }
.intro-panel .line b{ color:var(--red-bright); font-weight:600; }
.intro-panel .line .ok{ color:#5df28c; }

.intro-bar{
  margin-top:.9rem;
  height:3px;
  background:rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.intro-bar i{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  background:linear-gradient(90deg, var(--red-dim), var(--red));
  box-shadow:0 0 12px var(--red-glow);
}

.intro-id{
  margin-top:.8rem;
  display:flex; justify-content:space-between;
  font-size:.72rem;
  color:var(--text-faint);
  letter-spacing:.08em;
}

.intro-skip{
  position:fixed;
  right:clamp(1rem,4vw,2.5rem); bottom:clamp(1rem,4vw,2.5rem);
  z-index:3;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--text-muted);
  background:transparent;
  border:1px solid var(--border);
  padding:.55em 1em;
  text-transform:uppercase;
}
.intro-skip:hover{ color:var(--white); border-color:var(--border-strong); }

/* decrypt-reveal text (used on hero name after intro) */
.decrypt{ display:inline-block; }
.decrypt .ch{ display:inline-block; }

/* ============================================================
   nav
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem clamp(1.25rem, 4vw, 3rem);
  background:rgba(5,5,6,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:border-color .3s;
}
.nav-logo{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.04em;
  display:flex; align-items:center; gap:.5rem;
}
.nav-logo .dot{
  width:8px; height:8px;
  background:var(--red);
  box-shadow:0 0 10px var(--red-glow);
  display:inline-block;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

.nav-links{
  display:flex; gap:clamp(1rem,2.4vw,2.2rem);
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav-links a{
  position:relative;
  color:var(--text-muted);
  padding:.3rem 0;
  transition:color .25s;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--red);
  transition:right .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }

.nav-cta{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  border:1px solid var(--border-red);
  padding:.55em 1.1em;
  display:inline-flex; align-items:center; gap:.5em;
  transition:all .25s;
}
.nav-cta:hover{ background:var(--red); color:#fff; box-shadow:0 0 18px var(--red-glow); }

.nav-burger{
  display:none;
  width:40px; height:40px;
  border:1px solid var(--border);
  background:transparent;
  position:relative;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{
  content:""; position:absolute; left:10px; right:10px; height:1.5px; background:var(--white);
  transition:transform .25s, opacity .25s;
}
.nav-burger span{ top:50%; transform:translateY(-50%); }
.nav-burger span::before{ top:-8px; }
.nav-burger span::after{ top:8px; }
.nav-burger.open span{ background:transparent; }
.nav-burger.open span::before{ transform:rotate(45deg) translate(-1px,8px); }
.nav-burger.open span::after{ transform:rotate(-45deg) translate(-1px,-8px); }

/* ============================================================
   hero
   ============================================================ */
.hero{
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:6rem;
  position:relative;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  width:100%;
}

.hero-kicker{
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-muted);
  display:flex; align-items:center; gap:.7em;
  margin-bottom:1.4rem;
}
.hero-kicker .bracket{ color:var(--red); }
.hero-kicker .blink{
  width:9px; height:16px;
  background:var(--red);
  display:inline-block;
  animation:blink 1.1s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-name{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(3rem, 8.4vw, 7rem);
  line-height:.95;
  letter-spacing:-.015em;
  margin:0 0 1.1rem;
}
.hero-name .last{
  color:var(--red);
  text-shadow:0 0 36px var(--red-glow);
}

.hero-alias{
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.08em;
  color:var(--text-muted);
  text-transform:uppercase;
  margin:0 0 1.3rem;
}
.hero-alias span{
  color:var(--red-bright);
  font-weight:600;
}

.hero-role{
  font-family:var(--font-mono);
  font-size:clamp(1rem, 1.6vw, 1.3rem);
  color:var(--white);
  margin:0 0 1.6rem;
  min-height:1.6em;
}
.hero-role .cursor{
  display:inline-block;
  width:.55em; height:1em;
  background:var(--red);
  margin-left:.15em;
  vertical-align:-.12em;
  animation:blink 1s steps(2) infinite;
}

.hero-desc{
  color:var(--text-muted);
  max-width:52ch;
  font-size:1.05rem;
  margin-bottom:2.2rem;
}

.hero-actions{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-bottom:2.6rem;
}

.btn{
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.95em 1.6em;
  border:1px solid var(--border-strong);
  display:inline-flex; align-items:center; gap:.6em;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}
.btn-primary:hover{
  background:#fff; border-color:#fff; color:#000;
  box-shadow:0 0 26px var(--red-glow);
}
.btn-ghost{ color:var(--white); background:transparent; }
.btn-ghost:hover{ border-color:var(--red); color:var(--red-bright); }

.hero-meta{
  display:flex; gap:clamp(1.4rem,3vw,2.6rem);
  font-family:var(--font-mono);
}
.hero-meta .num{
  font-size:1.6rem; font-weight:700; color:var(--white);
  display:block;
}
.hero-meta .lbl{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
}

/* ---- hero portrait ---- */
.hero-figure{
  position:relative;
  justify-self:center;
  width:min(100%, 420px);
}
.hero-frame{
  position:relative;
  aspect-ratio:1/1.08;
  border:1px solid var(--border-red);
  background:
    radial-gradient(circle at 50% 20%, var(--red-glow-soft), transparent 60%),
    var(--bg-elevated);
}
.hero-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.hero-frame .corner{
  position:absolute; width:22px; height:22px;
  border:2px solid var(--red);
}
.hero-frame .corner.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hero-frame .corner.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.hero-frame .corner.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.hero-frame .corner.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.hero-frame .scan{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  opacity:.8;
  animation:scanmove 3.4s linear infinite;
  box-shadow:0 0 12px var(--red-glow);
}
@keyframes scanmove{
  0%{ top:0%; }
  100%{ top:100%; }
}

.hero-tag{
  position:absolute; left:50%; bottom:-18px;
  transform:translateX(-50%);
  background:var(--bg);
  border:1px solid var(--border-red);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--red);
  padding:.5em 1em;
  white-space:nowrap;
  text-transform:uppercase;
}

.scroll-cue{
  position:absolute; left:50%; bottom:2rem;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--text-faint);
  text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.scroll-cue .line{
  width:1px; height:34px;
  background:linear-gradient(to bottom, var(--red), transparent);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ============================================================
   about
   ============================================================ */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--gap-xl);
  align-items:start;
}
.about-text p{
  color:var(--text-muted);
  font-size:1.08rem;
  margin:0 0 1.2rem;
}
.about-text strong{ color:var(--white); font-weight:600; }

.terminal{
  background:var(--bg-card);
  border:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:.86rem;
}
.terminal-head{
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--border);
}
.terminal-head i{ width:10px; height:10px; border-radius:50%; background:var(--text-faint); display:inline-block; }
.terminal-head i:first-child{ background:#ff5f56; }
.terminal-head i:nth-child(2){ background:#ffbd2e; }
.terminal-head i:nth-child(3){ background:#27c93f; }
.terminal-head span{ margin-left:auto; color:var(--text-faint); font-size:.72rem; }
.terminal-body{ padding:1.1rem 1.2rem; }
.terminal-body .row{
  display:flex; gap:.6rem;
  padding:.3rem 0;
  color:var(--text-muted);
  border-bottom:1px dashed var(--border);
}
.terminal-body .row:last-child{ border-bottom:0; }
.terminal-body .row span.k{ color:var(--red-bright); min-width:9rem; }
.terminal-body .row span.v{ color:var(--white); }
.terminal-prompt{ color:var(--red); }

/* ============================================================
   experience
   ============================================================ */
.timeline{
  display:flex; flex-direction:column;
  border-left:1px solid var(--border-red);
  padding-left:clamp(1.2rem, 3vw, 2.4rem);
  gap:var(--gap-xl);
  position:relative;
}
.timeline-item{ position:relative; }
.timeline-item::before{
  content:"";
  position:absolute; left:calc(-1 * clamp(1.2rem, 3vw, 2.4rem) - 5px);
  top:.4rem;
  width:9px; height:9px;
  background:var(--bg);
  border:2px solid var(--red);
}
.timeline-head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.8rem 1.4rem;
  margin-bottom:.6rem;
}
.timeline-role{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.35rem;
  letter-spacing:.01em;
}
.timeline-org{ color:var(--red-bright); font-family:var(--font-mono); font-size:.9rem; }
.timeline-date{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--text-faint);
  letter-spacing:.08em;
  border:1px solid var(--border);
  padding:.3em .7em;
  white-space:nowrap;
}
.timeline-mode{ color:var(--text-muted); font-size:.85rem; font-family:var(--font-mono); }
.timeline-list{ color:var(--text-muted); max-width:72ch; }
.timeline-list li{
  position:relative; padding-left:1.3rem; margin-bottom:.55rem;
  font-size:.98rem;
}
.timeline-list li::before{
  content:"›";
  position:absolute; left:0; color:var(--red);
  font-weight:700;
}

/* ============================================================
   skills
   ============================================================ */
.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.skill-card{
  background:var(--bg-card);
  padding:1.6rem;
  transition:background .3s;
}
.skill-card:hover{ background:var(--bg-elevated-2); }
.skill-card-head{
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:.9rem;
}
.skill-icon{
  width:34px; height:34px;
  border:1px solid var(--border-red);
  display:flex; align-items:center; justify-content:center;
  color:var(--red);
  flex-shrink:0;
}
.skill-icon svg{ width:17px; height:17px; }
.skill-card h3{
  font-family:var(--font-display);
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:0;
}
.tag-list{ display:flex; flex-wrap:wrap; gap:.45rem; }
.tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-muted);
  border:1px solid var(--border);
  padding:.32em .65em;
  letter-spacing:.01em;
}

/* ============================================================
   focus
   ============================================================ */
.focus-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  margin-bottom:1.8rem;
}
.focus-card{
  background:var(--bg-card);
  padding:1.8rem;
  transition:background .3s;
}
.focus-card:hover{ background:var(--bg-elevated-2); }
.focus-card .skill-icon{ margin-bottom:1.1rem; }
.focus-card h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 .6rem;
}
.focus-card p{ color:var(--text-muted); margin:0; font-size:.94rem; }

.focus-note{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem;
  padding-top:1.6rem;
  border-top:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--text-faint);
}
.focus-note .lbl{
  color:var(--red);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.7rem;
}

/* ============================================================
   contact
   ============================================================ */
.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap-xl);
  align-items:center;
}
.contact-big{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2rem, 4.6vw, 3.4rem);
  line-height:1.05;
  margin:0 0 1.4rem;
}
.contact-list{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.contact-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  background:var(--bg-card);
  padding:1.1rem 1.4rem;
  font-family:var(--font-mono);
  transition:background .25s, padding-left .25s;
}
.contact-row:hover{ background:var(--bg-elevated-2); padding-left:1.7rem; }
.contact-row .k{ color:var(--text-muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.contact-row .v{ color:var(--white); font-size:.95rem; display:flex; align-items:center; gap:.6rem; }
.contact-row .v svg{ width:15px; height:15px; color:var(--red); }

.contact-card{
  border:1px solid var(--border-red);
  padding:2rem;
  background:var(--bg-card);
  position:relative;
}
.contact-card::before{
  content:"// available for security engagements";
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--red);
  letter-spacing:.05em;
  display:block;
  margin-bottom:1rem;
}
.contact-card p{ color:var(--text-muted); margin:0 0 1.6rem; }

/* ============================================================
   footer
   ============================================================ */
.site-footer{
  border-top:1px solid var(--border);
  padding:2rem 0;
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--text-faint);
  letter-spacing:.04em;
}
.site-footer a{ color:var(--text-muted); transition:color .2s; }
.site-footer a:hover{ color:var(--red); }
.footer-socials{ display:flex; gap:1.2rem; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; width:min(70%, 300px); margin:0 auto; }
  .about-grid{ grid-template-columns:1fr; }
  .contact-wrap{ grid-template-columns:1fr; }
  .nav-links{
    position:fixed; top:0; right:0; bottom:0;
    z-index:50;
    width:min(78vw,320px);
    height:100vh;
    height:100dvh;
    background:var(--bg-elevated);
    border-left:1px solid var(--border);
    flex-direction:column;
    padding:6rem 2rem 2rem;
    transform:translateX(100%);
    transition:transform .35s var(--ease);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-cta{ display:none; }
  .nav-burger{ display:block; }
}

@media (max-width: 640px){
  .section{ padding:var(--gap-xl) 0; }
  .timeline-date{ margin-left:0; }
  .hero{ padding-top:7rem; }
}