/*=============== CSS CUSTOM PROPERTIES ===============*/
:root {
  /* Core palette — Coal, Salt, Indigo */
  --coal-900: #0B0808;
  --coal-800: #130E0E;
  --coal-700: #1B1616;
  --coal-600: #251E1E;
  --coal-500: #302626;
  --coal-400: #3D3030;

  --salt-100: #F4EFEC;
  --salt-200: #E4DDDA;
  --salt-300: #BEB5B2;
  --salt-400: #8E8582;
  --salt-500: #6A6260;
  --salt-600: #463E3C;

  /* Sky blue accent */
  --sky-200: #BAE6FD;
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-700: #0369A1;

  /* Theme tokens — dark default */
  --bg:           var(--coal-900);
  --bg-subtle:    var(--coal-800);
  --bg-raised:    var(--coal-700);
  --bg-overlay:   var(--coal-600);
  --border:       var(--coal-500);
  --border-hi:    var(--coal-400);

  --fg:           var(--salt-100);
  --fg-2:         var(--salt-300);
  --fg-3:         var(--salt-400);
  --fg-4:         var(--salt-500);

  --accent:       var(--sky-500);
  --accent-hi:    var(--sky-400);
  --accent-lo:    var(--sky-600);
  --accent-bg:    rgba(14, 165, 233, 0.1);
  --accent-glow:  rgba(14, 165, 233, 0.25);

  --nav-bg:       rgba(11, 8, 8, 0.9);
  --nav-h:        70px;

  /* Typography */
  --f-display: 'Outfit', system-ui, sans-serif;
  --f-ui:      'Outfit', system-ui, sans-serif;
  --f-body:    'Outfit', system-ui, sans-serif;

  /* Motion */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.85, 0.35);

  /* Layout */
  --max-w:        1200px;
  --pad:          clamp(1.25rem, 4vw, 2.5rem);
  --section-py:   clamp(5rem, 10vw, 9rem);
}

[data-theme="light"] {
  --bg:           #F8F4F2;
  --bg-subtle:    #EDE7E4;
  --bg-raised:    #FFFFFF;
  --bg-overlay:   #E2DAD6;
  --border:       #D6CCC8;
  --border-hi:    #C4B8B4;

  --fg:           #1A1212;
  --fg-2:         #54423E;
  --fg-3:         #7A6864;
  --fg-4:         #A09088;

  --accent:       #0284C7;
  --accent-hi:    #0EA5E9;
  --accent-lo:    #0369A1;
  --accent-bg:    rgba(2, 132, 199, 0.08);
  --accent-glow:  rgba(2, 132, 199, 0.2);

  --nav-bg:       rgba(248, 244, 242, 0.92);
}

/*=============== RESET & BASE ===============*/
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  font-weight: 300;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
::selection { background: var(--accent); color: #fff; }

/*=============== UTILITIES ===============*/
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.section { padding: var(--section-py) 0; }

.label {
  font-family: var(--f-ui);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.label::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.display em, h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--accent);
  font-variation-settings: 'opsz' 72, 'WONK' 1;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.82rem 1.75rem;
  font-family: var(--f-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 1px;
  transition: all 0.3s var(--ease);
}
.btn i { font-size: 0.82em; transition: transform 0.3s var(--ease); }

.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover {
  background: var(--accent-hi);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--accent-glow);
}
.btn--solid:hover i { transform: translateX(3px); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-hi);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.btn--text {
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-family: var(--f-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  gap: 0.6rem;
}
.btn--text i { transition: transform 0.3s var(--ease); }
.btn--text:hover i { transform: translateX(5px); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }
.reveal-delay-5 { transition-delay: 0.58s; }