/* ====================================================
   ENVELIE V4 — SHARED STYLESHEET
   ==================================================== */

/* WARM WOOD THEME */
[data-theme="warm-wood"] {
  --background: #e8ddd0;
  --surface: #e8ddd0;
  --surface-container-lowest: #f5f0e8;
  --surface-container-low: #ede4d8;
  --surface-container: #e2d6c8;
  --on-surface: #180f08;
  --on-surface-variant: #5f4d3e;
  --on-background: #180f08;
  --outline: #6e5a47;
  --outline-variant: #bda88f;
  --primary: #5f3e00;
  --on-primary: #fff8ee;
  --primary-container: #f6d493;
  --on-primary-fixed: #170e00;
  --primary-fixed-dim: #7b5200;
  --secondary: #725a35;
  --secondary-container: #f0d5ae;
  --secondary-fixed-dim: #8a6635;
  --tertiary: #7b4300;
  --tertiary-container: #efc17c;
  --warm: #8f3d1f;
  --warm-container: #f4c0aa;
  --warm-fixed-dim: #a94f2d;
  --sage: #315f54;
  --deep-navy: #170e00;
  --error: #8f0014;
  --font-sans: 'Nunito', sans-serif;
  --font-display: 'Nunito', sans-serif;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --border-width: 1.5px;
  --body-glow-1: rgb(120 78 30 / 0.22);
  --body-glow-2: rgb(95 62 22 / 0.14);
  --body-overlay: linear-gradient(180deg, rgb(82 48 12 / 0.06), transparent 30%);
  --hero-glow-1: rgb(110 68 24 / 0.18);
  --hero-glow-2: rgb(82 48 12 / 0.10);
  --hero-grad: linear-gradient(116deg, #170e00 8%, #7b5200 56%, #c07830 100%);
  --logo-grad: linear-gradient(135deg, #170e00 0%, #7b5200 58%, #a94f2d 100%);
  --aurora-bg: linear-gradient(135deg, #c4a058, #d4b878, #e2cc92, #d4b878, #c4a058);
  --aurora-shadow: rgb(140 100 36 / 0.26);
  --aurora-shadow-hover: rgb(140 100 36 / 0.38);
  --step-num-from: #d4b878;
  --step-num-to: #c4a058;
  --step-shadow: rgb(140 100 36 / 0.24);
  --particle-mid: rgb(140 100 36 / 0.72);
  --particle-edge: rgb(140 100 36 / 0);
  --particle-glow: rgb(140 100 36 / 0.34);
  --font-accent: 'Nunito', sans-serif;
  --border-width-strong: 2px;
}

/* WARM DARK THEME */
[data-theme="warm-dark"] {
  --background: #0d0906;
  --surface: #0d0906;
  --surface-container-lowest: #0a0705;
  --surface-container-low: #1a1410;
  --surface-container: #221a14;
  --on-surface: #f5efe8;
  --on-surface-variant: #c8b9aa;
  --on-background: #ede5dc;
  --outline: #7a6e62;
  --outline-variant: #4a3e34;
  --primary: #e8c17a;
  --on-primary: #271900;
  --primary-container: #c49528;
  --on-primary-fixed: #271900;
  --primary-fixed-dim: #f0d68a;
  --secondary: #b8a47c;
  --secondary-container: #4a3820;
  --secondary-fixed-dim: #d4b88a;
  --tertiary: #d4a54a;
  --tertiary-container: #4a3000;
  --warm: #d4896a;
  --warm-container: #4a2010;
  --warm-fixed-dim: #e8a080;
  --sage: #7a9e94;
  --deep-navy: #ede5dc;
  --error: #ffb4ab;
  --font-sans: 'Nunito', sans-serif;
  --font-display: 'Nunito', sans-serif;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --border-width: 1.5px;
  --body-glow-1: rgb(196 149 40 / 0.16);
  --body-glow-2: rgb(212 137 106 / 0.08);
  --body-overlay: linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 24%);
  --hero-glow-1: rgb(196 149 40 / 0.20);
  --hero-glow-2: rgb(212 137 106 / 0.10);
  --hero-grad: linear-gradient(116deg, #c49528 8%, #f0d68a 92%);
  --logo-grad: linear-gradient(135deg, #f0d68a 0%, #d4b88a 60%, #e8c17a 100%);
  --aurora-bg: linear-gradient(135deg, #c49528, #e8c17a, #f0d68a, #e8c17a, #c49528);
  --aurora-shadow: rgb(196 149 40 / 0.30);
  --aurora-shadow-hover: rgb(196 149 40 / 0.48);
  --step-num-from: #f0d68a;
  --step-num-to: #d4b88a;
  --step-shadow: rgb(196 149 40 / 0.28);
  --particle-mid: rgb(240 214 138 / 0.85);
  --particle-edge: rgb(240 214 138 / 0);
  --particle-glow: rgb(240 214 138 / 0.55);
  --font-accent: 'Nunito', sans-serif;
  --border-width-strong: 2px;
}

/* MOTION */
:root {
  --dur-instant: 50ms;
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--background); scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 12% 8%, var(--body-glow-1), transparent 50%),
    radial-gradient(circle at 88% 6%, var(--body-glow-2), transparent 44%),
    var(--body-overlay),
    var(--background);
  background-attachment: fixed, fixed, fixed, fixed;
  color: var(--on-background);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
p { overflow-wrap: break-word; text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--primary-container) 30%, transparent); }

/* LAYOUT */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); position: relative; z-index: 2; }
.narrow { max-width: 780px; margin: 0 auto; }
.section { padding: 48px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* NAV */
.nav-bar {
  position: sticky; top: 0; z-index: 50; height: 64px;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
}
.nav-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav-link { font-size: 14px; font-weight: 600; color: var(--on-surface-variant); font-family: var(--font-sans); transition: color 150ms; }
.nav-link:hover, .nav-link.active { color: var(--primary); }
.lw-logo {
  font-family: var(--font-sans); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em;
  background: var(--logo-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* THEME TOGGLE */
.theme-toggle { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.theme-toggle-track {
  width: 44px; height: 26px; border-radius: 9999px;
  background: var(--surface-container); border: 1.5px solid var(--outline-variant);
  position: relative; transition: background 0.25s, border-color 0.25s;
}
[data-theme="warm-dark"] .theme-toggle-track {
  background: color-mix(in srgb, var(--primary-fixed-dim) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary-fixed-dim) 38%, transparent);
}
.theme-toggle-thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--outline-variant);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s;
  display: flex; align-items: center; justify-content: center; color: var(--surface-container-lowest);
}
[data-theme="warm-dark"] .theme-toggle-thumb { transform: translateX(18px); background: var(--primary-fixed-dim); color: var(--on-primary-fixed); }
.t-sun, .t-moon { position: absolute; transition: opacity 0.18s, transform 0.18s; }
.t-sun { opacity: 1; transform: scale(1); }
.t-moon { opacity: 0; transform: scale(0.5); }
[data-theme="warm-dark"] .t-sun { opacity: 0; transform: scale(0.5); }
[data-theme="warm-dark"] .t-moon { opacity: 1; transform: scale(1); }

/* LANG PILL */
.lang-pill { display: inline-flex; gap: 2px; background: var(--surface-container); border-radius: 9999px; padding: 3px; }
.lang-pill span { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 9999px; color: var(--on-surface-variant); cursor: pointer; user-select: none; transition: all 0.18s; }
.lang-pill span.on { background: var(--primary); color: var(--on-primary); }
.lang-pill span:not(.on):hover { color: var(--on-surface); }

/* FOOTER */
.site-footer {
  padding: 34px 0 44px; text-align: center;
  border-top: 1.5px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
  margin-top: 28px; position: relative; z-index: 2;
  background: color-mix(in srgb, var(--surface-container-low) 85%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
[data-theme="warm-dark"] .site-footer {
  background: color-mix(in srgb, var(--surface-container-lowest) 80%, transparent);
  border-top-color: color-mix(in srgb, var(--outline-variant) 25%, transparent);
}
.footer-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 14px 0 12px; }
.footer-links a { font-size: 14px; color: var(--on-surface-variant); transition: color 150ms; }
.footer-links a:hover { color: var(--primary); }

/* GLASS PANEL */
.glass-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgb(255 253 249 / 0.9), rgb(238 222 202 / 0.78)),
    color-mix(in srgb, var(--surface-container-low) 92%, transparent);
  box-shadow:
    0 24px 64px rgba(53, 31, 7, 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.78),
    inset 0 -1px 0 rgb(95 62 0 / 0.12);
  backdrop-filter: blur(1.5px) brightness(1.02);
  -webkit-backdrop-filter: blur(1.5px) brightness(1.02);
  border: 1.5px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
}
[data-theme="warm-dark"] .glass-panel {
  background:
    linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%),
    color-mix(in srgb, var(--surface-container) 52%, transparent);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  backdrop-filter: blur(14px) saturate(135%) brightness(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(135%) brightness(1.02);
  border-color: color-mix(in srgb, var(--outline-variant) 22%, transparent);
}

