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

:root {
  --bg:     #060810;
  --orange: #E8640A;
  --cyan:   #50C8DC;
  --gold:   #F5C842;
  --white:  #f0f0f0;
  --muted:  rgba(240,240,240,0.45);
  --font:   'Space Grotesk', sans-serif;
}

html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--white); overflow-x: hidden; }

/* ── Canvas ─── */
#circuit { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 90% 90% at 55% 50%, transparent 30%, rgba(6,8,16,0.72) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── HERO ─── */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 60px 64px;
}

.layout {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 96px;
}

/* ── Photo ─── */
.photo-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }

.photo-wrapper { position: relative; width: 360px; height: 360px; }

.ring-spin {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(232,100,10,0) 0deg, rgba(232,100,10,0.9) 80deg, rgba(232,100,10,0) 140deg,
    rgba(80,200,220,0) 200deg, rgba(80,200,220,0.5) 260deg, rgba(80,200,220,0) 320deg,
    rgba(232,100,10,0) 360deg
  );
  animation: ring-spin 4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:         radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  z-index: 3;
}

.ring-static {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(232,100,10,0.28);
  box-shadow: 0 0 18px rgba(232,100,10,0.22), 0 0 40px rgba(232,100,10,0.08);
  z-index: 2;
}

.photo-wrapper img {
  position: relative;
  z-index: 1;
  display: block;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 6%;
  filter: brightness(0.93) contrast(1.08) saturate(0.88);
}

.hud { position: absolute; width: 14px; height: 14px; z-index: 4; }
.hud.tl { top:-16px;    left:-16px;   border-top:1px solid var(--orange); border-left:1px solid var(--orange); }
.hud.tr { top:-16px;    right:-16px;  border-top:1px solid var(--cyan);   border-right:1px solid var(--cyan); }
.hud.bl { bottom:-16px; left:-16px;   border-bottom:1px solid var(--cyan); border-left:1px solid var(--cyan); }
.hud.br { bottom:-16px; right:-16px;  border-bottom:1px solid var(--orange); border-right:1px solid var(--orange); }

.photo-label { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,240,240,0.3); }
.photo-label span { color: var(--orange); opacity: 0.7; }

/* ── AS SEEN ON ─── */
.press {
  width: 100%;
  padding: 20px 0 0;
  border-top: 1px solid rgba(232,100,10,0.12);
  text-align: center;
}

.press-eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(240,240,240,0.25);
  margin-bottom: 16px;
}

.press-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.press-logo-wrap {
  display: inline-flex;
  align-items: center;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}
.press-logo-wrap:hover { opacity: 0.8; }

/* Invert all raster/SVG logos to white */
.press-img {
  display: block;
  filter: brightness(0) invert(1);
}

.press-svg {
  display: block;
}

/* ── Text col ─── */
.text-col { flex: 1; }

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
  text-shadow: 0 0 12px rgba(232,100,10,0.5);
}

h1 {
  font-size: clamp(58px, 7.5vw, 96px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 30px;
}

.rule {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--cyan));
  box-shadow: 0 0 10px rgba(232,100,10,0.5);
  margin-bottom: 30px;
  border-radius: 2px;
}

.tagline { font-size: clamp(18px, 2.2vw, 26px); font-weight: 300; line-height: 1.45; color: var(--white); margin-bottom: 14px; }
.sub { font-size: clamp(14px, 1.4vw, 17px); color: var(--muted); margin-bottom: 52px; }

.links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border: 1px solid rgba(232,100,10,0.55);
  border-radius: 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.btn-link:hover {
  background: rgba(232,100,10,0.12);
  border-color: var(--orange);
  box-shadow: 0 0 16px rgba(232,100,10,0.25);
  color: var(--white);
}
.btn-link--secondary {
  border-color: rgba(80,200,220,0.45);
}
.btn-link--secondary:hover {
  background: rgba(80,200,220,0.1);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(80,200,220,0.2);
}

/* GitHub — solid gradient, calls attention */
.btn-link--github {
  background: linear-gradient(135deg, var(--orange) 0%, var(--cyan) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(232,100,10,0.3), 0 0 40px rgba(80,200,220,0.15);
}
.btn-link--github:hover {
  background: linear-gradient(135deg, #ff7a1a 0%, #6dd8ed 100%);
  border-color: transparent;
  box-shadow: 0 0 28px rgba(232,100,10,0.5), 0 0 50px rgba(80,200,220,0.25);
  transform: translateY(-1px);
}

/* ── TIMELINE ─── */
.timeline-section {
  position: relative;
  z-index: 2;
  padding: 100px 64px;
  border-top: 1px solid rgba(232,100,10,0.1);
}

.tl-inner { max-width: 680px; margin: 0 auto; }

.tl-header { text-align: center; margin-bottom: 64px; }

.tl-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--orange); text-shadow: 0 0 10px rgba(232,100,10,0.5);
  display: block; margin-bottom: 14px;
}

h2.tl-title {
  font-size: clamp(36px, 5vw, 54px); font-weight: 700;
  line-height: 1.05; letter-spacing: -0.03em; color: var(--white);
}
h2.tl-title em { font-style: italic; font-weight: 300; color: var(--cyan); }

.tl-rule {
  width: 32px; height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--cyan));
  margin: 20px auto 0; border-radius: 2px;
}

/* ── Timeline track ─── */
.timeline { position: relative; display: flex; flex-direction: column; }

