html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.kbd-ring:focus{outline:3px solid var(--ring);outline-offset:3px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{filter:brightness(1.05)}
.badge{border:1px solid var(--border);background:rgba(255,255,255,.04)}
.link-soft{color:var(--muted)}
.link-soft:hover{color:var(--text)}
.backdrop{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* Drawer (slides from RIGHT) */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55)}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(86vw,380px);
  background:color-mix(in srgb, var(--bg) 92%, #000 8%);
  border-left:1px solid var(--border);
  box-shadow:var(--shadow);
  transform:translateX(105%);
  transition:transform .22s ease;
  will-change:transform;
}
.drawer[data-open="true"]{transform:translateX(0)}
body.no-scroll{overflow:hidden}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:1rem;}
.modal[data-open="true"]{display:flex}
.modal-panel{
  width:min(92vw,460px);
  background:color-mix(in srgb, var(--bg) 88%, #000 12%);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.modal-panel{position:relative}

/* Floating Order button */
.fab-wrap{
  position:fixed; left:0; right:0; bottom:16px;
  display:flex; justify-content:center;
  pointer-events:none; z-index:60;
  opacity:0; transform:translateY(10px);
  transition:opacity .18s ease, transform .18s ease;
}
.fab-wrap[data-show="true"]{opacity:1; transform:translateY(0)}
.fab{pointer-events:auto; box-shadow:var(--shadow); border:1px solid var(--border)}

/* HERO media */
.hero{position:relative;border-bottom:1px solid var(--border)}
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-media::after{content:"";position:absolute; inset:0;background:linear-gradient(120deg, rgba(0,0,0,.72), rgba(0,0,0,.35) 55%, rgba(0,0,0,.75))}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero-inner{position:relative}

/* Simple entrance animation */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;animation:riseIn .7s ease forwards}
.reveal.d1{animation-delay:.05s}
.reveal.d2{animation-delay:.12s}
.reveal.d3{animation-delay:.18s}
.reveal.d4{animation-delay:.24s}

/* Form inputs */
.field{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.85rem .95rem;
  width:100%;
}
.field:focus{outline:3px solid var(--ring); outline-offset:2px}


/* Scroll reveal animations */
.scroll-reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
.scroll-reveal.is-visible{opacity:1; transform:translateY(0)}
.scroll-reveal.delay-1{transition-delay:.06s}
.scroll-reveal.delay-2{transition-delay:.12s}
.scroll-reveal.delay-3{transition-delay:.18s}





/* Drawer links – refined & professional */
.drawer-link{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:0.9rem 1rem;
  border-radius:1rem;
  color:var(--text);
  background:transparent;
  font-weight:300;
  font-size:0.88rem;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.drawer-link:hover{background:rgba(255,255,255,.06)}
.drawer-link:focus{outline:3px solid var(--ring); outline-offset:2px}
.drawer-section-title{color:var(--muted); font-size:.9rem; font-weight:700; letter-spacing:.02em}




/* Theme A: hero text must stay readable over dark media overlay */
.theme-a .hero .hero-inner{ color:#fff; }
.theme-a .hero .badge{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); }


/* Theme A: lighter hero overlay for brighter feel */
.theme-a .hero-media::after{
  background: linear-gradient(
    120deg,
    rgba(255,255,255,.15),
    rgba(0,0,0,.18) 55%,
    rgba(0,0,0,.25)
  );
}