*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: #090909;
  color: #EFEFEF;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-overflow-scrolling: auto;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #090909; }
::-webkit-scrollbar-thumb { background: #C41A1A; border-radius: 3px; }

/* ── Noise grain overlay ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes drawCheck {
  from { stroke-dashoffset: 80; }
  to   { stroke-dashoffset: 0; }
}
.anim-up   { animation: fadeUp 0.7s cubic-bezier(.16,1,.3,1) both; }
.anim-in   { animation: fadeIn 0.5s ease both; }
.delay-1   { animation-delay: .12s; }
.delay-2   { animation-delay: .22s; }
.delay-3   { animation-delay: .32s; }
.check-path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: drawCheck .55s ease .25s forwards;
}

/* ── Nav ── */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #090909;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: background .3s ease, box-shadow .3s ease;
}
#main-nav.scrolled {
  background: rgba(9,9,9,.97);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}
#main-nav:has(#mobile-menu.open) {
  background: #090909;
}
.nav-link { position: relative; text-decoration: none; }
.nav-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: #C41A1A;
  transition: width .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ── Buttons ── */
.btn-red {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 28px;
  background: #C41A1A; color: #fff;
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 18px rgba(196,26,26,.35);
  transition: background .2s ease, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.btn-red:hover  { background: #E02020; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(196,26,26,.45); }
.btn-red:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(196,26,26,.3); }
.btn-red:focus-visible { outline: 2px solid #C41A1A; outline-offset: 3px; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 28px;
  background: transparent; color: #EFEFEF;
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid #222222; cursor: pointer; text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.btn-ghost:hover  { border-color: #C41A1A; background: rgba(196,26,26,.07); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }
.btn-ghost:focus-visible { outline: 2px solid #C41A1A; outline-offset: 3px; }

/* ── Form inputs ── */
.finput {
  width: 100%;
  padding: 11px 14px;
  background: #111111; color: #EFEFEF;
  border: 1px solid #222222; outline: none;
  font-family: 'Inter', sans-serif; font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
}
.finput:hover  { border-color: #333; }
.finput:focus  { border-color: #C41A1A; box-shadow: 0 0 0 3px rgba(196,26,26,.1); }
select.finput  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 36px; cursor: pointer;
}
select.finput option { background: #111; color: #eee; }
textarea.finput { resize: vertical; min-height: 80px; }

/* ── Red accent line ── */
.redline { width: 44px; height: 2px; background: linear-gradient(to right, #C41A1A, transparent); }

/* ── Producer cards ── */
.prod-card {
  background: #111111; border: 1px solid #1A1A1A;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(196,26,26,.14), 0 8px 24px rgba(0,0,0,.7);
}

/* ── Service cards ── */
.srv-card {
  background: #111111; border: 1px solid #1A1A1A;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .2s ease, box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.srv-card:hover {
  transform: translateY(-5px);
  border-color: #2A2A2A;
  box-shadow: 0 20px 56px rgba(0,0,0,.65), 0 4px 14px rgba(196,26,26,.09);
}

/* ── Calendar ── */
.cday {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; border-radius: 3px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
  user-select: none;
}
.cday:hover:not(.cd-past):not(.cd-blocked) { background: rgba(196,26,26,.18); color: #E02020; }
.cday.cd-today   { border: 1px solid #C41A1A; color: #E02020; }
.cday.cd-sel     { background: #C41A1A !important; color: #fff !important; }
.cday.cd-past    { color: #2E2E2E; cursor: default; }
.cday.cd-blocked { color: #333; cursor: not-allowed; text-decoration: line-through; }
.cday.cd-empty   { cursor: default; }

/* ── Time slots ── */
.tslot {
  padding: 9px 8px; text-align: center; font-size: 13px; font-weight: 500;
  background: #111; border: 1px solid #222; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.tslot:hover:not(.ts-taken) { border-color: #C41A1A; background: rgba(196,26,26,.08); }
.tslot.ts-sel   { background: #C41A1A; border-color: #C41A1A; color: #fff; }
.tslot.ts-taken   { color: #2E2E2E; cursor: not-allowed; text-decoration: line-through; }
.tslot.ts-blocked { background: rgba(196,26,26,.18); border-color: #C41A1A; color: #C41A1A; }

/* ── Step dots ── */
.sdot {
  width: 8px; height: 8px; border-radius: 50%; background: #222;
  transition: background .3s ease, transform .3s ease;
}
.sdot.s-active { background: #C41A1A; transform: scale(1.4); }
.sdot.s-done   { background: #444; }

/* ── Booking steps ── */
.bstep { display: none; }
.bstep.active { display: block; }

/* ── Toggle row ── */
.topt {
  flex: 1; padding: 10px 8px; text-align: center;
  font-size: 13px; font-weight: 500;
  background: #111; border: 1px solid #222; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.topt.t-sel { background: rgba(196,26,26,.14); border-color: #C41A1A; color: #FF4040; }

/* ── Mobile menu ── */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  opacity: 0;
  background: #090909;
}
#mobile-menu.open { max-height: 400px; opacity: 1; }

/* ── Delivery badge ── */
.dbadge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; border: 1px solid;
}

/* ── Orb glow ── */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none;
}