:root {
  --bg: #0f1116;
  --text: #e6eaf2;
  --muted: #9aa5b1;
  --primary: #8be9fd;
  --accent: #ffb6c1;
  --success: #9cffd0;
  --glow: rgba(139, 233, 253, 0.3);
  --wood1: #c89f83;
  --wood2: #a17457;
  --wood3: #7a5037;

  --gradient-aurora: radial-gradient(1200px 1200px at 20% 30%, #92f 0%, transparent 50%),
                     radial-gradient(1000px 1000px at 80% 20%, #3ef 0%, transparent 60%),
                     radial-gradient(800px 800px at 40% 80%, #fa9 0%, transparent 60%);
}

[data-theme="dark"] {
  --bg: #0b0d12;
  --text: #eef3ff;
  --muted: #aab3c0;
  --primary: #7adffd;
  --accent: #ffc1d5;
  --success: #baffde;
  --glow: rgba(122, 223, 253, 0.35);
}

* { box-sizing: border-box }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Ubuntu", "Cantarell"; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }

/* Hide utility */
.hidden {
  display: none !important;
}

.btn {
  border: 0; padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #0b0d12; font-weight: 600; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(0,0,0,0), 0 6px 24px -8px var(--glow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 40px -12px var(--glow); }
.btn:active { transform: scale(.96); }
.btn.ghost { background: transparent; border: 1px solid var(--muted); color: var(--text); }
.btn.primary { background: linear-gradient(135deg, var(--primary), #c7f0ff); }
.btn.success { background: linear-gradient(135deg, var(--success), #eafff4); }

.cta { --ripple: radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,.6), transparent 35%); }
.cta::after {
  content:""; position:absolute; inset:0; background: var(--ripple); opacity:0; transition: opacity .35s ease;
}
.cta:hover::after { opacity: 1; }

/* Bounce on click */
#ctaBtn:active { animation: bounce .4s cubic-bezier(.28,.84,.42,1); }
@keyframes bounce { 0%,100%{ transform: translateY(0)} 40%{ transform: translateY(-6px)} 70%{ transform: translateY(2px)} }

.hero { position: relative; min-height: 72vh; display: grid; place-items: center; padding-top: 48px; }
.aurora-bg { position: absolute; inset: 0; overflow: hidden; }
.aurora-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(8px) saturate(1.2) opacity(.5); }
#auroraCanvas { position:absolute; inset:0; width:100%; height:100%; }
.wood-overlay {
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(99,78,55,.15) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.05));
  mix-blend-mode: soft-light; pointer-events:none;
}

.logo-glow {
  font-size: clamp(28px, 7vw, 64px);
  letter-spacing: .6px;
  background: linear-gradient(90deg, #fff, #e3f7ff);
  -webkit-background-clip: text; color: transparent;
  text-shadow: 0 0 16px rgba(255,255,255,.35), 0 0 48px var(--glow);
}
.subtitle { max-width: 680px; text-align: center; margin: 12px auto 18px; color: var(--muted); }

.trust { display:flex; gap:12px; justify-content:center; padding: 16px; flex-wrap:wrap; }
.badge { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); box-shadow: 0 10px 34px -16px var(--glow); }
.badge-icon { font-size: 18px; }

.stock { padding: 32px 16px; }
.stock h2, .testimonials h2, .jokes h2, .map h2, .pricing h2, .gallery h2, .scheduler h2, .analytics h2, .timeline h2, .wood-selector h2, .season h2, .community h2, .offline h2, .ar h2 { text-align:center; margin-bottom: 16px; }

.carousel { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding: 8px; }
.carousel::-webkit-scrollbar { display:none; }
.card {
  min-width: 72vw; max-width: 420px; scroll-snap-align:center; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); border-radius: 20px; overflow:hidden;
  box-shadow: 0 10px 34px -16px var(--glow);
}
.card img { aspect-ratio: 4/3; object-fit: cover; }
.card h3 { margin: 8px 12px 4px; }
.card p { margin: 0 12px 12px; color: var(--muted); }
.carousel-controls { display:flex; gap:8px; justify-content:center; padding-top: 8px; }

.testimonials { padding: 24px 16px; }
.testi-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.testi { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 12px; box-shadow: 0 10px 34px -16px var(--glow); }
.stars { color: #ffd36b; letter-spacing: 2px; }
.avatar { width: 56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,.2); }
.avatar.animated { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

.jokes { padding: 24px 16px; text-align:center; }
.joke { font-size: 18px; margin-bottom: 12px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 99; }

.map { padding: 24px 16px; }
.map-wrap { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 34px -16px var(--glow); }
.map iframe { width:100%; height: 320px; border:0; filter: saturate(1.1) contrast(1.05) brightness(.95); }
.pastel-marker { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.marker-pin {
  width: 20px; height:20px; border-radius: 50% 50% 50% 0; transform: rotate(45deg);
  background: linear-gradient(135deg, #c7f0ff, #ffcfe4);
  box-shadow: 0 0 0 6px rgba(255,255,255,.4), 0 0 24px var(--glow);
}
.marker-pulse { width: 60px; height:60px; border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0%{transform:scale(.8); opacity:.8} 100%{transform:scale(1.4); opacity:0} }

.contact { padding: 24px 16px; }
.contact-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
.whatsapp { display:inline-block; }
.qr-wrap { display:grid; place-items:center; border-radius: 12px; overflow:hidden; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.qr-wrap img { width: 220px; height: 220px; object-fit: contain; }
.animated-border { position: relative; }
.animated-border::before {
  content:""; position:absolute; inset:-3px; border-radius: 16px;
  background: conic-gradient(from 0deg, #c7f0ff, #ffcfe4, #c7f0ff);
  animation: spin 3s linear infinite; filter: blur(4px); z-index:-1;
}
.animated-border.small img { width: 120px; height:120px; }
@keyframes spin { to { transform: rotate(360deg) } }

.pricing { padding: 24px 16px; }
.price-form { display:grid; gap:12px; max-width:520px; margin: 0 auto; }
.price-form label { display:grid; gap:6px; }
.price-result { display:flex; gap:8px; align-items:center; font-size: 18px; }

.gallery { padding: 24px 16px; }
.ba-wrap { position:relative; border-radius: 16px; overflow:hidden; box-shadow: 0 10px 34px -16px var(--glow); }
.ba.before, .ba.after { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba.after { clip-path: inset(0 0 0 50%); }
.ba-slider { width: 100%; margin-top: 8px; }

.scheduler { padding: 24px 16px; }
.appt-form { display:grid; gap:12px; max-width:520px; margin:0 auto; }
.appt-form input, .appt-form select { padding:10px; border-radius: 12px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: var(--text); }

.analytics { padding: 24px 16px; }
.charts { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:16px; }

.timeline { padding: 24px 16px; }
.milestones { display:grid; gap: 12px; }
.milestone { display:flex; align-items:center; gap:12px; }
.dot.glow { width: 14px; height:14px; border-radius:50%; background: radial-gradient(circle, #fff, #c7f0ff); box-shadow: 0 0 24px var(--glow); }
.content { color: var(--muted); }

.wood-selector { padding: 24px 16px; text-align:center; }
.btn.chip { border-radius: 999px; padding: 8px 12px; font-size: 14px; }

.season { padding: 24px 16px; text-align:center; color: var(--muted); }

.community { padding: 24px 16px; }
.community-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:8px; }
.community-grid img { border-radius: 12px; box-shadow: 0 10px 24px -14px var(--glow); }

.offline { padding: 24px 16px; text-align:center; }

.ar { padding: 24px 16px; }
.ar-wrap { display:grid; gap:12px; }
#camera { width:100%; border-radius: 16px; box-shadow: 0 10px 34px -16px var(--glow); background: #000; }
.ar-stage { position:relative; min-height: 260px; border-radius: 12px; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.furn {
  position:absolute; left:20px; top:20px; width: 160px; height: 120px;
  background: linear-gradient(135deg, #f9d4b9, #c89f83);
  border: 2px solid rgba(0,0,0,.2); border-radius: 8px; box-shadow: 0 12px 28px -14px rgba(0,0,0,.5);
  cursor: grab;
}
.furn:active { cursor: grabbing; }
.furn::after { content:"↔ ↕"; position:absolute; right:6px; bottom:6px; font-size:12px; color:#0008; }

.footer { padding: 24px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.footer-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.footer a:hover { text-decoration: underline; }

.bottom-nav {
  position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  display:flex; gap:16px; padding:8px 10px; border-radius: 999px; z-index: 9;
  box-shadow: 0 10px 34px -16px var(--glow);
}
.nav-btn { display:flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; background: transparent; color: var(--text); border: 0; cursor: pointer; }
.nav-btn .label { display:none; }
@media (min-width: 520px) { .nav-btn .label { display:inline } }

.icon { width: 20px; height: 20px; display:inline-block; position: relative; }
.icon::before, .icon::after { content:""; position:absolute; inset:0; }
.icon.hammer::before { background: conic-gradient(from 180deg, #c7f0ff, #ffcfe4); border-radius: 4px; clip-path: polygon(0 30%, 60% 30%, 60% 20%, 100% 20%, 100% 40%, 60% 40%, 60% 100%, 0 100%); }
.icon.saw::before { background: linear-gradient(90deg, #c7f0ff, #ffcfe4); clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); }
.icon.saw::after { background: repeating-linear-gradient(90deg, transparent 0 6px, #fff 6px 8px); clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); }
.icon.wood::before { background: linear-gradient(135deg, #f9d4b9, #c89f83); border-radius: 4px; }
.nav-btn:hover .icon { animation: pulseIcon .8s ease-out; }
@keyframes pulseIcon { 0%{ transform: scale(1)} 50%{ transform: scale(1.2)} 100%{ transform: scale(1)} }

.dark-toggle {
  position: fixed; right: 12px; top: 12px; z-index: 10;
  background: rgba(255,255,255,.08); color: var(--text);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  padding: 10px; cursor: pointer; box-shadow: 0 10px 34px -16px var(--glow);
}

/* Onboarding */
.onboarding { position: fixed; inset: 0; display: grid; place-items: center; backdrop-filter: blur(6px); background: rgba(0,0,0,.35); z-index: 100; }
.onboarding.hidden { display:none; }
.onboarding-step { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px; max-width: 420px; box-shadow: 0 10px 34px -16px var(--glow); }
.onboarding-step.hidden { display:none; }

/* Seasonal theme tokens (applied by JS) */
.spring { --gradient-aurora: radial-gradient(1200px 1200px at 20% 30%, #c6ffdd 0%, transparent 50%), radial-gradient(1000px 1000px at 80% 20%, #fbd786 0%, transparent 60%), radial-gradient(800px 800px at 40% 80%, #f7797d 0%, transparent 60%); }
.autumn { --gradient-aurora: radial-gradient(1200px 1200px at 20% 30%, #ffb88c 0%, transparent 50%), radial-gradient(1000px 1000px at 80% 20%, #de6262 0%, transparent 60%), radial-gradient(800px 800px at 40% 80%, #ffd194 0%, transparent 60%); }

/* Responsive tweaks */
@media (min-width: 720px) {
  .card { min-width: 340px; }
}