/* ==========================================================================
   RezWorks Studios — Design Tokens & Base Styles
   ========================================================================== */

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

:root{
  /* ---- Color: surfaces ---- */
  --color-bg: #0a0b0e;
  --color-bg-alt: #101218;
  --color-surface: #161922;
  --color-surface-2: #1e222d;
  --color-border: #2a2e3a;
  --color-border-soft: #20232d;

  /* ---- Color: brand (from the RezWorks mark) ---- */
  --color-brand-start: #4c7cf0;
  --color-brand-end: #9b5de5;
  --color-brand: #7d97f4;

  /* ---- Color: accent (firelight, from A Cherokee Tale key art) ---- */
  --color-ember: #e8863a;
  --color-ember-hot: #f2a65a;
  --color-on-ember: #1c1004;

  /* ---- Color: earth (forest / dusk, from key art) ---- */
  --color-forest: #3c4a34;
  --color-forest-light: #576a4b;
  --color-dusk: #4a4570;

  /* ---- Color: text ---- */
  --color-text: #f4f1ea;
  --color-text-muted: #aeb2bf;
  --color-text-faint: #767b8a;
  --color-on-dark: #f4f1ea;

  /* ---- Semantic ---- */
  --color-success: #5fb789;
  --color-error: #ef6b5e;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --fs-2xl: clamp(2.1rem, 1.5rem + 2.5vw, 2.85rem);
  --fs-3xl: clamp(2.5rem, 1.6rem + 4vw, 4rem);
  --fs-hero: clamp(2.75rem, 1.9rem + 5vw, 5.25rem);

  /* ---- Spacing (4/8 scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ---- Shadow / elevation ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 10px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px rgba(155,93,229,.35), 0 16px 46px rgba(76,124,240,.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-slower: 800ms;

  /* ---- Layout ---- */
  --container-xl: 1280px;
  --container-lg: 960px;
  --header-h: 76px;

  /* ---- Z ---- */
  --z-nav: 100;
  --z-overlay: 200;

  color-scheme: dark;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg{ display:block; max-width:100%; }
input, button, textarea, select{ font: inherit; color: inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ margin:0; font-family: var(--font-display); font-weight: 700; line-height:1.12; letter-spacing:-0.01em; }
p{ margin:0; }
:focus-visible{ outline: 2px solid var(--color-ember-hot); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html{ scroll-behavior: auto; }
}

/* ==========================================================================
   Utility layout
   ========================================================================== */
.container{
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow{ max-width: var(--container-lg); }

@media (min-width: 768px){
  .container{ padding-inline: var(--space-7); }
}

.skip-link{
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-ember);
  color: var(--color-on-ember);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: var(--space-4); }

.section{ padding-block: var(--space-11); }
.section--tight{ padding-block: var(--space-9); }
.section-alt{ background: var(--color-bg-alt); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ember-hot);
}
.eyebrow::before{
  content: '';
  width: 22px; height: 2px;
  background: var(--color-ember);
  border-radius: 2px;
}

.section-head{ max-width: 640px; margin-bottom: var(--space-8); }
.section-head h2{ font-size: var(--fs-3xl); margin-top: var(--space-3); }
.section-head p{ margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-md); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head--center .eyebrow::before{ display:none; }

