:root {
  --dark: #100f17;
  --dark-2: #1a1826;
  --purple: #6a3aa0;
  --purple-deep: #4a2678;
  --gold: #e0a83e;
  --gold-deep: #c78a1f;
  --cream: #fff8ef;
  --ink: #201d2b;
  --muted: #6b6578;
  --border: #ece5f5;
  --radius: 18px;
  --shadow: 0 20px 45px -20px rgba(74, 38, 120, 0.35);
  --max: 1180px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is how JS toggles element visibility across this
   site (track.js's OTP step, cart-count badges, etc). By default that maps
   to `display: none`, but that's a browser UA-stylesheet rule - any author
   rule targeting the same element with `display` (e.g. `.track-form {
   display: grid }`) wins regardless of specificity ties, since author CSS
   always outranks the UA default. This makes `hidden` win no matter what
   else targets the element. Same bug, same fix, as admin/style.css. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .78rem;
  color: var(--purple);
  margin-bottom: .6rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff;
  box-shadow: 0 10px 25px -8px rgba(106, 58, 160, 0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(106, 58, 160, 0.7); }
.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover { background: var(--ink); color: #fff; }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 248, 239, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.logo-link { flex-shrink: 0; }
.logo-img {
  height: 42px;
  width: auto;
  border-radius: 8px;
}
.main-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-weight: 600;
  font-size: .95rem;
}
.main-nav a { color: var(--ink); opacity: .8; }
.main-nav a:hover { opacity: 1; color: var(--purple); }
.nav-cta { margin-left: 8px; padding: 10px 22px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  display: block;
}

/* HERO */
.hero {
  background: radial-gradient(120% 140% at 100% 0%, #f3e7ff 0%, var(--cream) 55%);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr;
  gap: 50px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 56px;
}
.hero-copy h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  color: var(--ink);
}
.hero-sub {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 46ch;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-tags span {
  font-size: .8rem;
  font-weight: 700;
  color: var(--purple-deep);
  background: #efe1ff;
  padding: 7px 14px;
  border-radius: 999px;
}
.hero-media img {
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.hero-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--panel-2, #f1ecf8);
}
.hero-carousel .carousel-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-carousel .carousel-layer.active { opacity: 1; }

.marquee {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: 12px 0;
}
.marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  width: max-content;
  animation: scroll-left 28s linear infinite;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: .95rem;
}
.marquee-track span::after {
  content: "•";
  margin-left: 48px;
  color: var(--gold);
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* SECTIONS */
.section { padding: 84px 0; }
.section-muted { background: #fbf6ff; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-sub { color: var(--muted); }

/* ABOUT */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.about-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--panel-2, #f1ecf8);
}
.about-carousel .carousel-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.about-carousel .carousel-layer.active { opacity: 1; }
.about-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.check-list { display: grid; gap: 12px; margin-top: 18px; }
.check-list li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
  color: var(--ink);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PRODUCTS */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.product-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.product-media {
  position: relative;
  padding: 28px 28px 0;
}
.product-card--currant .product-media { background: linear-gradient(180deg, #ece0ff, #fff 90%); }
.product-card--panna .product-media { background: linear-gradient(180deg, #ffedd2, #fff 90%); }
.product-media img { margin: 0 auto; max-height: 320px; }
.badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--ink);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
.product-body { padding: 28px; }
.product-body h3 { font-size: 1.4rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tag {
  font-size: .75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--border);
  color: var(--purple-deep);
}
.product-card--panna .tag { background: #fbe6bd; color: var(--gold-deep); }
.feature-list { display: grid; gap: 8px; }
.feature-list li {
  font-size: .92rem;
  color: var(--muted);
  padding-left: 18px;
  position: relative;
}
.feature-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--purple);
}
.product-card--panna .feature-list li::before { color: var(--gold-deep); }

/* STEPS */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.step-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.step-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
}
.step-card h3 { font-size: 1.05rem; }
.step-card p { font-size: .92rem; color: var(--muted); margin: 0; }
.steps-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.steps-media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.steps-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 896 / 1200;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--panel-2, #f1ecf8);
}
.steps-carousel .carousel-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.steps-carousel .carousel-layer.active { opacity: 1; }

/* SIGNUP */
.signup {
  background: linear-gradient(135deg, var(--purple-deep), var(--dark));
  color: #fff;
  padding: 72px 0;
  text-align: center;
}
.signup-inner { max-width: 560px; margin: 0 auto; }
.signup h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.signup p { color: #d8cdec; }
.signup-form {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.signup-form input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
}
.signup-form button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--dark);
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease;
}
.signup-form button:hover { transform: scale(1.06); }
.signup-note { margin-top: 14px; font-size: .9rem; color: var(--gold); min-height: 1.2em; }

/* CONTACT */
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.contact-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.contact-list { display: grid; gap: 12px; margin-top: 18px; }
.contact-list li { color: var(--ink); }
.contact-list a { color: var(--purple-deep); font-weight: 700; }
.contact-form {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  display: grid;
  /* Explicit minmax(0, 1fr): an implicit `auto` column sizes to content and can
     overflow its own container - the textarea's intrinsic width is enough to do
     it. Same failure the checkout form hit. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.contact-form > * { min-width: 0; }
.contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  resize: vertical;
}
.contact-form button { justify-self: start; margin-top: 4px; }
.contact-note { font-size: .9rem; color: var(--purple-deep); min-height: 1.2em; margin: 0; }

/* FOOTER */
.site-footer {
  background: var(--dark);
  color: #cfc7de;
  padding-top: 56px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-logo { height: 34px; border-radius: 6px; margin-bottom: 14px; }
.footer-brand p { font-size: .88rem; color: #9d94b5; }
.footer-col h4 {
  color: #fff;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.footer-col a { display: block; font-size: .9rem; margin-bottom: 10px; color: #b9aed1; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  padding: 22px 24px;
  font-size: .82rem;
  color: #8177a0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 40px; }
  .hero-media { order: -1; }
  .about-inner { grid-template-columns: 1fr; }
  .about-media { order: -1; }
  .product-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .steps-media { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* The full nav (logo + 7 links + Order Now button) needs ~940px to lay out
   without wrapping or overflowing off-screen; this is its own breakpoint,
   separate from the 720px one below, so the hamburger switches over before
   the header ever runs out of room instead of only once the eventual
   text-content breakpoint happens to catch it too. */
@media (max-width: 980px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: none;
    gap: 16px;
  }
  .main-nav.open { display: flex; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 720px) {
  .steps-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .signup-form { flex-direction: column; }
  .signup-form button { width: 100%; border-radius: 999px; }
}