/* ---------------------------------------------
   Tokens — light theme (default)
--------------------------------------------- */
:root{
  --ink: #243044;
  --ink-soft: #657083;
  --line: #DDE3EA;
  --line-soft: #EDF0F3;
  --paper: #FBFCFA;
  --paper-alt: #F1F4F2;
  --blue: #1769E0;
  --blue-dark: #0E4EA9;
  --blue-tint: #E8F0FF;
  --signal: #F26B4A;
  --signal-tint: #FFF0EB;

  --heading: #10233D;
  --surface-strong: #10233D;
  --on-surface-strong: #FFFFFF;
  --footer-bg: #0B1428;
  --footer-text-soft: #9AA4C0;
  --footer-line: rgba(255,255,255,0.1);
  --header-bg: rgba(251,252,250,0.86);

  /* diagram-specific tokens */
  --diagram-module-fill: #F9FAFB;
  --diagram-module-stroke: #D0D5DD;
  --diagram-module-text: #475467;
  --diagram-line: #D0D5DD;
  --diagram-core-fill: #152048;
  --diagram-core-text: #FFFFFF;
  --diagram-core-sub: #93A2E8;
  --diagram-accent-line: #2F6FED;
  --diagram-tenant-fill: #EEF3FF;
  --diagram-tenant-stroke: #2F6FED;
  --diagram-tenant-text: #152048;
  --diagram-caption: #667085;
  --diagram-window-bg: #F8F9FB;

  --font-display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 0 0 1px rgba(16,24,40,0.015);
  --shadow-md: 0 8px 24px rgba(16,24,40,0.07), 0 2px 5px rgba(16,24,40,0.04);
  --shadow-lg: 0 20px 48px rgba(16,24,40,0.12), 0 4px 10px rgba(16,24,40,0.05);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --grid: 1200px;
  --content-gutter: 32px;

  color-scheme: light;
}

/* ---------------------------------------------
   Tokens — dark theme
--------------------------------------------- */
[data-theme="dark"]{
  --ink: #E4E8F2;
  --ink-soft: #97A1BE;
  --line: #253052;
  --line-soft: #1A2440;
  --paper: #0A0F1E;
  --paper-alt: #101A30;
  --blue: #79A9FF;
  --blue-dark: #A9C7FF;
  --blue-tint: rgba(108,155,255,0.14);
  --signal: #FF9279;
  --signal-tint: rgba(242,107,74,0.14);

  --heading: #F3F5FB;
  --surface-strong: #2F6FED;
  --on-surface-strong: #FFFFFF;
  --footer-bg: #05070E;
  --footer-text-soft: #8792B8;
  --footer-line: rgba(255,255,255,0.08);
  --header-bg: rgba(10,15,30,0.78);

  --diagram-module-fill: #16213D;
  --diagram-module-stroke: #2B3860;
  --diagram-module-text: #AEB8D9;
  --diagram-line: #2B3860;
  --diagram-core-fill: #2F6FED;
  --diagram-core-text: #FFFFFF;
  --diagram-core-sub: #DCE6FF;
  --diagram-accent-line: #6C9BFF;
  --diagram-tenant-fill: #14203C;
  --diagram-tenant-stroke: #6C9BFF;
  --diagram-tenant-text: #DCE6FF;
  --diagram-caption: #8A93B4;
  --diagram-window-bg: #101A30;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 36px rgba(0,0,0,0.45);

  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-image:linear-gradient(rgba(23,105,224,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,105,224,0.035) 1px, transparent 1px);
  background-size:48px 48px;
  transition:background-color .25s ease, color .25s ease;
}
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset:4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .hero-copy > *, .hero-visual, .module-group, .core-group, .tenant-group, .caption-group{
    opacity:1 !important; transform:none !important;
  }
  #l1,#l2,#l3,#l4,#l5,#t1,#t2,#t3,#t4,#t5{ stroke-dashoffset:0 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------------------------------------------
   Motion: hero entrance (single orchestrated sequence)
