/* ============================================================
   SYNVEX LABS — DESIGN SYSTEM v3.0
   High-end software engineering studio
   ============================================================ */

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

/* ─── DESIGN TOKENS — LIGHT MODE (default) ───────────────────── */
:root {
  /* Backgrounds */
  --bg-base:     #ffffff;
  --bg-surface:  #f6f6fb;
  --bg-elevated: #eeeef5;
  --bg-card:     #f9f9fd;
  /* Borders */
  --border:       rgba(0, 0, 0, 0.08);
  --border-hover: rgba(99, 102, 241, 0.45);
  /* Text */
  --text-1: #0f0f1a;
  --text-2: #4a4a68;
  --text-3: #7878a0;
  --text-4: #b4b4cc;
  /* Accents — same both modes */
  --indigo: #6366f1;
  --violet: #8b5cf6;
  --cyan:   #06b6d4;
  --grad-primary:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grad-secondary: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --grad-glow:      linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --grad-accent:    linear-gradient(135deg, #000080 0%, #00FFFF 50%, #069494 100%);
  /* Shadows — real depth for light mode */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.09), 0 3px 8px rgba(0,0,0,0.05);
  --shadow-xl:   0 20px 48px rgba(0,0,0,0.09), 0 8px 16px rgba(0,0,0,0.05);
  --glow-indigo: 0 0 0 2px rgba(99,102,241,0.12), 0 4px 16px rgba(99,102,241,0.15);
  /* Nav */
  --nav-bg:        rgba(255,255,255,0.92);
  --nav-mobile-bg: rgba(255,255,255,0.98);
  /* Canvas */
  --canvas-opacity: 0.45;
  /* Spacing */
  --s1:0.25rem; --s2:0.5rem; --s3:0.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem;  --s8:2rem;   --s10:2.5rem; --s12:3rem; --s16:4rem;
  --s20:5rem;   --s24:6rem;  --s32:8rem;
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --t-fast:150ms; --t-normal:300ms; --t-slow:500ms; --t-slower:800ms;
  --max-width:1200px;
  --nav-h:72px;
}

/* ─── DESIGN TOKENS — DARK MODE ──────────────────────────────── */
[data-theme="dark"] {
  --bg-base:     #0a0a0a;
  --bg-surface:  #111111;
  --bg-elevated: #1c1c1c;
  --bg-card:     #141414;
  --border:       rgba(255, 255, 255, 0.11);
  --border-hover: rgba(99, 102, 241, 0.45);
  --text-1: #ffffff;
  --text-2: #d4d4d4;
  --text-3: #707070;
  --text-4: #333333;
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.6);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.7);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.8);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.9);
  --glow-indigo: 0 0 0 2px rgba(99,102,241,0.25);
  --nav-bg:        rgba(10,10,10,0.92);
  --nav-mobile-bg: rgba(10,10,10,0.99);
  --canvas-opacity: 0.35;
}

/* ─── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg-base); color:var(--text-1);
  font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea,select{font-family:inherit;}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head); font-weight:600;
  line-height:1.12; letter-spacing:-0.025em; color:var(--text-1);
}
.t-display{font-size:clamp(3rem,8vw,7rem);font-weight:700;letter-spacing:-0.038em;line-height:0.97;}
.t-hero   {font-size:clamp(2.4rem,5.5vw,4.5rem);font-weight:700;letter-spacing:-0.03em;line-height:1.06;}
.t-h1     {font-size:clamp(1.8rem,4vw,3.25rem);font-weight:700;letter-spacing:-0.025em;}
.t-h2     {font-size:clamp(1.5rem,3vw,2.5rem);font-weight:600;}
.t-h3     {font-size:clamp(1.125rem,2.5vw,1.625rem);font-weight:600;}
.t-sm     {font-size:0.875rem;}
.t-xs     {font-size:0.75rem;}
.t-mono   {font-family:var(--font-mono);font-size:0.8rem;}
.text-2   {color:var(--text-2);}
.text-3   {color:var(--text-3);}
.text-accent{color:var(--indigo);}
.text-grad{
  background:var(--grad-glow);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container{
  width:100%; max-width:var(--max-width);
  margin:0 auto; padding:0 var(--s8);
}
.section   {padding:var(--s32) 0;position:relative;}
.section--sm{padding:var(--s20) 0;position:relative;}
.section--lg{padding:calc(var(--s32)*1.5) 0;position:relative;}

/* ─── NOISE TEXTURE ──────────────────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;opacity:0.025;
  pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── GRID BACKGROUND ────────────────────────────────────────── */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 100%);
}

/* ─── ORB GLOWS ──────────────────────────────────────────────── */
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;}
.orb-1{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(99,102,241,0.13) 0%,transparent 70%);
  top:-10%;left:-5%;
  animation:orb-drift 12s ease-in-out infinite alternate;
}
.orb-2{
  width:350px;height:350px;
  background:radial-gradient(circle,rgba(139,92,246,0.1) 0%,transparent 70%);
  top:20%;right:0%;
  animation:orb-drift 10s ease-in-out infinite alternate-reverse;
}
.orb-3{
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(6,182,212,0.08) 0%,transparent 70%);
  bottom:10%;left:30%;
  animation:orb-drift 14s ease-in-out infinite alternate;
}
@keyframes orb-drift{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(40px,-30px) scale(1.15);}
}

