/* ===== TOKENS ===== */
:root{
  --bg: #0a0a0a;
  --bg-soft: #111111;
  --panel: #141414;
  --line: rgba(255,255,255,0.08);
  --text: #f2f0ec;
  --text-dim: #8a8a86;
  --text-faint: #55554f;
  --accent: #d62828;
  --accent-soft: rgba(214,40,40,0.15);
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --edge: 1px solid var(--line);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  position:relative;
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}

/* film grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.02) 0, transparent 40%),
                     radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02) 0, transparent 40%);
  mix-blend-mode:overlay;
}
.grain::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 2px);
  opacity:0.5;
}

/* reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ===== HEADER ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  background:linear-gradient(to bottom, rgba(10,10,10,0.85), transparent);
  backdrop-filter:blur(2px);
}
.logo-block{display:flex; align-items:center; gap:12px;}
.logo{font-family:var(--font-display); font-size:26px; letter-spacing:1px;}
.logo .dot{color:var(--accent);}
.logo-sub{font-family:var(--font-mono); font-size:9px; line-height:1.3; letter-spacing:1px; color:var(--text-dim);}

.main-nav{display:flex; gap:36px;}
.main-nav a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; color:var(--text-dim);
  position:relative; padding-bottom:4px; transition:color .25s ease;
}
.main-nav a:hover{color:var(--text);}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent);
  transition:width .25s ease;
}
.main-nav a:hover::after{width:100%;}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 40px 60px;
  background:
    radial-gradient(ellipse at 75% 45%, rgba(60,50,40,0.35), transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
  border-bottom:var(--edge);
  overflow:hidden;
}

.hero-hud{
  position:absolute; top:150px;
  font-family:var(--font-mono);
  font-size:11px; color:var(--text-dim);
  display:flex; flex-direction:column; gap:14px;
}
.hero-hud--left{left:40px;}
.hero-hud--right{right:40px; align-items:flex-end; text-align:right; gap:6px;}

.hud-rec{display:flex; align-items:center; gap:6px; color:var(--accent); letter-spacing:1px; margin-bottom:8px;}
.rec-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.25;}}

.hud-row{display:flex; flex-direction:column; gap:2px; letter-spacing:1px;}
.hud-label{color:var(--text-faint); font-size:9px;}
.hud-value{color:var(--text-dim); font-size:12px;}

.hud-battery{display:flex; gap:4px; margin-top:10px;}
.hud-battery .dot{width:6px; height:6px; border-radius:1px; background:var(--text-faint);}
.hud-battery .dot.on{background:var(--accent);}

.hud-signal-label{font-size:9px; letter-spacing:1px; color:var(--text-faint);}
.signal-bars{color:var(--text-dim);}
.hud-signal-pct{font-size:11px; color:var(--text-dim);}

.hero-inner{position:relative; z-index:2; max-width:640px;}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:3px; color:var(--text-dim);
  margin-bottom:18px;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(60px, 10vw, 120px);
  line-height:0.92;
  letter-spacing:1px;
  color:var(--text);
}
.hero-title span{display:block;}
.accent-dot{color:var(--accent);}

.hero-sub{
  margin-top:26px;
  font-size:17px;
  color:var(--text-dim);
  line-height:1.5;
  max-width:420px;
}

.hero-cta{
  margin-top:38px;
  display:flex; align-items:center; gap:34px; flex-wrap:wrap;
}
.btn-play{
  display:flex; align-items:center; gap:12px;
  padding:15px 26px;
  border:1px solid rgba(255,255,255,0.18);
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--text);
  transition:border-color .25s ease, background .25s ease;
}
.btn-play:hover{border-color:var(--accent); background:var(--accent-soft);}
.play-icon{
  width:24px; height:24px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#0a0a0a;
}
.link-arrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--text-dim);
  display:inline-flex; align-items:center; gap:8px; transition:color .25s ease;
}
.link-arrow:hover{color:var(--text);}
.link-arrow .arrow{transition:transform .25s ease;}
.link-arrow:hover .arrow{transform:translateX(4px);}

.hero-camera{
  position:absolute; right:2%; top:50%; transform:translateY(-42%);
  width:min(46vw, 620px);
  z-index:1;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  opacity:0.96;
}
.camera-svg{width:100%; height:auto; color:#2b2b2b;}

.hero-location{
  position:absolute; right:40px; bottom:40px; z-index:2;
  text-align:right;
  font-family:var(--font-mono);
}
.loc-label{font-size:9px; letter-spacing:2px; color:var(--accent);}
.loc-city{font-size:12px; letter-spacing:1px; margin-top:4px;}
.loc-coords{font-size:10px; color:var(--text-faint); margin-top:2px;}

/* ===== SECTION HEAD ===== */
.section-head{
  display:flex; align-items:baseline; gap:16px;
  padding:80px 40px 40px;
  position:relative;
}
.section-num{font-family:var(--font-mono); color:var(--accent); font-size:13px; letter-spacing:2px;}
.section-title{font-family:var(--font-display); font-size:32px; letter-spacing:2px;}
.section-link{margin-left:auto; align-self:center;}