--------------------------------------------- */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeScaleIn{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

.hero-copy > *{
  opacity:0;
  animation:fadeUp .65s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-copy > *:nth-child(1){ animation-delay:.05s; }
.hero-copy > *:nth-child(2){ animation-delay:.15s; }
.hero-copy > *:nth-child(3){ animation-delay:.28s; }
.hero-copy > *:nth-child(4){ animation-delay:.4s; }
.hero-copy > *:nth-child(5){ animation-delay:.5s; }

.hero-visual{ opacity:0; animation:fadeScaleIn .6s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:.32s; }

.module-group{ opacity:0; animation:fadeUp .5s ease forwards; animation-delay:.55s; }
.core-group{ opacity:0; animation:fadeUp .5s ease forwards; animation-delay:.95s; }
.tenant-group{ opacity:0; animation:fadeUp .5s ease forwards; animation-delay:1.5s; }
.caption-group{ opacity:0; animation:fadeUp .5s ease forwards; animation-delay:1.7s; }

#l1,#l2,#l3,#l4,#l5,#t1,#t2,#t3,#t4,#t5{
  stroke-dasharray:260; stroke-dashoffset:260;
  animation:drawLine .55s ease forwards;
}
#l1{ animation-delay:.6s; }  #l2{ animation-delay:.67s; }
#l3{ animation-delay:.74s; } #l4{ animation-delay:.81s; }
#l5{ animation-delay:.88s; }
#t1{ animation-delay:1.15s; } #t2{ animation-delay:1.22s; }
#t3{ animation-delay:1.29s; } #t4{ animation-delay:1.36s; }
#t5{ animation-delay:1.43s; }

/* ---------------------------------------------
   Motion: scroll-triggered reveals (progressive enhancement)
--------------------------------------------- */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.in-view{ opacity:1; transform:translateY(0); }

.job.reveal:nth-of-type(1){ transition-delay:0s; }
.job.reveal:nth-of-type(2){ transition-delay:.1s; }

.proj-card.reveal:nth-child(1){ transition-delay:0s; }
.proj-card.reveal:nth-child(2){ transition-delay:.07s; }
.proj-card.reveal:nth-child(3){ transition-delay:.14s; }
.proj-card.reveal:nth-child(4){ transition-delay:.21s; }
.proj-card.reveal:nth-child(5){ transition-delay:.28s; }
.proj-card.reveal:nth-child(6){ transition-delay:.35s; }

.skill-group.reveal:nth-child(1){ transition-delay:0s; }
.skill-group.reveal:nth-child(2){ transition-delay:.06s; }
.skill-group.reveal:nth-child(3){ transition-delay:.12s; }
.skill-group.reveal:nth-child(4){ transition-delay:.18s; }
.skill-group.reveal:nth-child(5){ transition-delay:.24s; }
.skill-group.reveal:nth-child(6){ transition-delay:.3s; }
.skill-group.reveal:nth-child(7){ transition-delay:.36s; }

/* Active nav link while scrolling */
nav.primary a{ position:relative; }
nav.primary a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
nav.primary a.active{ color:var(--heading); }
nav.primary a.active::after{ transform:scaleX(1); }
nav.primary a.nav-cta::after{ display:none; }

.wrap{ max-width:var(--grid); margin:0 auto; padding:0 var(--content-gutter); }

/* ---------------------------------------------
   Header
--------------------------------------------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(16,24,40,0.02);
}
.headbar{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  min-height:76px;
  padding:16px var(--content-gutter);
}
.brand{
  font-family:var(--font-display); font-weight:700; font-size:18px;
  letter-spacing:-0.02em; text-decoration:none; color:var(--heading);
  display:inline-flex; align-items:center; gap:10px;
}
.brand::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 5px var(--signal-tint); }
nav.primary{ display:flex; gap:36px; align-items:center; }
nav.primary a{
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-soft);
  transition:color .15s ease;
}
nav.primary a:hover{ color:var(--heading); }
.nav-cta{
  background:var(--surface-strong); color:var(--on-surface-strong) !important; padding:10px 20px;
  border-radius:8px; font-weight:600 !important;
}
.nav-cta:hover{ background:var(--blue) !important; }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:36px; height:36px; padding:0; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--heading); transition:transform .2s ease, opacity .2s ease, background-color .25s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:820px){
  nav.primary{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 32px 24px;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    visibility:hidden; opacity:0; pointer-events:none;
  }
  nav.primary.open{ visibility:visible; opacity:1; pointer-events:auto; }
  nav.primary a{ padding:14px 0; border-bottom:1px solid var(--line-soft); }
  .nav-cta{ margin-top:14px; text-align:center; border-bottom:none !important; }
  .nav-toggle{ display:flex; }
}

/* ---------------------------------------------
   Theme toggle
--------------------------------------------- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink); cursor:pointer; margin-left:20px;
  transition:border-color .2s ease, background-color .25s ease, color .25s ease, transform .15s ease;
  flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

@media (max-width:820px){
  .theme-toggle{ margin-left:0; }
}
.btn{
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:13px 22px; border-radius:8px; text-decoration:none;
  display:inline-block; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  border:1px solid transparent;
}
.btn-primary{ background:var(--surface-strong); color:var(--on-surface-strong); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--blue); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-ghost{ background:rgba(255,255,255,0.58); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.btn-with-icon{ display:inline-flex; align-items:center; gap:8px; }
.btn-icon{ width:16px; height:16px; flex:0 0 16px; }
[data-theme="dark"] .hero-actions .btn-primary{
  background:#4B86F1; color:#fff; border-color:#6A9CFF;
  box-shadow:0 8px 20px rgba(75,134,241,.25), inset 0 1px 0 rgba(255,255,255,.16);
}
[data-theme="dark"] .hero-actions .btn-primary:hover{
  background:#6A9CFF; color:#071326; border-color:#A9C7FF;
  box-shadow:0 12px 28px rgba(75,134,241,.34);
}
[data-theme="dark"] .hero-actions .btn-ghost{
  background:rgba(255,255,255,.045); color:var(--heading);
  border-color:rgba(169,199,255,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .hero-actions .btn-ghost:hover{
  background:rgba(121,169,255,.14); color:#CFE0FF; border-color:var(--blue);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* ---------------------------------------------
   Hero
--------------------------------------------- */
.hero{ padding:112px 0 76px; position:relative; isolation:isolate; }
.hero::before{ content:""; position:absolute; z-index:-1; inset:0 0 auto; height:520px; background:radial-gradient(circle at 82% 30%, rgba(23,105,224,0.12), transparent 34%), radial-gradient(circle at 8% 12%, rgba(242,107,74,0.09), transparent 28%); pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:48px; } }
@media (max-width:600px){
  .hero{ padding:78px 0 56px; }
  .hero h1{ max-width:13ch; }
  .hero::before{ height:440px; }
  .diagram-card{ transform:none; }
  .stats-row{ margin-top:52px; }
}