/* ─── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity var(--t-slower) var(--ease-out),
             transform var(--t-slower) var(--ease-out);
}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:80ms;}
.reveal-d2{transition-delay:160ms;}
.reveal-d3{transition-delay:240ms;}
.reveal-d4{transition-delay:320ms;}
.reveal-d5{transition-delay:400ms;}

/* ─── NAVIGATION ─────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;
}
.nav::before{
  content:'';position:absolute;inset:0;
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid var(--border);z-index:-1;
}
.nav__inner{
  width:100%;max-width:var(--max-width);
  margin:0 auto;padding:0 var(--s8);
  display:flex;align-items:center;
  justify-content:space-between;gap:var(--s8);
}
.nav__logo{
  font-family:var(--font-head);font-size:1.25rem;
  font-weight:700;letter-spacing:-0.02em;
  color:var(--text-1);display:flex;
  align-items:center;gap:var(--s2);
}
.nav__logo-mark{
  width:28px;height:28px;background:var(--grad-primary);
  border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:0.68rem;
  color:white;font-weight:700;flex-shrink:0;
  letter-spacing:-0.01em;
}
.nav__links{display:flex;align-items:center;gap:var(--s6);}
.nav__link{
  font-size:0.875rem;font-weight:500;color:var(--text-2);
  transition:color var(--t-fast) var(--ease-out);
  letter-spacing:0.01em;
}
.nav__link:hover,.nav__link.active{color:var(--text-1);}
.nav__cta{
  font-size:0.8125rem;font-weight:600;
  padding:8px 18px;background:var(--bg-elevated);
  border:1px solid var(--border-hover);
  border-radius:var(--r-full);color:var(--text-1);
  transition:all var(--t-normal) var(--ease-out);
}
.nav__cta:hover{
  background:var(--indigo);border-color:var(--indigo);
  color:white;box-shadow:var(--glow-indigo);
}
.nav__toggle{
  display:none;flex-direction:column;
  gap:5px;padding:6px;cursor:pointer;
}
.nav__toggle span{
  display:block;width:22px;height:2px;
  background:var(--text-2);border-radius:2px;
  transition:all var(--t-normal) var(--ease-out);
}
.nav__toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav__toggle.open span:nth-child(2){opacity:0;}
.nav__toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.nav__mobile{
  display:none;position:fixed;
  top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--nav-mobile-bg);
  backdrop-filter:blur(24px);
  z-index:999;padding:var(--s8);
  flex-direction:column;gap:0;
}
.nav__mobile.open{display:flex;}
.nav__mobile-link{
  font-family:var(--font-head);font-size:1.4rem;
  font-weight:600;color:var(--text-2);
  padding:var(--s5) 0;
  border-bottom:1px solid var(--border);
  transition:color var(--t-fast) var(--ease-out);
  display:block;
}
.nav__mobile-link:hover{color:var(--text-1);}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-body);font-size:0.9375rem;
  font-weight:600;padding:13px 26px;
  border-radius:var(--r-full);border:1px solid transparent;
  transition:all var(--t-normal) var(--ease-out);
  cursor:pointer;letter-spacing:0.01em;
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn--primary{
  background:var(--grad-primary);color:white;
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(99,102,241,0.3);
}
.btn--primary:active{transform:translateY(0);}
.btn--ghost{
  background:transparent;color:var(--text-2);
  border-color:var(--border);
}
.btn--ghost:hover{
  color:var(--text-1);border-color:var(--border-hover);
  background:rgba(99,102,241,0.05);transform:translateY(-1px);
}
.btn--sm{font-size:0.8125rem;padding:9px 18px;}

/* ─── LABELS ─────────────────────────────────────────────────── */
.label{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-mono);font-size:0.68rem;
  font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--indigo);
  background:rgba(99,102,241,0.08);
  border:1px solid rgba(99,102,241,0.2);
  padding:5px 11px;border-radius:var(--r-full);
}
.label-dot{
  width:5px;height:5px;background:var(--indigo);
  border-radius:50%;animation:dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.6);opacity:0.5;}
}
.tech-pill{
  font-family:var(--font-mono);font-size:0.68rem;
  color:var(--text-2);background:var(--bg-elevated);
  border:1px solid var(--border);
  padding:5px 12px;border-radius:var(--r-sm);
  letter-spacing:0.04em;
  display:inline-flex;align-items:center;gap:5px;
  transition:border-color var(--t-fast),color var(--t-fast);
}
.tech-pill:hover{border-color:rgba(99,102,241,0.4);color:var(--text-1);}
.tech-pill i{
  font-size:0.85rem;color:var(--indigo);
  text-shadow:0 0 6px rgba(99,102,241,0.55);
  transition:text-shadow var(--t-fast);
}
.tech-pill:hover i{
  text-shadow:0 0 10px rgba(99,102,241,0.9),0 0 20px rgba(139,92,246,0.5);
}

/* ─── SECTION HEADERS ────────────────────────────────────────── */
.section-header{margin-bottom:var(--s12);}
.section-header--center{text-align:center;}
.section-header__label{margin-bottom:var(--s4);}
.section-header__title{
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  font-weight:700;letter-spacing:-0.025em;
  line-height:1.1;margin-bottom:var(--s4);
}
.section-header__sub{
  font-size:1.0625rem;color:var(--text-2);
  max-width:540px;line-height:1.7;
}
.section-header--center .section-header__sub{margin-left:auto;margin-right:auto;}
.grad-line{
  width:56px;height:2px;background:var(--grad-primary);
  border-radius:var(--r-full);margin:var(--s5) 0;
}
.section-header--center .grad-line{margin-left:auto;margin-right:auto;}

/* ─── HERO ───────────────────────────────────────────────────── */
#hero{
  min-height:100vh;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + var(--s16)) var(--s8) var(--s24);
  position:relative;overflow:hidden;
}
#hero-canvas{
  position:absolute;inset:0;z-index:0;opacity:var(--canvas-opacity);
}
.hero__content{
  position:relative;z-index:2;
  max-width:880px;margin:0 auto;
}
.hero__label{margin-bottom:var(--s8);}
.hero__heading{
  font-family:var(--font-head);
  font-size:clamp(2.25rem,6vw,4.5rem);
  font-weight:700;line-height:0.97;
  letter-spacing:-0.038em;margin-bottom:var(--s8);
}
.hero__heading .line--accent{
  background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;display:block;
}
[data-theme="dark"] .hero__heading .line--accent{
  background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero__sub{
  font-size:clamp(1rem,2.5vw,1.2rem);color:var(--text-2);
  max-width:520px;margin:0 auto var(--s10);
  line-height:1.7;font-weight:400;
}
.hero__ctas{
  display:flex;align-items:center;
  justify-content:center;gap:var(--s4);flex-wrap:wrap;
}
.hero__scroll-hint{
  position:absolute;bottom:var(--s10);left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s2);animation:scroll-float 2.8s ease-in-out infinite;
}
.hero__scroll-line{
  width:1px;height:48px;
  background:linear-gradient(to bottom,rgba(99,102,241,0.6),transparent);
}
.hero__scroll-label{
  font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);
}
@keyframes scroll-float{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(8px);}
}

/* ─── SYSTEMS SECTION ────────────────────────────────────────── */
.systems-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5);
}
.sys-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s10);
  transition:all var(--t-normal) var(--ease-out);
  position:relative;overflow:hidden;
}
.sys-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:1px;
  background:var(--grad-primary);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-normal) var(--ease-out);
}
.sys-card:hover{
  border-color:var(--border-hover);transform:translateY(-5px);
  box-shadow:var(--shadow-xl);
}
.sys-card:hover::before{transform:scaleX(1);}
.sys-card__icon{
  width:46px;height:46px;
  background:rgba(99,102,241,0.1);
  border:1px solid rgba(99,102,241,0.2);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s6);font-size:1.25rem;
  transition:all var(--t-normal) var(--ease-out);
}
.sys-card:hover .sys-card__icon{
  background:rgba(99,102,241,0.2);
  border-color:rgba(99,102,241,0.5);
  box-shadow:0 0 24px rgba(99,102,241,0.25);
}
.sys-card__tag{
  font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.12em;color:var(--indigo);
  text-transform:uppercase;margin-bottom:var(--s3);
}
.sys-card__title{
  font-size:1.3125rem;font-weight:600;
  color:var(--text-1);margin-bottom:var(--s4);
}
.sys-card__desc{
  font-size:0.9rem;color:var(--text-2);
  line-height:1.75;margin-bottom:var(--s6);
}
.sys-card__features{display:flex;flex-direction:column;gap:var(--s2);}
.sys-card__feature{
  font-size:0.8rem;color:var(--text-3);
  display:flex;align-items:center;gap:var(--s2);
}
.sys-card__feature::before{
  content:'';width:4px;height:4px;
  background:var(--indigo);border-radius:50%;flex-shrink:0;
}