/* ===== ABOUT ===== */
.about{border-bottom:var(--edge);}
.about-grid{
  display:grid; grid-template-columns:1fr 1.4fr; gap:60px;
  padding:0 40px 70px;
  align-items:start;
}
.about-text p{color:var(--text-dim); font-size:15px; line-height:1.7; margin-bottom:20px; max-width:380px;}
.btn-outline{
  margin-top:10px;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px;
  border:1px solid rgba(255,255,255,0.18);
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px;
  transition:border-color .25s ease, background .25s ease;
}
.btn-outline:hover{border-color:var(--accent); background:var(--accent-soft);}

.timeline{position:relative; padding-top:10px;}
.timeline-figure{
  height:150px; display:flex; align-items:flex-end; justify-content:center;
  background:radial-gradient(ellipse at center 70%, rgba(200,90,46,0.08), transparent 65%);
}
.figure-svg{height:100%; opacity:0.9;}
.timeline-line{
  height:1px; background:var(--line); margin:26px 0 24px; position:relative;
}
.timeline-items{
  display:grid; grid-template-columns:repeat(7,1fr); gap:10px;
}
.tl-item{position:relative; padding-top:22px;}
.tl-dot{
  position:absolute; top:-31px; left:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:2px solid var(--text-faint);
}
.tl-item.is-active .tl-dot{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.tl-year{font-family:var(--font-display); font-size:26px; letter-spacing:1px;}
.tl-label{font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--accent); margin-top:6px;}
.tl-desc{font-size:12.5px; color:var(--text-dim); margin-top:6px; line-height:1.5; max-width:150px;}

.tl-dot--next{
  border-style:dashed; border-color:var(--accent); background:transparent;
  animation:nextPulse 1.6s infinite;
}
@keyframes nextPulse{0%,100%{opacity:1;} 50%{opacity:.3;}}
.tl-year--next{
  font-family:var(--font-mono); font-size:12px; letter-spacing:1px;
  color:var(--accent); line-height:1.4; font-weight:500;
}

.stats-bar{
  display:flex; align-items:center; gap:0;
  border-top:var(--edge);
  padding:36px 40px;
  flex-wrap:wrap;
}
.stat{display:flex; align-items:baseline; gap:4px; padding-right:48px; margin-right:48px; border-right:var(--edge);}
.stat:last-of-type{border-right:none;}
.stat-num{font-family:var(--font-display); font-size:38px;}
.stat-suffix{font-family:var(--font-display); font-size:38px; color:var(--accent);}
.stat-label{
  font-family:var(--font-mono); font-size:9px; letter-spacing:1px; color:var(--text-dim);
  align-self:center; margin-left:10px; max-width:80px; line-height:1.4;
}
.brand-logos{display:flex; gap:14px; margin-left:auto;}
.brand-badge{
  width:44px; height:44px; border:var(--edge); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--text-dim); font-family:var(--font-body); font-weight:600;
}
.brand-badge.more{color:var(--accent); font-size:18px;}

/* ===== PORTFOLIO ===== */
.portfolio{border-bottom:var(--edge);}
.portfolio-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  margin:0 40px 60px;
  border:var(--edge);
}
.port-card{
  position:relative;
  background:var(--bg);
  aspect-ratio:4/5;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.port-img{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tint) 55%, transparent), transparent 60%),
    linear-gradient(160deg, var(--tint), #050505 85%);
  display:flex; align-items:center; justify-content:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.port-img svg{width:64px; height:64px; color:rgba(255,255,255,0.35); stroke:currentColor;}
.port-card:hover .port-img{transform:scale(1.08);}
.port-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  pointer-events:none;
}
.port-meta{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:14px;
  padding:22px;
}
.port-num{font-family:var(--font-mono); font-size:11px; color:var(--accent);}
.port-meta h3{font-family:var(--font-display); font-size:20px; letter-spacing:1.5px; flex:1;}
.port-arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:background .25s ease, transform .25s ease;
}
.port-card:hover .port-arrow{background:var(--accent); transform:rotate(45deg); border-color:var(--accent);}