/* CARD */
.card {
  position: relative;
  background: linear-gradient(169deg, rgba(255,252,246,0.68) 0%, rgb(255 250 240 / 0%) 55%, rgba(252,246,234,0.48) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(1.5px) brightness(1.06);
  -webkit-backdrop-filter: blur(1.5px) brightness(1.06);
  box-shadow: 0 16px 38px -14px rgba(53,31,7,0.18), 0 4px 12px -6px rgba(82,48,12,0.12), inset 0 0 0 1px rgba(255,255,255,0.70);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 24px 52px -14px rgba(53,31,7,0.24), inset 0 0 0 1px rgba(255,255,255,0.78); }
[data-theme="warm-dark"] .card {
  background: linear-gradient(155deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px) saturate(135%) brightness(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(135%) brightness(1.02);
}
[data-theme="warm-dark"] .card:hover { background: linear-gradient(155deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.04) 100%); }

/* BUTTONS */
@keyframes btn-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.aurora-btn {
  background: var(--aurora-bg); background-size: 300% 300%; animation: btn-shimmer 6s ease-in-out infinite;
  color: var(--on-primary-fixed); border: 1.5px solid rgb(255 255 255 / 0.22);
  box-shadow: 0 6px 22px var(--aurora-shadow); border-radius: var(--radius-lg);
  height: 52px; padding: 0 2rem; font-family: var(--font-sans); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.01em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: transform 160ms ease, box-shadow 200ms ease;
}
.aurora-btn:hover { animation-duration: 3s; box-shadow: 0 10px 32px var(--aurora-shadow-hover); transform: translateY(-1px); }
.aurora-btn:active { transform: scale(0.97) translateY(0); transition-duration: 50ms; }
[data-theme="warm-wood"] .aurora-btn {
  background: linear-gradient(135deg, #4a2e00, #5f3e00, #7a5000, #5f3e00, #4a2e00);
  background-size: 180% 180%; animation-duration: 12s;
  color: #fff8ee; border-color: rgb(255 255 255 / 0.18); box-shadow: 0 6px 22px rgb(60 36 0 / 0.32);
}
.btn-secondary {
  height: 44px; padding: 0 1.5rem;
  border: 1.5px solid color-mix(in srgb, var(--primary) 70%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary); border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: border-color 150ms, background 150ms, transform 150ms;
}
.btn-secondary:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); transform: translateY(-1px); }
.btn-secondary:active { transform: scale(0.97); transition-duration: 50ms; }