.eyebrow{
  font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--blue);
  margin:0 0 18px; letter-spacing:0.04em; text-transform:uppercase;
}
.hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,4.6vw,50px); line-height:1.12; margin:0 0 20px;
  letter-spacing:-0.035em; color:var(--heading); max-width:11ch;
}
.hero .lede{
  max-width:50ch; color:var(--ink-soft); font-size:16.5px; line-height:1.7;
  margin:0 0 34px;
}
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.location{ font-size:14px; color:var(--ink-soft); margin:0; }

.hero-visual{ display:flex; justify-content:center; }
.diagram-card{
  width:100%; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg); transform:none;
  transition:transform .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
.diagram-card:hover{ transform:rotate(0) translateY(-5px); box-shadow:0 24px 56px rgba(16,24,40,0.15); }
.diagram-card-head{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--line); background:var(--diagram-window-bg);
}
.dot{ width:9px; height:9px; border-radius:50%; }
.dot-red{ background:#F97066; } .dot-yellow{ background:#FDB022; } .dot-green{ background:#32D583; }
.diagram-title{ margin-left:8px; font-size:12.5px; color:var(--ink-soft); font-weight:500; }
.diagram-card svg{ padding:20px; width:100%; height:auto; }

/* SVG diagram — theme-aware colors (override inline presentation attributes) */
.module-group text{ fill:var(--diagram-module-text); }
.module-group rect{ fill:var(--diagram-module-fill); stroke:var(--diagram-module-stroke); }
.flow-start rect,
.flow-output rect{ fill:var(--diagram-tenant-fill); stroke:var(--diagram-tenant-stroke); }
.flow-start text,
.flow-output text{ fill:var(--diagram-tenant-text); }
.flow-heading{ fill:var(--diagram-caption); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; }
.flow-output{ letter-spacing:.04em; }
#l1,#l2,#l3,#l4,#l5{ stroke:var(--diagram-line); }
.core-group rect{ fill:var(--diagram-core-fill); }
.core-group text:nth-of-type(1){ fill:var(--diagram-core-text); }
.core-group text:nth-of-type(2){ fill:var(--diagram-core-sub); }
#t1,#t2,#t3,#t4,#t5{ stroke:var(--diagram-accent-line); }
.tenant-group rect{ fill:var(--diagram-tenant-fill); stroke:var(--diagram-tenant-stroke); }
.tenant-group text{ fill:var(--diagram-tenant-text); }
.tenant-group .tenant-heading{ fill:var(--diagram-caption); font-size:9px; letter-spacing:.08em; }
.caption-group text{ fill:var(--diagram-caption); }

/* ---------------------------------------------
   Stats row
--------------------------------------------- */
.stats-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; margin-top:72px; box-shadow:var(--shadow-md);
}
.stat{ background:color-mix(in srgb, var(--paper) 88%, var(--blue-tint)); padding:28px 24px; position:relative; }
.stat::before{ content:""; position:absolute; top:0; left:24px; right:24px; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.stat:hover::before{ transform:scaleX(1); }
.stat-num{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:30px; color:var(--heading); margin-bottom:6px;
}
.stat-label{ font-size:13px; color:var(--ink-soft); line-height:1.4; display:block; }
@media (max-width:700px){
  .stats-row{ grid-template-columns:1fr 1fr; }
}

/* ---------------------------------------------
   Sections
--------------------------------------------- */
.section{ padding:112px 0; }
.section-alt{ background:var(--paper-alt); }
.section-eyebrow{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--blue);
  margin:0 0 12px; text-transform:none;
}
.section-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.2vw,34px);
  margin:0 0 52px; color:var(--heading); letter-spacing:-0.025em;
}