/* ─── CASE STUDIES ───────────────────────────────────────────── */
.case-list{display:flex;flex-direction:column;gap:var(--s6);}
.case-study{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;
  transition:all var(--t-normal) var(--ease-out);
  display:grid;grid-template-columns:1fr 1fr;min-height:460px;
}
.case-study:hover{border-color:var(--border-hover);box-shadow:var(--shadow-xl);}
.case-study--flip{direction:rtl;}
.case-study--flip>*{direction:ltr;}
.case-study__visual{
  position:relative;overflow:hidden;
  min-height:300px;display:flex;
  align-items:center;justify-content:center;
}
.case-study__bg{
  position:absolute;inset:0;
  transition:transform var(--t-slow) var(--ease-out);
}
.case-study:hover .case-study__bg{transform:scale(1.05);}
.case-bg--planner{
  background:linear-gradient(135deg,#0d0d2e 0%,#1a1040 50%,#0a1535 100%);
}
.case-bg--goldenchef{
  background:linear-gradient(135deg,#0d1f0d 0%,#142a10 50%,#0a1a14 100%);
}
.case-study__img{
  position:relative;z-index:1;width:60%;
  border-radius:var(--r-md);box-shadow:var(--shadow-xl);
  transition:transform var(--t-slow) var(--ease-out);
}
.case-study:hover .case-study__img{transform:translateY(-8px);}
.case-study__body{
  padding:var(--s12);display:flex;
  flex-direction:column;justify-content:center;
}
.case-study__meta{
  display:flex;align-items:center;
  gap:var(--s3);margin-bottom:var(--s6);
}
.case-study__num{
  font-family:var(--font-mono);font-size:0.7rem;color:var(--text-3);
}
.case-study__type{
  font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--indigo);background:rgba(99,102,241,0.1);
  padding:3px 10px;border-radius:var(--r-full);
}
.case-study__title{
  font-size:2.125rem;font-weight:700;color:var(--text-1);
  margin-bottom:var(--s4);line-height:1.1;letter-spacing:-0.02em;
}
.case-study__summary{
  font-size:0.9375rem;color:var(--text-2);
  line-height:1.75;margin-bottom:var(--s8);
}
.case-study__stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s3);margin-bottom:var(--s8);
}
.cs-stat{
  padding:var(--s4) var(--s5);background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--r-md);
}
.cs-stat__value{
  font-family:var(--font-head);font-size:1.625rem;font-weight:700;
  color:var(--text-1);letter-spacing:-0.02em;line-height:1;
}
.cs-stat__label{font-size:0.7rem;color:var(--text-3);margin-top:var(--s1);}
.case-study__stack{display:flex;flex-wrap:wrap;gap:var(--s2);}

/* ─── ENGINEERING DNA ────────────────────────────────────────── */
.dna-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);
}
.dna-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s8);
  position:relative;overflow:hidden;
  transition:all var(--t-normal) var(--ease-out);
}
.dna-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--grad-primary);opacity:0;
  transition:opacity var(--t-normal) var(--ease-out);
}
.dna-card:hover{
  border-color:var(--border-hover);transform:translateY(-4px);
  box-shadow:var(--shadow-xl);
}
.dna-card:hover::after{opacity:1;}
.dna-card__icon{font-size:1.75rem;margin-bottom:var(--s4);}
.dna-card__name{
  font-size:1.0625rem;font-weight:600;
  color:var(--text-1);margin-bottom:var(--s2);
}
.dna-card__desc{
  font-size:0.8125rem;color:var(--text-2);
  line-height:1.65;margin-bottom:var(--s5);
}
.dna-card__pills{display:flex;flex-wrap:wrap;gap:var(--s1);}

/* ─── DIGITAL SYSTEM MAP ─────────────────────────────────────── */
.map-wrapper{
  border:1px solid var(--border);border-radius:var(--r-xl);
  overflow:hidden;background:var(--bg-card);
}
.map-titlebar{
  padding:var(--s4) var(--s8);border-bottom:1px solid var(--border);
  background:var(--bg-elevated);display:flex;align-items:center;gap:var(--s3);
}
.map-dots{display:flex;gap:6px;}
.map-dot{width:10px;height:10px;border-radius:50%;}
.map-dot:nth-child(1){background:#ff5f56;}
.map-dot:nth-child(2){background:#febc2e;}
.map-dot:nth-child(3){background:#28c840;}
.map-file{
  font-family:var(--font-mono);font-size:0.7rem;
  color:var(--text-3);margin:0 auto;
}
.map-body{display:grid;grid-template-columns:200px 1fr;}
.map-sidebar{border-right:1px solid var(--border);padding:var(--s6);}
.map-sidebar-title{
  font-family:var(--font-mono);font-size:0.62rem;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s4);
}
.map-node-btn{
  width:100%;padding:var(--s3) var(--s4);border-radius:var(--r-md);
  cursor:pointer;transition:all var(--t-fast) var(--ease-out);
  border:1px solid transparent;text-align:left;
  display:flex;align-items:center;gap:var(--s3);
  margin-bottom:var(--s2);
}
.map-node-btn:hover,.map-node-btn.active{
  background:var(--bg-base);border-color:var(--border-hover);
}
.map-node-indicator{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-3);flex-shrink:0;
  transition:background var(--t-fast) var(--ease-out);
}
.map-node-btn.active .map-node-indicator{background:var(--indigo);}
.map-node-label{
  font-size:0.8125rem;font-weight:500;color:var(--text-2);
  transition:color var(--t-fast) var(--ease-out);
}
.map-node-btn.active .map-node-label{color:var(--text-1);}
.map-canvas{
  min-height:440px;position:relative;display:flex;
  align-items:center;justify-content:center;
  overflow:hidden;padding:var(--s8);
}
.flow-diagram{display:flex;flex-direction:column;align-items:center;}
.flow-node{display:flex;flex-direction:column;align-items:center;}
.flow-box{
  padding:14px 32px;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--r-lg);
  text-align:center;min-width:220px;cursor:pointer;
  transition:all var(--t-normal) var(--ease-out);
}
.flow-box:hover{border-color:var(--border-hover);box-shadow:var(--glow-indigo);}
.flow-box.flow-box--active{
  border-color:var(--indigo);background:rgba(99,102,241,0.08);
  box-shadow:var(--glow-indigo);
}
.flow-box__title{font-size:0.9375rem;font-weight:600;color:var(--text-1);}
.flow-box__sub{
  font-family:var(--font-mono);font-size:0.65rem;
  color:var(--text-3);margin-top:3px;
}
.flow-connector{display:flex;flex-direction:column;align-items:center;padding:3px 0;}
.flow-line{
  width:1px;height:30px;
  background:linear-gradient(to bottom,rgba(99,102,241,0.5),rgba(99,102,241,0.1));
}
.flow-arrow{
  width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid rgba(99,102,241,0.4);
}

/* ─── PRINCIPLES ─────────────────────────────────────────────── */
.principles-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);
}
.principle{
  padding:var(--s8) var(--s10);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--bg-card);
  display:flex;align-items:flex-start;gap:var(--s5);
  transition:all var(--t-normal) var(--ease-out);
}
.principle:hover{border-color:var(--border-hover);background:var(--bg-elevated);}
.principle__num{
  font-family:var(--font-mono);font-size:0.7rem;
  color:var(--text-4);flex-shrink:0;padding-top:4px;
}
.principle__title{
  font-family:var(--font-head);font-size:1.25rem;
  font-weight:600;color:var(--text-1);margin-bottom:var(--s2);
}
.principle__desc{font-size:0.875rem;color:var(--text-2);line-height:1.65;}

