/* =====================================================
   KRISH SHAH · PORTFOLIO v2
   Premium Dark — Apple / Vercel / Linear inspired
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ─── Design Tokens ─────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:  #07070e;
  --bg2: #0b0b18;
  --bg3: #101020;

  /* Surfaces */
  --surf:  rgba(255,255,255,0.028);
  --surf2: rgba(255,255,255,0.046);
  --surf3: rgba(255,255,255,0.068);

  /* Borders */
  --line:  rgba(255,255,255,0.055);
  --line2: rgba(255,255,255,0.09);
  --line3: rgba(255,255,255,0.14);

  /* Text */
  --t1: #f4f4f6;
  --t2: #a0a0b0;
  --t3: #68687a;

  /* Accent — indigo */
  --a1:      #818cf8;
  --a2:      #6366f1;
  --a3:      #4f46e5;
  --a-dim:   rgba(99,102,241,0.10);
  --a-border:rgba(99,102,241,0.22);
  --a-glow:  rgba(99,102,241,0.20);

  /* Emerald — metrics / positive */
  --em:        #4ade80;
  --em-dim:    rgba(74,222,128,0.08);
  --em-border: rgba(74,222,128,0.22);

  /* Shadows */
  --sh-sm: 0 1px 6px rgba(0,0,0,.55);
  --sh:    0 4px 24px rgba(0,0,0,.55);
  --sh-lg: 0 10px 56px rgba(0,0,0,.60);
  --sh-xl: 0 24px 96px rgba(0,0,0,.70);

  /* Radii */
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full:9999px;

  /* Typography */
  --ff: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --h1: clamp(3.2rem, 7.5vw, 5.8rem);
  --h2: clamp(1.9rem, 3.5vw, 2.75rem);

  /* Motion */
  --ease:    cubic-bezier(0.16,1,0.3,1);
  --ease-in: cubic-bezier(0.55,0,1,0.45);
  --dur:      0.24s;
  --dur-slow: 0.50s;

  /* Layout */
  --max: 1280px;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

/* ─── Reset ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; zoom: 1.1; }
body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--t1);
  line-height: 1.65;
  font-size: 1rem;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  isolation: isolate;
}
body[data-theme="light"] { color-scheme: light; }
body[data-theme="dark"] { color-scheme: dark; }
img { display:block; max-width:100%; }
a { color:var(--a1); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover { color:var(--a2); }
button { font-family:var(--ff); cursor:pointer; border:none; background:none; padding:0; }
:focus-visible { outline:2px solid var(--a2); outline-offset:3px; border-radius:var(--r); }

.container { max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
header,main,footer { position:relative; z-index:3; }
main { margin-top:64px; }

/* ─── Global background ──────────────────────────── */
body::before {
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 10% 5%,  rgba(99,102,241,0.09),transparent 65%),
    radial-gradient(ellipse 700px 500px at 90% 88%, rgba(139,92,246,0.07),transparent 65%),
    radial-gradient(ellipse 1100px 700px at 50% 50%,rgba(20,20,45,0.25), transparent 70%);
}

