:root { --bg:#0d0d0f; --fg:#f2f2f4; --muted:#9a9aa5; --accent:#7b5cff; --card:#16161a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:system-ui, sans-serif; }
a { color:inherit; text-decoration:none; }
/* Fixed grayscale disco-ball video behind everything, on every public page. */
.bg-video {
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-1; pointer-events:none; opacity:.18; filter:grayscale(1) contrast(1.05);
}
.site-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; border-bottom:1px solid #222; position:relative; z-index:50; }
.site-header nav { display:flex; align-items:center; }
.site-header nav a { margin-left:1.5rem; }
/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:40px; padding:0; background:none; border:0; cursor:pointer; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--fg); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
@media (max-width:768px) {
  .nav-toggle { display:flex; }
  .site-header nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:var(--bg); border-bottom:1px solid #222;
    padding:.25rem 2rem 1rem; box-shadow:0 16px 36px rgba(0,0,0,.55);
  }
  .site-header.nav-open nav { display:flex; }
  .site-header nav a { margin:0; padding:.85rem .25rem; border-top:1px solid rgba(255,255,255,.06); }
  .site-header nav a:first-child { border-top:0; }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}
/* Light (inverted) logo on transparent background reads directly on the dark header. */
.site-header .brand { display:inline-flex; }
.site-header .brand img { display:block; }
.badge { background:var(--accent); border-radius:999px; padding:0 .5rem; font-size:.8rem; }
main { max-width:1200px; margin:0 auto; padding:2rem; }
.filters { list-style:none; display:flex; gap:1rem; padding:0; flex-wrap:wrap; }
.filters a.active { color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1.5rem; }
.card { background:var(--card); border-radius:12px; overflow:hidden; padding-bottom:1rem; }
.card img { width:100%; aspect-ratio:4/3; object-fit:cover; background:transparent; display:block; }
.card-noimg { width:100%; aspect-ratio:4/3; object-fit:cover; background:#222; display:block; }
.card h2 { font-size:1.1rem; padding:0 1rem; }
.card .price, .item-detail .price { color:var(--accent); font-weight:600; padding:0 1rem; }
.card button, .item-detail button { margin:0 1rem; padding:.6rem 1rem; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; }
.item-detail { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.gallery img { width:100%; border-radius:12px; margin-bottom:1rem; }
.video iframe { max-width:100%; }
.site-footer { color:var(--muted); border-top:1px solid var(--card-border); background:rgba(0,0,0,.7); margin-top:4rem; }
.footer-inner { max-width:1200px; margin:0 auto; padding:3rem 2rem 2rem; display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:2.5rem; }
.footer-brand img { display:block; margin-bottom:1rem; }
.footer-brand p { margin:0; max-width:34ch; line-height:1.6; }
.footer-col h3 { color:var(--fg); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 1rem; }
.footer-col ul { list-style:none; padding:0; margin:0 0 1.2rem; display:flex; flex-direction:column; gap:.55rem; }
.footer-col a { color:var(--muted); transition:color var(--transition-base); }
.footer-col a:hover { color:var(--fg); }
.footer-cta { display:inline-block; padding:.6rem 1.25rem; border-radius:999px; background:var(--gradient-brand); color:#fff; font-weight:600; font-size:.9rem; transition:transform var(--transition-base); }
.footer-cta:hover { transform:translateY(-2px); color:#fff; }
.footer-legal p { margin:0 0 .6rem; line-height:1.6; font-size:.9rem; }
.footer-legal strong { color:var(--fg); }
.footer-bottom { border-top:1px solid var(--card-border); padding:1.25rem 2rem; text-align:center; font-size:.85rem; }
.footer-bottom p { margin:0; }
@media (max-width:768px) {
  .footer-inner { grid-template-columns:1fr; gap:2rem; padding:2.5rem 1.5rem 1.5rem; }
}
@media (max-width:768px){ .item-detail{ grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — premium dark one-pager
   Token additions (augment existing :root vars):
     --accent2   : #ff3cac   neon magenta — glow accent / CTA gradient stop
     --card-border: rgba(255,255,255,.07)
     --glass-bg  : rgba(255,255,255,.04)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Extra tokens ──────────────────────────────────────────────────────────── */
:root {
  --accent2: #ff3cac;
  --card-border: rgba(255,255,255,.07);
  --glass-bg: rgba(255,255,255,.04);
  --gradient-brand: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  --transition-base: 240ms cubic-bezier(.25,.46,.45,.94);
}

/* ── Layout override for home (no padding on <main>) ───────────────────────── */
body.home main { max-width:none; padding:0; }

/* ── Section shared ─────────────────────────────────────────────────────────── */
.section-inner { max-width:1200px; margin:0 auto; padding:clamp(4rem,8vw,7rem) 2rem; }
.section-label {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
  background:rgba(123,92,255,.12); padding:.3rem .75rem; border-radius:999px;
  border:1px solid rgba(123,92,255,.25);
}
.section-inner > h2 {
  font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; margin:0 0 2.5rem;
  line-height:1.1; letter-spacing:-.02em;
}

/* ── HERO ──────────────────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:92vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-align:center; isolation:isolate;
}

/* Parallax background layer */
.hero-bg {
  position:absolute; inset:-45% 0; z-index:-2; will-change:transform;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(123,92,255,.45) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 75% 65%, rgba(255,60,172,.28) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(13,13,40,.9) 0%, transparent 70%),
    #080810;
  /* Subtle star-field pattern via SVG data URI */
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(123,92,255,.45) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 75% 65%, rgba(255,60,172,.28) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ccircle cx='50' cy='80' r='1' fill='rgba(255,255,255,.35)'/%3E%3Ccircle cx='180' cy='30' r='.7' fill='rgba(255,255,255,.25)'/%3E%3Ccircle cx='320' cy='120' r='1.2' fill='rgba(255,255,255,.3)'/%3E%3Ccircle cx='90' cy='200' r='.8' fill='rgba(255,255,255,.2)'/%3E%3Ccircle cx='250' cy='170' r='1' fill='rgba(255,255,255,.28)'/%3E%3Ccircle cx='370' cy='280' r='.6' fill='rgba(255,255,255,.22)'/%3E%3Ccircle cx='140' cy='340' r='1' fill='rgba(255,255,255,.3)'/%3E%3Ccircle cx='310' cy='360' r='.8' fill='rgba(255,255,255,.2)'/%3E%3Ccircle cx='20' cy='370' r='1.1' fill='rgba(255,255,255,.25)'/%3E%3Ccircle cx='380' cy='50' r='.9' fill='rgba(255,255,255,.3)'/%3E%3C/svg%3E");
  /* base left transparent so the fixed disco-ball video shows through the hero too */
  background-color:transparent;
}

/* Ambient colour orbs (decorative, pointer-events:none) */
.hero-orb {
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(80px); pointer-events:none; opacity:.55;
}
.hero-orb--left  { width:520px; height:520px; background:var(--accent);   top:-10%; left:-12%; }
.hero-orb--right { width:420px; height:420px; background:var(--accent2);  bottom:-5%; right:-8%; }

/* Hero content */
.hero-inner { position:relative; z-index:1; max-width:740px; padding:1.5rem; }

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.65); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
  padding:.4rem 1rem; margin-bottom:1.5rem;
}

.hero h1 {
  font-size:clamp(2.4rem,7vw,5rem); font-weight:900;
  line-height:1.04; letter-spacing:-.03em; margin:0 0 1.25rem;
  color:#fff;
}

.glow {
  background:var(--gradient-brand); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  text-shadow:none; /* shadow not applicable on gradient text */
  filter:drop-shadow(0 0 32px rgba(123,92,255,.5));
}

.hero-sub {
  font-size:clamp(1rem,1.8vw,1.15rem); color:rgba(255,255,255,.6);
  line-height:1.65; max-width:560px; margin:0 auto 2rem;
}

.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* Scroll hint */
.hero-scroll-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
}
.hero-scroll-hint span {
  width:1.5px; height:40px;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation:scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint { 0%,100%{ opacity:.4; transform:scaleY(.6); } 50%{ opacity:1; transform:scaleY(1); } }

/* ── CTA buttons ─────────────────────────────────────────────────────────────── */
.cta {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:700; border-radius:999px;
  transition:transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
  cursor:pointer; text-decoration:none;
}
.cta--primary {
  padding:.85rem 2rem; background:var(--gradient-brand); color:#fff;
  box-shadow:0 4px 24px rgba(123,92,255,.35);
}
.cta--primary:hover { transform:translateY(-2px); box-shadow:0 8px 36px rgba(123,92,255,.55); }
.cta--ghost {
  padding:.85rem 2rem; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.85);
}
.cta--ghost:hover { background:rgba(255,255,255,.1); transform:translateY(-2px); }
.cta--outline {
  padding:.75rem 1.75rem; background:transparent;
  border:1px solid rgba(123,92,255,.5); color:var(--accent);
}
.cta--outline:hover { background:rgba(123,92,255,.1); transform:translateY(-2px); box-shadow:0 4px 20px rgba(123,92,255,.2); }
.cta--lg { padding:1rem 2.5rem; font-size:1.05rem; }

/* ── CATEGORY STRIP ──────────────────────────────────────────────────────────── */
.categories-strip { background:linear-gradient(to bottom, #080810 0%, var(--bg) 100%); }
.categories-strip .section-inner > h2 { margin-bottom:2rem; }

.cat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:1rem;
}

.cat-tile {
  position:relative; overflow:hidden;
  background:var(--glass-bg); border:1px solid var(--card-border);
  border-radius:14px; padding:1.6rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.cat-tile__glow {
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(circle at 30% 50%, rgba(123,92,255,.2) 0%, transparent 70%);
  transition:opacity var(--transition-base);
  pointer-events:none;
}
.cat-tile:hover .cat-tile__glow { opacity:1; }
.cat-tile:hover {
  transform:translateY(-5px) scale(1.02);
  border-color:rgba(123,92,255,.4);
  box-shadow:0 10px 40px rgba(123,92,255,.2);
}
.cat-tile__name { font-size:.95rem; font-weight:600; color:var(--fg); position:relative; z-index:1; }
.cat-tile__arrow { width:16px; height:16px; color:var(--accent); opacity:0; transition:opacity var(--transition-base), transform var(--transition-base); flex-shrink:0; position:relative; z-index:1; }
.cat-tile:hover .cat-tile__arrow { opacity:1; transform:translateX(3px); }

/* ── FEATURED ITEMS ──────────────────────────────────────────────────────────── */
.featured { background:var(--bg); }
.feat-grid { gap:1.5rem; }

.feat-card {
  background:var(--glass-bg); border:1px solid var(--card-border);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.feat-card:hover {
  transform:translateY(-7px);
  box-shadow:0 16px 50px rgba(123,92,255,.22);
  border-color:rgba(123,92,255,.35);
}

.feat-card__img-wrap { position:relative; overflow:hidden; aspect-ratio:4/3; display:block; }
.feat-card__img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 400ms cubic-bezier(.25,.46,.45,.94); }
.feat-card:hover .feat-card__img-wrap img { transform:scale(1.05); }

.feat-card__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,16,.7) 0%, transparent 50%);
  pointer-events:none;
}

/* card-noimg reimagined */
.feat-card .card-noimg {
  width:100%; aspect-ratio:4/3; background:rgba(123,92,255,.07);
  display:flex; align-items:center; justify-content:center;
}
.feat-card .card-noimg svg { width:56px; height:56px; }

.feat-card__body { padding:1.1rem 1.25rem 1.4rem; flex:1; display:flex; flex-direction:column; gap:.45rem; }
.feat-card__body h3 { margin:0; font-size:1rem; font-weight:700; line-height:1.3; }
.feat-card__body h3 a { color:var(--fg); transition:color var(--transition-base); }
.feat-card__body h3 a:hover { color:var(--accent); }

.feat-card .price { margin:0; font-size:1.05rem; font-weight:800; color:var(--accent); }
.price-unit { font-size:.8rem; font-weight:500; color:var(--muted); }

.feat-cta { margin-top:3rem; text-align:center; }

/* ── HOW IT WORKS ──────────────────────────────────────────────────────────── */
.how {
  background:linear-gradient(180deg, var(--bg) 0%, #0b0b14 100%);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.how .section-inner > h2 { margin-bottom:2.5rem; }

.steps {
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem;
  counter-reset:none;
}
.step {
  background:var(--glass-bg); border:1px solid var(--card-border);
  border-radius:16px; padding:2rem 1.5rem;
  display:flex; flex-direction:column; gap:.65rem;
  transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  position:relative; overflow:hidden;
}
.step::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gradient-brand); opacity:0;
  transition:opacity var(--transition-base);
}
.step:hover { transform:translateY(-5px); border-color:rgba(123,92,255,.3); box-shadow:0 10px 35px rgba(123,92,255,.15); }
.step:hover::before { opacity:1; }

.step__num {
  font-size:2.4rem; font-weight:900; line-height:1;
  background:var(--gradient-brand); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-.04em; opacity:.7;
}
.step__title { font-size:1.05rem; font-weight:700; color:var(--fg); }
.step__desc { font-size:.9rem; color:var(--muted); line-height:1.6; }

/* ── FINAL CTA ──────────────────────────────────────────────────────────────── */
.cta-final {
  background:transparent; padding:clamp(4rem,8vw,8rem) 2rem; text-align:center;
}
.cta-final__inner {
  position:relative; max-width:620px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
}
.cta-final__orb {
  position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(123,92,255,.18) 0%, transparent 70%);
  pointer-events:none; top:50%; left:50%; transform:translate(-50%,-50%);
  filter:blur(40px);
}
.cta-final .section-label { position:relative; z-index:1; }
.cta-final h2 {
  font-size:clamp(1.8rem,4vw,3rem); font-weight:900; margin:0;
  line-height:1.1; letter-spacing:-.02em; position:relative; z-index:1;
}
.cta-final__sub {
  color:var(--muted); font-size:1rem; line-height:1.6; margin:0;
  max-width:420px; position:relative; z-index:1;
}
.cta-final .cta--primary { position:relative; z-index:1; margin-top:.5rem; }