/* ─── BUILD LOG ──────────────────────────────────────────────── */
.build-log{position:relative;padding-left:var(--s10);}
.build-log::before{
  content:'';position:absolute;left:3px;
  top:12px;bottom:12px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--border) 8%,var(--border) 92%,transparent);
}
.blog-entry{
  position:relative;padding-bottom:var(--s8);
  display:grid;grid-template-columns:130px 1fr;gap:var(--s8);
  border-bottom:1px solid var(--border);
}
.blog-entry:last-child{border-bottom:none;padding-bottom:0;}
.blog-entry::before{
  content:'';position:absolute;
  left:calc(-1 * var(--s10) - 3px);
  top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--bg-base);border:1px solid var(--border);
  transition:all var(--t-fast) var(--ease-out);
}
.blog-entry:hover::before{
  background:var(--indigo);border-color:var(--indigo);
  box-shadow:0 0 14px rgba(99,102,241,0.6);
}
.blog-entry__date{
  font-family:var(--font-mono);font-size:0.7rem;
  color:var(--text-3);letter-spacing:0.05em;padding-top:var(--s4);
}
.blog-entry__content{cursor:pointer;padding:var(--s4) 0;}
.blog-entry__title{
  font-size:1.0625rem;font-weight:600;color:var(--text-1);
  margin-bottom:var(--s2);transition:color var(--t-fast) var(--ease-out);
}
.blog-entry:hover .blog-entry__title{color:var(--indigo);}
.blog-entry__desc{
  font-size:0.875rem;color:var(--text-2);line-height:1.65;margin-bottom:var(--s3);
}
.blog-entry__tags{display:flex;gap:var(--s2);flex-wrap:wrap;}
.blog-tag{
  font-family:var(--font-mono);font-size:0.62rem;color:var(--text-3);
  background:var(--bg-elevated);border:1px solid var(--border);
  padding:2px 8px;border-radius:var(--r-sm);letter-spacing:0.05em;
}

/* ─── MISSION CONTROL ────────────────────────────────────────── */
.mission-shell{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
.mission-titlebar{
  padding:var(--s4) var(--s8);border-bottom:1px solid var(--border);
  background:var(--bg-elevated);display:flex;align-items:center;gap:var(--s3);
}
.mission-window-dots{display:flex;gap:6px;}
.mission-dot{width:10px;height:10px;border-radius:50%;}
.mission-dot:nth-child(1){background:#ff5f56;}
.mission-dot:nth-child(2){background:#febc2e;}
.mission-dot:nth-child(3){background:#28c840;}
.mission-window-title{
  font-family:var(--font-mono);font-size:0.7rem;color:var(--text-3);margin:0 auto;
}
.mission-body{
  display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s12);
  padding:var(--s10) var(--s12);background:var(--bg-surface);
}
.mission-info__prompt{
  font-family:var(--font-mono);font-size:0.7rem;
  color:var(--indigo);letter-spacing:0.06em;margin-bottom:var(--s4);
}
.mission-info__title{
  font-size:2.25rem;font-weight:700;color:var(--text-1);
  line-height:1.1;letter-spacing:-0.025em;margin-bottom:var(--s5);
}
.mission-info__desc{
  font-size:0.9375rem;color:var(--text-2);line-height:1.75;margin-bottom:var(--s8);
}
.mission-details{display:flex;flex-direction:column;gap:var(--s4);}
.mission-detail{
  display:flex;align-items:center;gap:var(--s4);
  font-size:0.875rem;color:var(--text-2);
}
.mission-detail__icon{
  width:32px;height:32px;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:0.875rem;flex-shrink:0;
}
.mission-form{display:flex;flex-direction:column;gap:var(--s5);}
.field-label{
  font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-3);display:block;margin-bottom:var(--s2);
}
.field-input,.field-textarea,.field-select{
  width:100%;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:12px 16px;color:var(--text-1);font-size:0.9rem;
  outline:none;transition:all var(--t-fast) var(--ease-out);
  -webkit-appearance:none;appearance:none;
}
.field-input:focus,.field-textarea:focus,.field-select:focus{
  border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(99,102,241,0.12);
  background:var(--bg-card);
}
.field-input::placeholder,.field-textarea::placeholder{color:var(--text-4);}
.field-textarea{resize:vertical;min-height:130px;}
.field-select option{background:var(--bg-elevated);color:var(--text-1);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.form-status{padding:var(--s4) var(--s5);border-radius:var(--r-md);font-size:0.875rem;display:none;}
.form-status--success{
  background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#4ade80;
}
.form-status--error{
  background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;
}

/* ─── PAGE HEADER ────────────────────────────────────────────── */
.page-header{
  padding:calc(var(--nav-h) + var(--s16)) 0 var(--s16);
  text-align:center;position:relative;overflow:hidden;
}
.page-header::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:700px;height:500px;
  background:radial-gradient(ellipse at center,rgba(99,102,241,0.07) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
.page-header > *{position:relative;z-index:1;}
.page-header__label{margin-bottom:var(--s5);}
.page-header__title{
  font-size:clamp(2.25rem,5vw,4rem);font-weight:700;
  letter-spacing:-0.03em;line-height:1.05;margin-bottom:var(--s5);
}
.page-header__sub{
  font-size:1.0625rem;color:var(--text-2);
  max-width:560px;margin:0 auto;line-height:1.7;
}

/* ─── PROJECTS / WORK ────────────────────────────────────────── */
.projects-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
}
.project-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:all var(--t-normal) var(--ease-out);
}
.project-card:hover{
  border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-xl);
}
.project-card__visual{
  aspect-ratio:16/9;background:var(--bg-elevated);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.project-card__img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease-out);
}
.project-card:hover .project-card__img{transform:scale(1.05);}
.project-card__visual-label{
  font-family:var(--font-mono);font-size:0.7rem;
  color:var(--text-3);letter-spacing:0.05em;
}
.project-card__body{padding:var(--s6);}
.project-card__type{
  font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:var(--s2);
}
.project-card__title{
  font-size:1.125rem;font-weight:600;color:var(--text-1);margin-bottom:var(--s2);
}
.project-card__desc{
  font-size:0.8125rem;color:var(--text-2);line-height:1.65;margin-bottom:var(--s4);
}
.project-card__stack{display:flex;flex-wrap:wrap;gap:var(--s2);}

/* ─── ABOUT ──────────────────────────────────────────────────── */
.about-layout{
  display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s16);align-items:start;
}
.about-sidebar{position:sticky;top:calc(var(--nav-h) + var(--s8));}
.about-avatar{
  aspect-ratio:1;border-radius:var(--r-xl);background:var(--bg-elevated);
  border:1px solid var(--border);overflow:hidden;margin-bottom:var(--s6);
  display:flex;align-items:center;justify-content:center;
}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.about-stat{
  padding:var(--s4);background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-md);text-align:center;
}
.about-stat__val{
  font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--text-1);
}
.about-stat__label{font-size:0.7rem;color:var(--text-3);margin-top:2px;}
.about-body p{font-size:1rem;color:var(--text-2);line-height:1.8;margin-bottom:var(--s6);}
.timeline{position:relative;padding-left:var(--s8);margin-top:var(--s8);}
.timeline::before{
  content:'';position:absolute;left:0;
  top:8px;bottom:8px;width:1px;background:var(--border);
}
.t-item{position:relative;padding-bottom:var(--s8);}
.t-item:last-child{padding-bottom:0;}
.t-item::before{
  content:'';position:absolute;
  left:calc(-1 * var(--s8) - 4px);top:8px;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg-base);border:1px solid var(--border);
  transition:all var(--t-fast);
}
.t-item:hover::before{background:var(--indigo);border-color:var(--indigo);}
.t-item__year{
  font-family:var(--font-mono);font-size:0.7rem;
  color:var(--indigo);letter-spacing:0.05em;margin-bottom:var(--s2);
}
.t-item__title{font-size:1rem;font-weight:600;color:var(--text-1);margin-bottom:var(--s2);}
.t-item__desc{font-size:0.875rem;color:var(--text-2);line-height:1.6;}