/* The vertical line — starts at height 0, animates to full */
.timeline::before {
  content: '';
  position: absolute;
  left: 50px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(232,100,10,0.9) 0%,
    rgba(80,200,220,0.7) 50%,
    rgba(232,100,10,0.5) 100%);
  box-shadow: 0 0 8px rgba(232,100,10,0.4);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 2.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When class 'animate' added by JS, line draws */
.timeline.animate::before { transform: scaleY(1); }

/* Items — hidden until animated */
.tl-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 0 24px 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Staggered delays — timed to match line drawing */
.timeline.animate .tl-item:nth-child(1)  { transition-delay: 0.15s; }
.timeline.animate .tl-item:nth-child(2)  { transition-delay: 0.35s; }
.timeline.animate .tl-item:nth-child(3)  { transition-delay: 0.55s; }
.timeline.animate .tl-item:nth-child(4)  { transition-delay: 0.75s; }
.timeline.animate .tl-item:nth-child(5)  { transition-delay: 0.95s; }
.timeline.animate .tl-item:nth-child(6)  { transition-delay: 1.15s; }
.timeline.animate .tl-item:nth-child(7)  { transition-delay: 1.35s; }
.timeline.animate .tl-item:nth-child(8)  { transition-delay: 1.55s; }
.timeline.animate .tl-item:nth-child(9)  { transition-delay: 1.75s; }
.timeline.animate .tl-item:nth-child(10) { transition-delay: 1.95s; }
.timeline.animate .tl-item:nth-child(11) { transition-delay: 2.15s; }
.timeline.animate .tl-item:nth-child(12) { transition-delay: 2.35s; }
.timeline.animate .tl-item:nth-child(13) { transition-delay: 2.55s; }
.timeline.animate .tl-item { opacity: 1; transform: translateX(0); }

.tl-year-col {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 64px; gap: 6px; padding-top: 2px;
  position: relative; z-index: 1;
}

.tl-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.tl-dot.orange { background: var(--orange); box-shadow: 0 0 8px var(--orange), 0 0 16px rgba(232,100,10,0.4); }
.tl-dot.cyan   { background: var(--cyan);   box-shadow: 0 0 8px var(--cyan),   0 0 16px rgba(80,200,220,0.4); }
.tl-dot.gold   { background: var(--gold);   box-shadow: 0 0 8px var(--gold),   0 0 16px rgba(245,200,66,0.4); }
.tl-dot.pulse  {
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange), 0 0 20px rgba(232,100,10,0.5);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 10px var(--orange), 0 0 20px rgba(232,100,10,0.5); transform: scale(1); }
  50%       { box-shadow: 0 0 18px var(--orange), 0 0 36px rgba(232,100,10,0.7); transform: scale(1.3); }
}

.tl-year { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: rgba(240,240,240,0.5); text-align: center; line-height: 1.2; }
.now-year { color: var(--orange); text-shadow: 0 0 8px rgba(232,100,10,0.6); }

.tl-content { flex: 1; }
.tl-icon { font-size: 14px; display: block; margin-bottom: 3px; }

.tl-title-item { font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.3; }
.tl-title-item.orange-text { color: var(--orange); text-shadow: 0 0 12px rgba(232,100,10,0.4); }
.tl-title-item.cyan-text   { color: var(--cyan);   text-shadow: 0 0 12px rgba(80,200,220,0.4); }

.tl-desc { font-size: 12px; color: rgba(240,240,240,0.5); line-height: 1.6; margin-top: 3px; }

.tl-item.highlight .tl-content {
  background: rgba(232,100,10,0.05); border: 1px solid rgba(232,100,10,0.18);
  border-radius: 8px; padding: 10px 12px;
}
.tl-item.now .tl-content {
  background: rgba(232,100,10,0.07); border: 1px solid rgba(232,100,10,0.28);
  box-shadow: 0 0 20px rgba(232,100,10,0.08);
}

.now-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--orange), #ff8c3a);
  color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  padding: 4px 14px; border-radius: 20px; margin-top: 8px;
  box-shadow: 0 0 16px rgba(232,100,10,0.5);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 16px rgba(232,100,10,0.5); }
  50%     { box-shadow: 0 0 28px rgba(232,100,10,0.8); }
}

.tl-footer { margin-top: 32px; text-align: center; }
.tl-foot-line {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,100,10,0.3), rgba(80,200,220,0.3), transparent);
  margin-bottom: 16px;
}
.tl-foot-text { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232,100,10,0.4); }

/* ── Animations ─── */
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* ── Mobile ─── */
@media (max-width: 860px) {
  .hero { padding: 48px 24px 64px; }
  .layout { flex-direction: column; gap: 44px; }
  .photo-wrapper, .photo-wrapper img { width: 280px; height: 280px; }
  h1 { font-size: clamp(48px, 14vw, 68px); }
  .timeline-section { padding: 60px 24px; }
  .timeline::before { left: 38px; }
  .tl-year-col { width: 50px; }
  .press-logos { gap: 14px; }
  .links { gap: 10px; }
}

@media (max-width: 480px) {
  .photo-wrapper, .photo-wrapper img { width: 240px; height: 240px; }
  .press-logos { gap: 10px; justify-content: flex-start; }
  .press-logos .press-logo-wrap { flex: 0 0 auto; }
  .links { flex-direction: column; align-items: flex-start; gap: 10px; }
  .btn-link { width: 100%; justify-content: center; }
  h1 { font-size: clamp(44px, 16vw, 60px); }
  .tagline { font-size: 18px; }
}