/* =========================================================
   LOSTFAYSAL.V4 — design tokens
   bg-void      #0a0b0f   base background
   bg-panel     #14161c   card surface
   bg-panel-2   #1b1e26   raised surface
   ink          #e9ebf2   primary text
   ink-dim      #8b90a3   secondary text
   line         #262a35   hairline borders
   signal       #7c9eff   primary accent (status / links)
   amber        #ff9f5a   warm accent (highlights, em)
   good         #5eead4   ongoing / positive state
   ========================================================= */

:root{
  --bg-void:#0a0b0f;
  --bg-panel:#14161c;
  --bg-panel-2:#1b1e26;
  --ink:#e9ebf2;
  --ink-dim:#8b90a3;
  --ink-faint:#565b6c;
  --line:#242832;
  --signal:#7c9eff;
  --signal-dim:#3d4d80;
  --amber:#ff9f5a;
  --good:#5eead4;
  --font-mono:'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius:14px;
  --radius-sm:8px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@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-void);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

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

/* ---------- depth backdrop ---------- */
.depth-field{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.grid-floor{
  position:absolute; left:0; right:0; bottom:-10%; height:70%;
  background-image:
    linear-gradient(to right, rgba(124,158,255,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,158,255,.14) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(600px) rotateX(72deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 85%);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 85%);
  opacity:.55;
}
.starfield{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(233,235,242,.35), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(233,235,242,.25), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(124,158,255,.4), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,159,90,.3), transparent),
    radial-gradient(1.5px 1.5px at 55% 10%, rgba(233,235,242,.2), transparent),
    radial-gradient(1px 1px at 10% 65%, rgba(94,234,212,.3), transparent);
  background-size:100% 100%;
}
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% -10%, rgba(124,158,255,.10), transparent 55%),
             radial-gradient(100% 60% at 50% 110%, rgba(10,11,15,.9), transparent);
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,15,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand{
  font-family:var(--font-mono); font-weight:700; letter-spacing:.02em;
  font-size:15px; display:flex; align-items:center; gap:9px;
}
.brand-version{ color:var(--ink-faint); font-weight:500; }
.brand-dot{
  width:8px; height:8px; border-radius:50%; background:var(--good);
  box-shadow:0 0 0 3px rgba(94,234,212,.15), 0 0 10px rgba(94,234,212,.7);
  animation:pulse 2.6s ease-in-out infinite;
}
.nav-links{ display:flex; gap:28px; font-family:var(--font-mono); font-size:13px; color:var(--ink-dim); }
.nav-links a{ position:relative; padding:4px 0; transition:color .2s var(--ease); }
.nav-links a::before{ content:"·/"; color:var(--ink-faint); margin-right:2px; }
.nav-links a:hover{ color:var(--signal); }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.nav-mobile{
  display:none; flex-direction:column; padding:0 24px 18px;
  font-family:var(--font-mono); font-size:15px;
}
.nav-mobile a{ padding:12px 0; border-top:1px solid var(--line); color:var(--ink-dim); }
.nav-mobile.open{ display:flex; }

@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- layout helpers ---------- */
main{ position:relative; z-index:1; }
.section{ padding:120px 24px; position:relative; }
.section-alt{ background:linear-gradient(180deg, transparent, rgba(20,22,28,.5) 12%, rgba(20,22,28,.5) 88%, transparent); }
.section-inner{ max-width:1100px; margin:0 auto; }

.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal); margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::after{ content:""; flex:1; max-width:64px; height:1px; background:linear-gradient(to right, var(--signal-dim), transparent); }
.section-title{
  font-family:var(--font-mono); font-weight:700; font-size:clamp(28px,4vw,42px);
  line-height:1.2; margin:0 0 16px; letter-spacing:-.01em;
}
.section-lead{ color:var(--ink-dim); font-size:17px; max-width:560px; line-height:1.6; margin:0 0 48px; }

/* ---------- reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono); font-size:14px; font-weight:600;
  padding:14px 22px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary{
  background:var(--signal); color:#0a0b0f;
  box-shadow:0 0 0 0 rgba(124,158,255,0);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(124,158,255,.55); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--signal-dim); background:rgba(124,158,255,.06); transform:translateY(-2px); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:center;
  padding:150px 24px 80px; overflow:hidden;
}
.hero-inner{ max-width:640px; position:relative; z-index:2; margin:0 auto; text-align:left; width:100%; }

.status-bar{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em;
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:rgba(20,22,28,.6); backdrop-filter:blur(6px);
  color:var(--ink-dim); margin-bottom:28px;
}
.status-dot{
  width:7px; height:7px; border-radius:50%; background:var(--good);
  box-shadow:0 0 8px rgba(94,234,212,.9); animation:pulse 2.6s ease-in-out infinite;
}
.status-dot.small{ display:inline-block; margin-right:6px; }
.status-text{ color:var(--ink); }
.status-mono{ color:var(--ink-dim); }
.status-sep{ color:var(--ink-faint); }

.hero-title{
  font-family:var(--font-mono); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(38px,7vw,64px); line-height:1.08; margin:0 0 24px;
}
.hero-title .line{ display:block; }
.hero-title em{ font-style:normal; color:var(--signal); }

.hero-sub{ font-size:18px; line-height:1.65; color:var(--ink-dim); max-width:480px; margin:0 0 36px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- 3D scene ---------- */
.scene{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(46vw, 560px); height:560px;
  perspective:1400px; z-index:1;
  pointer-events:none;
}
.scene-stage{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transform:rotateY(-16deg) rotateX(8deg);
  transition:transform .4s var(--ease);
  will-change:transform;
}
.panel{
  position:absolute; width:320px; border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(27,30,38,.92), rgba(20,22,28,.86));
  border:1px solid var(--line);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(10px);
  padding:20px 22px;
  font-family:var(--font-mono); font-size:13px;
}
.panel-back{
  top:8%; left:2%; transform:translateZ(-140px) rotateY(10deg);
  opacity:.55;
}
.panel-mid{
  top:32%; left:16%; transform:translateZ(-40px) rotateY(4deg);
  opacity:.8;
}
.panel-front{
  top:50%; left:8%; transform:translateZ(90px) rotateY(-4deg);
  width:340px;
}
.panel-row{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px dashed var(--line); }
.panel-row:last-child{ border-bottom:0; }
.panel-row .k{ color:var(--ink-faint); }
.panel-row .v{ color:var(--ink); text-align:right; }
.panel-row .v.good{ color:var(--good); }