/* Skills marquee — seamless infinite loop */
.skills-marquee{overflow:hidden;position:relative;margin-top:var(--s6);}
.skills-marquee::before,.skills-marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none;
}
.skills-marquee::before{left:0;background:linear-gradient(to right,var(--bg-base),transparent);}
.skills-marquee::after{right:0;background:linear-gradient(to left,var(--bg-base),transparent);}
/* Track = animating flex row; Inner = each half with padding-right to match gap */
.skills-track{display:flex;animation:marquee 30s linear infinite;}
.skills-track--rev{animation-direction:reverse;margin-top:var(--s3);}
.skills-inner{
  display:flex;gap:var(--s3);
  padding-right:var(--s3); /* matches gap so both halves are equal width → seamless */
  flex-shrink:0;
}
@keyframes marquee{
  from{transform:translateX(0);}to{transform:translateX(-50%);}
}
.skill-pill{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:7px 14px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-full);font-size:0.8125rem;color:var(--text-2);
  white-space:nowrap;transition:all var(--t-fast);
}
.skill-pill:hover{border-color:var(--border-hover);color:var(--text-1);}

/* ─── SERVICES ───────────────────────────────────────────────── */
.services-list{display:flex;flex-direction:column;gap:var(--s12);}
.svc-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;
  transition:all var(--t-normal) var(--ease-out);
}
.svc-card:hover{border-color:var(--border-hover);}
.svc-card__header{
  padding:var(--s10) var(--s12);display:flex;align-items:center;gap:var(--s6);
  border-bottom:1px solid var(--border);
}
.svc-card__icon-wrap{
  width:56px;height:56px;background:rgba(99,102,241,0.1);
  border:1px solid rgba(99,102,241,0.2);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;flex-shrink:0;
}
.svc-card__header-text{flex:1;}
.svc-card__tag{
  font-family:var(--font-mono);font-size:0.65rem;color:var(--indigo);
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:var(--s2);
}
.svc-card__name{font-size:1.375rem;font-weight:700;color:var(--text-1);margin-bottom:var(--s2);}
.svc-card__sub{font-size:0.9rem;color:var(--text-2);line-height:1.6;}
.svc-card__body{
  display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s12);
  padding:var(--s10) var(--s12);
}
.svc-features{display:flex;flex-direction:column;gap:var(--s4);}
.svc-feature{
  display:flex;align-items:center;gap:var(--s3);
  font-size:0.875rem;color:var(--text-2);line-height:1.5;
}
.svc-feature::before{
  content:'';width:5px;height:5px;background:var(--indigo);
  border-radius:50%;flex-shrink:0;opacity:0.7;
}
.svc-stack-title{
  font-size:0.7rem;font-weight:600;color:var(--text-3);
  text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--s5);
}
.svc-stack{display:flex;flex-wrap:wrap;gap:var(--s2);}

/* ─── SYSTEMS AUDIT ──────────────────────────────────────────── */
.audit-card{
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg-elevated);padding:var(--s10) var(--s12);
  position:relative;overflow:hidden;
}
.audit-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--grad-accent);
}
.audit-card__marker{margin-bottom:var(--s6);}
.audit-card__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s16);align-items:start;
}
.audit-card__icon{
  font-size:2rem;color:var(--indigo);
  margin-bottom:var(--s4);line-height:1;
}
.audit-card__title{
  font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:700;letter-spacing:-0.03em;line-height:1.15;
  margin-bottom:var(--s5);color:var(--text-1);
}
.audit-card__desc{
  font-size:0.9375rem;color:var(--text-2);
  line-height:1.7;margin-bottom:var(--s4);
}
.audit-card__note{
  font-family:var(--font-mono);font-size:0.75rem;
  color:var(--indigo);letter-spacing:0.02em;margin-bottom:var(--s6);
}
.audit-checks-title{
  font-family:var(--font-mono);font-size:0.7rem;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s4);
}
.audit-checks{
  list-style:none;padding:0;margin:0 0 var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);
}
.audit-checks li{
  display:flex;align-items:flex-start;gap:var(--s3);
  font-size:0.875rem;color:var(--text-2);line-height:1.5;
}
.audit-checks li::before{
  content:'✓';color:var(--indigo);font-weight:700;
  flex-shrink:0;margin-top:1px;
}
.audit-deliverable{
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);background:var(--bg-surface);
}
.audit-deliverable__tag{
  font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:var(--s1);
}
.audit-deliverable__title{
  font-weight:600;font-size:0.9375rem;
  color:var(--text-1);margin-bottom:var(--s1);
}
.audit-deliverable__sub{font-size:0.8125rem;color:var(--text-3);line-height:1.5;}
@media(max-width:768px){
  .audit-card{padding:var(--s8) var(--s6);}
  .audit-card__grid{grid-template-columns:1fr;gap:var(--s8);}
}

/* Pricing */
.pricing-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s8);
}
.pricing-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s8);
  position:relative;transition:all var(--t-normal) var(--ease-out);
  display:flex;flex-direction:column;
}
.pricing-card--featured{border-color:var(--border-hover);}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);}
.pricing-badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;background:var(--grad-primary);
  color:white;padding:4px 12px;border-radius:var(--r-full);
}
.pricing-card__name{font-size:1.125rem;font-weight:600;color:var(--text-1);margin-bottom:var(--s2);}
.pricing-card__desc{font-size:0.8125rem;color:var(--text-2);line-height:1.6;margin-bottom:var(--s6);}
.pricing-card__features{display:flex;flex-direction:column;gap:var(--s3);flex:1;}
.pricing-feature{
  display:flex;align-items:center;gap:var(--s2);
  font-size:0.8125rem;color:var(--text-2);
}
.pricing-feature::before{content:'✓';font-size:0.7rem;color:var(--indigo);flex-shrink:0;}
.pricing-card__best{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:0.68rem;color:var(--text-3);
  letter-spacing:0.03em;
}
.pricing-card__best::before{content:'↗ ';color:var(--indigo);}
/* Service card micro visuals */
.svc-visual{margin-bottom:var(--s5);opacity:0.95;}
.svc-visual svg{
  width:100%;height:auto;max-height:88px;display:block;
  filter:drop-shadow(0 0 7px rgba(99,102,241,0.2));
  transition:filter var(--t-normal);
}
.svc-card:hover .svc-visual svg{filter:drop-shadow(0 0 14px rgba(99,102,241,0.45));}

/* ─── CONTACT PAGE ───────────────────────────────────────────── */
.contact-layout{
  display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s12);
}
.contact-method{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s6);margin-bottom:var(--s4);
  transition:all var(--t-fast) var(--ease-out);
}
.contact-method:hover{border-color:var(--border-hover);}
.contact-method__icon{font-size:1.25rem;margin-bottom:var(--s3);}
.contact-method__label{
  font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.1em;color:var(--text-3);margin-bottom:var(--s1);
}
.contact-method__value{font-size:0.9375rem;font-weight:600;color:var(--text-1);}

