:root {
  /* Material 3 Dark Scheme */
  --primary: #F0BE6D;
  --on-primary: #432C00;
  --primary-container: #604100;
  --on-primary-container: #FFDEAC;
  --secondary: #DBC3A1;
  --on-secondary: #3D2E16;
  --secondary-container: #55442A;
  --on-secondary-container: #F8DFBB;
  --tertiary: #B5CEA4;
  --on-tertiary: #213618;
  --tertiary-container: #374C2C;
  --on-tertiary-container: #D1EABF;
  --error: #FFB4AB;
  --on-error: #690005;
  --error-container: #93000A;
  --on-error-container: #FFDAD6;
  --background: #17130B;
  --on-background: #ECE1D4;
  --surface: #17130B;
  --on-surface: #ECE1D4;
  --surface-variant: #4E4539;
  --on-surface-variant: #D2C4B4;
  --outline: #9B8F80;
  --outline-variant: #4E4539;
  --scrim: #000000;
  --inverse-surface: #ECE1D4;
  --inverse-on-surface: #362F27;
  --inverse-primary: #7D570D;
  --surface-dim: #17130B;
  --surface-bright: #3F382F;
  --surface-container-lowest: #120D07;
  --surface-container-low: #201B13;
  --surface-container: #241F17;
  --surface-container-high: #2F2921;
  --surface-container-highest: #3A342B;

  /* Aliases */
  --bg: var(--surface);
  --bg-card: var(--surface-container);
  --fg: var(--on-surface);
  --muted: var(--on-surface-variant);
  --border: var(--outline-variant);
  --border-subtle: color-mix(in srgb, var(--outline-variant) 60%, transparent);
  --accent-glow: rgba(240, 190, 109, 0.2);
  --shadow-xl: 0 30px 60px -15px rgba(0,0,0,0.7), 0 15px 30px -10px rgba(0,0,0,0.5);
}

html.light {
  /* Material 3 Light Scheme */
  --primary: #7D570D;
  --on-primary: #FFFFFF;
  --primary-container: #FFDEAC;
  --on-primary-container: #604100;
  --secondary: #6E5C40;
  --on-secondary: #FFFFFF;
  --secondary-container: #F8DFBB;
  --on-secondary-container: #55442A;
  --tertiary: #4E6542;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #D1EABF;
  --on-tertiary-container: #374C2C;
  --error: #BA1A1A;
  --on-error: #FFFFFF;
  --error-container: #FFDAD6;
  --on-error-container: #93000A;
  --background: #FFF8F3;
  --on-background: #201B13;
  --surface: #FFF8F3;
  --on-surface: #201B13;
  --surface-variant: #EFE0CF;
  --on-surface-variant: #4E4539;
  --outline: #807567;
  --outline-variant: #D2C4B4;
  --inverse-surface: #362F27;
  --inverse-on-surface: #FBEFE2;
  --inverse-primary: #F0BE6D;
  --surface-dim: #E4D8CC;
  --surface-bright: #FFF8F3;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #FEF2E5;
  --surface-container: #F8ECDF;
  --surface-container-high: #F2E6D9;
  --surface-container-highest: #ECE1D4;

  --shadow-xl: 0 30px 60px -15px rgba(125, 87, 13, 0.15), 0 15px 30px -10px rgba(0,0,0,0.05);
  --accent-glow: rgba(125, 87, 13, 0.15);
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', 'Roboto', sans-serif;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}
button, input, select, textarea {
  color: inherit;
  font: inherit;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.font-display { font-family: 'Inter', sans-serif; letter-spacing: -0.02em; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.icon-mask {
  display: inline-block;
  vertical-align: middle;
  background-color: currentColor;
  width: 1.125rem;
  height: 1.125rem;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Ambient background */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(120px); }
.blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--primary), transparent 70%);
  top: -250px; right: -150px;
  opacity: 0.12;
  animation: drift1 22s ease-in-out infinite;
}
.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--tertiary), transparent 70%);
  bottom: -200px; left: -100px;
  opacity: 0.08;
  animation: drift2 28s ease-in-out infinite;
}
html.light .blob-1 { opacity: 0.15; }
html.light .blob-2 { opacity: 0.1; }
@keyframes drift1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-60px,60px);} }
@keyframes drift2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(60px,-50px);} }

/* M3 Top App Bar */
.header-blur {
  backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-bottom: 1px solid transparent;
}
nav a { position: relative; color: var(--muted); transition: color 0.25s; }
nav a:hover { color: var(--primary); }

/* M3 Buttons */
.btn-filled {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  border-radius: 999px; /* Pill shape */
  padding: 12px 24px;
  transition: all 0.2s;
  box-shadow: none;
}
.btn-filled:hover {
  box-shadow: 0 4px 12px var(--accent-glow);
  transform: translateY(-1px);
}
.btn-outlined {
  border: 1px solid var(--outline);
  color: var(--primary);
  background: transparent;
  border-radius: 999px;
  padding: 12px 24px;
  transition: all 0.2s;
}
.btn-outlined:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* M3 Cards */
.m3-card {
  background: var(--surface-container);
  border-radius: 28px; /* Expressive large shape */
  border: none;
  transition: background 0.3s, box-shadow 0.3s;
}
.m3-card-elevated {
  background: var(--surface-container-low);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.m3-card-hover:hover {
  background: var(--surface-container-high);
}

/* M3 Chips */
.m3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}
.m3-chip-assist {
  background: transparent;
  border-color: var(--outline-variant);
  color: var(--on-surface-variant);
}
.m3-chip-tertiary {
  background: color-mix(in srgb, var(--tertiary) 15%, transparent);
  color: var(--tertiary);
}
.m3-chip-primary {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}

/* Download tabs */
.tab-btn {
  transition: all 0.25s;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  padding: 12px 16px;
  font-weight: 500;
}
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.tab-btn:not(.active):hover { color: var(--on-surface); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp 0.4s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Steps connector */
.steps-rail { position: relative; }
.steps-rail::before {
  content: '';
  position: absolute;
  left: 27px; top: 30px; bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 30%, transparent) 50%, var(--tertiary) 100%);
}
.travel-dot {
  position: absolute;
  left: 24px;
  width: 8px; height: 8px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--primary);
  animation: travel 6s ease-in-out infinite;
}
@keyframes travel {
  0% { top: 30px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 38px); opacity: 0; }
}
.step-node {
  position: relative;
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-container-high);
  border: 2px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

/* Phone frame */
.phone-frame {
  position: relative;
  width: 300px;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--surface-container);
  border: 3px solid var(--outline-variant);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
}
.phone-frame:hover {
  transform: translateY(-8px);
}
.phone-frame img {
  width: 100%;
  display: block;
  aspect-ratio: 9 / 20;
  object-fit: cover;
}

/* Floating file badges */
.float-badge {
  background: var(--surface-container-high);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
}

/* Feature icon */
.feat-icon {
  width: 52px; height: 52px;
  border-radius: 18px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  display: flex; align-items: center; justify-content: center;
}
.feat-icon .material-symbols-outlined {
  font-size: 28px;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Mobile menu */
.mobile-menu { transform: translateX(100%); transition: transform 0.3s; }
.mobile-menu.open { transform: translateX(0); }

/* Form input */
.input-field {
  background: var(--surface-container-high);
  border: 1px solid var(--outline);
  color: var(--fg);
  border-radius: 12px;
  transition: border-color 0.25s;
}
.input-field:focus { border-color: var(--primary); outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Loading overlay styling */
.loader-overlay {
  position: fixed;
  inset: 0;
  background: var(--background);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--outline-variant);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface-variant);
}