/* EYEBROW */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse-glow 2.2s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 5px transparent; } }

/* ICON TILE */
.icon-tile { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--primary-container) 22%, transparent); color: var(--primary); }
.icon-tile.warm { background: color-mix(in srgb, var(--warm-container) 22%, transparent); color: var(--warm); }
.icon-tile.sage { background: color-mix(in srgb, var(--sage) 14%, transparent); color: var(--sage); }
.icon-tile.tertiary { background: color-mix(in srgb, var(--tertiary-container) 22%, transparent); color: var(--tertiary); }

/* CHIPS */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 9999px; background: color-mix(in srgb, var(--surface-container) 72%, transparent); border: 1.5px solid color-mix(in srgb, var(--outline-variant) 80%, transparent); color: var(--on-surface); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; }

/* FORM FIELDS */
.field label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--on-surface); margin-bottom: 6px; font-family: var(--font-sans); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0 14px; border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
  background: color-mix(in srgb, var(--surface-container-lowest) 62%, transparent);
  color: var(--on-surface); font-family: var(--font-sans); font-size: 0.9375rem;
  outline: none; transition: border-color 160ms, box-shadow 200ms;
}
.field input { min-height: 48px; }
.field textarea { padding: 12px 14px; resize: vertical; min-height: 100px; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--outline); }