/* ─── BLOG ───────────────────────────────────────────────────── */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s12);
}
.blog-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:all var(--t-normal) var(--ease-out);
}
.blog-card:hover{
  border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-xl);
}
.blog-card__img{
  aspect-ratio:16/9;overflow:hidden;background:var(--bg-elevated);
  display:flex;align-items:center;justify-content:center;
}
.blog-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease-out);
}
.blog-card:hover .blog-card__img img{transform:scale(1.05);}
.blog-card__body{padding:var(--s6);}
.blog-card__meta{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);}
.blog-cat{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--indigo);
  background:rgba(99,102,241,0.1);padding:3px 8px;border-radius:var(--r-full);
}
.blog-read{font-size:0.75rem;color:var(--text-3);}
.blog-card__title{
  font-size:1rem;font-weight:600;color:var(--text-1);
  line-height:1.4;margin-bottom:var(--s2);transition:color var(--t-fast);
}
.blog-card:hover .blog-card__title{color:var(--indigo);}
.blog-card__desc{font-size:0.8125rem;color:var(--text-2);line-height:1.65;}
.filter-bar{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s8);}
.filter-btn{
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;
  text-transform:uppercase;padding:7px 14px;border-radius:var(--r-full);
  border:1px solid var(--border);color:var(--text-2);
  background:transparent;cursor:pointer;transition:all var(--t-fast);
}
.filter-btn:hover,.filter-btn.active{
  color:var(--text-1);border-color:var(--border-hover);
  background:rgba(99,102,241,0.08);
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer{padding:var(--s20) 0 var(--s8);border-top:1px solid var(--border);}
.footer-grid{
  display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--s8);margin-bottom:var(--s16);
}
.footer-brand__logo{
  font-family:var(--font-head);font-size:1.125rem;font-weight:700;
  letter-spacing:-0.02em;color:var(--text-1);margin-bottom:var(--s4);
}
.footer-brand__desc{font-size:0.875rem;color:var(--text-3);line-height:1.65;max-width:240px;}
.footer-col__title{
  font-size:0.75rem;font-weight:600;color:var(--text-1);
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:var(--s5);
}
.footer-col__links{display:flex;flex-direction:column;gap:var(--s3);}
.footer-col__link{
  font-size:0.875rem;color:var(--text-3);transition:color var(--t-fast);
}
.footer-col__link:hover{color:var(--text-1);}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--s8);border-top:1px solid var(--border);
}
.footer-copy{font-size:0.8rem;color:var(--text-4);}
.footer-legal{display:flex;align-items:center;gap:var(--s2);}
.footer-legal__link{font-size:0.8rem;color:var(--text-4);text-decoration:none;transition:color var(--t-fast);}
.footer-legal__link:hover{color:var(--text-1);}
.footer-legal__sep{font-size:0.8rem;color:var(--text-4);}
.footer-social{display:flex;gap:var(--s3);}
.footer-social-link{
  width:32px;height:32px;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--text-3);font-size:0.875rem;transition:all var(--t-fast);
}
.footer-social-link:hover{color:var(--text-1);border-color:var(--border-hover);}

/* ─── CTA BAND ───────────────────────────────────────────────── */
.cta-band{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--s16) var(--s12);
  text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 100%,rgba(99,102,241,0.1) 0%,transparent 70%);
  pointer-events:none;
}
.cta-band>*{position:relative;z-index:1;}
.cta-band__title{
  font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;
  letter-spacing:-0.025em;margin-bottom:var(--s4);
}
.cta-band__sub{
  font-size:1rem;color:var(--text-2);margin-bottom:var(--s8);
  max-width:460px;margin-left:auto;margin-right:auto;
}
.cta-band__btns{display:flex;align-items:center;justify-content:center;gap:var(--s4);}
hr{border:none;height:1px;background:var(--border);margin:var(--s12) 0;}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes slide-up{
  from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}
}
.animate-fade{animation:fade-in 0.8s var(--ease-out) both;}
.animate-up{animation:slide-up 0.8s var(--ease-out) both;}
.animate-up-1{animation-delay:0.1s;}
.animate-up-2{animation-delay:0.2s;}
.animate-up-3{animation-delay:0.3s;}
.animate-up-4{animation-delay:0.4s;}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1024px){
  .systems-grid{grid-template-columns:repeat(2,1fr);}
  .dna-grid{grid-template-columns:repeat(2,1fr);}
  .case-study{grid-template-columns:1fr;min-height:auto;}
  .case-study--flip{direction:ltr;}
  .case-study__visual{min-height:280px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s10);}
  .mission-body{grid-template-columns:1fr;}
  .about-layout{grid-template-columns:1fr;}
  .about-sidebar{position:static;}
  .svc-card__body{grid-template-columns:1fr;}
  .map-body{grid-template-columns:1fr;}
  .map-sidebar{border-right:none;border-bottom:1px solid var(--border);}
  .contact-layout{grid-template-columns:1fr;}
}
@media(max-width:768px){
  :root{--s32:5rem;--s24:4rem;}
  .container{padding:0 var(--s5);}
  .nav__links{display:none;}
  .nav__cta{display:none;}
  .nav__toggle{display:flex;}
  #hero-canvas{display:none;}
  .hero__ctas{flex-direction:column;align-items:stretch;}
  .hero__ctas .btn{justify-content:center;}
  .hero__scroll-hint{display:none;}
  .systems-grid{grid-template-columns:1fr;}
  .dna-grid{grid-template-columns:repeat(2,1fr);}
  .principles-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .pricing-cards{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:var(--s8);}
  .blog-entry{grid-template-columns:90px 1fr;gap:var(--s4);}
  .case-study__stats{grid-template-columns:1fr 1fr;}
  .cta-band__btns{flex-direction:column;align-items:stretch;}
  .cta-band{padding:var(--s10) var(--s8);}
  .waitlist-cta{padding:var(--s16) var(--s5);}
  .waitlist-cta__form{flex-direction:column;}
  .waitlist-cta__btn{width:100%;}
}
@media(max-width:480px){
  .dna-grid{grid-template-columns:1fr;}
  .case-study__stats{grid-template-columns:1fr;}
  .about-stats{grid-template-columns:repeat(3,1fr);}
}

/* ─── BLOG ENTRY THUMBNAIL ───────────────────────────────────── */
.blog-entry__date{
  font-family:var(--font-mono);font-size:0.7rem;
  color:var(--text-3);letter-spacing:0.05em;
  padding-top:var(--s4);
  display:flex;flex-direction:column;gap:var(--s3);
}
.blog-entry__thumb{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--r-sm);border:1px solid var(--border);
  display:block;
}
@media(max-width:768px){
  .blog-entry__thumb{display:none;}
}

/* ─── CONSENT CHECKBOX ───────────────────────────────────────── */
.consent-wrap{
  display:flex;align-items:flex-start;gap:var(--s3);
  cursor:pointer;
}
.consent-check{
  width:16px;height:16px;flex-shrink:0;margin-top:2px;
  cursor:pointer;accent-color:var(--indigo);
}
.consent-text{
  font-size:0.8rem;color:var(--text-2);line-height:1.6;
}
.consent-text a{
  color:var(--indigo);text-decoration:underline;
  text-underline-offset:2px;
}
.consent-text a:hover{color:var(--violet);}

