/* MLX dark design system */

@font-face { font-family:'Archivo'; src:url('fonts/archivo-latin-400.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Fragment Mono'; src:url('fonts/fragment-mono-latin-400.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --bg:        #0A0D10;
  --bg-2:      #0E1216;
  --panel:     rgba(17, 22, 27, 0.72);
  --panel-hi:  rgba(22, 28, 34, 0.85);
  --line:      rgba(255,255,255,0.08);
  --line-hi:   rgba(232,162,60,0.35);
  --text:      #E8ECEF;
  --muted:     #8A949E;
  --accent:    #E8A23C;
  --accent-hi: #F5BC66;
  --accent-dim:rgba(232,162,60,0.12);
  --font-head: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Fragment Mono', 'SF Mono', ui-monospace, Consolas, monospace;
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

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

::selection { background:var(--accent); color:#0A0D10; }

/* ---------- fixed background stack ---------- */
#bg-video, #bg-canvas {
  position:fixed; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; display:block;
}
#bg-video { opacity:0; transition:opacity 1.2s ease; }
#bg-video.is-active { opacity:1; }
#bg-canvas { transition:opacity 1.2s ease; }
#bg-canvas.is-hidden { opacity:0; }
.bg-vignette {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(5,7,9,0.55) 100%),
    linear-gradient(to bottom, rgba(5,7,9,0.35), rgba(5,7,9,0.15) 30%, rgba(5,7,9,0.55) 90%);
}
.bg-grain {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position:relative; z-index:2; }

/* ---------- type & shared ---------- */
h1,h2,h3 { font-family:var(--font-head); font-weight:700; line-height:1.08; letter-spacing:-0.01em; }
h2 { font-size:clamp(30px, 4.2vw, 52px); }
h2 em, .hero__tagline em { font-style:normal; color:var(--accent); }
h3 { font-size:20px; }
.mono { font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; }
.tag { color:var(--accent); margin-bottom:16px; display:inline-block; }
.tag::before { content:'// '; color:var(--muted); }

.section { max-width:var(--maxw); margin:0 auto; padding:clamp(90px,12vh,150px) var(--pad); }
.section-head { max-width:720px; margin-bottom:clamp(40px,6vh,64px); }
.section-head__sub { color:var(--muted); margin-top:18px; font-size:17px; }

.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em;
  padding:14px 26px; border-radius:3px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--accent { background:var(--accent); color:#0B0E11; font-weight:500; }
.btn--accent:hover { background:var(--accent-hi); transform:translateY(-2px); box-shadow:0 8px 30px rgba(232,162,60,0.35); }
.btn--ghost { border-color:rgba(255,255,255,0.25); color:var(--text); background:rgba(255,255,255,0.03); backdrop-filter:blur(8px); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ---------- nav ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:34px;
  padding:18px var(--pad);
  transition:background .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled {
  background:rgba(8,10,13,0.78); backdrop-filter:blur(14px);
  border-bottom-color:var(--line); padding:12px var(--pad);
}
.nav__mark { text-decoration:none; color:var(--text); display:flex; flex-direction:column; line-height:1.15; margin-right:auto; }
.nav__mark-glyph { font-family:var(--font-head); font-weight:700; font-size:22px; letter-spacing:0.18em; }
.nav__logo { height:20px; width:auto; align-self:flex-start; display:block; margin-bottom:4px; }
.nav__mark-sub { font-family:var(--font-mono); font-size:9px; letter-spacing:0.22em; color:var(--muted); text-transform:uppercase; }
.nav__links { display:flex; gap:26px; }
.nav__links a {
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500;
  transition:color .25s ease; position:relative;
}
.nav__links a::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--accent); transition:width .25s ease; }
.nav__links a.nav__is-active { color:var(--text); }
.nav__links a.nav__is-active::after { width:100%; }
.nav__links a:hover { color:var(--text); }
.nav__links a:hover::after { width:100%; }
.nav__burger { display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:6px; }
.nav__burger span { display:block; width:22px; height:2px; background:var(--text); transition:.3s; }
.nav-mobile {
  position:fixed; inset:0; z-index:49; background:rgba(7,9,12,0.96); backdrop-filter:blur(18px);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:0 var(--pad);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.nav-mobile.is-open { opacity:1; pointer-events:auto; }
.nav-mobile a { font-family:var(--font-head); font-size:30px; color:var(--text); text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line); }
.nav-mobile__cta { color:var(--accent) !important; }

/* ---------- hero ---------- */
.hero {
  min-height:100vh; display:flex; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); position:relative;
}
.hero__inner { max-width:760px; padding-top:8vh; }
.hero__wordmark {
  font-size:clamp(84px, 14vw, 168px); letter-spacing:0.08em; line-height:.95;
  background:linear-gradient(180deg, #F2F5F7 30%, #5C6A76 110%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:6px 0 10px;
}
.hero__tagline { font-family:var(--font-head); font-weight:500; font-size:clamp(22px, 3vw, 34px); line-height:1.2; margin-bottom:22px; }
.hero__statement { color:var(--muted); max-width:560px; font-size:16.5px; margin-bottom:34px; }
.hero__ctas { display:flex; gap:16px; flex-wrap:wrap; }
.hero__scrollcue {
  position:absolute; bottom:34px; left:var(--pad);
  display:flex; align-items:center; gap:12px; color:var(--muted); font-size:10px;
}
.hero__scrollcue i { display:block; width:1px; height:44px; background:linear-gradient(var(--accent), transparent); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform:scaleY(.4); opacity:.4; } 50% { transform:scaleY(1); opacity:1; } }

/* ---------- engine ---------- */
.engine { position:relative; }
.engine__pin {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  max-width:var(--maxw); margin:0 auto; padding:12vh var(--pad) 10vh;
}
.engine__layout { display:grid; grid-template-columns:minmax(280px, 380px) 1fr; gap:clamp(30px, 5vw, 70px); align-items:center; }
.engine__funnel { display:flex; flex-direction:column; gap:8px; }
.engine__funnel-bar {
  position:relative; height:clamp(34px, 5.2vh, 52px);
  background:rgba(255,255,255,0.035); border:1px solid var(--line); border-radius:2px;
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.engine__funnel-bar label {
  position:absolute; inset:0; display:flex; align-items:center; padding:0 16px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.22em; color:var(--muted);
  transition:color .4s;
}
/* trapezoid funnel: each bar narrower than the last */
.engine__funnel-bar:nth-child(1) { width:100%; }
.engine__funnel-bar:nth-child(2) { width:91%; }
.engine__funnel-bar:nth-child(3) { width:82%; }
.engine__funnel-bar:nth-child(4) { width:73%; }
.engine__funnel-bar:nth-child(5) { width:64%; }
.engine__funnel-bar:nth-child(6) { width:55%; }
.engine__funnel-bar.is-active {
  background:linear-gradient(90deg, var(--accent-dim), rgba(232,162,60,0.05));
  border-color:var(--line-hi);
  box-shadow:0 0 24px rgba(232,162,60,0.12) inset;
}
.engine__funnel-bar.is-active label { color:var(--accent); }
.engine__stages { position:relative; min-height:300px; }
.stage {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(28px); pointer-events:none;
}
.stage.is-active { pointer-events:auto; }
.stage__num { color:var(--accent); font-size:13px; margin-bottom:14px; }
.stage h3 { font-size:clamp(24px, 2.6vw, 34px); margin-bottom:14px; }
.stage p { color:var(--muted); max-width:520px; font-size:16.5px; }
.engine__foot { margin-top:5vh; color:var(--muted); font-size:10.5px; text-align:center; opacity:.7; }

/* ---------- cards ---------- */
.grid { display:grid; gap:18px; }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:28px 26px; backdrop-filter:blur(12px);
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.card:hover { transform:translateY(-5px); border-color:var(--line-hi); background:var(--panel-hi); }
.card__icon { color:var(--accent); font-size:11px; margin-bottom:20px; }
.card h3 { margin-bottom:12px; }
.card p { color:var(--muted); font-size:14.5px; }
.card__meta { list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:7px; }
.card__meta li { font-size:10px; color:var(--muted); letter-spacing:0.14em; }
.card__meta li::before { content:'+ '; color:var(--accent); }
.card--pillar .stage__num { display:inline-block; font-size:26px; color:rgba(232,162,60,0.5); margin-bottom:16px; }

/* ---------- portfolio ---------- */
.portfolio__table { border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel); backdrop-filter:blur(12px); }
.portfolio__row {
  display:grid; grid-template-columns:1.2fr 1.6fr 1fr 1.1fr 0.8fr; gap:18px;
  padding:24px 26px; border-top:1px solid var(--line); align-items:center;
}
.portfolio__row--head { border-top:0; padding:14px 26px; font-size:10px; color:var(--muted); background:rgba(255,255,255,0.02); letter-spacing:0.16em; }
.portfolio__row--head span:not(:first-child) { border-left:1px solid var(--line); padding-left:18px; }
.portfolio__row:not(.portfolio__row--head):hover { background:rgba(255,255,255,0.02); }
.portfolio__tech strong { font-family:var(--font-head); font-size:18px; display:block; }
.portfolio__tech small { color:var(--muted); font-size:9.5px; letter-spacing:0.18em; }
.portfolio__row > span:not(.portfolio__tech) { color:var(--muted); font-size:13.5px; }
.portfolio__path { font-size:10px !important; letter-spacing:0.1em; color:var(--text) !important; }
.portfolio__muted { opacity:.55; }
.status {
  font-style:normal; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.16em;
  padding:6px 12px; border-radius:2px; white-space:nowrap; display:inline-block;
}
.status--live { color:var(--accent); border:1px solid var(--line-hi); background:var(--accent-dim); }
.status--live::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:8px; animation:pulse 2s infinite; }
.status--pending { color:var(--muted); border:1px solid var(--line); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.portfolio__cta { margin-top:40px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.portfolio__cta p { color:var(--muted); font-size:15px; }

/* ---------- insights ---------- */
.insights__empty {
  border:1px dashed rgba(255,255,255,0.16); border-radius:6px; padding:70px 30px;
  text-align:center; color:var(--muted); background:rgba(255,255,255,0.015);
}
.insights__empty .mono { color:var(--accent); letter-spacing:0.3em; margin-bottom:12px; }
.insights__pulse {
  width:10px; height:10px; border-radius:50%; background:var(--accent); margin:0 auto 22px;
  animation:pulse 2s infinite;
}

/* ---------- contact page ---------- */
.contact-hero { max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vh,130px) var(--pad) 0; }
.contact-hero h1 { font-size:clamp(38px,5.2vw,66px); line-height:1.04; letter-spacing:-0.02em; }
.contact-hero__sub { color:var(--muted); font-size:17px; max-width:780px; margin-top:20px; }

/* ---------- contact form ---------- */
.contact-form {
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:clamp(26px,3.4vw,42px); backdrop-filter:blur(12px); margin-top:48px;
}
.form-intent { display:flex; gap:12px; flex-wrap:wrap; }
.form-intent input { position:absolute; opacity:0; pointer-events:none; }
.form-intent label {
  flex:1 1 0; min-width:210px; padding:15px 18px; cursor:pointer; color:var(--text);
  background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:6px;
  transition:border-color .2s ease, background .2s ease;
}
.form-intent label:hover { border-color:var(--line-hi); }
.form-intent input:checked + label { border-color:var(--accent); background:var(--accent-dim); }
.form-intent label b { font-family:var(--font-head); font-weight:700; font-size:15px; display:block; }
.form-intent label small { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); display:block; margin-top:6px; letter-spacing:0.05em; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px; }
.field { position:relative; }
.field.wide { grid-column:1 / -1; }
.field > span { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; color:var(--muted); margin-bottom:9px; }
.field input, .field textarea {
  width:100%; background:rgba(255,255,255,0.045); border:1px solid var(--line); border-radius:5px;
  color:var(--text); padding:13px 14px; font-family:var(--font-body); font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(232,162,60,0.12); }