/* NATIVE FORM CONTROLS */
select, input[type="number"] {
  min-height: 48px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 160ms, box-shadow 200ms, background-color 160ms;
}
select:focus, input[type="number"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 42px 0 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%2380715e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}
select option {
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font-family: var(--font-sans);
}
input[type="number"] {
  padding: 0 14px;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* HERO */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 10% 20%, var(--hero-glow-1), transparent 50%), radial-gradient(circle at 90% 10%, var(--hero-glow-2), transparent 44%);
  -webkit-mask-image: linear-gradient(to bottom, #000 22%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 22%, transparent 90%);
}
.hero-h1 {
  font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 52px); line-height: 1.12;
  letter-spacing: -0.025em; font-weight: 700;
  background: var(--hero-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* TYPOGRAPHY */
.s-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 600; color: var(--on-background); line-height: 1.18; }
.body-lg { font-size: 1.125rem; line-height: 1.65; color: var(--on-surface-variant); }
.body-md { font-size: 1rem; line-height: 1.55; color: var(--on-surface-variant); }
.label-sm { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.045em; color: var(--on-surface); }

/* DOC SECTIONS */
.doc-section { padding: 28px 0 28px 28px; border-left: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); margin-bottom: 8px; }
.doc-number { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; }
.doc-heading { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--on-surface); margin-bottom: 12px; line-height: 1.3; }
.doc-text { font-size: 15px; line-height: 1.7; color: var(--on-surface-variant); margin-bottom: 10px; }
.doc-text:last-child { margin-bottom: 0; }
.doc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--on-surface-variant); }
.doc-list li::before { content: "—"; color: var(--primary); font-weight: 700; flex-shrink: 0; margin-top: 2px; }

/* FINAL CARD */
@property --glow-top { syntax: '<color>'; initial-value: transparent; inherits: false; }
@property --glow-right { syntax: '<color>'; initial-value: transparent; inherits: false; }
@property --glow-bottom { syntax: '<color>'; initial-value: transparent; inherits: false; }
@property --glow-left { syntax: '<color>'; initial-value: transparent; inherits: false; }
.final-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 45%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 30px 60px -12px rgba(0,0,0,0.60), inset 0 0 0 1px rgba(255,255,255,0.70),
    inset 0 28px 40px -22px var(--glow-top), inset 0 -28px 40px -22px var(--glow-bottom),
    inset 28px 0 40px -22px var(--glow-left), inset -28px 0 40px -22px var(--glow-right);
  animation: lw-glow-top 11s linear infinite, lw-glow-left 11s linear infinite, lw-glow-bottom 11s linear infinite, lw-glow-right 11s linear infinite;
}
@keyframes lw-glow-top { 0%,100%{--glow-top:rgba(169,120,48,0.60)} 25%{--glow-top:rgba(130,85,35,0.22)} 50%{--glow-top:transparent} 75%{--glow-top:rgba(130,85,35,0.22)} }
@keyframes lw-glow-left { 0%,100%{--glow-left:rgba(130,85,35,0.22)} 25%{--glow-left:rgba(169,120,48,0.60)} 50%{--glow-left:rgba(130,85,35,0.22)} 75%{--glow-left:transparent} }
@keyframes lw-glow-bottom { 0%,100%{--glow-bottom:transparent} 25%{--glow-bottom:rgba(130,85,35,0.22)} 50%{--glow-bottom:rgba(169,120,48,0.60)} 75%{--glow-bottom:rgba(130,85,35,0.22)} }
@keyframes lw-glow-right { 0%,100%{--glow-right:rgba(130,85,35,0.22)} 25%{--glow-right:transparent} 50%{--glow-right:rgba(130,85,35,0.22)} 75%{--glow-right:rgba(169,120,48,0.60)} }
[data-theme="warm-wood"] .final-card { background: linear-gradient(160deg, rgba(255,252,246,0.72) 0%, rgba(255,250,240,0.60) 45%, rgba(252,246,234,0.50) 100%); border-color: rgba(255,255,255,0.55); backdrop-filter: blur(2.9px) brightness(1.06); }