/* ─── BLOG ARTICLE STYLES ────────────────────────────────────── */
.blog-post{padding-top:var(--nav-h);}
.article-header{
  padding:var(--s16) 0 var(--s10);
  position:relative;overflow:hidden;
}
.article-header::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:700px;height:400px;
  background:radial-gradient(ellipse at center,rgba(99,102,241,0.07) 0%,transparent 70%);
  pointer-events:none;
}
.article-container{max-width:740px;margin:0 auto;}
.blog-category{
  display:inline-block;font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--indigo);
  background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);
  padding:5px 11px;border-radius:var(--r-full);margin-bottom:var(--s5);
}
.article-header h1{
  font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;
  letter-spacing:-0.025em;line-height:1.1;margin-bottom:var(--s5);
}
.article-subtitle{
  font-size:1.0625rem;color:var(--text-2);line-height:1.7;margin-bottom:var(--s8);
}
.article-meta{display:flex;align-items:center;gap:var(--s4);}
.author-avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:1px solid var(--border);flex-shrink:0;
}
.meta-text{display:flex;flex-direction:column;gap:2px;}
.author-name{font-size:0.875rem;font-weight:600;color:var(--text-1);}
.meta-details{
  font-size:0.8125rem;color:var(--text-3);
  display:flex;align-items:center;gap:var(--s2);
}
.read-time{color:var(--text-3);}
.article-featured-image{margin:var(--s8) 0;}
.article-featured-image img{
  width:100%;max-height:480px;object-fit:cover;
  border-radius:var(--r-lg);border:1px solid var(--border);
}
.article-content{padding:var(--s12) 0;}
.article-section{margin-bottom:var(--s10);}
.article-section h2{
  font-size:1.625rem;font-weight:700;letter-spacing:-0.02em;line-height:1.15;
  margin-bottom:var(--s5);margin-top:var(--s10);color:var(--text-1);
}
.article-section h2:first-child{margin-top:0;}
.article-section h3{
  font-size:1.2rem;font-weight:600;
  margin-bottom:var(--s4);margin-top:var(--s8);color:var(--text-1);
}
.article-section p{
  font-size:1rem;color:var(--text-2);line-height:1.8;margin-bottom:var(--s5);
}
.article-section p.lead{font-size:1.125rem;color:var(--text-1);line-height:1.75;}
.article-section ul,.article-section ol{
  padding-left:var(--s6);margin-bottom:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
}
.article-section li{font-size:1rem;color:var(--text-2);line-height:1.75;}
.article-section li::marker{color:var(--indigo);}
.article-section strong{color:var(--text-1);font-weight:600;}
pre{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s6);overflow-x:auto;
  margin:var(--s6) 0;font-family:var(--font-mono);font-size:0.8rem;
  line-height:1.7;color:var(--text-2);
}
code{font-family:var(--font-mono);font-size:0.85em;}
:not(pre) > code{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:4px;padding:2px 6px;color:var(--indigo);
}
.callout{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-left:3px solid var(--text-3);border-radius:var(--r-md);
  padding:var(--s5) var(--s6);margin:var(--s6) 0;
  font-size:0.9rem;color:var(--text-2);line-height:1.7;
}
.callout-tip{border-left-color:var(--indigo);background:rgba(99,102,241,0.05);}
.callout strong{color:var(--text-1);}
.article-tags{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin-top:var(--s10);padding-top:var(--s8);border-top:1px solid var(--border);
}
.tag{
  font-family:var(--font-mono);font-size:0.7rem;color:var(--text-3);
  background:var(--bg-elevated);border:1px solid var(--border);
  padding:4px 10px;border-radius:var(--r-full);letter-spacing:0.05em;
  transition:all var(--t-fast);
}
.tag:hover{color:var(--text-1);border-color:var(--border-hover);}
.article-cta{
  background:var(--bg-surface);border-top:1px solid var(--border);
  padding:var(--s16) 0;text-align:center;
}
.article-cta h2{
  font-size:2rem;font-weight:700;letter-spacing:-0.025em;margin-bottom:var(--s4);
}
.article-cta p{
  font-size:1rem;color:var(--text-2);margin-bottom:var(--s8);
  max-width:480px;margin-left:auto;margin-right:auto;line-height:1.7;
}
.cta-button{
  display:inline-flex;align-items:center;font-weight:600;
  border-radius:var(--r-full);transition:all var(--t-normal) var(--ease-out);
  cursor:pointer;letter-spacing:0.01em;
}
.cta-button.primary-large{
  background:var(--grad-primary);color:white;
  padding:14px 32px;font-size:1rem;
  box-shadow:0 0 20px rgba(99,102,241,0.2);
}
.cta-button.primary-large:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(99,102,241,0.45);
}

/* ─── LEGAL PAGES ────────────────────────────────────────────── */
.legal-content{max-width:740px;margin:0 auto;}
.legal-content h2{
  font-size:1.375rem;font-weight:700;letter-spacing:-0.02em;
  margin-top:var(--s12);margin-bottom:var(--s4);color:var(--text-1);
}
.legal-content h3{
  font-size:1.0625rem;font-weight:600;
  margin-top:var(--s8);margin-bottom:var(--s3);color:var(--text-1);
}
.legal-content p{
  font-size:0.9375rem;color:var(--text-2);line-height:1.8;margin-bottom:var(--s5);
}
.legal-content ul{
  padding-left:var(--s6);margin-bottom:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
}
.legal-content li{font-size:0.9375rem;color:var(--text-2);line-height:1.75;}
.legal-content li::marker{color:var(--indigo);}
.legal-content strong{color:var(--text-1);}
.legal-content a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px;}
.legal-content a:hover{color:var(--violet);}
.legal-meta{
  font-family:var(--font-mono);font-size:0.75rem;color:var(--text-3);
  padding:var(--s4) var(--s5);background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:var(--s10);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Orbs hidden in both modes — too atmospheric */
.orb { display:none; }

/* Hide decorative radial backgrounds behind text (no glow behind paragraphs) */
:root .page-header::after { display:none; }
:root .article-header::before { display:none; }
:root .cta-band::before { display:none; }

/* Noise texture — barely visible on white */
:root body::before { opacity:0.012; }

/* Ghost button — white values don't work on light bg */
:root .nav__cta:hover {
  box-shadow: var(--glow-indigo);
}

/* Card hover — swap dark glow for real shadow */
:root .sys-card:hover {
  box-shadow: var(--shadow-xl);
}
:root .sys-card:hover .sys-card__icon {
  box-shadow: 0 2px 12px rgba(99,102,241,0.2);
}
/* Remove tech pill icon glow in all modes */
.tech-pill i { text-shadow: none !important; }
.tech-pill:hover i { text-shadow: none !important; }
:root .flow-box:hover { box-shadow: var(--shadow-md); }
:root .flow-box.flow-box--active { box-shadow: var(--shadow-md); }
:root .blog-entry:hover::before {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

/* ─── MISSION SHELL — ALWAYS DARK ────────────────────────────── */
/* Re-scope dark tokens locally so terminal stays dark in both themes */
.mission-shell {
  --bg-base:     #0a0a0a;
  --bg-surface:  #111111;
  --bg-elevated: #1c1c1c;
  --bg-card:     #141414;
  --border:       rgba(255,255,255,0.11);
  --border-hover: rgba(99,102,241,0.45);
  --text-1: #ffffff;
  --text-2: #d4d4d4;
  --text-3: #707070;
  --text-4: #333333;
}

/* ─── DARK MODE — COLOR GRAMMAR ENFORCEMENT ─────────────────── */
/* Purple = interactive state only. Labels, tags, bullets → neutral. */

/* Section label badges */
[data-theme="dark"] .label {
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .label-dot {
  background: var(--text-3);
}

/* Content-classification tags — not interactive, not purple */
[data-theme="dark"] .sys-card__tag,
[data-theme="dark"] .project-card__type,
[data-theme="dark"] .svc-card__tag {
  color: var(--text-3);
}
[data-theme="dark"] .case-study__type,
[data-theme="dark"] .blog-cat,
[data-theme="dark"] .blog-category {
  color: var(--text-3);
  background: rgba(255,255,255,0.05);
}
 
/* Bullet dots inside cards — neutral markers */
[data-theme="dark"] .sys-card__feature::before {
  background: var(--text-3);
}
[data-theme="dark"] .svc-feature::before {
  background: var(--text-3);
  opacity: 1;
}
[data-theme="dark"] .pricing-feature::before {
  color: var(--text-3);
}
[data-theme="dark"] .audit-checks li::before {
  color: var(--text-3);
}

/* Timeline year labels — structural, not interactive */
[data-theme="dark"] .t-item__year {
  color: var(--text-3);
}

/* Mission form mono prompt */
[data-theme="dark"] .mission-info__prompt {
  color: var(--text-3);
}

/* Blog entry title hover stays purple — that IS an interaction */
/* Nav cta hover, button, focus states all keep --indigo — correct */

/* ─── THEME TOGGLE BUTTON ────────────────────────────────────── */
#theme-toggle {
  position:fixed;bottom:24px;left:24px;z-index:9998;
  width:44px;height:44px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.1rem;line-height:1;
  box-shadow:var(--shadow-md);
  transition:transform var(--t-normal) var(--ease-out),
             border-color var(--t-normal) var(--ease-out),
             box-shadow var(--t-normal) var(--ease-out);
  color:var(--text-2);
}
#theme-toggle:hover {
  border-color:var(--border-hover);
  transform:scale(1.1);
  box-shadow:var(--shadow-lg);
}
#theme-toggle svg {
  width:18px;height:18px;
  stroke:var(--text-2);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--t-normal);
}
#theme-toggle:hover svg { stroke:var(--indigo); }