.text-gradient{
  background: linear-gradient(100deg, var(--color-brand-start), var(--color-brand-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content:center;
  gap: var(--space-2);
  padding: 0.9rem 1.6rem;
  min-height: 48px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn svg{ width: 18px; height: 18px; flex-shrink:0; }
.btn:active{ transform: scale(0.97); }

.btn--primary{
  background: var(--color-ember);
  color: var(--color-on-ember);
  box-shadow: 0 8px 24px rgba(232,134,58,.25);
}
.btn--primary:hover{ background: var(--color-ember-hot); box-shadow: 0 12px 32px rgba(232,134,58,.35); }

.btn--ghost{
  background: rgba(244,241,234,0.04);
  color: var(--color-text);
  border: 1px solid rgba(244,241,234,0.22);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{ border-color: rgba(244,241,234,0.5); background: rgba(244,241,234,0.08); }

.btn--brand{
  background: linear-gradient(100deg, var(--color-brand-start), var(--color-brand-end));
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}
.btn--brand:hover{ transform: translateY(-2px); }

.btn--sm{ padding: 0.65rem 1.2rem; min-height: 40px; font-size: var(--fs-xs); }
.btn--block{ width:100%; }
.btn:disabled{ opacity: 0.6; cursor: not-allowed; pointer-events: none; }

.link-arrow{
  display:inline-flex; align-items:center; gap: var(--space-2);
  font-weight: 600; color: var(--color-ember-hot);
  transition: gap var(--dur-fast) var(--ease-out);
}
.link-arrow svg{ width:18px; height:18px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover{ gap: var(--space-3); }
.link-arrow:hover svg{ transform: translateX(2px); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: fixed;
  top: 0; left:0; right:0;
  z-index: var(--z-nav);
  height: var(--header-h);
  display:flex; align-items:center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled{
  background: rgba(10,11,14,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--color-border-soft);
  height: 68px;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
}
.brand{
  display:flex; align-items:center; gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
}
.brand img{ height: 38px; width: 38px; object-fit: cover; border-radius: 22%; }
.brand .brand-fallback{
  height: 38px; width: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-start), var(--color-brand-end));
  display:flex; align-items:center; justify-content:center;
  font-size: 0.9rem; font-weight:800; color:#fff;
}
.brand span{ display:none; }
@media (min-width: 480px){ .brand span{ display:inline; } }

.nav-desktop{ display:none; }
@media (min-width: 900px){
  .nav-desktop{
    display:flex; align-items:center; gap: var(--space-7);
  }
  .nav-desktop a{
    font-size: var(--fs-sm); font-weight:600; color: var(--color-text-muted);
    padding-block: var(--space-2);
    position:relative;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav-desktop a::after{
    content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background: linear-gradient(90deg, var(--color-brand-start), var(--color-ember));
    transform: scaleX(0); transform-origin:left;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .nav-desktop a:hover, .nav-desktop a[aria-current="page"]{ color: var(--color-text); }
  .nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ transform: scaleX(1); }
}

.nav-actions{ display:flex; align-items:center; gap: var(--space-4); }
.nav-actions .btn{ display:none; }
@media (min-width:900px){ .nav-actions .btn{ display:inline-flex; } }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width: 44px; height:44px;
  color: var(--color-text);
}
@media (min-width:900px){ .nav-toggle{ display:none; } }
.nav-toggle svg{ width:24px; height:24px; }

.nav-mobile{
  position: fixed; inset: 0;
  background: rgba(10,11,14,0.98);
  backdrop-filter: blur(10px);
  z-index: var(--z-overlay);
  display:flex; flex-direction:column;
  padding: var(--space-6) var(--space-5);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-in-out);
  visibility: hidden;
}
.nav-mobile.is-open{ transform: translateX(0); visibility: visible; }
.nav-mobile-head{ display:flex; align-items:center; justify-content:space-between; height: var(--header-h); }
.nav-mobile ul{ margin-top: var(--space-8); display:flex; flex-direction:column; gap: var(--space-2); }
.nav-mobile a{
  display:block; padding: var(--space-4) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight:600;
  border-bottom: 1px solid var(--color-border-soft);
}
.nav-mobile a[aria-current="page"]{ color: var(--color-ember-hot); }
.nav-mobile .btn{ margin-top: var(--space-8); }
@media (min-width:900px){ .nav-mobile{ display:none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100dvh;
  display:flex; align-items:flex-end;
  overflow: hidden;
  padding-top: var(--header-h);
  isolation: isolate;
}
.hero-media{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(74,69,112,.55), transparent 60%),
    radial-gradient(90% 70% at 85% 100%, rgba(232,134,58,.28), transparent 55%),
    linear-gradient(180deg, #0a0b0e 0%, #14161d 45%, #0a0b0e 100%);
}
.hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit: cover;
  object-position: center 30%;
  opacity: .8;
  filter: blur(18px) saturate(1.15);
  will-change: transform;
}
.hero-media::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,11,14,.35) 0%, rgba(10,11,14,.55) 55%, rgba(10,11,14,.96) 100%);
}
.hero-content{
  position:relative; z-index:1;
  width:100%;
  padding-block: var(--space-10) var(--space-9);
}
.hero-content .eyebrow{ color: var(--color-ember-hot); }
.hero h1{
  font-size: var(--fs-hero);
  margin-top: var(--space-4);
  max-width: 16ch;
  text-wrap: balance;
}
.hero p{
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}
.hero-actions{ margin-top: var(--space-7); display:flex; flex-wrap:wrap; gap: var(--space-4); }