/* BACKGROUND BLOBS */
.lw-bg-anim { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
[data-theme="warm-wood"] .blob.b1, [data-theme="warm-wood"] .blob.b2 { display: none; }
[data-theme="warm-dark"] .blob.b1 { width: 85%; height: 85%; top: -18%; left: -12%; background: radial-gradient(circle, rgb(196 149 40 / 0.32) 0%, rgb(196 149 40 / 0.08) 45%, transparent 68%); filter: blur(64px); animation: blob-drift-1 22s ease-in-out infinite alternate; }
[data-theme="warm-dark"] .blob.b2 { width: 65%; height: 65%; bottom: -12%; right: -12%; background: radial-gradient(circle, rgb(212 137 106 / 0.18) 0%, rgb(212 137 106 / 0.04) 50%, transparent 68%); filter: blur(84px); animation: blob-drift-2 32s ease-in-out infinite alternate; }
@keyframes blob-drift-1 { 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(10%,5%) scale(1.07)} 50%{transform:translate(20%,-3%) scale(0.96)} 75%{transform:translate(14%,12%) scale(1.04)} 100%{transform:translate(6%,8%) scale(1.02)} }
@keyframes blob-drift-2 { 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(-7%,-6%) scale(1.05)} 50%{transform:translate(-16%,4%) scale(0.94)} 75%{transform:translate(-10%,-12%) scale(1.07)} 100%{transform:translate(-4%,-7%) scale(0.98)} }

/* WOVEN PATTERN BACKGROUND */
.lw-pattern {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("../uploads/Frame 77.png");
  background-repeat: no-repeat; background-position: center center; background-size: cover;
  opacity: 0.12;
}
[data-theme="warm-dark"] .lw-pattern { opacity: 0.13; }
[data-theme="warm-wood"] .lw-pattern { opacity: 0.16; filter: sepia(0.25) saturate(0.85); }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1), transform 400ms cubic-bezier(0, 0, 0.2, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; }
}

/* ===== LW-FE-182: Mobile responsive fixes (≤480px) ===== */
@media (max-width: 480px) {
  /* Prevent residual horizontal overflow */
  html { overflow-x: hidden; }

  /* Hide text nav links — keep logo and controls visible */
  .nav-link { display: none !important; }

  /* Sidebar+content two-column grid → single column */
  .mob-page-grid {
    grid-template-columns: 1fr !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 16px !important;
  }

  /* Sidebar: full width + remove sticky offset when stacked above content */
  .mob-sidebar {
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }

  /* 4-column stat rows → 2 columns */
  .mob-4col { grid-template-columns: repeat(2, 1fr) !important; }

  /* 3-column grids → 1 column */
  .mob-3col { grid-template-columns: 1fr !important; }

  /* 2-column grids → 1 column */
  .mob-2col { grid-template-columns: 1fr !important; }
}

/* ================================================================
   MOBILE SCROLL PERFORMANCE  (≤767 px)
   backdrop-filter blur on many elements causes scroll jank on
   mobile GPUs. On mobile we reduce radii or disable where the
   visual difference is imperceptible. Desktop is unchanged.
   ================================================================ */
@media (max-width: 767px) {
  /* ── SCROLL PERFORMANCE (real cause of mobile jank) ── */
  body { background-attachment: scroll; }   /* stop full-viewport repaint per scroll frame */
  .blob { animation: none !important; }     /* freeze blur(64-84px) ambient blobs (beats theme-gated rule) */

  /* Cards and glass panels: keep a light frosted blur on mobile. */
  .card,
  .glass-panel,
  [data-theme="warm-dark"] .card,
  [data-theme="warm-dark"] .glass-panel {
    backdrop-filter: blur(4px) saturate(120%) brightness(1.02);
    -webkit-backdrop-filter: blur(4px) saturate(120%) brightness(1.02);
  }
  /* Sticky nav: reduce from 24 px to 10 px — one element, still frosted. */
  .nav-bar {
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
  }
  /* Footer: reduce from 20 px to 8 px. */
  .site-footer {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--surface-container-low) 96%, transparent);
  }
}