/* ── Reduced-motion overrides ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Parallax layers intentionally still animate (site owner's choice). */
  .hero-scroll-hint span { animation:none; }
  .feat-card:hover .feat-card__img-wrap img { transform:none; }
  .cat-tile:hover, .feat-card:hover, .step:hover { transform:none; }
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .hero h1 { font-size:clamp(2rem,9vw,3rem); }
  .hero-actions { flex-direction:column; align-items:center; }
  .cat-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}
@media (max-width:480px) {
  .hero-badge { font-size:.68rem; }
  .steps { grid-template-columns:1fr; }
}

/* ── Request / selection page ──────────────────────────────────────────────── */
.request h1, .confirm h1 {
  font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-.02em; margin:.4rem 0 1.5rem;
}
.req-card {
  background:var(--glass-bg); border:1px solid var(--card-border); border-radius:16px;
  padding:1.25rem 1.5rem; margin-bottom:1.5rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.req-lines { list-style:none; margin:0; padding:0; }
.req-line {
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 0; border-bottom:1px solid var(--card-border);
}
.req-line:last-child { border-bottom:0; }
.req-line__thumb { width:52px; height:52px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:rgba(255,255,255,.04); display:block; }
.req-line__thumb--empty { display:flex; align-items:center; justify-content:center; color:rgba(123,92,255,.55); border:1px solid var(--card-border); }
.req-line__thumb--empty svg { width:24px; height:24px; }
.req-line__name { flex:1 1 auto; font-weight:600; min-width:0; }
.req-line__qty { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.req-line__price { color:var(--accent); font-weight:700; white-space:nowrap; }
.req-line__price small { color:var(--muted); font-weight:500; }
.req-line__remove { margin:0; }
.req-line__remove button {
  background:transparent; border:1px solid var(--card-border); color:var(--muted);
  padding:.4rem .85rem; border-radius:999px; cursor:pointer; font-size:.85rem;
  transition:border-color var(--transition-base), color var(--transition-base);
}
.req-line__remove button:hover { border-color:rgba(255,90,90,.5); color:#ff6b6b; }

.request-form__heading { font-size:1.1rem; font-weight:700; margin:.25rem 0 1.25rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; }
.field { display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; color:var(--muted); }
.field--full { grid-column:1 / -1; }
.field input, .field textarea {
  background:rgba(255,255,255,.04); border:1px solid var(--card-border); border-radius:10px;
  padding:.7rem .8rem; color:var(--fg); font-size:.95rem; font-family:inherit; color-scheme:dark;
  transition:border-color var(--transition-base), box-shadow var(--transition-base);
}
.field input:focus, .field textarea:focus {
  outline:none; border-color:rgba(123,92,255,.6); box-shadow:0 0 0 3px rgba(123,92,255,.15);
}
.field textarea { resize:vertical; min-height:96px; }
.request-form .cta { margin-top:1.5rem; }

.form-errors {
  background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.3);
  border-radius:12px; padding:.85rem 1rem .9rem; margin-bottom:1.5rem;
}
.form-errors ul { margin:0; padding-left:1.2rem; color:#ff8a8a; }
.form-errors li { margin:.15rem 0; }

.req-empty { text-align:center; padding:3rem 1.5rem; }
.req-empty p { color:var(--muted); margin:0 0 1.25rem; }

/* Confirmation page */
.confirm__inner {
  max-width:560px; margin:3rem auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.confirm__badge {
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#fff; background:var(--gradient-brand); box-shadow:0 8px 30px rgba(123,92,255,.4);
}
.confirm p { color:var(--muted); line-height:1.65; margin:0; }

@media (max-width:600px) {
  .form-grid { grid-template-columns:1fr; }
  .req-line { flex-wrap:wrap; gap:.35rem .8rem; }
  .req-line__name { flex:1 1 100%; }
  .req-line__remove { margin-left:auto; }
}