.scroll-cue{
  position:absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap: var(--space-2);
  color: var(--color-text-faint); font-size: var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  z-index:1;
}
.scroll-cue svg{ width:16px; height:16px; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

/* Page (non-home) hero — shorter */
.page-hero{
  position:relative;
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-9);
  overflow:hidden;
  isolation:isolate;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(80% 100% at 10% 0%, rgba(76,124,240,.18), transparent 60%),
    radial-gradient(70% 90% at 100% 0%, rgba(232,134,58,.14), transparent 55%),
    var(--color-bg);
}
.page-hero h1{ font-size: var(--fs-3xl); margin-top: var(--space-3); max-width: 20ch; }
.page-hero p{ margin-top: var(--space-4); max-width: 60ch; color: var(--color-text-muted); font-size: var(--fs-md); }
.breadcrumb{
  display:flex; align-items:center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-text-faint);
  margin-bottom: var(--space-5);
}
.breadcrumb a{ color: var(--color-text-muted); }
.breadcrumb a:hover{ color: var(--color-ember-hot); }
.breadcrumb svg{ width:14px; height:14px; }

/* ==========================================================================
   Pillars / feature strip
   ========================================================================== */
.pillars{
  display:grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){ .pillars{ grid-template-columns: repeat(3, 1fr); } }
.pillar{
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}
.pillar .icon-badge{ margin-bottom: var(--space-4); }
.pillar h3{ font-size: var(--fs-lg); }
.pillar p{ margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); }

.icon-badge{
  width: 52px; height:52px;
  border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(76,124,240,.18), rgba(155,93,229,.18));
  border: 1px solid rgba(155,93,229,.25);
  color: var(--color-brand);
}
.icon-badge svg{ width:24px; height:24px; }
.icon-badge--ember{
  background: linear-gradient(135deg, rgba(232,134,58,.2), rgba(242,166,90,.14));
  border-color: rgba(232,134,58,.3);
  color: var(--color-ember-hot);
}

/* ==========================================================================
   Cards: game spotlight / grid
   ========================================================================== */
.game-spotlight{
  display:grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items:center;
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg-alt));
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
@media (min-width: 860px){ .game-spotlight{ grid-template-columns: 1.1fr 1fr; } }
.game-spotlight-media{ position:relative; aspect-ratio: 4/3; background: var(--color-surface-2); overflow:hidden; }
.game-spotlight-media img{ width:100%; height:100%; object-fit:cover; transition: transform var(--dur-slower) var(--ease-out); }
.game-spotlight:hover .game-spotlight-media img{ transform: scale(1.04); }
.game-spotlight-body{ padding: var(--space-7); }
@media (min-width: 860px){ .game-spotlight-body{ padding: var(--space-9); } }

.status-badge{
  display:inline-flex; align-items:center; gap: var(--space-2);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background: rgba(232,134,58,.14);
  color: var(--color-ember-hot);
  border: 1px solid rgba(232,134,58,.3);
}
.status-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--color-ember-hot); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

.game-spotlight-body h3{ font-size: var(--fs-2xl); margin-top: var(--space-4); }
.game-spotlight-body .tagline{ font-family: var(--font-display); font-style:italic; color: var(--color-brand); margin-top: var(--space-2); font-size: var(--fs-md); }
.game-spotlight-body p.desc{ margin-top: var(--space-4); color: var(--color-text-muted); }
.game-spotlight-body .link-arrow{ margin-top: var(--space-6); }

.games-grid{ display:grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px){ .games-grid{ grid-template-columns: repeat(2, 1fr); } }

.game-card{
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.game-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(155,93,229,.35); }
.game-card-media{ position:relative; aspect-ratio: 16/10; background: var(--color-surface-2); overflow:hidden; }
.game-card-media img{ width:100%; height:100%; object-fit:cover; object-position: center 82%; transition: transform var(--dur-slower) var(--ease-out); }
.game-card:hover .game-card-media img{ transform: scale(1.06); }
.game-card-media .status-badge{ position:absolute; top: var(--space-4); left: var(--space-4); }
.game-card-body{ padding: var(--space-6); }
.game-card-body h3{ font-size: var(--fs-lg); }
.game-card-body p{ margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-sm); }
.game-card-body .link-arrow{ margin-top: var(--space-5); }

.game-card--placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height: 340px;
  border: 1px dashed var(--color-border);
  background: transparent;
  padding: var(--space-7);
}
.game-card--placeholder:hover{ transform:none; box-shadow:none; }
.game-card--placeholder .icon-badge{ margin-inline:auto; }
.game-card--placeholder h3{ margin-top: var(--space-4); font-size: var(--fs-md); color: var(--color-text-muted); }
.game-card--placeholder p{ margin-top: var(--space-2); font-size: var(--fs-sm); }

/* ==========================================================================
   Key art panel (game detail)
   ========================================================================== */
.key-art{
  max-width: 380px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lg);
}
.key-art img{ width:100%; height:auto; display:block; }
.key-art-caption{
  text-align:center; margin-top: var(--space-4);
  font-size: var(--fs-xs); color: var(--color-text-faint);
}

/* ==========================================================================
   Feature grid (game detail)
   ========================================================================== */
.feature-grid{ display:grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px){ .feature-grid{ grid-template-columns: repeat(2, 1fr); } }
.feature-item{
  display:flex; gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}
.feature-item h3{ font-size: var(--fs-md); }
.feature-item p{ margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
.feature-item .icon-badge{ flex-shrink:0; width:44px; height:44px; }
.feature-item .icon-badge svg{ width:20px; height:20px; }

/* ==========================================================================
   Gallery (placeholder screenshots)
   ========================================================================== */
.gallery{ display:grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px){ .gallery{ grid-template-columns: repeat(3, 1fr); } }
.gallery-tile{
  position:relative; aspect-ratio: 16/10;
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid var(--color-border-soft);
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(76,124,240,.25), transparent 60%),
    radial-gradient(60% 60% at 80% 90%, rgba(232,134,58,.22), transparent 60%),
    linear-gradient(160deg, var(--color-surface-2), var(--color-bg-alt));
  display:flex; align-items:center; justify-content:center;
  color: var(--color-text-faint);
  transition: transform var(--dur-base) var(--ease-out);
}
.gallery-tile:hover{ transform: translateY(-4px); }
.gallery-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-tile .gallery-label{
  display:flex; flex-direction:column; align-items:center; gap: var(--space-2);
  font-size: var(--fs-xs); text-align:center; padding: var(--space-3);
}
.gallery-tile .gallery-label svg{ width:26px; height:26px; opacity:.7; }

/* ==========================================================================
   Info panel (status / platform)
   ========================================================================== */
.info-panel{
  display:grid; gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}
@media (min-width: 640px){ .info-panel{ grid-template-columns: repeat(4, 1fr); } }
.info-panel dt{ font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color: var(--color-text-faint); }
.info-panel dd{ margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight:600; font-size: var(--fs-md); }

/* ==========================================================================
   Values grid (about)
   ========================================================================== */
.values-grid{ display:grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .values-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Team */
.team-card{
  display:flex; align-items:center; gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  flex-wrap:wrap;
}
.avatar-monogram{
  width: 84px; height:84px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--color-brand-start), var(--color-brand-end));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: 1.6rem; color:#fff;
}
.team-card h3{ font-size: var(--fs-lg); }
.team-card .role{ margin-top: var(--space-1); color: var(--color-ember-hot); font-size: var(--fs-sm); font-weight:600; }
.team-card p.bio{ margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 60ch; }

/* Location strip */
.location-strip{
  display:flex; align-items:center; gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(76,124,240,.12), rgba(155,93,229,.1));
  border: 1px solid rgba(155,93,229,.22);
}
.location-strip .icon-badge{ flex-shrink:0; }

/* ==========================================================================
   Quote / mission block
   ========================================================================== */
.mission-block{
  position:relative;
  padding: var(--space-9) var(--space-7);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--color-surface), var(--color-bg-alt));
  border: 1px solid var(--color-border-soft);
  overflow:hidden;
}
.mission-block::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(60% 80% at 90% 10%, rgba(232,134,58,.14), transparent 60%);
}
.mission-block p{
  position:relative; z-index:1;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight:500;
  line-height:1.4;
  max-width: 34ch;
}

/* ==========================================================================
   News / blog
   ========================================================================== */
.post-list{ display:flex; flex-direction:column; gap: var(--space-6); }
.post-card{
  display:grid; gap: var(--space-6);
  padding: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}
.post-card .post-date{
  font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.08em;
  color: var(--color-ember-hot); font-weight:700;
}
.post-card h2, .post-card h3{ font-size: var(--fs-xl); margin-top: var(--space-3); }
.post-card .excerpt{ margin-top: var(--space-4); color: var(--color-text-muted); }
.post-card .tag{
  display:inline-block; margin-top: var(--space-4);
  font-size: var(--fs-xs); font-weight:600; color: var(--color-brand);
  background: rgba(76,124,240,.12); border:1px solid rgba(76,124,240,.25);
  padding: 0.25rem 0.65rem; border-radius: var(--radius-full);
}

.notice-card{
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  display:flex; align-items:flex-start; gap: var(--space-4);
}
.notice-card .icon-badge{ flex-shrink:0; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner{
  position:relative;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-lg);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.cta-banner::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 120% at 20% 0%, rgba(76,124,240,.35), transparent 60%),
    radial-gradient(70% 120% at 90% 100%, rgba(232,134,58,.3), transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: inherit;
}
.cta-banner h2{ font-size: var(--fs-2xl); max-width: 22ch; margin-inline:auto; }
.cta-banner p{ margin: var(--space-4) auto 0; max-width: 50ch; color: var(--color-text-muted); }
.cta-banner .hero-actions{ justify-content:center; margin-top: var(--space-7); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid{ display:grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px){ .form-grid.two-col{ grid-template-columns: 1fr 1fr; } }

.field{ display:flex; flex-direction:column; gap: var(--space-2); }
.field label{ font-size: var(--fs-sm); font-weight:600; }
.field .required{ color: var(--color-ember-hot); }
.field input,
.field select,
.field textarea{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  min-height: 48px;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea{ min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(76,124,240,.25);
}
.field .hint{ font-size: var(--fs-xs); color: var(--color-text-faint); }
.field .error-text{
  display:none; font-size: var(--fs-xs); color: var(--color-error); font-weight:600;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color: var(--color-error); }
.field.has-error .error-text{ display:block; }

.form-status{
  display:none;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}
.form-status.is-visible{ display:block; }
.form-status.success{ background: rgba(95,183,137,.12); border:1px solid rgba(95,183,137,.35); color:#bfe9d3; }
.form-status.error{ background: rgba(239,107,94,.12); border:1px solid rgba(239,107,94,.35); color:#f7c2bc; }

.contact-layout > *{ min-width: 0; }
@media (min-width: 860px){
  .contact-layout{ grid-template-columns: 1.3fr 1fr !important; align-items:start; }
}

.contact-panel{
  display:flex; flex-direction:column; gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}
.contact-item{ display:flex; align-items:flex-start; gap: var(--space-4); }
.contact-item h3{ font-size: var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; color: var(--color-text-faint); }
.contact-item p, .contact-item a{ margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--fs-md); font-weight:600; overflow-wrap: anywhere; }
.contact-item a:hover{ color: var(--color-ember-hot); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top: 1px solid var(--color-border-soft);
  padding-block: var(--space-9) var(--space-7);
  background: var(--color-bg-alt);
}
.footer-grid{
  display:grid; gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 760px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand p{ margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 34ch; }
.footer-col h3{ font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color: var(--color-text-faint); margin-bottom: var(--space-4); }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--space-3); }
.footer-col a{ color: var(--color-text-muted); font-size: var(--fs-sm); transition: color var(--dur-fast); overflow-wrap: anywhere; }
.footer-col a:hover{ color: var(--color-ember-hot); }
.footer-bottom{
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  display:flex; flex-wrap:wrap; gap: var(--space-4);
  justify-content:space-between;
  font-size: var(--fs-xs); color: var(--color-text-faint);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible{ opacity: 1; transform: none; }
[data-reveal-group] > *{ transition-delay: calc(var(--reveal-index, 0) * 70ms); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
}