.field textarea { min-height:150px; resize:vertical; }
.form-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.form-note { color:var(--muted); font-size:12.5px; }
.form-note a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-hi); }
.form-note a:hover { color:var(--accent); }
.form-status { display:none; margin-top:18px; font-size:14.5px; }
.form-status.show { display:block; }
.form-status.ok { color:#93C19E; }
.form-status.err { color:#DF8A6B; }
@media (max-width:760px) {
  .form-intent { flex-direction:column; }
  .form-grid { grid-template-columns:1fr; }
}

/* ---------- contact routes (home + page) ---------- */
.card--route { padding:38px 34px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.card--route h3 { font-size:clamp(24px, 2.4vw, 30px); margin-bottom:14px; line-height:1.15; }
.card--route p:not(.tag) { color:var(--muted); margin-bottom:26px; }
.card--route .btn { margin-top:auto; }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--line); background:rgba(6,8,10,0.72); backdrop-filter:blur(10px); position:relative; z-index:2; }
.footer__inner {
  max-width:var(--maxw); margin:0 auto; padding:44px var(--pad);
  display:flex; align-items:center; gap:34px; flex-wrap:wrap;
}
.footer__brand { margin-right:auto; }
.footer__logo { height:26px; width:auto; max-width:100%; display:block; }
.footer__brand p { color:var(--muted); font-size:9.5px; margin-top:8px; letter-spacing:0.18em; }
.footer__links { display:flex; gap:22px; }
.footer__links a { color:var(--muted); text-decoration:none; font-size:10px; letter-spacing:0.16em; transition:color .25s; }
.footer__links a:hover { color:var(--accent); }
.footer__copy { color:#4E5862; font-size:9.5px; width:100%; padding-top:22px; border-top:1px solid var(--line); }

/* ---------- reveal defaults (JS overrides) ---------- */
.reveal { opacity:0; transform:translateY(26px); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .grid--3 { grid-template-columns:1fr; }
  .grid--2 { grid-template-columns:1fr; }
  .engine__layout { grid-template-columns:1fr; gap:40px; }
  .engine__stages { min-height:240px; }
  .nav__links, .nav__cta { display:none; }
  .nav__burger { display:flex; }
}
@media (max-width: 760px) {
  .grid--4 { grid-template-columns:1fr; }
  .portfolio__row { grid-template-columns:1fr; gap:10px; padding:20px; }
  .portfolio__row--head { display:none; }
  .portfolio__row > span::before { content:attr(data-th); display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; color:var(--accent); margin-bottom:4px; }
  .portfolio__path { font-size:10px; }
  .engine__funnel-bar label { font-size:10px; }
  .hero__ctas .btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scrollcue i, .insights__pulse, .status--live::before { animation:none; }
}