/* ---------------------------------------------
   Experience timeline
--------------------------------------------- */
.timeline{ position:relative; padding-left:32px; }
.timeline::before{
  content:""; position:absolute; left:5px; top:10px; bottom:10px; width:2px;
  background:var(--line);
}
.job{ position:relative; margin-bottom:40px; }
.job:last-child{ margin-bottom:0; }
.job-dot{
  position:absolute; left:-32px; top:28px; width:12px; height:12px;
  border-radius:50%; background:var(--paper); border:3px solid var(--blue);
}
.job-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:34px; box-shadow:var(--shadow-sm); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.job-card:hover{ border-color:color-mix(in srgb, var(--blue) 45%, var(--line)); box-shadow:var(--shadow-md); transform:translateX(4px); }
.job-head{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.job-title{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0 0 4px; color:var(--heading); }
.job-company{ font-size:14px; color:var(--blue); margin:0; font-weight:500; }
.job-date{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft);
  background:var(--paper-alt); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; height:fit-content; white-space:nowrap;
}
.job ul{ margin:0 0 20px; }
.job li{
  position:relative; padding-left:20px; margin-bottom:11px;
  color:var(--ink); font-size:14.5px; line-height:1.65;
}
.job li::before{
  content:""; position:absolute; left:0; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--blue);
}
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-family:var(--font-mono); font-size:12px; border:1px solid var(--line);
  border-radius:6px; padding:5px 10px; color:var(--ink-soft); background:var(--paper-alt);
}

/* ---------------------------------------------
   Projects
--------------------------------------------- */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:980px){ .proj-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .proj-grid{ grid-template-columns:1fr; } }

.proj-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:30px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column;
}
.proj-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--blue) 45%, var(--line)); }
.proj-top{ margin-bottom:10px; }
.proj-domain{
  font-family:var(--font-mono); font-size:11.5px; color:var(--blue);
  background:var(--blue-tint); border-radius:5px; padding:5px 10px;
}
.proj-card h3{
  font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 10px;
  color:var(--heading); letter-spacing:-0.02em;
}
.proj-card p{ font-size:13.8px; color:var(--ink-soft); line-height:1.65; margin:0 0 18px; flex-grow:1; }
.proj-card .tag-row{ margin-bottom:18px; }
.proj-links{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.proj-links .muted{ color:var(--ink-soft); font-style:italic; font-weight:400; font-size:12.5px; }

.store-badge{
  display:inline-flex; line-height:0; border-radius:7px; overflow:hidden;
  transition:opacity .18s ease, transform .18s ease;
}
.store-badge::before,
.store-badge::after{ content:none; display:none; }
.store-badge:hover{ opacity:.86; transform:translateY(-2px); }
.store-badge:active{ transform:translateY(0); }
.store-badge img{ display:block; width:105px; height:40px; object-fit:contain; }
.store-badge--sm img{ width:84px; height:32px; }

/* Featured project card — Innov8 ERP, spans full width to list all tenant flavors */
.proj-card--featured{ grid-column:1 / -1; padding:32px; }
.proj-featured-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:40px; }
@media (max-width:820px){ .proj-featured-grid{ grid-template-columns:1fr; gap:28px; } }
.proj-featured-copy p{ margin:0 0 18px; }
.proj-featured-copy .tag-row{ margin-bottom:0; }

.tenant-links{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper-alt); padding:16px 20px;
}
.tenant-links-label{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);
  margin:0 0 12px; text-transform:none;
}
.tenant-link-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 14px;
  padding:10px 0; border-top:1px solid var(--line);
}
.tenant-link-row:first-of-type{ border-top:none; padding-top:0; }
.tenant-name{ font-size:13.5px; font-weight:600; color:var(--heading); }
.tenant-link-actions{ display:flex; gap:14px; font-size:12.5px; font-weight:600; }
.tenant-link-actions a{ text-decoration:none; color:var(--blue); white-space:nowrap; }
.tenant-link-actions a:hover{ color:var(--blue-dark); }
@media (max-width:480px){
  .tenant-link-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .tenant-links{ padding:14px 16px; }
  .store-badge--sm img{ width:73px; height:28px; }
}
@media (max-width:600px){
  .proj-card--featured{ padding:22px; }
}

/* ---------------------------------------------
   Skills
--------------------------------------------- */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 40px; }
@media (max-width:860px){ .skills-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .skills-grid{ grid-template-columns:1fr; } }
.skill-group h4{
  font-family:var(--font-display); font-size:14.5px; font-weight:600; margin:0 0 14px;
  color:var(--heading); letter-spacing:-0.01em;
}
.skill-group .tag{ background:var(--paper); }

/* ---------------------------------------------
   Footer
--------------------------------------------- */
footer{ background:var(--footer-bg); color:#fff; padding-top:96px; transition:background-color .25s ease; position:relative; overflow:hidden; }
footer::before{ content:"/ flutter / architecture / delivery"; position:absolute; top:28px; right:32px; color:rgba(255,255,255,0.16); font:500 11px var(--font-mono); letter-spacing:.08em; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; padding-bottom:56px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:600px){
  footer{ padding-top:76px; }
  footer::before{ position:static; display:block; padding:0 var(--content-gutter); margin-bottom:28px; }
  .footer-bottom{ align-items:flex-start; flex-direction:column; gap:10px; }
}
.footer-main h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,30px);
  margin:0 0 16px; letter-spacing:-0.01em; max-width:20ch;
}
.footer-main p{ color:var(--footer-text-soft); max-width:46ch; margin:0 0 28px; font-size:14.5px; line-height:1.7; }
.footer-meta{ display:flex; flex-direction:column; gap:20px; justify-content:center; }
.footer-row{ font-size:14px; }
.footer-row .k{ display:block; color:var(--footer-text-soft); font-size:12px; margin-bottom:4px; font-family:var(--font-mono); }
.footer-row a{ text-decoration:none; color:#fff; }
.footer-row a:hover{ color:var(--blue); }
.footer-bottom{
  display:flex; justify-content:space-between; padding:22px var(--content-gutter);
  border-top:1px solid var(--footer-line); font-size:13px; color:var(--footer-text-soft);
}
.footer-bottom a{
  position:fixed; right:24px; bottom:24px; z-index:40;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-strong); color:var(--on-surface-strong);
  box-shadow:var(--shadow-md); text-decoration:none;
  transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.footer-bottom a svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.footer-bottom a:hover{ background:var(--blue); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.back-to-top{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px); }
.back-to-top.is-visible{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); animation:backToTopIn .35s cubic-bezier(.22,.61,.36,1) both, backToTopFloat 2.8s ease-in-out .35s infinite; }
.back-to-top.is-visible:hover{ transform:translateY(-3px); }
@keyframes backToTopIn{ from{ opacity:0; transform:translateY(14px) scale(.8); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes backToTopFloat{ 0%,100%{ box-shadow:var(--shadow-md); } 50%{ box-shadow:0 12px 28px rgba(23,105,224,.28); } }
@media (max-width:600px){
  .footer-bottom a{ right:16px; bottom:16px; width:42px; height:42px; }
}

/* ---------------------------------------------
   Portfolio refinement — technical editorial system
--------------------------------------------- */
:root{
  --paper: #f7f8f5;
  --paper-alt: #edf1ef;
  --ink: #293548;
  --ink-soft: #68758a;
  --heading: #0b1f38;
  --line: #d8e0e4;
  --line-soft: #e8edef;
  --blue: #1464d2;
  --blue-dark: #0b468f;
  --blue-tint: #e2edff;
  --signal: #ef6848;
  --signal-tint: #ffede7;
  --surface-strong: #0b1f38;
  --header-bg: rgba(247,248,245,.84);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(11,31,56,.05), 0 0 0 1px rgba(11,31,56,.02);
  --shadow-md: 0 12px 32px rgba(11,31,56,.08), 0 2px 6px rgba(11,31,56,.04);
  --shadow-lg: 0 24px 60px rgba(11,31,56,.13), 0 5px 12px rgba(11,31,56,.05);
}

[data-theme="dark"]{
  --paper: #0b1220;
  --paper-alt: #111c2d;
  --ink: #e7edf7;
  --ink-soft: #9ba9bf;
  --heading: #f4f7fc;
  --line: #263750;
  --line-soft: #1b2a40;
  --blue: #72a9ff;
  --blue-dark: #b2d0ff;
  --blue-tint: rgba(114,169,255,.14);
  --signal: #ff9275;
  --signal-tint: rgba(255,146,117,.13);
  --surface-strong: #e9f1ff;
  --on-surface-strong: #071426;
  --header-bg: rgba(11,18,32,.82);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow-md: 0 12px 32px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.38);
}

body{
  background-image:
    linear-gradient(rgba(20,100,210,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,100,210,.045) 1px, transparent 1px),
    radial-gradient(circle at 78% 4%, rgba(20,100,210,.09), transparent 24rem);
  background-size: 48px 48px, 48px 48px, auto;
}

.wrap{ max-width:1240px; }
header{ border-bottom-color:var(--line-soft); }
.headbar{ min-height:82px; }
.brand{ letter-spacing:-.04em; }
.brand::before{ width:8px; height:8px; box-shadow:0 0 0 4px var(--signal-tint); }
nav.primary{ gap:30px; }
nav.primary a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; text-transform:uppercase; }
.nav-cta{ padding:10px 16px; font-family:var(--font-body) !important; text-transform:none !important; letter-spacing:0 !important; }

.hero{ padding:132px 0 86px; }
.hero::before{ height:620px; background:radial-gradient(circle at 78% 26%, rgba(20,100,210,.16), transparent 31%), radial-gradient(circle at 10% 20%, rgba(239,104,72,.1), transparent 25%); }
.hero-grid{ gap:76px; }
.eyebrow,.section-eyebrow{ display:flex; align-items:center; gap:10px; letter-spacing:.08em; font-size:11px; }
.eyebrow::before,.section-eyebrow::before{ content:""; width:28px; height:1px; background:var(--signal); }
.hero h1{ max-width:12ch; font-size:clamp(42px,5.3vw,68px); line-height:1.04; letter-spacing:-.065em; }
.hero .lede{ max-width:54ch; font-size:16px; }
.hero-actions{ margin-top:30px; }
.btn{ border-radius:6px; padding:13px 18px; }
.btn-primary{ box-shadow:0 8px 18px rgba(11,31,56,.16); }
.btn-ghost{ background:rgba(255,255,255,.5); }
.location{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; text-transform:uppercase; }
.location:first-letter{ color:var(--signal); }

.diagram-card{ border-radius:10px; box-shadow:24px 24px 0 color-mix(in srgb, var(--blue-tint) 70%, transparent), var(--shadow-lg); }
.diagram-card-head{ padding:13px 16px; }
.diagram-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; }
.stats-row{ margin-top:82px; border-radius:10px; box-shadow:var(--shadow-md); }
.stat{ padding:24px 22px; }
.stat-num{ font-size:28px; letter-spacing:-.05em; }
.stat-label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.02em; }

.section{ padding:128px 0; }
.section-alt{ background-color:var(--paper-alt); background-image:linear-gradient(rgba(20,100,210,.035) 1px, transparent 1px); background-size:48px 48px; }
.section-title{ font-size:clamp(30px,3.5vw,42px); letter-spacing:-.055em; margin-bottom:58px; }
.timeline{ padding-left:28px; }
.timeline::before{ left:3px; background:linear-gradient(var(--blue), var(--line)); }
.job-dot{ left:-31px; top:30px; width:10px; height:10px; border-width:2px; box-shadow:0 0 0 5px var(--paper-alt); }
.job-card{ border-radius:10px; padding:34px 36px; }
.job-card:hover{ transform:translateX(6px); }
.job-title{ letter-spacing:-.04em; }
.job-company,.job-date,.proj-domain,.tenant-links-label,.tag{ font-family:var(--font-mono); }
.job-company{ font-size:12px; letter-spacing:.01em; }
.job-date{ border-radius:5px; font-size:11px; text-transform:uppercase; }
.job li{ font-size:14px; }
.tag{ border-radius:4px; padding:5px 9px; font-size:10.5px; letter-spacing:.01em; }

.proj-grid{ grid-template-columns:repeat(12,1fr); gap:18px; }
.proj-card{ grid-column:span 4; min-height:100%; border-radius:10px; padding:26px; }
.proj-card--featured{ grid-column:1 / -1; padding:36px; background:linear-gradient(135deg, var(--paper) 0%, color-mix(in srgb, var(--blue-tint) 35%, var(--paper)) 100%); border-color:color-mix(in srgb, var(--blue) 28%, var(--line)); }
.proj-card:not(.proj-card--featured):hover{ transform:translateY(-5px); }
.proj-card:nth-child(3n+2){ grid-column:span 4; }
.proj-card:nth-child(3n+3){ grid-column:span 4; }
.proj-top{ margin-bottom:18px; }
.proj-domain{ display:inline-block; border:1px solid color-mix(in srgb, var(--blue) 24%, transparent); border-radius:4px; padding:5px 8px; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.proj-card h3{ font-size:20px; letter-spacing:-.045em; }
.proj-card p{ font-size:13.5px; }
.proj-links{ margin-top:auto; }
.tenant-links{ border-radius:8px; padding:18px 20px; background:color-mix(in srgb, var(--paper) 72%, var(--blue-tint)); }
.tenant-links-label{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.tenant-link-row{ padding:11px 0; }
.tenant-name{ font-family:var(--font-display); font-size:13px; }
.tenant-link-actions{ gap:10px; }

.skills-grid{ gap:26px 44px; }
.skill-group{ padding-top:18px; border-top:1px solid var(--line); }
.skill-group h4{ font-size:14px; letter-spacing:-.02em; }
.skill-group .tag{ background:var(--paper); }

footer{ padding-top:112px; }
footer::before{ opacity:.7; }
.footer-main h2{ font-size:clamp(28px,3.5vw,42px); letter-spacing:-.05em; }
.footer-row .k{ text-transform:uppercase; letter-spacing:.05em; }
.footer-row a{ transition:color .15s ease; }

@media (max-width:980px){
  .hero{ padding-top:104px; }
  .proj-card,.proj-card:nth-child(3n+2),.proj-card:nth-child(3n+3){ grid-column:span 6; }
  .proj-card--featured{ grid-column:1 / -1; }
}
@media (max-width:820px){
  .hero-grid{ gap:54px; }
  .proj-grid{ grid-template-columns:1fr; }
  .proj-card,.proj-card:nth-child(3n+2),.proj-card:nth-child(3n+3){ grid-column:1; }
  .proj-card--featured{ grid-column:1; }
  nav.primary a{ font-size:12px; }
}
@media (max-width:600px){
  .hero{ padding:82px 0 60px; }
  .hero h1{ font-size:clamp(40px,12vw,58px); }
  .hero-actions{ gap:9px; }
  .stats-row{ margin-top:58px; }
  .stat{ padding:20px 16px; }
  .section{ padding:88px 0; }
  .section-title{ margin-bottom:40px; }
  .job-card{ padding:26px 22px; }
  .proj-card--featured{ padding:24px; }
  .diagram-card{ box-shadow:12px 14px 0 color-mix(in srgb, var(--blue-tint) 70%, transparent), var(--shadow-lg); }
}

.eyebrow{ flex-wrap:wrap; }
.eyebrow-pulse{
  width:7px; height:7px; border-radius:50%; background:#35c98b;
  box-shadow:0 0 0 4px rgba(53,201,139,.14);
  animation:statusPulse 2.2s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.62; transform:scale(.8); }
}
.hero-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px;
  margin:0 0 16px; color:var(--ink-soft);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em;
  text-transform:uppercase;
}
.availability{ display:inline-flex; align-items:center; gap:7px; color:var(--heading); }
.availability-dot{ width:6px; height:6px; border-radius:50%; background:#35c98b; }
.hero-stack{ color:var(--blue); }
.location{ margin-top:8px; }
.location svg{ width:15px; height:15px; fill:none; stroke:var(--signal); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:600px){
  .hero-meta{ align-items:flex-start; flex-direction:column; gap:8px; }
}