/* ─── Navigation ─────────────────────────────────── */
header {
  position:fixed; top:0; left:0; width:100%; height:64px;
  background:rgba(7,7,14,0.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  z-index:100;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
header.scrolled {
  background:rgba(7,7,14,0.92);
  border-color:var(--line2);
}
header nav {
  height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.logo {
  font-weight:800; letter-spacing:-0.025em; color:var(--t1); font-size:1.05rem;
  flex-shrink:0;
}
.logo:hover { color:var(--t1); }
.nav-links {
  list-style:none; display:flex; align-items:center; gap:0.2rem; flex:1; justify-content:center;
}
.nav-links a {
  color:rgba(244,244,246,0.70); font-weight:600; font-size:0.875rem;
  padding:0.45rem 0.8rem; border-radius:var(--r);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-links a:hover { color:var(--t1); background:var(--surf2); }
.nav-links a.active {
  color:var(--t1); background:var(--a-dim);
  outline:1px solid var(--a-border);
}
.nav-cta {
  display:inline-flex; align-items:center;
  min-height:36px; padding:0.4rem 1.1rem;
  border-radius:var(--r-full);
  background:var(--a2); color:#fff !important;
  font-weight:700; font-size:0.83rem;
  flex-shrink:0;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav-cta:hover { background:var(--a3); transform:translateY(-1px); box-shadow:0 8px 24px var(--a-glow); color:#fff !important; }
.nav-toggle {
  display:none; width:40px; height:40px;
  border:1px solid var(--line2); background:var(--surf); border-radius:10px;
  align-items:center; justify-content:center; flex-direction:column; gap:4.5px;
}
.nav-toggle span {
  width:16px; height:1.5px; background:var(--t1); border-radius:99px;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  display:block;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ─── Hero ───────────────────────────────────────── */
.hero {
  min-height:calc(100vh - 64px);
  display:flex; align-items:center;
  padding:5rem 0 4.5rem;
  border-bottom:1px solid var(--line);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-glow {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 1100px 520px at 50% -5%, rgba(99,102,241,0.13),transparent 60%),
    radial-gradient(ellipse 600px 500px at 18% 85%,  rgba(139,92,246,0.06),transparent 65%);
}
.hero .container { position:relative; z-index:1; }
.hero-layout {
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(320px, 460px);
  gap:2rem;
  align-items:center;
  margin-bottom:3rem;
}
.hero-copy { text-align:left; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--a1); font-weight:700;
  background:var(--a-dim); border:1px solid var(--a-border);
  padding:0.35rem 1rem; border-radius:var(--r-full);
  margin-bottom:1.85rem;
}
.hero h1 {
  font-size:var(--h1);
  font-weight:800;
  letter-spacing:-0.045em;
  line-height:1.04;
  margin:0 0 1.5rem;
  max-width:11ch;
  background:linear-gradient(180deg, #f4f4f6 0%, rgba(244,244,246,0.65) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub {
  max-width:660px; margin:0 0 1.5rem;
  color:var(--t2); font-size:1.08rem; line-height:1.78; font-weight:500;
}
.hero-signals {
  display:flex; flex-wrap:wrap; gap:0.55rem;
  margin-bottom:2.25rem;
}
.hero-signals span {
  padding:0.45rem 0.9rem;
  border-radius:var(--r-full);
  border:1px solid var(--line2);
  background:rgba(255,255,255,0.035);
  color:var(--t1);
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.hero-actions {
  display:flex; justify-content:flex-start; gap:0.7rem; flex-wrap:wrap;
}
.hero-panel {
  position:relative;
  padding:1.4rem;
  border-radius:var(--r-2xl);
  border:1px solid var(--line2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(99,102,241,0.14), rgba(16,16,32,0.72));
  box-shadow:var(--sh-xl);
  overflow:hidden;
  text-align:left;
}
.hero-panel::before {
  content:"";
  position:absolute; inset:auto -60px -120px auto;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,0.14), transparent 68%);
  pointer-events:none;
}
.hero-panel-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.75), transparent 90%);
  opacity:0.25;
  pointer-events:none;
}
.hero-panel-top,
.hero-command,
.hero-stack-preview,
.hero-proofbar { position:relative; z-index:1; }
.hero-panel-top {
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  margin-bottom:1.25rem;
}
.hero-panel-kicker {
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--t2);
  font-weight:700;
}
.hero-panel-badge {
  padding:0.35rem 0.7rem;
  border-radius:var(--r-full);
  background:var(--em-dim);
  border:1px solid var(--em-border);
  color:var(--em);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.hero-command {
  padding:1rem 1rem 1.05rem;
  border-radius:var(--r-xl);
  background:rgba(7,7,14,0.48);
  border:1px solid rgba(255,255,255,0.09);
  margin-bottom:1rem;
}
.hero-command-label {
  display:block;
  color:var(--a1);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:0.55rem;
}
.hero-command strong {
  display:block;
  font-size:1.12rem;
  line-height:1.45;
  letter-spacing:-0.02em;
}
.hero-stack-preview {
  display:grid;
  gap:0.8rem;
  margin-bottom:1rem;
}
.stack-preview-card {
  padding:1rem;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:rgba(255,255,255,0.035);
}
.stack-preview-title {
  display:block;
  margin-bottom:0.38rem;
  font-size:0.85rem;
  font-weight:800;
  letter-spacing:-0.02em;
}
.stack-preview-card p {
  color:var(--t2);
  font-size:0.82rem;
  line-height:1.65;
}
.hero-proofbar {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0.75rem;
}
.hero-proofbar > div {
  padding:0.9rem 0.95rem;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:rgba(7,7,14,0.46);
}
.hero-proofbar strong {
  display:block;
  font-size:1rem;
  margin-bottom:0.2rem;
  color:var(--t1);
}
.hero-proofbar span {
  color:var(--t3);
  font-size:0.72rem;
  font-weight:600;
}

/* ─── Button system ──────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.4rem;
  min-height:46px; padding:0.72rem 1.5rem;
  border-radius:var(--r-full);
  background:var(--a2); color:#fff;
  font-weight:700; font-size:0.875rem; letter-spacing:-0.01em;
  text-decoration:none;
  box-shadow:0 0 0 1px var(--a3), 0 8px 28px var(--a-glow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-primary:hover {
  background:var(--a3); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--a3), 0 16px 44px var(--a-glow);
}
.btn-secondary {
  display:inline-flex; align-items:center; gap:0.4rem;
  min-height:46px; padding:0.72rem 1.5rem;
  border-radius:var(--r-full);
  background:var(--surf); border:1px solid var(--line2); color:var(--t1);
  font-weight:600; font-size:0.875rem; text-decoration:none;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-secondary:hover {
  transform:translateY(-2px); background:var(--surf2); border-color:var(--line3); color:var(--t1);
}
.btn-ghost {
  display:inline-flex; align-items:center; gap:0.4rem;
  min-height:44px; padding:0.68rem 1.35rem;
  border-radius:var(--r-full);
  background:transparent; border:1px solid var(--line2); color:var(--t2);
  font-weight:600; font-size:0.875rem; text-decoration:none;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-ghost:hover { color:var(--t1); border-color:var(--line3); background:var(--surf); transform:translateY(-1px); }

/* PPT download button */
.btn-ppt {
  display:inline-flex; align-items:center; gap:0.5rem;
  min-height:44px; padding:0.68rem 1.35rem;
  border-radius:var(--r-full);
  background:var(--em-dim); border:1px solid var(--em-border); color:var(--em);
  font-weight:700; font-size:0.875rem; text-decoration:none;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-ppt:hover {
  background:rgba(74,222,128,0.13); color:var(--em);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(74,222,128,0.14);
}

/* Legacy .btn class — map to primary on index, ghost on project pages */
.btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  min-height:46px; padding:0.72rem 1.5rem;
  border-radius:var(--r-full);
  background:var(--a2); color:#fff;
  font-weight:700; font-size:0.875rem; text-decoration:none;
  box-shadow:0 0 0 1px var(--a3), 0 8px 28px var(--a-glow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { background:var(--a3); transform:translateY(-2px); color:#fff; text-decoration:none; }
.btn.ghost {
  background:transparent; border:1px solid var(--line2); color:var(--t2);
  box-shadow:none;
}
.btn.ghost:hover { background:var(--surf); border-color:var(--line3); color:var(--t1); text-decoration:none; }
.btn.magnetic { will-change:transform; }

/* ─── Hero Stats ─────────────────────────────────── */
.hero-stats {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; max-width:900px; margin:0 auto;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.trust-strip {
  padding:1.15rem 0 0;
  margin-top:-2rem;
  position:relative;
  z-index:4;
}
.trust-strip-inner {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:1rem;
  align-items:center;
  padding:1rem 1.1rem;
  border-radius:var(--r-xl);
  border:1px solid var(--line2);
  background:rgba(10,10,20,0.82);
  backdrop-filter:blur(18px);
  box-shadow:var(--sh-lg);
}
.trust-label {
  color:var(--t1);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:800;
}
.trust-marquee {
  display:flex; flex-wrap:wrap; gap:0.6rem;
}
.trust-marquee span {
  padding:0.45rem 0.85rem;
  border-radius:var(--r-full);
  background:var(--surf);
  border:1px solid var(--line);
  color:var(--t2);
  font-size:0.78rem;
  font-weight:600;
}
.stat-item {
  background:var(--surf); padding:1.3rem 1rem; text-align:center;
  transition:background var(--dur) var(--ease);
}
.stat-item:hover { background:var(--surf2); }
.stat-item .number {
  display:block; font-size:1.7rem; font-weight:800; letter-spacing:-0.04em;
  color:var(--a1); line-height:1; margin-bottom:0.35rem;
}
.stat-item .label { color:var(--t3); font-size:0.72rem; font-weight:600; line-height:1.45; }

/* ─── Section commons ────────────────────────────── */
section { padding:6rem 0; }
.section-eyebrow {
  display:block; font-size:0.70rem; letter-spacing:0.20em; text-transform:uppercase;
  color:var(--a1); font-weight:700; margin-bottom:0.7rem; text-align:center;
}
.section-title {
  font-size:var(--h2); font-weight:800; letter-spacing:-0.04em; line-height:1.1;
  text-align:center; margin-bottom:0.75rem;
}
.section-sub {
  text-align:center; max-width:620px; margin:0 auto 3.5rem;
  color:var(--t2); line-height:1.78; font-size:0.975rem;
}

/* ─── Positioning Strip (about teaser) ───────────── */
.position-strip {
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(20,20,45,0.25),transparent);
}
.services-section,
.process-section,
.proof-section {
  border-bottom:1px solid var(--line);
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.service-card {
  position:relative;
  min-height:240px;
  padding:1.4rem;
  border-radius:var(--r-2xl);
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(99,102,241,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  box-shadow:var(--sh);
}
.service-index {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  margin-bottom:1.2rem;
  border-radius:50%;
  border:1px solid var(--a-border);
  background:var(--a-dim);
  color:var(--a1);
  font-size:0.78rem;
  font-weight:800;
}
.service-card h3 {
  font-size:1.22rem;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.2;
  margin-bottom:0.75rem;
}
.service-card p {
  color:var(--t2);
  line-height:1.8;
  font-size:0.93rem;
}
.position-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.position-left p {
  color:var(--t2); font-size:1.05rem; line-height:1.85; margin-bottom:1.5rem;
}
.position-caps {
  display:flex; flex-wrap:wrap; gap:0.4rem;
}
.position-cap {
  font-size:0.72rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--t2); background:var(--surf); border:1px solid var(--line2);
  padding:0.3rem 0.8rem; border-radius:var(--r-full);
}
.position-right {
  display:flex;
  flex-direction:column;
  gap:1.35rem;
}
.about-profile {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.44rem;
  padding:0.64rem;
  border-radius:20px;
  border:1px solid var(--line2);
  background:linear-gradient(180deg, var(--surf2), var(--surf));
  box-shadow:var(--sh);
}
.about-presence-orb {
  width:min(100%, 93px);
}
.about-profile-copy {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.25rem;
  text-align:center;
}
.about-profile-copy strong {
  color:var(--t1);
  font-size:0.9rem;
  font-weight:800;
  letter-spacing:-0.03em;
}
.about-profile-copy span {
  color:var(--t2);
  font-size:0.72rem;
  line-height:1.5;
}
.about-cred-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.cred-card {
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.1rem 1rem;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cred-card:hover { border-color:var(--line3); background:var(--surf2); }
.cred-card-val {
  display:block; font-size:1.35rem; font-weight:800; letter-spacing:-0.03em;
  color:var(--a1); margin-bottom:0.2rem;
}
.cred-card-label { font-size:0.75rem; color:var(--t2); line-height:1.4; font-weight:600; }

/* ─── Projects Section ───────────────────────────── */
.projects-section {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.proj-list { display:flex; flex-direction:column; }
.proj-item { border-bottom:1px solid var(--line); }
.proj-item:last-child { border-bottom:none; }

/* Accordion header row */
.proj-header {
  display:grid;
  grid-template-columns: 3.5rem 1fr auto 2.5rem;
  align-items:center;
  gap:1.5rem;
  width:100%;
  padding:1.75rem 0;
  text-align:left;
  cursor:pointer;
  background:transparent;
  transition:background var(--dur) var(--ease);
}
.proj-header:hover { background:rgba(255,255,255,0.010); }
.proj-item[data-open="true"] > .proj-header { background:rgba(99,102,241,0.025); }

.proj-num {
  font-size:0.72rem; font-weight:700; letter-spacing:0.10em;
  color:var(--t3); flex-shrink:0; user-select:none;
}
.proj-meta { min-width:0; }
.proj-cats { display:flex; flex-wrap:wrap; gap:0.3rem; margin-bottom:0.5rem; }
.proj-cat {
  font-size:0.65rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--a1); background:var(--a-dim); border:1px solid var(--a-border);
  padding:0.15rem 0.55rem; border-radius:var(--r-full);
}
.proj-name {
  font-size:1.3rem; font-weight:800; letter-spacing:-0.03em; line-height:1.2;
  color:var(--t1); margin-bottom:0.22rem;
}
.proj-tagline { color:var(--t2); font-size:0.875rem; line-height:1.55; }

.proj-peek {
  display:flex; flex-direction:column; gap:0.3rem; align-items:flex-end; flex-shrink:0;
}
.proj-peek-metric {
  font-size:0.72rem; font-weight:700;
  color:var(--em); background:var(--em-dim); border:1px solid var(--em-border);
  padding:0.15rem 0.6rem; border-radius:var(--r-full); white-space:nowrap;
}

.proj-toggle {
  width:34px; height:34px; border-radius:var(--r-full);
  border:1px solid var(--line2); background:var(--surf);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--t3); font-size:1.25rem; font-weight:300; line-height:1;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  user-select:none;
}
.proj-item[data-open="true"] .proj-toggle {
  transform:rotate(45deg); background:var(--a-dim); color:var(--a1); border-color:var(--a-border);
}

/* Detail expand — CSS grid trick for smooth height */
.proj-detail {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-slow) var(--ease);
  overflow:hidden;
}
.proj-item[data-open="true"] .proj-detail { grid-template-rows:1fr; }
.proj-detail-inner {
  overflow:hidden; padding-bottom:0;
  transition:padding-bottom var(--dur-slow) var(--ease);
}
.proj-item[data-open="true"] .proj-detail-inner { padding-bottom:2.75rem; }

/* 3-column breakdown */
.proj-breakdown {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; margin-bottom:1.5rem;
}
.proj-breakdown-col {
  background:var(--surf); padding:1.5rem 1.35rem;
}
.proj-breakdown-col h4 {
  font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--t3); font-weight:700; margin-bottom:0.75rem;
}
.proj-breakdown-col p {
  color:var(--t2); font-size:0.875rem; line-height:1.75;
}
.proj-outcomes {
  display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; margin-top:0.1rem;
}
.proj-outcome {
  background:var(--bg3); border:1px solid var(--line); border-radius:var(--r);
  padding:0.6rem 0.5rem; text-align:center;
}
.proj-outcome-num {
  display:block; font-size:1.15rem; font-weight:800; letter-spacing:-0.03em;
  color:var(--em); margin-bottom:0.15rem;
}
.proj-outcome-label { font-size:0.65rem; color:var(--t3); font-weight:600; line-height:1.3; }

/* Architecture */
.proj-arch { margin-bottom:1.25rem; }
.proj-arch h4, .proj-stack h4 {
  font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--t3); font-weight:700; margin-bottom:0.6rem;
}
.arch-pills { display:flex; flex-wrap:wrap; gap:0.4rem; }
.arch-pill {
  font-size:0.78rem; font-weight:600; color:var(--t1);
  background:var(--surf2); border:1px solid var(--line2);
  padding:0.28rem 0.72rem; border-radius:var(--r);
}

/* Tech stack */
.proj-stack { margin-bottom:1.75rem; }
.stack-pills { display:flex; flex-wrap:wrap; gap:0.35rem; }
.stack-pill {
  font-size:0.74rem; font-weight:600; color:var(--a1);
  background:var(--a-dim); border:1px solid var(--a-border);
  padding:0.22rem 0.62rem; border-radius:var(--r-full);
}

/* Project action buttons */
.proj-actions { display:flex; gap:0.7rem; flex-wrap:wrap; }
.process-section {
  background:
    radial-gradient(ellipse 760px 340px at 20% 0%, rgba(99,102,241,0.08), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}
.process-card {
  position:relative;
  padding:1.35rem;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:var(--surf);
  overflow:hidden;
}
.process-card::before {
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg, var(--a1), transparent);
  opacity:0.9;
}
.process-step {
  display:block;
  color:var(--a1);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:0.8rem;
}
.process-card h3 {
  font-size:1rem;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:0.5rem;
}
.process-card p {
  color:var(--t2);
  font-size:0.86rem;
  line-height:1.75;
}

/* ─── Toolbox ─────────────────────────────────────── */
.toolbox-section { border-bottom:1px solid var(--line); }
.logo-row {
  display:flex; flex-wrap:wrap; justify-content:center; gap:0.55rem;
}
.logo-chip {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.55rem 1rem; border-radius:var(--r-full);
  background:var(--surf); border:1px solid var(--line);
  min-height:40px; color:var(--t1); font-weight:700; font-size:0.85rem;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration:none;
}
.logo-chip:hover { background:var(--surf2); border-color:var(--line3); transform:translateY(-2px); color:var(--t1); }
.logo-chip img { width:16px; height:16px; filter:invert(1); opacity:0.82; }
.logo-chip span { color:var(--t1); }
.proof-shell {
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap:1.2rem;
  padding:1.3rem;
  border-radius:var(--r-2xl);
  border:1px solid var(--line2);
  background:
    radial-gradient(circle at top right, rgba(74,222,128,0.08), transparent 24%),
    radial-gradient(circle at bottom left, rgba(99,102,241,0.12), transparent 34%),
    rgba(255,255,255,0.025);
  box-shadow:var(--sh-lg);
}
.proof-copy {
  padding:1.2rem;
}
.proof-text {
  max-width:54ch;
  color:var(--t2);
  font-size:1rem;
  line-height:1.85;
}
.proof-points {
  display:grid;
  gap:0.85rem;
}
.proof-point {
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  padding:1rem 1.05rem;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:rgba(7,7,14,0.42);
}
.proof-point strong {
  font-size:0.96rem;
  letter-spacing:-0.02em;
}
.proof-point span {
  color:var(--t2);
  font-size:0.84rem;
  line-height:1.65;
}

/* ─── Skills Matrix ───────────────────────────────── */
.skills-section { border-bottom:1px solid var(--line); }
.skills-matrix {
  border:1px solid var(--line2); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-lg);
  background:var(--surf);
  position:relative;
}
.skills-matrix::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 700px 350px at 20% 0%, rgba(99,102,241,0.07),transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 80%, rgba(139,92,246,0.05),transparent 62%);
  z-index:0;
}
.skill-row {
  position:relative; z-index:1;
  display:grid; grid-template-columns:260px 1fr;
  border-top:1px solid var(--line);
  transition:background var(--dur) var(--ease);
}
.skill-row:first-child { border-top:none; }
.skill-row:hover { background:rgba(255,255,255,0.015); }
.skill-left {
  padding:1.25rem 1.5rem; border-right:1px solid var(--line);
  background:rgba(0,0,0,0.10);
}
.skill-kicker {
  font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:700; color:var(--t3); margin-bottom:0.28rem;
}
.skill-title {
  font-size:1.05rem; font-weight:800; letter-spacing:-0.02em; color:var(--t1);
}
.skill-desc {
  margin-top:0.65rem;
  color:var(--t2);
  font-size:0.84rem;
  line-height:1.7;
}
.skill-right {
  padding:0.9rem 1.5rem; display:flex; flex-wrap:wrap; gap:0.38rem; align-content:center;
}
.tag {
  padding:0.28rem 0.72rem; border-radius:var(--r-full); font-size:0.80rem;
  font-weight:600; background:var(--surf); border:1px solid var(--line); color:var(--t2);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tag:hover { background:var(--surf2); border-color:var(--line2); color:var(--t1); }
.tag.is-primary { background:var(--a-dim); border-color:var(--a-border); color:var(--t1); }
.tag.is-primary:hover { background:rgba(99,102,241,0.16); border-color:rgba(99,102,241,0.32); }

/* ─── Final CTA Section ───────────────────────────── */
.cta-section {
  text-align:center;
  background:radial-gradient(ellipse 800px 500px at 50% 0%, rgba(99,102,241,0.07),transparent 65%);
}
.cta-section .section-title { max-width:680px; margin-left:auto; margin-right:auto; }
.cta-actions { display:flex; justify-content:center; gap:0.7rem; flex-wrap:wrap; margin-top:2.25rem; }

/* ─── About Page ──────────────────────────────────── */
.about-page { padding-top:80px; }
.about-hero { padding:5rem 0 4rem; border-bottom:1px solid var(--line); }
.about-hero-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:4rem; align-items:center; }
.about-kicker {
  font-size:0.70rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--a1); font-weight:700; margin-bottom:0.85rem;
}
.about-hero h1 {
  font-size:clamp(2.1rem,4.5vw,3.5rem); font-weight:800;
  letter-spacing:-0.04em; line-height:1.1; margin-bottom:1.25rem;
}
.about-intro { color:var(--t2); line-height:1.82; max-width:520px; margin-bottom:2rem; font-size:1rem; }
.about-cta-row { display:flex; gap:0.75rem; flex-wrap:wrap; }

