/* ================================================================
 * Jester Studio Works — Site Stylesheet
 * Design system: Atrium (JSE Business Track v1.1)
 * Brand: Royal purple #6A2A91 · Brass accent #B89653 · Vellum surfaces
 * Fonts: Fraunces (display) · Geist (body) · Geist Mono (data)
 * ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600;700&display=swap');

/* ── Atrium Tokens ──────────────────────────────────────────── */
:root {
  --jse-brand:           #6A2A91;
  --jse-brand-deep:      #3B1758;
  --jse-brand-soft:      #9D6FBE;
  --jse-brand-press:     #4A1D6D;
  --jse-brand-tint-12:   rgba(106,42,145,0.12);
  --jse-brand-tint-08:   rgba(106,42,145,0.08);
  --jse-brand-tint-04:   rgba(106,42,145,0.04);

  --jse-surface-page:    #F7F4EE;
  --jse-surface-raised:  #FFFFFF;
  --jse-surface-card:    #EDE8DE;
  --jse-surface-subtle:  #E4DFD2;
  --jse-surface-deep:    #1E1A2C;
  --jse-surface-deeper:  #15121F;

  --jse-line:            #D8D2C5;
  --jse-line-strong:     #B8B0A0;
  --jse-line-brand:      rgba(106,42,145,0.18);

  --jse-text:            #1E1A2C;
  --jse-text-muted:      #5C5566;
  --jse-text-faint:      #8A8395;
  --jse-text-on-brand:   #FAF7F0;
  --jse-text-on-accent:  #1E1A2C;

  --jse-accent:          #B89653;
  --jse-accent-deep:     #8E7138;
  --jse-accent-soft:     rgba(184,150,83,0.14);

  --jse-font-display:    'Fraunces', 'Source Serif Pro', Georgia, serif;
  --jse-font-sans:       'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --jse-font-mono:       'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;

  --jse-text-xs:         12px;
  --jse-text-sm:         14px;
  --jse-text-base:       16px;
  --jse-text-lg:         18px;
  --jse-text-xl:         20px;
  --jse-text-2xl:        24px;
  --jse-text-3xl:        32px;
  --jse-text-4xl:        48px;

  --jse-leading-tight:   1.15;
  --jse-leading-snug:    1.35;
  --jse-leading-base:    1.55;

  --jse-tracking-tight:  -0.02em;
  --jse-tracking-caps:   0.12em;

  --jse-space-1:  4px;  --jse-space-2:  8px;  --jse-space-3: 12px;
  --jse-space-4: 16px;  --jse-space-5: 20px;  --jse-space-6: 24px;
  --jse-space-8: 32px;  --jse-space-10:40px;  --jse-space-12:48px;
  --jse-space-16:64px;  --jse-space-20:80px;  --jse-space-24:96px;

  --jse-radius-sm:  4px;  --jse-radius-md: 8px;
  --jse-radius-lg: 12px;  --jse-radius-xl: 20px;
  --jse-radius-full: 9999px;

  --jse-shadow-sm:    0 1px 2px rgba(30,26,44,0.06);
  --jse-shadow-md:    0 6px 18px rgba(30,26,44,0.08), 0 1px 2px rgba(30,26,44,0.04);
  --jse-shadow-lg:    0 16px 40px rgba(30,26,44,0.14), 0 2px 6px rgba(30,26,44,0.06);
  --jse-shadow-brand: 0 8px 24px rgba(106,42,145,0.20);

  --jse-gradient-page:  linear-gradient(180deg,#FFFFFF 0%,#F7F4EE 100%);
  --jse-gradient-hero:  linear-gradient(135deg,#3B1758 0%,#6A2A91 55%,#9D6FBE 100%);
  --jse-gradient-deep:  linear-gradient(160deg,#15121F 0%,#2B1340 60%,#3B1758 100%);
  --jse-gradient-accent:linear-gradient(135deg,#B89653 0%,#D4B16C 100%);
  --jse-gradient-brand-edge:linear-gradient(90deg,transparent,rgba(106,42,145,0.35),transparent);
  --jse-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.10 0 0 0 0 0.17 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  --jse-ease:     cubic-bezier(0.2,0.8,0.2,1);
  --jse-dur-fast: 120ms;
  --jse-dur-base: 200ms;
  --jse-dur-slow: 320ms;
  --jse-z-sticky: 200;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
body { margin:0; font-family:var(--jse-font-sans); font-size:var(--jse-text-base); line-height:var(--jse-leading-base); color:var(--jse-text); background:var(--jse-surface-page); }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
p { margin:0 0 var(--jse-space-4); }
p:last-child { margin-bottom:0; }
input,textarea,select { font-size:16px !important; }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2 { font-family:var(--jse-font-display); font-weight:600; letter-spacing:var(--jse-tracking-tight); line-height:var(--jse-leading-tight); margin:0; font-variation-settings:"opsz" 96; }
h1 { font-size:clamp(40px,6vw,72px); }
h2 { font-size:clamp(28px,4vw,42px); }
h3 { font-family:var(--jse-font-sans); font-size:var(--jse-text-xl); font-weight:600; line-height:var(--jse-leading-snug); margin:0; }
h4 { font-family:var(--jse-font-sans); font-size:var(--jse-text-lg); font-weight:600; margin:0; }

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width:1160px; margin:0 auto; padding:0 var(--jse-space-6); }
.section { padding:var(--jse-space-20) 0; }
.section--alt { background:var(--jse-surface-card); }
.section--dark { background:var(--jse-gradient-deep); color:var(--jse-text-on-brand); }

.section-label {
  font-family:var(--jse-font-sans); font-size:var(--jse-text-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--jse-tracking-caps); color:var(--jse-brand);
  display:inline-flex; align-items:center; gap:var(--jse-space-2); margin-bottom:var(--jse-space-4);
}
.section-label::before { content:""; display:inline-block; width:18px; height:1px; background:var(--jse-brand); }
.section--dark .section-label { color:var(--jse-accent); }
.section--dark .section-label::before { background:var(--jse-accent); }

.section-header { max-width:640px; margin-bottom:var(--jse-space-12); }
.section-header h2 { margin-bottom:var(--jse-space-4); }
.section-header p { font-size:var(--jse-text-lg); color:var(--jse-text-muted); line-height:var(--jse-leading-base); }
.section--dark .section-header p { color:rgba(250,247,240,0.75); }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--jse-space-16); align-items:center; }
.two-col.reverse { direction:rtl; }
.two-col.reverse > * { direction:ltr; }

/* ── Navigation ─────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:var(--jse-z-sticky);
  backdrop-filter:blur(12px) saturate(140%);
  background:rgba(247,244,238,0.88);
  border-bottom:1px solid var(--jse-line);
}
.nav-inner {
  max-width:1160px; margin:0 auto; padding:0 var(--jse-space-6);
  display:flex; align-items:center; justify-content:space-between; height:68px; gap:var(--jse-space-6);
}
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:48px; width:auto; }
.nav-links { display:flex; align-items:center; gap:var(--jse-space-1); list-style:none; margin:0; padding:0; }
.nav-links a {
  text-decoration:none; color:var(--jse-text-muted); font-size:var(--jse-text-sm); font-weight:500;
  padding:8px 12px; border-radius:var(--jse-radius-sm);
  transition:color var(--jse-dur-fast) var(--jse-ease), background var(--jse-dur-fast) var(--jse-ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--jse-brand); background:var(--jse-brand-tint-04); }
.nav-cta a {
  background:var(--jse-brand); color:var(--jse-text-on-brand)!important;
  padding:9px 18px!important; border-radius:var(--jse-radius-md)!important;
  font-weight:600!important;
}
.nav-cta a:hover { background:var(--jse-brand-press)!important; box-shadow:var(--jse-shadow-brand); }

.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:var(--jse-space-2); }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--jse-text); margin:4px 0; border-radius:2px; transition:all var(--jse-dur-base) var(--jse-ease); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--jse-space-2);
  padding:12px 22px; font-family:var(--jse-font-sans); font-size:var(--jse-text-sm); font-weight:600;
  line-height:1; border-radius:var(--jse-radius-md); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:all var(--jse-dur-fast) var(--jse-ease);
}
.btn-primary { background:var(--jse-brand); color:var(--jse-text-on-brand); }
.btn-primary:hover { background:var(--jse-brand-press); box-shadow:var(--jse-shadow-brand); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--jse-brand); border-color:var(--jse-brand); }
.btn-outline:hover { background:var(--jse-brand-tint-08); }
.btn-accent { background:var(--jse-gradient-accent); color:var(--jse-text-on-accent); }
.btn-accent:hover { transform:translateY(-1px); box-shadow:var(--jse-shadow-md); }
.btn-ghost-light { background:rgba(255,255,255,0.12); color:var(--jse-text-on-brand); border-color:rgba(255,255,255,0.25); }
.btn-ghost-light:hover { background:rgba(255,255,255,0.20); border-color:rgba(255,255,255,0.5); }
.btn-group { display:flex; gap:var(--jse-space-3); flex-wrap:wrap; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden;
  padding:var(--jse-space-24) 0 var(--jse-space-20);
  background:var(--jse-gradient-deep);
  color:var(--jse-text-on-brand);
}
.hero::before {
  content:""; position:absolute; inset:0;
  background-image:var(--jse-noise); background-size:160px 160px;
  opacity:0.5; pointer-events:none;
}
.hero::after {
  content:""; position:absolute; inset:-20% -10% auto auto;
  width:65%; height:110%;
  background:radial-gradient(ellipse at center,rgba(184,150,83,0.28),transparent 60%);
  pointer-events:none;
}
.hero-inner { position:relative; z-index:1; }
.hero-eyebrow {
  font-family:var(--jse-font-sans); font-size:var(--jse-text-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--jse-tracking-caps); color:var(--jse-accent);
  display:inline-flex; align-items:center; gap:var(--jse-space-2); margin-bottom:var(--jse-space-5);
}
.hero-eyebrow::before { content:""; width:24px; height:1px; background:var(--jse-accent); display:inline-block; }
.hero h1 {
  font-size:clamp(48px,7vw,88px); max-width:14ch;
  margin-bottom:var(--jse-space-6); font-variation-settings:"opsz" 144;
}
.hero h1 em { color:var(--jse-accent); font-style:normal; }
.hero-lead { font-size:var(--jse-text-xl); max-width:54ch; line-height:var(--jse-leading-base); color:rgba(250,247,240,0.80); margin-bottom:var(--jse-space-8); }
.hero-stats {
  display:flex; gap:var(--jse-space-10); flex-wrap:wrap;
  padding-top:var(--jse-space-10); margin-top:var(--jse-space-8);
  border-top:1px solid rgba(255,255,255,0.10);
}
.hero-stat-num { font-family:var(--jse-font-display); font-size:var(--jse-text-3xl); font-weight:600; color:var(--jse-accent); line-height:1; }
.hero-stat-label { font-size:var(--jse-text-sm); color:rgba(250,247,240,0.65); margin-top:4px; }

/* ── Page hero (interior pages) ─────────────────────────────── */
.page-hero {
  background:var(--jse-gradient-deep); color:var(--jse-text-on-brand);
  padding:var(--jse-space-16) 0; position:relative; overflow:hidden;
}
.page-hero::before { content:""; position:absolute; inset:0; background-image:var(--jse-noise); background-size:160px 160px; opacity:0.4; pointer-events:none; }
.page-hero-inner { position:relative; z-index:1; }
.page-hero h1 { margin-bottom:var(--jse-space-4); }
.page-hero p { font-size:var(--jse-text-xl); color:rgba(250,247,240,0.78); max-width:52ch; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background:var(--jse-surface-raised); border:1px solid var(--jse-line);
  border-radius:var(--jse-radius-lg); padding:var(--jse-space-8);
  transition:transform var(--jse-dur-base) var(--jse-ease), box-shadow var(--jse-dur-base) var(--jse-ease), border-color var(--jse-dur-base) var(--jse-ease);
}
.card:hover { transform:translateY(-3px); box-shadow:var(--jse-shadow-md); border-color:var(--jse-line-brand); }
.card-icon { margin-bottom:var(--jse-space-5); color:var(--jse-brand); }
.card h3 { margin-bottom:var(--jse-space-3); }
.card p { color:var(--jse-text-muted); font-size:var(--jse-text-sm); line-height:var(--jse-leading-base); }

.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--jse-space-6); }

/* Build / Episode cards */
.build-card {
  background:var(--jse-surface-raised); border:1px solid var(--jse-line);
  border-radius:var(--jse-radius-lg); overflow:hidden;
  transition:transform var(--jse-dur-base) var(--jse-ease), box-shadow var(--jse-dur-base) var(--jse-ease);
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.build-card:hover { transform:translateY(-4px); box-shadow:var(--jse-shadow-lg); }
.build-card-thumb {
  aspect-ratio:16/9; background:var(--jse-gradient-hero);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.build-card-thumb::before { content:""; position:absolute; inset:0; background-image:var(--jse-noise); background-size:160px 160px; opacity:0.4; }
.build-card-thumb-label {
  position:relative; z-index:1;
  font-family:var(--jse-font-display); font-size:var(--jse-text-xl); font-weight:600;
  color:var(--jse-accent); text-align:center; padding:var(--jse-space-4);
}
.build-card-body { padding:var(--jse-space-6); flex:1; display:flex; flex-direction:column; gap:var(--jse-space-3); }
.build-card-tag {
  font-family:var(--jse-font-sans); font-size:var(--jse-text-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--jse-tracking-caps);
  color:var(--jse-brand); display:inline-flex; align-items:center; gap:6px;
}
.build-card-tag::before { content:""; width:12px; height:1px; background:var(--jse-brand); }
.build-card h3 { font-size:var(--jse-text-lg); }
.build-card p { color:var(--jse-text-muted); font-size:var(--jse-text-sm); flex:1; }
.build-card-meta { display:flex; align-items:center; gap:var(--jse-space-4); padding-top:var(--jse-space-4); border-top:1px solid var(--jse-line); margin-top:auto; }
.build-card-free { font-size:var(--jse-text-xs); font-weight:600; color:var(--jse-accent-deep); background:var(--jse-accent-soft); padding:3px 10px; border-radius:var(--jse-radius-full); }
.build-card-type { font-size:var(--jse-text-xs); color:var(--jse-text-faint); }

.builds-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--jse-space-6); }

/* ── Feature strip (dark bg, 2-col) ─────────────────────────── */
.feature-strip {
  background:var(--jse-gradient-deep); color:var(--jse-text-on-brand);
  padding:var(--jse-space-24) 0; position:relative; overflow:hidden;
}
.feature-strip::before { content:""; position:absolute; inset:0; background-image:var(--jse-noise); background-size:160px 160px; opacity:0.35; pointer-events:none; }
.feature-strip::after {
  content:""; position:absolute; left:-10%; top:-20%;
  width:50%; height:120%;
  background:radial-gradient(ellipse at center,rgba(184,150,83,0.18),transparent 60%);
  pointer-events:none;
}
.feature-strip-inner { position:relative; z-index:1; }
.feature-strip h2 { margin-bottom:var(--jse-space-6); }
.feature-list { list-style:none; margin:var(--jse-space-8) 0; padding:0; display:flex; flex-direction:column; gap:var(--jse-space-4); }
.feature-list li { display:flex; align-items:flex-start; gap:var(--jse-space-3); font-size:var(--jse-text-base); color:rgba(250,247,240,0.85); }
.feature-list li::before { content:""; width:20px; height:20px; min-width:20px; border-radius:50%; background:var(--jse-accent-soft); border:1px solid var(--jse-accent); margin-top:2px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23B89653' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 10 8 14 16 6'/></svg>"); background-size:12px; background-position:center; background-repeat:no-repeat; }
.feature-visual {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--jse-radius-xl); padding:var(--jse-space-10);
  display:flex; flex-direction:column; gap:var(--jse-space-4);
}
.feature-visual-row { display:flex; align-items:center; gap:var(--jse-space-4); }
.feature-visual-dot { width:10px; height:10px; border-radius:50%; background:var(--jse-accent); flex-shrink:0; }
.feature-visual-bar { flex:1; height:8px; border-radius:var(--jse-radius-full); background:rgba(255,255,255,0.08); overflow:hidden; }
.feature-visual-bar-fill { height:100%; border-radius:var(--jse-radius-full); background:var(--jse-gradient-accent); }
.feature-visual-label { font-family:var(--jse-font-mono); font-size:var(--jse-text-xs); color:rgba(250,247,240,0.5); min-width:80px; text-align:right; }

/* ── Who section ─────────────────────────────────────────────── */
.who-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--jse-space-6); margin-top:var(--jse-space-10); }
.who-card {
  background:var(--jse-surface-card); border:1px solid var(--jse-line);
  border-radius:var(--jse-radius-lg); padding:var(--jse-space-8);
  display:flex; flex-direction:column; gap:var(--jse-space-3);
}
.who-card h4 { color:var(--jse-brand); }
.who-card p { color:var(--jse-text-muted); font-size:var(--jse-text-sm); line-height:var(--jse-leading-base); }

/* ── How it works steps ──────────────────────────────────────── */
.steps { display:flex; flex-direction:column; gap:0; counter-reset:steps; }
.step { display:flex; gap:var(--jse-space-6); padding:var(--jse-space-8) 0; border-bottom:1px solid var(--jse-line); position:relative; counter-increment:steps; }
.step:last-child { border-bottom:none; }
.step-num {
  width:48px; height:48px; min-width:48px; border-radius:50%;
  background:var(--jse-gradient-hero); color:var(--jse-text-on-brand);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--jse-font-display); font-size:var(--jse-text-xl); font-weight:600;
  box-shadow:var(--jse-shadow-brand); flex-shrink:0;
}
.step-num::after { content:counter(steps); }
.step-body { flex:1; }
.step-body h3 { margin-bottom:var(--jse-space-3); }
.step-body p { color:var(--jse-text-muted); }

/* ── Subscribe / CTA band ────────────────────────────────────── */
.cta-band {
  background:var(--jse-gradient-hero); color:var(--jse-text-on-brand);
  padding:var(--jse-space-20) 0; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before { content:""; position:absolute; inset:0; background-image:var(--jse-noise); background-size:160px 160px; opacity:0.4; pointer-events:none; }
.cta-band-inner { position:relative; z-index:1; max-width:600px; margin:0 auto; }
.cta-band h2 { margin-bottom:var(--jse-space-4); }
.cta-band p { font-size:var(--jse-text-lg); color:rgba(250,247,240,0.78); margin-bottom:var(--jse-space-8); }
.platform-links { display:flex; justify-content:center; gap:var(--jse-space-4); flex-wrap:wrap; }
.platform-link {
  display:inline-flex; align-items:center; gap:var(--jse-space-2);
  padding:12px 20px; border-radius:var(--jse-radius-md);
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20);
  color:var(--jse-text-on-brand); text-decoration:none;
  font-size:var(--jse-text-sm); font-weight:600;
  transition:all var(--jse-dur-fast) var(--jse-ease);
}
.platform-link:hover { background:rgba(255,255,255,0.20); border-color:rgba(255,255,255,0.45); transform:translateY(-1px); }
.platform-link svg { opacity:0.8; }

/* ── Resource cards ──────────────────────────────────────────── */
.resource-card {
  background:var(--jse-surface-raised); border:1px solid var(--jse-line);
  border-radius:var(--jse-radius-lg); padding:var(--jse-space-8);
  display:flex; flex-direction:column; gap:var(--jse-space-4);
  transition:all var(--jse-dur-base) var(--jse-ease);
}
.resource-card:hover { border-color:var(--jse-line-brand); box-shadow:var(--jse-shadow-md); transform:translateY(-2px); }
.resource-card-type { display:inline-flex; align-items:center; gap:6px; font-family:var(--jse-font-mono); font-size:var(--jse-text-xs); color:var(--jse-text-faint); text-transform:uppercase; letter-spacing:var(--jse-tracking-caps); }
.resource-card h3 { font-size:var(--jse-text-lg); }
.resource-card p { color:var(--jse-text-muted); font-size:var(--jse-text-sm); flex:1; }
.resource-card-free { font-size:var(--jse-text-xs); font-weight:700; color:var(--jse-accent-deep); letter-spacing:var(--jse-tracking-caps); text-transform:uppercase; margin-top:auto; }

/* ── New Direction Banner ────────────────────────────────────── */
.direction-banner {
  background:var(--jse-brand);
  padding:var(--jse-space-4) 0;
}
.direction-banner-inner {
  display:flex;
  align-items:flex-start;
  gap:var(--jse-space-4);
}
.direction-banner-tag {
  flex-shrink:0;
  font-family:var(--jse-font-mono);
  font-size:var(--jse-text-xs);
  font-weight:700;
  letter-spacing:var(--jse-tracking-caps);
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,0.2);
  padding:2px 10px;
  border-radius:99px;
  margin-top:2px;
}
.direction-banner p {
  margin:0;
  font-size:var(--jse-text-sm);
  line-height:var(--jse-leading-base);
  color:rgba(255,255,255,0.92);
}
@media(max-width:640px) {
  .direction-banner-inner { flex-direction:column; gap:var(--jse-space-2); }
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  background:var(--jse-surface-deeper); color:rgba(250,247,240,0.65);
  padding:var(--jse-space-16) 0 var(--jse-space-8);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--jse-space-12); margin-bottom:var(--jse-space-12); }
.footer-brand { display:flex; flex-direction:column; align-items:center; gap:var(--jse-space-4); }
.footer-brand img { height:auto; width:220px; max-width:100%; opacity:0.95; }
.footer-brand p { text-align:center; }
.footer-tagline { text-align:center; }
.footer-brand p { font-size:var(--jse-text-sm); line-height:var(--jse-leading-base); color:rgba(250,247,240,0.55); max-width:28ch; }
.footer-tagline { font-family:var(--jse-font-display); font-size:var(--jse-text-base); color:var(--jse-accent); font-style:italic; }
.footer-col h5 { font-family:var(--jse-font-sans); font-size:var(--jse-text-xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--jse-tracking-caps); color:rgba(250,247,240,0.4); margin-bottom:var(--jse-space-4); }
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--jse-space-3); }
.footer-col ul a { text-decoration:none; font-size:var(--jse-text-sm); color:rgba(250,247,240,0.65); transition:color var(--jse-dur-fast) var(--jse-ease); }
.footer-col ul a:hover { color:var(--jse-accent); }
.footer-bottom { padding-top:var(--jse-space-8); border-top:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; align-items:center; gap:var(--jse-space-4); flex-wrap:wrap; }
.footer-bottom p { font-size:var(--jse-text-xs); color:rgba(250,247,240,0.35); margin:0; }
.footer-social { display:flex; gap:var(--jse-space-3); }
.footer-social a { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--jse-radius-sm); background:rgba(255,255,255,0.06); color:rgba(250,247,240,0.6); transition:all var(--jse-dur-fast) var(--jse-ease); text-decoration:none; }
.footer-social a:hover { background:rgba(255,255,255,0.14); color:var(--jse-accent); }

/* ── About page ──────────────────────────────────────────────── */
.about-lead { font-size:var(--jse-text-xl); line-height:var(--jse-leading-base); color:var(--jse-text-muted); max-width:64ch; margin:0 0 var(--jse-space-8); }
.about-portrait {
  border-radius:var(--jse-radius-xl); overflow:hidden;
  box-shadow:var(--jse-shadow-lg); border:1px solid var(--jse-line);
}
.about-values { display:grid; grid-template-columns:1fr 1fr; gap:var(--jse-space-6); margin-top:var(--jse-space-10); }
.value-item { padding:var(--jse-space-6); border-left:3px solid var(--jse-brand); }
.value-item h4 { color:var(--jse-brand); margin-bottom:var(--jse-space-2); }
.value-item p { font-size:var(--jse-text-sm); color:var(--jse-text-muted); }

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:900px){
  .cards-grid { grid-template-columns:1fr 1fr; }
  .builds-grid { grid-template-columns:1fr 1fr; }
  .two-col { grid-template-columns:1fr; gap:var(--jse-space-10); }
  .two-col.reverse { direction:ltr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:var(--jse-space-8); }
  .who-grid { grid-template-columns:1fr; }
  .about-values { grid-template-columns:1fr; }
}

@media(max-width:600px){
  .nav-links { display:none; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:rgba(247,244,238,0.98); border-bottom:1px solid var(--jse-line); padding:var(--jse-space-4); gap:var(--jse-space-1); box-shadow:var(--jse-shadow-md); }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; flex-direction:column; justify-content:center; }
  .nav { position:relative; }
  .cards-grid { grid-template-columns:1fr; }
  .builds-grid { grid-template-columns:1fr; }
  .hero { padding:var(--jse-space-16) 0 var(--jse-space-12); }
  .section { padding:var(--jse-space-12) 0; }
  .footer-grid { grid-template-columns:1fr; }
  .hero-stats { gap:var(--jse-space-6); }
  .platform-links { flex-direction:column; align-items:center; }
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes jseReveal { from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);} }
.jse-reveal { animation:jseReveal var(--jse-dur-slow) var(--jse-ease) both; }