/* ===== CONTACT ===== */
.contact-grid{
  display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:50px;
  padding:0 40px 90px; align-items:center;
}
.contact-text p{font-family:var(--font-body); font-size:19px; color:var(--text); line-height:1.5; margin-bottom:28px; max-width:280px;}
.btn-start{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px; color:var(--accent);
  border-bottom:1px solid var(--accent); padding-bottom:6px;
}
.btn-start .arrow{transition:transform .25s ease;}
.btn-start:hover .arrow{transform:translateX(6px);}

.clapper{display:flex; justify-content:center;}
.clapper-svg{width:100%; max-width:300px; height:auto;}

.contact-info{display:flex; flex-direction:column; gap:20px; position:relative;}
.info-row{display:flex; align-items:flex-start; gap:14px;}
.info-icon{
  width:34px; height:34px; border:var(--edge); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:14px; flex-shrink:0;
}
.info-label{font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; color:var(--text-faint); display:block;}
.info-value{font-size:14px; margin-top:3px;}
.signature{
  font-family:"Space Grotesk", cursive; font-style:italic; font-size:34px; color:var(--accent);
  align-self:flex-end; margin-top:10px; opacity:0.8; transform:rotate(-4deg);
}

/* ===== FOOTER ===== */
.site-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 40px; border-top:var(--edge);
}
.footer-copy{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
.footer-social{display:flex; gap:26px;}
.footer-social a{font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; color:var(--text-dim); transition:color .25s ease;}
.footer-social a:hover{color:var(--text);}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .about-grid{grid-template-columns:1fr;}
  .timeline-items{grid-template-columns:repeat(3,1fr); row-gap:26px;}
  .contact-grid{grid-template-columns:1fr; text-align:center;}
  .contact-info{align-items:center;}
  .signature{align-self:center;}
  .hero-camera{opacity:0.25; width:70vw;}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:720px){
  .main-nav{gap:16px; flex-wrap:wrap; justify-content:flex-end;}
  .main-nav a{font-size:10px;}
  .site-header{padding:18px 20px; flex-wrap:wrap; row-gap:12px;}
  .hero{padding:140px 20px 60px;}
  .hero-hud--left, .hero-hud--right{display:none;}
  .hero-location{position:static; margin-top:40px; text-align:left;}
  .section-head{padding:60px 20px 30px; flex-wrap:wrap;}
  .about-grid, .stats-bar, .portfolio-grid, .contact-grid{padding-left:20px; padding-right:20px; margin-left:0; margin-right:0;}
  .timeline-items{grid-template-columns:repeat(2,1fr);}
  .stats-bar{gap:20px;}
  .stat{padding-right:20px; margin-right:20px;}
  .brand-logos{margin-left:0; margin-top:20px;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .site-footer{flex-direction:column; gap:16px; text-align:center;}
}

/* ===== MODALS ===== */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,6,6,0.88);
  display:none; align-items:center; justify-content:center;
  padding:24px;
  backdrop-filter:blur(4px);
}
.modal-overlay.is-open{display:flex;}
.modal-box{
  position:relative;
  background:var(--panel);
  border:var(--edge);
  border-radius:6px;
  padding:40px;
  width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto;
}
.modal-box--video{max-width:760px; padding:0; overflow:hidden;}
.modal-close{
  position:absolute; top:14px; right:16px;
  color:var(--text-dim); font-size:16px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s ease, background .2s ease;
}
.modal-close:hover{color:var(--text); background:rgba(255,255,255,0.08);}
.modal-title{font-family:var(--font-display); font-size:26px; letter-spacing:1px; margin-bottom:8px;}
.modal-sub{font-size:13px; color:var(--text-dim); margin-bottom:26px;}

.video-wrap{
  aspect-ratio:16/9; width:100%;
  display:flex; align-items:center; justify-content:center;
  background:#000; padding:20px; text-align:center;
}
.video-placeholder{font-family:var(--font-mono); font-size:12px; color:var(--text-dim); line-height:1.8;}
.video-placeholder code{color:var(--accent);}
.video-wrap iframe{width:100%; height:100%; border:0;}

.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-row label{font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--text-dim);}
.form-row input, .form-row select, .form-row textarea{
  background:var(--bg-soft); border:var(--edge); border-radius:3px;
  padding:11px 12px; color:var(--text); font-family:var(--font-body); font-size:14px;
  resize:vertical;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:var(--accent);
}
.form-submit{
  width:100%; justify-content:center; margin-top:6px;
  border-color:var(--accent); background:var(--accent-soft);
}
.form-submit:hover{background:var(--accent); color:#0a0a0a;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}