/* Art panel */
.art-box {
  position:relative; height:340px; border-radius:var(--r-2xl);
  background:var(--surf); border:1px solid var(--line);
  overflow:hidden; box-shadow:var(--sh-xl);
}
.art-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,0.06) 1px,transparent 1px);
  background-size:32px 32px;
}
.art-node {
  position:absolute; width:13px; height:13px; border-radius:50%;
  background:var(--a1); box-shadow:0 0 18px var(--a-glow);
}
.art-node::after {
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1px solid var(--a-border); animation:nodePulse 2.6s ease-in-out infinite;
}
@keyframes nodePulse {
  0%,100%{opacity:0.35;transform:scale(1);}
  50%{opacity:0.75;transform:scale(1.6);}
}
.node-1{top:23%;left:18%;} .node-2{top:60%;left:27%;}
.node-3{top:36%;right:21%;} .node-4{bottom:20%;right:33%;}

.about-section { padding:5rem 0; }
.subtle-bg { background:rgba(255,255,255,0.010); }
.narrow { max-width:900px; }
.about-columns { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.25rem; }
.about-block {
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:1.75rem 1.5rem;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.about-block:hover { border-color:var(--line3); background:var(--surf2); }
.about-block h3 { font-size:1.05rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:0.7rem; }
.about-block p { color:var(--t2); line-height:1.8; font-size:0.9rem; }

.steps-modern { display:grid; gap:0.9rem; margin-top:2.25rem; }
.step {
  display:grid; grid-template-columns:3rem 1fr;
  gap:1rem; align-items:start;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:1.35rem 1.5rem;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.step:hover { border-color:var(--a-border); background:var(--a-dim); }
.step-number { font-weight:800; color:var(--a1); font-size:0.95rem; padding-top:0.1rem; font-variant-numeric:tabular-nums; }
.step h4 { font-size:0.975rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:0.3rem; }
.step p { color:var(--t2); font-size:0.875rem; line-height:1.7; margin:0; }

/* ─── Contact Page ────────────────────────────────── */
.page { padding:4rem 0 5rem; }
.page .container { max-width:960px; }
.page-lead { max-width:660px; color:var(--t2); margin:0 0 2rem; font-size:1.02rem; line-height:1.82; }

.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:3.5rem; align-items:start; }

.contact-form { max-width:100%; }
.contact-form label {
  display:block; margin:1.25rem 0 0.38rem;
  font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--t3);
}
.contact-form label:first-of-type { margin-top:0; }
.contact-form input,
.contact-form textarea {
  width:100%; padding:0.75rem 1rem; border-radius:var(--r-lg);
  border:1px solid var(--line2); background:var(--surf);
  color:var(--t1); font-family:var(--ff); font-size:0.95rem;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.contact-form textarea { min-height:155px; resize:vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline:none; border-color:var(--a2); background:var(--surf2);
  box-shadow:0 0 0 3px var(--a-dim);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:var(--t3); }
.contact-form .btn-primary { margin-top:1.25rem; }

.contact-info { padding-top:0.5rem; }
.contact-info h3 { font-size:1.05rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:0.85rem; }
.contact-info p { color:var(--t2); font-size:0.9rem; line-height:1.8; margin-bottom:1.5rem; }
.quick-links { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.5rem; }
.pill-link {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-full);
  padding:0.5rem 1rem; color:var(--t1); font-weight:600; font-size:0.875rem; text-decoration:none;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pill-link:hover { background:var(--surf2); border-color:var(--line2); color:var(--t1); }

/* ─── Project Case Study Pages ────────────────────── */
.proj-hero {
  position:relative; border-radius:var(--r-2xl); overflow:hidden;
  margin-bottom:2.75rem; aspect-ratio:21/7; min-height:220px;
  background:linear-gradient(135deg,rgba(99,102,241,0.10),rgba(139,92,246,0.08));
}
.proj-hero-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(0.62) saturate(0.88);
}
.proj-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(7,7,14,0.88) 0%,transparent 52%);
  display:flex; align-items:flex-end; padding:1.75rem 2rem;
}
.proj-hero-tags { display:flex; flex-wrap:wrap; gap:0.4rem; }
.proj-hero-tags span {
  font-size:0.70rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  background:rgba(7,7,14,0.65); border:1px solid rgba(255,255,255,0.18);
  color:rgba(244,244,246,0.95); padding:0.25rem 0.65rem; border-radius:var(--r-full);
  backdrop-filter:blur(8px);
}

.proj-summary {
  display:flex; flex-wrap:wrap; gap:0; margin-bottom:3rem;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.proj-summary-item {
  flex:1; min-width:130px; padding:1rem 1.25rem;
  border-right:1px solid var(--line); background:var(--surf);
}
.proj-summary-item:last-child { border-right:none; }
.s-label {
  display:block; font-size:0.65rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--t3); font-weight:700; margin-bottom:0.32rem;
}
.s-val { font-size:0.9rem; font-weight:700; color:var(--t1); }

.cs { border-top:1px solid var(--line); padding:2.5rem 0; }
.cs-label {
  display:block; font-size:0.65rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--a1); font-weight:700; margin-bottom:0.6rem;
}
.cs h2 {
  font-size:clamp(1.35rem,3vw,1.9rem); font-weight:800; letter-spacing:-0.03em;
  margin-bottom:1rem; text-align:left;
}
.cs p { color:var(--t2); line-height:1.82; margin-bottom:1rem; max-width:740px; }
.cs p:last-child { margin-bottom:0; }
.cs-list { color:var(--t2); line-height:1.9; padding-left:1.25rem; max-width:680px; margin-top:0.5rem; }
.cs-list li { margin-bottom:0.2rem; }

.arch-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0.9rem; margin-top:1.25rem;
}
.arch-card {
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.2rem; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.arch-card:hover { border-color:var(--line3); background:var(--surf2); }
.arch-card-title { font-size:0.875rem; font-weight:800; letter-spacing:-0.01em; margin-bottom:0.45rem; color:var(--t1); }
.arch-card p { color:var(--t2); font-size:0.80rem; line-height:1.65; margin:0; }

.results-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; margin-top:1.25rem;
}
.res-stat { background:var(--surf); padding:1.5rem 1.25rem; text-align:center; display:flex; flex-direction:column; gap:0.32rem; }
.res-stat .big { font-size:1.65rem; font-weight:800; letter-spacing:-0.04em; color:var(--a1); line-height:1; }
.res-stat .small { font-size:0.72rem; color:var(--t2); line-height:1.4; }

.tech-row { display:flex; flex-wrap:wrap; gap:0.38rem; margin-top:1rem; }
.tech-pill {
  font-size:0.75rem; font-weight:600; color:var(--a1);
  background:var(--a-dim); border:1px solid var(--a-border);
  padding:0.25rem 0.68rem; border-radius:var(--r-full);
}

.cs-page-actions { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--line); }

/* ─── Footer ──────────────────────────────────────── */
footer {
  border-top:1px solid var(--line); padding:2rem 0;
  text-align:center; color:var(--t3); font-size:0.85rem;
}
footer a { color:var(--t2); }
footer a:hover { color:var(--t1); }

/* ─── Scroll Reveal ───────────────────────────────── */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.active { opacity:1; transform:translateY(0); }
.tilt { transform-style:preserve-3d; }
.magnetic { will-change:transform; }

/* ─── FX layers ───────────────────────────────────── */
.has-fx .flow-bg, .has-fx .cursor-glow { pointer-events:none; }
.has-fx .flow-bg { position:fixed; inset:0; z-index:1; }
.has-fx .flow-blob {
  position:absolute; border-radius:50%;
  filter:blur(65px); opacity:0.11;
  animation:blobFloat 20s ease-in-out infinite;
}
.blob-1 { width:520px;height:520px; top:-180px;left:-140px; background:radial-gradient(circle,rgba(99,102,241,0.65),transparent 65%); }
.blob-2 { width:460px;height:460px; bottom:-160px;right:-120px; background:radial-gradient(circle,rgba(139,92,246,0.65),transparent 65%); opacity:0.08; animation-duration:24s; }
.blob-3 { width:380px;height:380px; top:40%;left:58%; background:radial-gradient(circle,rgba(99,102,241,0.45),transparent 65%); opacity:0.07; animation-duration:28s; }
@keyframes blobFloat {
  0%,100%{transform:translate3d(0,0,0)scale(1);}
  35%{transform:translate3d(30px,-20px,0)scale(1.04);}
  70%{transform:translate3d(-22px,16px,0)scale(0.97);}
}
.has-fx .cursor-glow {
  position:fixed; width:360px;height:360px; border-radius:50%; z-index:2;
  opacity:0;
  background:radial-gradient(circle at center,rgba(99,102,241,0.10),transparent 65%);
  transform:translate(-50%,-50%);
  transition:opacity 0.3s ease;
}

/* ─── Responsive ──────────────────────────────────── */
@media (min-width:1200px) and (max-width:1440px) {
  :root { --h1:clamp(3rem,6.5vw,5.2rem); }
}
@media (max-width:1100px) {
  .hero-layout { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .process-grid { grid-template-columns:1fr 1fr; }
  .proof-shell { grid-template-columns:1fr; }
  .proj-header { grid-template-columns:3rem 1fr 2.25rem; }
  .proj-peek { display:none; }
  .arch-grid { grid-template-columns:repeat(2,1fr); }
  .results-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1000px) {
  .trust-strip-inner { grid-template-columns:1fr; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .skill-row { grid-template-columns:1fr; }
  .skill-left { border-right:none; border-bottom:1px solid var(--line); }
  .proj-breakdown { grid-template-columns:1fr; }
  .position-grid { grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width:900px) {
  .about-hero-grid { grid-template-columns:1fr; }
  .about-columns { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --pad:1.15rem; }
  header nav {
    position:relative;
    gap:0.75rem;
  }
  .nav-toggle { display:inline-flex; }
  .nav-links, .nav-cta-wrapper {
    position:absolute;
    top:calc(100% + 0.75rem);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0.35rem;
    padding:0.7rem;
    border-radius:20px;
    background:var(--bg3);
    border:1px solid var(--line2);
    box-shadow:var(--sh-xl);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .nav-links.open { display:flex; }
  .nav-links li { width:100%; list-style:none; }
  .nav-links a {
    display:flex;
    align-items:center;
    width:100%;
    min-height:48px;
    padding:0.85rem 0.95rem;
    border-radius:14px;
    background:var(--surf);
    border:1px solid var(--line);
  }
  .hero { min-height:auto; padding:3.5rem 0 3rem; text-align:left; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  section { padding:4rem 0; }
  .services-grid,
  .process-grid { grid-template-columns:1fr; }
  .hero-proofbar { grid-template-columns:1fr; }
  .proj-header { grid-template-columns:2.5rem 1fr 2.25rem; gap:1rem; padding:1.5rem 0; }
  .proj-name { font-size:1.1rem; }
  .arch-grid { grid-template-columns:1fr; }
  .results-row { grid-template-columns:repeat(2,1fr); }
  .proj-summary { flex-direction:column; }
  .proj-summary-item { border-right:none; border-bottom:1px solid var(--line); }
  .proj-summary-item:last-child { border-bottom:none; }
  .proj-breakdown { grid-template-columns:1fr; border-radius:var(--r-lg); }
  .position-right { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  :root { --h1:clamp(2.4rem,9vw,3.5rem); }
  .hero-layout { gap:1.25rem; margin-bottom:2rem; }
  .hero-command strong { font-size:1rem; }
  .hero-signals span { width:100%; text-align:center; }
  .trust-marquee span { width:100%; text-align:center; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .btn-primary,.btn-secondary,.btn-ghost,.btn,.btn-ppt { width:100%; justify-content:center; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-eyebrow { font-size:0.66rem; letter-spacing:0.14em; }
  .cta-actions { flex-direction:column; align-items:center; }
  .proj-outcomes { grid-template-columns:1fr 1fr; }
}

/* =====================================================
   HOMEPAGE 2026 REFRESH
   ===================================================== */

body[data-theme="light"] {
  /* Warm cream backgrounds — Claude-inspired */
  --bg:   #FAF9F6;
  --bg2:  #F2EFE8;
  --bg3:  #FFFFFF;
  --surf:  #FFFFFF;
  --surf2: #FAF7F1;
  --surf3: rgba(250,247,240,0.98);
  /* Warm borders */
  --line:  rgba(30,18,6,0.08);
  --line2: rgba(30,18,6,0.13);
  --line3: rgba(30,18,6,0.21);
  /* Warm text */
  --t1: #1C1410;
  --t2: #57534A;
  --t3: #A8A296;
  /* Orange/amber accent — Claude palette */
  --a1: #D97706;
  --a2: #B45309;
  --a3: #92400E;
  --a-dim:    rgba(217,119,6,0.08);
  --a-border: rgba(217,119,6,0.22);
  --a-glow:   rgba(217,119,6,0.20);
  /* Emerald for availability badge */
  --em: #16A34A;
  --em-dim:    rgba(22,163,74,0.08);
  --em-border: rgba(22,163,74,0.22);
  /* Layered warm shadows */
  --sh-sm: 0 1px 4px rgba(20,12,4,0.06), 0 4px 12px rgba(20,12,4,0.04);
  --sh:    0 4px 20px rgba(20,12,4,0.08), 0 1px 5px rgba(20,12,4,0.04);
  --sh-lg: 0 12px 40px rgba(20,12,4,0.10), 0 4px 14px rgba(20,12,4,0.05);
  --sh-xl: 0 24px 64px rgba(20,12,4,0.12), 0 8px 24px rgba(20,12,4,0.06);
}

body[data-theme="light"]::before {
  background:
    radial-gradient(ellipse 800px 560px  at  8%  4%,  rgba(217,119,6,0.10),  transparent 60%),
    radial-gradient(ellipse 560px 420px  at 92% 12%,  rgba(99,102,241,0.06), transparent 60%),
    radial-gradient(ellipse 640px 480px  at 88% 86%,  rgba(234,179,8,0.08),  transparent 60%),
    radial-gradient(ellipse 480px 380px  at 14% 82%,  rgba(139,92,246,0.05), transparent 60%),
    radial-gradient(ellipse 400px 300px  at 52% 44%,  rgba(217,119,6,0.04),  transparent 55%),
    radial-gradient(ellipse 1400px 900px at 50% 50%,  rgba(254,243,199,0.30),transparent 72%);
}

/* Subtle dot grid overlay for light mode */
body[data-theme="light"]::after {
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(180,130,40,0.13) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
}

body[data-theme="light"] header {
  background:rgba(250,248,243,0.80);
  border-color:var(--line);
}

body[data-theme="light"] header.scrolled {
  background:rgba(250,248,243,0.96);
}

body[data-theme="light"] .nav-links a {
  color:rgba(18,32,60,0.72);
}

body[data-theme="light"] .nav-links a:hover {
  color:var(--t1);
}

/* ─── Light mode: background FX ─────────────────── */
body[data-theme="light"] .flow-blob         { opacity:0.09; }
body[data-theme="light"] .blob-2            { opacity:0.07; }
body[data-theme="light"] .blob-3            { opacity:0.06; }

/* ─── Light mode: hero section ───────────────────── */
body[data-theme="light"] .home-hero::before {
  background:
    radial-gradient(circle at 16% 18%, rgba(217,119,6,0.06), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(234,179,8,0.04), transparent 24%);
}

/* ─── Light mode: position strip ─────────────────── */
body[data-theme="light"] .position-strip {
  background:linear-gradient(180deg, rgba(217,119,6,0.03), transparent);
}

/* ─── Light mode: metric cards ───────────────────── */
body[data-theme="light"] .metric-card {
  background:#ffffff;
  box-shadow:var(--sh-sm);
}

/* ─── Light mode: work cards ─────────────────────── */
body[data-theme="light"] .work-card {
  background:#ffffff;
  box-shadow:var(--sh);
}
body[data-theme="light"] .work-thumb img {
  filter:brightness(1) saturate(1.04);
}

/* ─── Light mode: cred cards ─────────────────────── */
body[data-theme="light"] .cred-card {
  background:#ffffff;
  box-shadow:var(--sh-sm);
}

/* ─── Light mode: about profile card ────────────── */
body[data-theme="light"] .about-profile {
  background:#ffffff;
  box-shadow:var(--sh);
}

/* ─── Light mode: hero avatar ring ──────────────── */
body[data-theme="light"] .hero-avatar {
  box-shadow:
    0 0 0 6px rgba(217,119,6,0.08),
    0 14px 32px rgba(0,0,0,0.12);
  border-color:var(--line2);
}
body[data-theme="light"] .hero-presence-ring {
  border-color:rgba(217,119,6,0.22);
}

/* ─── Light mode: skills matrix ──────────────────── */
body[data-theme="light"] .skills-matrix {
  background:#ffffff;
  box-shadow:var(--sh-lg);
}
body[data-theme="light"] .skill-left {
  background:rgba(217,119,6,0.03);
}
body[data-theme="light"] .skill-row:hover {
  background:rgba(217,119,6,0.04);
}

/* ─── Light mode: tags ───────────────────────────── */
body[data-theme="light"] .tag.is-primary:hover {
  background:rgba(217,119,6,0.14);
  border-color:rgba(217,119,6,0.30);
}

/* ─── Light mode: toolbox ───────────────────────── */
body[data-theme="light"] .home-toolbox {
  background:linear-gradient(180deg, rgba(217,119,6,0.03), transparent 65%);
}
body[data-theme="light"] .logo-chip {
  background:#ffffff;
  box-shadow:var(--sh-sm);
}

/* ─── Light mode: contact CTA shell ─────────────── */
body[data-theme="light"] .contact-cta-shell {
  background:
    radial-gradient(circle at top right, rgba(234,179,8,0.08), transparent 24%),
    radial-gradient(circle at bottom left, rgba(217,119,6,0.07), transparent 28%),
    #ffffff;
  box-shadow:var(--sh-lg);
}

/* ─── Light mode: about page blocks & steps ─────── */
body[data-theme="light"] .about-block {
  background:#ffffff;
  box-shadow:var(--sh-sm);
}
body[data-theme="light"] .step {
  background:#ffffff;
  box-shadow:var(--sh-sm);
}
body[data-theme="light"] .subtle-bg {
  background:rgba(217,119,6,0.025);
}
body[data-theme="light"] .art-box {
  background:#ffffff;
  box-shadow:var(--sh-xl);
}
body[data-theme="light"] .art-grid {
  background-image:
    linear-gradient(rgba(217,119,6,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,119,6,0.12) 1px, transparent 1px);
}

/* ─── Light mode: project accordion ─────────────── */
body[data-theme="light"] .proj-header:hover {
  background:rgba(217,119,6,0.04);
}
body[data-theme="light"] .proj-item[data-open="true"] > .proj-header {
  background:rgba(217,119,6,0.06);
}

/* ─── Light mode: project case study pages ───────── */
body[data-theme="light"] .proj-hero-overlay {
  background:linear-gradient(to top, rgba(10,20,50,0.68) 0%, transparent 50%);
}
body[data-theme="light"] .proj-summary-item {
  background:#ffffff;
}
body[data-theme="light"] .proj-breakdown-col {
  background:#ffffff;
}
body[data-theme="light"] .proj-outcome {
  background:#f4f7fc;
}

/* ─── Light mode: theme toggle ───────────────────── */
body[data-theme="light"] .theme-toggle-track {
  background:linear-gradient(90deg, rgba(217,119,6,0.75), rgba(234,179,8,0.65));
}

/* ─── Light mode: footer ─────────────────────────── */
body[data-theme="light"] footer {
  background:var(--bg2);
  border-top:1px solid var(--line);
}

/* ─── Light mode: section ambient separators ─────── */
body[data-theme="light"] section {
  position: relative;
}
body[data-theme="light"] .home-hero {
  background: linear-gradient(180deg, rgba(254,243,199,0.18) 0%, transparent 100%);
}
body[data-theme="light"] .home-work {
  background: linear-gradient(180deg, transparent 0%, rgba(217,119,6,0.03) 50%, transparent 100%);
}
body[data-theme="light"] .home-about {
  background: linear-gradient(180deg, transparent 0%, rgba(99,102,241,0.03) 50%, transparent 100%);
}
body[data-theme="light"] .home-toolbox {
  background: linear-gradient(180deg, rgba(217,119,6,0.03) 0%, transparent 65%);
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-shrink:0;
  min-width:0;
}

.theme-toggle {
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  min-height:38px;
  padding:0.32rem 0.55rem 0.32rem 0.4rem;
  border-radius:var(--r-full);
  border:1px solid var(--line2);
  background:var(--surf);
  color:var(--t1);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.theme-toggle:hover {
  background:var(--surf2);
  border-color:var(--line3);
  transform:translateY(-1px);
}

.theme-toggle-track {
  position:relative;
  width:2.55rem;
  height:1.45rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(99,102,241,0.7), rgba(56,189,248,0.7));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

.theme-toggle-thumb {
  position:absolute;
  top:2px;
  left:2px;
  width:1.05rem;
  height:1.05rem;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.24);
  transition:transform var(--dur) var(--ease);
}

.theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
  transform:translateX(1.1rem);
}

.theme-toggle-label {
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--t2);
}

/* ─── Language toggle ────────────────────────────── */
.lang-toggle {
  display:inline-flex;
  align-items:center;
  gap:0.18rem;
  min-height:38px;
  padding:0.28rem 0.55rem;
  border-radius:var(--r-full);
  border:1px solid var(--line2);
  background:var(--surf);
  color:var(--t2);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
  flex-shrink:0;
}
.lang-toggle:hover {
  background:var(--surf2);
  border-color:var(--line3);
  transform:translateY(-1px);
}
.lang-opt {
  transition:color var(--dur) var(--ease);
  color:var(--t3);
}
.lang-opt.is-active {
  color:var(--a1);
}
.lang-sep {
  opacity:0.35;
  font-weight:400;
}

.home-page .section-eyebrow.home-left,
.home-page .section-title.home-left {
  text-align:left;
}

.home-hero {
  position:relative;
  overflow:hidden;
  padding:6rem 0 4rem;
  border-bottom:1px solid var(--line);
}

.home-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 18%, rgba(37,99,235,0.12), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(56,189,248,0.08), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%);
  pointer-events:none;
}

.home-hero-layout {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:1.5rem;
  align-items:center;
}

.home-hero-copy {
  text-align:left;
  max-width:860px;
  min-width:0;
}

.home-kicker {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  margin-bottom:1rem;
  padding:0.4rem 0.95rem;
  border-radius:var(--r-full);
  border:1px solid var(--a-border);
  background:var(--a-dim);
  color:var(--a1);
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.home-hero-copy h1 {
  margin:0 0 1rem;
  max-width:12ch;
  font-size:clamp(3.1rem, 7vw, 5.8rem);
  line-height:0.98;
  letter-spacing:-0.06em;
}

.home-tagline {
  margin-bottom:1rem;
  color:var(--t1);
  font-size:1.28rem;
  font-weight:700;
  letter-spacing:-0.03em;
}

.home-intro {
  max-width:62ch;
  margin-bottom:2rem;
  color:var(--t2);
  font-size:1.03rem;
  line-height:1.85;
  text-wrap:pretty;
}

.home-hero-actions {
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}

.home-metrics {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0.9rem;
  max-width:860px;
}

.metric-card {
  padding:1rem 1rem 1.05rem;
  border-radius:var(--r-xl);
  border:1px solid var(--line2);
  background:var(--surf);
  box-shadow:var(--sh-sm);
  min-width:0;
}

.metric-card .number {
  display:block;
  margin-bottom:0.32rem;
  color:var(--a1);
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:1;
}

.metric-card .label {
  color:var(--t3);
  font-size:0.76rem;
  font-weight:700;
  line-height:1.45;
}

.hero-presence {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:520px;
}

.hero-presence-orb {
  position:relative;
  width:min(36vw, 360px);
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
}

.hero-presence-ring {
  position:absolute;
  inset:50% auto auto 50%;
  border-radius:50%;
  transform:translate(-50%, -50%);
  border:1px solid rgba(99,102,241,0.18);
  pointer-events:none;
}

.ring-one { width:100%; height:100%; }
.ring-two { width:84%; height:84%; }
.ring-three { width:68%; height:68%; }

.hero-avatar {
  position:relative;
  z-index:2;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--line2);
  background:
    radial-gradient(circle at 30% 30%, rgba(56,189,248,0.18), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)),
    var(--bg3);
  box-shadow:
    0 0 0 14px rgba(99,102,241,0.08),
    0 22px 50px rgba(0,0,0,0.28);
}

.hero-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
}

.hero-avatar-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--t1);
  font-size:clamp(2rem, 4vw, 3.1rem);
  font-weight:800;
  letter-spacing:-0.06em;
  opacity:0;
}

.hero-avatar.is-fallback .hero-avatar-fallback {
  opacity:1;
}

.hero-presence-card {
  position:absolute;
  right:-0.5rem;
  bottom:1rem;
  z-index:3;
  width:min(100%, 300px);
  padding:0.95rem 1rem;
  border-radius:22px;
  border:1px solid var(--line2);
  background:rgba(10,12,26,0.78);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:var(--sh-lg);
}

body[data-theme="light"] .hero-presence-card {
  background:rgba(255,255,255,0.82);
}

.presence-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.65rem;
  margin-bottom:0.75rem;
}

.presence-pill {
  display:inline-flex;
  align-items:center;
  padding:0.28rem 0.58rem;
  border-radius:var(--r-full);
  background:var(--a-dim);
  border:1px solid var(--a-border);
  color:var(--a1);
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.presence-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--em);
  box-shadow:0 0 0 5px rgba(74,222,128,0.12);
}

.presence-copy {
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  margin-bottom:0.8rem;
}

.presence-copy strong {
  color:var(--t1);
  font-size:1rem;
  font-weight:800;
  letter-spacing:-0.03em;
}

.presence-copy span {
  color:var(--t2);
  font-size:0.84rem;
  line-height:1.5;
}

.presence-tags {
  display:flex;
  flex-wrap:wrap;
  gap:0.42rem;
}

.presence-tags span {
  display:inline-flex;
  align-items:center;
  padding:0.3rem 0.6rem;
  border-radius:var(--r-full);
  border:1px solid var(--line2);
  background:var(--surf);
  color:var(--t2);
  font-size:0.72rem;
  font-weight:700;
}

.about-band,
.work-section,
.capability-section,
.home-toolbox,
.contact-cta {
  border-bottom:1px solid var(--line);
}

.about-band-grid {
  display:block;
}

.about-copy {
  max-width:62ch;
  color:var(--t2);
  font-size:1rem;
  line-height:1.9;
  margin-bottom:1rem;
  text-wrap:pretty;
}

.about-inline-points {
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
}

.about-inline-points span {
  display:inline-flex;
  align-items:center;
  padding:0.42rem 0.78rem;
  border-radius:var(--r-full);
  border:1px solid var(--line2);
  background:var(--surf);
  color:var(--t2);
  font-size:0.78rem;
  font-weight:700;
}

.project-card-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.2rem;
}

.work-card {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line2);
  background:linear-gradient(180deg, var(--surf2), var(--surf));
  box-shadow:var(--sh);
  min-width:0;
}

.work-thumb {
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
}

.work-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.74) saturate(1.05);
  transition:transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}


.work-card:hover .work-thumb img {
  transform:scale(1.03);
}

.work-thumb::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(7,10,24,0.78), transparent 55%);
}

body[data-theme="light"] .work-thumb::after {
  background:linear-gradient(to top, rgba(15,23,42,0.46), transparent 56%);
}

.work-thumb-label {
  position:absolute;
  left:1rem;
  bottom:1rem;
  z-index:1;
  padding:0.38rem 0.75rem;
  border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(7,10,24,0.52);
  color:#fff;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.work-content {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:1rem;
  padding:1.25rem;
  min-width:0;
}

.work-head h3 {
  margin-bottom:0.45rem;
  font-size:1.16rem;
  font-weight:800;
  letter-spacing:-0.03em;
}

.work-head p {
  color:var(--t2);
  font-size:0.92rem;
  line-height:1.75;
  text-wrap:pretty;
}

.work-badges {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

.work-badges span {
  display:inline-flex;
  align-items:center;
  padding:0.35rem 0.7rem;
  border-radius:var(--r-full);
  border:1px solid var(--a-border);
  background:var(--a-dim);
  color:var(--a1);
  font-size:0.74rem;
  font-weight:700;
}

.capability-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
  margin-top:2.5rem;
}

.capability-card {
  padding:1.3rem;
  border-radius:22px;
  border:1px solid var(--line2);
  background:linear-gradient(180deg, var(--surf2), var(--surf));
  box-shadow:var(--sh-sm);
  min-width:0;
}

.cap-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  margin-bottom:1rem;
  border-radius:18px;
  border:1px solid var(--a-border);
  background:linear-gradient(135deg, var(--a-dim), rgba(103,232,249,0.08));
  color:var(--a1);
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.capability-card h3 {
  margin-bottom:0.45rem;
  font-size:1rem;
  font-weight:800;
  letter-spacing:-0.02em;
}

.capability-card p {
  color:var(--t2);
  font-size:0.88rem;
  line-height:1.72;
  text-wrap:pretty;
}

.home-toolbox {
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent 60%);
}

.contact-cta-shell {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 0.82fr);
  gap:1.6rem;
  align-items:center;
  padding:1.5rem;
  border-radius:30px;
  border:1px solid var(--line2);
  background:
    radial-gradient(circle at top right, rgba(56,189,248,0.10), transparent 24%),
    radial-gradient(circle at bottom left, rgba(217,119,6,0.14), transparent 30%),
    linear-gradient(180deg, var(--surf2), var(--surf));
  box-shadow:var(--sh-lg);
}

.contact-cta-text {
  max-width:52ch;
  color:var(--t2);
  font-size:1rem;
  line-height:1.85;
  text-wrap:pretty;
}

.contact-cta-actions {
  display:flex;
  flex-direction:column;
  gap:0.85rem;
  align-items:flex-start;
}

body[data-theme="light"] .logo-chip img {
  filter:none;
  opacity:0.72;
}

@media (max-width:1100px) {
  .contact-cta-shell {
    grid-template-columns:1fr;
  }

  .home-metrics {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .project-card-grid {
    grid-template-columns:1fr;
  }

  .capability-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:768px) {
  .logo {
    font-size:0.98rem;
  }

  .nav-actions {
    margin-left:auto;
    gap:0.4rem;
  }

  .nav-cta {
    display:none;
  }

  .theme-toggle {
    min-width:auto;
    padding:0.32rem 0.42rem;
  }

  .theme-toggle-label {
    display:none;
  }

  .home-hero {
    padding:4.25rem 0 3rem;
  }

  .home-kicker {
    line-height:1.5;
  }

  .home-hero-copy h1 {
    max-width:none;
    font-size:clamp(2.6rem, 10vw, 4.2rem);
  }

  .home-intro,
  .about-copy,
  .contact-cta-text {
    font-size:0.96rem;
    line-height:1.8;
  }

  .home-hero-actions,
  .contact-cta-actions {
    align-items:stretch;
  }

  .home-hero-actions .btn-primary,
  .home-hero-actions .btn-secondary,
  .contact-cta-actions .btn-primary,
  .contact-cta-actions .btn-ghost,
  .work-content .btn-secondary {
    width:100%;
    justify-content:center;
  }

  .section-sub {
    margin-bottom:2.4rem;
  }

  .project-card-grid,
  .capability-grid,
  .logo-row,
  .about-inline-points {
    gap:0.8rem;
  }

  .position-grid {
    gap:2rem;
  }

  .about-profile {
    gap:0.4rem;
    padding:0.58rem;
    border-radius:18px;
  }

  .about-presence-orb {
    width:min(42vw, 83px);
  }

  .work-thumb-label {
    left:0.75rem;
    bottom:0.75rem;
    font-size:0.67rem;
    letter-spacing:0.08em;
  }

  .capability-grid,
  .home-metrics {
    grid-template-columns:1fr;
  }

  .about-cred-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:480px) {
  header nav {
    gap:0.6rem;
  }

  .nav-links, .nav-cta-wrapper {
    top:calc(100% + 0.6rem);
    padding:0.6rem;
    border-radius:18px;
  }

  .home-kicker {
    font-size:0.62rem;
    letter-spacing:0.1em;
  }

  .theme-toggle {
    padding:0.28rem 0.38rem;
  }

  .lang-toggle {
    padding:0.28rem 0.38rem;
  }

  .theme-toggle-track {
    width:2.3rem;
  }

  .theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
    transform:translateX(0.86rem);
  }

  .home-tagline {
    font-size:1.08rem;
  }

  .metric-card {
    padding:1rem 0.9rem;
  }

  .home-hero {
    padding:3.75rem 0 2.75rem;
  }

  .hero-avatar {
    width:100%;
  }

  .about-presence-orb {
    width:min(37vw, 74px);
  }

  .about-profile {
    gap:0.36rem;
    padding:0.5rem;
    border-radius:16px;
  }

  .about-profile-copy strong {
    font-size:0.84rem;
  }

  .about-profile-copy span {
    font-size:0.68rem;
  }

  .home-hero-copy h1 {
    font-size:clamp(2.3rem, 11vw, 3.2rem);
    line-height:1;
  }

  .home-metrics {
    gap:0.7rem;
  }

  .metric-card .number {
    font-size:1.45rem;
  }

  .metric-card .label {
    font-size:0.72rem;
  }

  .section-title {
    line-height:1.08;
  }

  .about-inline-points span,
  .work-badges span {
    width:100%;
    justify-content:flex-start;
  }

  .work-content,
  .capability-card,
  .contact-cta-shell {
    padding:1rem;
  }

  .contact-cta-shell {
    gap:1rem;
    border-radius:22px;
  }

  .logo-chip {
    width:100%;
    justify-content:center;
  }
}

/* ─── Theme-reactive logo switching ──────────────── */
.logo-for-light { display: none !important; }
body[data-theme="light"] .logo-for-dark  { display: none !important; }
body[data-theme="light"] .logo-for-light { display: block !important; }
body[data-theme="light"] .avara-logo-img { mix-blend-mode: normal; }

/* Work-thumb card backgrounds — dark default, light override */
.thumb-phonx { background: linear-gradient(135deg,#0b0d18 0%,#111427 55%,#1b1040 100%); }
.thumb-vkg   { background: linear-gradient(135deg,#0d1e2e 0%,#102436 55%,#0e2040 100%); }
.thumb-sat   { background: linear-gradient(135deg,#0d1520 0%,#101d2e 55%,#0d1a30 100%); }
.thumb-avara { background: linear-gradient(135deg,#060b18 0%,#0b1626 55%,#0c1c34 100%); }

body[data-theme="light"] .thumb-phonx { background: linear-gradient(135deg,#f0f2ff 0%,#e8ecff 55%,#ede8ff 100%); }
body[data-theme="light"] .thumb-vkg   { background: linear-gradient(135deg,#e8f2fb 0%,#ddeaf8 55%,#d8e8f8 100%); }
body[data-theme="light"] .thumb-sat   { background: linear-gradient(135deg,#e8f2fb 0%,#ddeaf8 55%,#d8e4f8 100%); }
body[data-theme="light"] .thumb-avara { background: linear-gradient(135deg,#f0f2ff 0%,#e8ecff 55%,#ede8ff 100%); }

/* Project hero backgrounds — dark default, light override */
.hero-phonx { background: linear-gradient(155deg, rgba(99,102,241,0.05) 0%, rgba(7,7,14,0.6) 100%); }
.hero-vkg   { background: linear-gradient(135deg,#0d1e2e 0%,#102436 55%,#0e2040 100%); }
.hero-sat   { background: linear-gradient(135deg,#0d1520 0%,#101d2e 55%,#0d1a30 100%); }

body[data-theme="light"] .hero-vkg  { background: linear-gradient(135deg,#e8f2fb 0%,#ddeaf8 55%,#d8e8f8 100%); }
body[data-theme="light"] .hero-sat  { background: linear-gradient(135deg,#e8f2fb 0%,#ddeaf8 55%,#d8e4f8 100%); }

/* ─── Key Insight Callout ─────────────────────────── */
.cs-callout {
  margin: 1.75rem 0;
  padding: 1.15rem 1.4rem 1.15rem 1.65rem;
  background: var(--a-dim);
  border: 1px solid var(--a-border);
  border-left: 3px solid var(--a1);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.cs-callout-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--a1);
  display: block;
  margin-bottom: 0.55rem;
}
.cs-callout p {
  color: var(--t1);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
  margin: 0;
  max-width: none;
}