/* ─── BTN SHINE ──────────────────────────────────────────────── */
.btn-shine{position:relative;overflow:hidden;}
.btn-shine::after{
  content:'';position:absolute;
  top:-50%;left:-75%;
  width:50%;height:200%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,0.12),transparent);
  transform:skewX(-20deg);
  transition:left 0.6s ease;
}
.btn-shine:hover::after{left:125%;}

/* ─── WAITLIST CTA ───────────────────────────────────────────── */
/* Section always renders with a dark palette regardless of page theme */
.waitlist-cta{
  padding:var(--s24) var(--s8);
  position:relative;overflow:hidden;
  /* local dark token override */
  --wl-bg:       #0a0a0f;
  --wl-surface:  #0f0f18;
  --wl-border:   #2e2e3e;
  --wl-text-1:   #ffffff;
  --wl-text-2:   #71717a;
  --wl-text-3:   #52525b;
  --wl-accent:   #a78bfa;
  --wl-accent-btn:#7c3aed;
  --wl-accent-hover:#6d28d9;
  background:var(--wl-bg);
}
.waitlist-cta__orb{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.waitlist-cta__orb-inner{
  width:600px;height:400px;
  background:radial-gradient(ellipse,rgba(124,58,237,0.15) 0%,transparent 70%);
  filter:blur(60px);
}
.waitlist-cta__inner{
  position:relative;z-index:1;
  max-width:640px;margin:0 auto;text-align:center;
}
.waitlist-cta__badge{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:6px 14px;border-radius:var(--r-full);
  border:1px solid rgba(139,92,246,0.3);
  background:rgba(139,92,246,0.1);
  color:var(--wl-accent);
  font-family:var(--font-mono);font-size:0.68rem;
  font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:var(--s6);
}
.waitlist-cta__badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--wl-accent);
  animation:dot-pulse 2.4s ease-in-out infinite;
}
.waitlist-cta__title{
  font-family:var(--font-head);
  font-size:clamp(2rem,4.5vw,3.25rem);
  font-weight:800;color:var(--wl-text-1);
  line-height:1.05;letter-spacing:-0.03em;
  margin-bottom:var(--s4);
}
.waitlist-cta__title-accent{
  background:linear-gradient(135deg,var(--wl-accent) 0%,#8b5cf6 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;display:block;
}
.waitlist-cta__desc{
  color:var(--wl-text-2);font-size:1rem;
  line-height:1.7;max-width:520px;
  margin:0 auto var(--s3);
}
.waitlist-cta__sub{
  color:var(--wl-text-3);font-size:0.875rem;
  max-width:420px;margin:0 auto var(--s8);
}
.waitlist-cta__form{
  display:flex;gap:var(--s3);
  max-width:420px;margin:0 auto;
}
.waitlist-cta__input{
  flex:1;background:var(--wl-surface);
  border:1px solid var(--wl-border);
  border-radius:var(--r-lg);padding:12px 16px;
  color:var(--wl-text-1);font-size:0.875rem;
  font-family:var(--font-body);outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.waitlist-cta__input::placeholder{color:var(--wl-text-3);}
.waitlist-cta__input:focus{
  border-color:#8b5cf6;
  box-shadow:0 0 0 3px rgba(139,92,246,0.15);
}
.waitlist-cta__btn{
  background:var(--wl-accent-btn);color:white;
  font-size:0.875rem;font-weight:700;
  padding:12px 24px;border-radius:var(--r-lg);
  border:none;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast);
  font-family:var(--font-body);
}
.waitlist-cta__btn:hover{background:var(--wl-accent-hover);}
.waitlist-cta__counter{
  margin-top:var(--s4);color:var(--wl-text-3);font-size:0.875rem;
}
.waitlist-cta__success{
  display:none;margin-top:var(--s4);
  color:var(--wl-accent);font-weight:500;
}
.waitlist-cta__error{
  display:none;margin-top:var(--s4);
  color:#f87171;font-size:0.875rem;
}

/* ── CTA pair: two-column layout ────────────────────────────────── */
.waitlist-cta__cards{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1100px;
  margin:0 auto;
  align-items:start;
}
.waitlist-cta__cards>.waitlist-cta__inner:first-child{
  border-right:1px solid var(--wl-border);
  padding-right:var(--s10);
}
.waitlist-cta__audit{
  padding-left:var(--s10);
}
.waitlist-cta__audit-btn{
  display:inline-block;
  text-decoration:none;
  margin-top:var(--s8);
}
@media(max-width:768px){
  .waitlist-cta__cards{grid-template-columns:1fr;}
  .waitlist-cta__cards>.waitlist-cta__inner:first-child{
    border-right:none;border-bottom:1px solid var(--wl-border);
    padding-right:0;padding-bottom:var(--s10);
  }
  .waitlist-cta__audit{padding-left:0;padding-top:var(--s10);}
  .waitlist-cta__audit-btn{display:block;text-align:center;}
}