.terminal-head{ display:flex; align-items:center; gap:7px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.terminal-head .dot{ width:9px; height:9px; border-radius:50%; }
.terminal-head .dot.r{ background:#ff6459; }
.terminal-head .dot.y{ background:#ffbd2e; }
.terminal-head .dot.g{ background:#28c93f; }
.terminal-title{ margin-left:6px; color:var(--ink-faint); font-size:12px; }
.terminal-body p{ margin:0 0 9px; color:var(--ink); line-height:1.6; }
.terminal-body p:last-child{ margin-bottom:0; }
.terminal-body .prompt{ color:var(--good); margin-right:6px; }
.terminal-body .dim{ color:var(--ink-faint); }
.terminal-body b{ color:var(--signal); font-weight:600; }
.cursor-blink{ animation:blink 1s step-end infinite; }

@media (max-width:980px){
  .scene{ display:none; }
  .hero-inner{ max-width:640px; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; }
.about-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; font-size:17px; line-height:1.75; color:var(--ink-dim);
}
.about-card p{ margin:0 0 18px; }
.about-card p:last-child{ margin-bottom:0; }
.about-meta{ display:flex; flex-direction:column; gap:14px; }
.meta-row{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; display:flex; flex-direction:column; gap:4px;
}
.meta-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.meta-value{ font-size:15px; color:var(--ink); }

@media (max-width:820px){
  .about-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   PROCESS / FOCUS
   ========================================================= */
.process-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.process{
  background:var(--bg-panel); padding:26px 28px; display:flex; align-items:center; gap:22px;
}
.process-icon{
  width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:var(--bg-panel-2); border-radius:var(--radius-sm); border:1px solid var(--line);
}
.process-body{ flex:1; min-width:0; }
.process-body h3{ font-family:var(--font-mono); font-size:17px; margin:0 0 6px; }
.process-body p{ margin:0; color:var(--ink-dim); font-size:15px; line-height:1.6; max-width:520px; }
.badge{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:999px; flex:none; }
.badge-ongoing{ color:var(--good); background:rgba(94,234,212,.1); border:1px solid rgba(94,234,212,.3); }

@media (max-width:640px){
  .process{ flex-wrap:wrap; padding:22px; }
  .badge{ margin-left:74px; }
}

/* =========================================================
   DIAGNOSTICS
   ========================================================= */
.diag-grid{ display:flex; flex-direction:column; gap:22px; }
.diag-row{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px 22px; }
.diag-label{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; font-family:var(--font-mono); }
.diag-label span:first-child{ font-size:15px; color:var(--ink); }
.diag-note{ font-size:12px; color:var(--ink-faint); }
.diag-track{ height:8px; border-radius:99px; background:var(--bg-panel-2); overflow:hidden; border:1px solid var(--line); }
.diag-fill{
  height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--signal), var(--good));
  transition:width 1.4s var(--ease);
}
.diag-fill.filled{ width:var(--fill); }

/* =========================================================
   LOG
   ========================================================= */
.log-list{ display:flex; flex-direction:column; }
.log-entry{
  display:flex; gap:28px; padding:26px 4px; border-top:1px solid var(--line);
}
.log-entry:last-child{ border-bottom:1px solid var(--line); }
.log-time{
  font-family:var(--font-mono); font-size:13px; color:var(--signal);
  flex:none; width:84px; padding-top:2px;
}
.log-content h3{ font-family:var(--font-mono); font-size:16px; margin:0 0 8px; }
.log-content p{ margin:0; color:var(--ink-dim); font-size:15px; line-height:1.6; max-width:600px; }

@media (max-width:640px){
  .log-entry{ gap:16px; }
  .log-time{ width:64px; font-size:12px; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-panel{
  max-width:560px; background:var(--bg-panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px; margin-bottom:18px;
}
.contact-body a{ color:var(--signal); border-bottom:1px solid var(--signal-dim); }
.contact-body a:hover{ color:var(--good); }
.contact-note{ font-size:13px; color:var(--ink-faint); font-family:var(--font-mono); }
.contact-note code{ background:var(--bg-panel-2); padding:2px 6px; border-radius:4px; color:var(--ink-dim); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--line); position:relative; z-index:1; }
.footer-inner{
  max-width:1100px; margin:0 auto; padding:28px 24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint);
}
.footer-status{ display:flex; align-items:center; color:var(--ink-dim); }

/* ---------- tilt cards (ambient depth on hover) ---------- */
.tilt-card{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); will-change:transform; }
.tilt-card:hover{ box-shadow:0 20px 50px -20px rgba(0,0,0,.6); }

/* ---------- keyframes ---------- */
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }