/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0e0b08;
  --surface: #1a1612;
  --surface2: #231f1a;
  --amber: #f5a623;
  --amber-dim: #c47d0e;
  --warm-white: #faf5ee;
  --warm-gray: #a09080;
  --text-secondary: #7a6e62;
  --border: rgba(245,166,35,0.12);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--warm-white);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Hero */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(ellipse at center, rgba(245,166,35,0.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,166,35,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 80% 20%, black 30%, transparent 70%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 8rem 4rem 6rem;
}

.hero-tag {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--border);
  padding: 0.4em 1em;
  border-radius: 999px;
  margin-bottom: 2.5rem;
}

.hero-headline {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--warm-white);
  margin-bottom: 2rem;
}

.hero-lede {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--warm-gray);
  max-width: 560px;
  line-height: 1.7;
}

/* Shared Section */
.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 3rem;
}

/* How It Works */
.how { background: var(--bg); padding: 8rem 0; }
.how-inner { max-width: 900px; margin: 0 auto; padding: 0 4rem; }

.steps { display: flex; flex-direction: column; gap: 0; }

.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.step:last-child { border-bottom: none; }

.step::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.step-num {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--amber);
  opacity: 0.4;
  text-align: right;
  line-height: 1;
  padding-top: 0.2rem;
}

.step-body h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--warm-white);
  margin-bottom: 0.75rem;
}

.step-body p {
  font-family: 'Instrument Serif', serif;
  color: var(--warm-gray);
  line-height: 1.75;
  font-size: 1rem;
}

/* Features */
.features { background: var(--surface); padding: 8rem 0; }
.features-inner { max-width: 1100px; margin: 0 auto; padding: 0 4rem; }

.features .section-label { max-width: 480px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.feature-card {
  background: var(--surface);
  padding: 2.5rem 2rem;
  transition: background 0.2s;
}

.feature-card:hover { background: var(--surface2); }

.feature-icon {
  color: var(--amber);
  margin-bottom: 1.5rem;
  width: 28px;
  height: 28px;
}

.feature-card h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--warm-white);
  margin-bottom: 0.75rem;
}

.feature-card p {
  font-family: 'Instrument Serif', serif;
  color: var(--warm-gray);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Work Stats */
.work { background: var(--bg); padding: 8rem 0; }
.work-inner { max-width: 900px; margin: 0 auto; padding: 0 4rem; }

.work-stats {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 5rem;
}

.stat { text-align: center; }

.stat-value {
  display: block;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--warm-gray);
  letter-spacing: 0.05em;
  line-height: 1.5;
  max-width: 160px;
  display: block;
}

.stat-divider { color: var(--amber); opacity: 0.4; flex-shrink: 0; }

.work-callout {
  background: var(--surface);
  border-left: 3px solid var(--amber);
  padding: 2rem 2.5rem;
  border-radius: 0 4px 4px 0;
}

.callout-text {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* Closing */
.closing {
  background: var(--surface);
  padding: 10rem 0;
  text-align: center;
}

.closing-inner { max-width: 700px; margin: 0 auto; padding: 0 4rem; }

.closing-sun {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 3rem;
}

.sun-orb {
  width: 40px;
  height: 40px;
  background: var(--amber);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 40px rgba(245,166,35,0.6);
}

.sun-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(245,166,35,0.3) 8deg, transparent 16deg, transparent 28deg, rgba(245,166,35,0.3) 36deg, transparent 44deg, transparent 56deg, rgba(245,166,35,0.3) 64deg, transparent 72deg, transparent 84deg, rgba(245,166,35,0.3) 92deg, transparent 100deg, transparent 112deg, rgba(245,166,35,0.3) 120deg, transparent 128deg, transparent 140deg, rgba(245,166,35,0.3) 148deg, transparent 156deg, transparent 168deg, rgba(245,166,35,0.3) 176deg, transparent 184deg, transparent 196deg, rgba(245,166,35,0.3) 204deg, transparent 212deg, transparent 224deg, rgba(245,166,35,0.3) 232deg, transparent 240deg, transparent 252deg, rgba(245,166,35,0.3) 260deg, transparent 268deg, transparent 280deg, rgba(245,166,35,0.3) 288deg, transparent 296deg, transparent 308deg, rgba(245,166,35,0.3) 316deg, transparent 324deg, transparent 336deg, rgba(245,166,35,0.3) 344deg, transparent 352deg);
  animation: spin 30s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.closing h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--warm-white);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.closing p {
  font-family: 'Instrument Serif', serif;
  color: var(--warm-gray);
  font-size: 1.15rem;
  line-height: 1.75;
}

/* Footer */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 3rem 0;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-brand { display: flex; flex-direction: column; gap: 0.3rem; }

.footer-name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--warm-white);
  letter-spacing: -0.02em;
}

.footer-tagline {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.footer-note {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content, .how-inner, .features-inner, .work-inner, .closing-inner, .footer-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero-content { padding-top: 6rem; padding-bottom: 4rem; }

  .step { grid-template-columns: 48px 1fr; gap: 1.25rem; }
  .step-num { font-size: 1.8rem; }

  .feature-grid { grid-template-columns: 1fr; }

  .work-stats { flex-direction: column; gap: 2rem; }
  .stat-divider { display: none; }
  .stat-label { max-width: none; }

  .footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-brand { align-items: center; }
}