/* =========================================================
   sabhisaman.com — "Storybook at Night" design system

   Color system (60/30/10 + psychology rationale):
   - Indigo (60%, dominant): trust + calm + intelligence — the
     color parents associate with dependable, premium brands.
   - Moonlit surface (30%, cool indigo-tinted white — replaces
     any warm cream/beige): keeps the "night" story literal
     (moonlight on paper reads cool, not candlelit) and reads
     clean/trustworthy rather than "homey neutral template".
   - Marigold (accent): joy + optimism — the primary CTA glow.
   - Coral (accent): energy + warmth — secondary highlight.
   - Growth green (micro-accent only): progress/trust signal
     for stock status, verified badges — kept small and rare
     so it never competes with the two primary accents.
   ========================================================= */

:root{
  --indigo:        #1B2A4A;
  --indigo-deep:   #101c33;
  --indigo-soft:   #2c3f68;
  --indigo-tint:   #33466f;
  --marigold:      #E8A33D;
  --marigold-soft: #f6cf8f;
  --marigold-deep: #c9822a;
  --coral:         #EF6F53;
  --coral-light:   #e8846b;
  --coral-deep:    #a83f27;
  --surface:       #EEF1FA;
  --surface-dim:   #E1E6F5;
  --paper:         #FBFCFF;
  --growth:        #2F9E6E;
  --growth-soft:   #8fe0ac;
  --growth-deep:   #1F7A54;
  --ink:           #1B2A4A;
  --ink-soft:      rgba(27,42,74,.68);
  --line:          rgba(27,42,74,.12);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 45px -20px rgba(16,28,51,.35);
  --shadow-deep: 0 30px 60px -25px rgba(16,28,51,.55);
  --ease-story: cubic-bezier(.22,.85,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-color:var(--marigold) var(--surface-dim); scrollbar-width:thin; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--surface-dim); }
::-webkit-scrollbar-thumb{ background:var(--marigold); border-radius:8px; border:3px solid var(--surface-dim); }
::-webkit-scrollbar-thumb:hover{ background:var(--coral); }

::selection{ background:var(--marigold); color:var(--indigo); }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  position:relative;
}

/* film-grade paper grain over the entire site — kills the "flat digital cream" feel */
body::after{
  content:"";
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-3rem; background:var(--marigold); color:var(--indigo);
  padding:.6rem 1rem; border-radius:var(--radius-sm); font-weight:700; z-index:200; transition:top .2s var(--ease-story);
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:3px solid var(--marigold); outline-offset:3px; }

.container{
  width:100%; max-width:1180px; margin:0 auto; padding-inline:clamp(1.25rem,4vw,2.5rem);
}

.mono{ font-family:var(--font-mono); letter-spacing:.02em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marigold-deep); background:rgba(232,163,61,.14);
  padding:.4rem .85rem; border-radius:100px; font-weight:600;
}
.eyebrow.on-dark{ color:var(--marigold-soft); background:rgba(246,207,143,.14); }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; line-height:1.08; }
h1{ font-size:clamp(2.3rem,4.6vw,3.7rem); font-weight:560; }
h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
h3{ font-size:clamp(1.15rem,1.6vw,1.4rem); }
p{ margin:0 0 1em; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-soft); max-width:46ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  padding:.9rem 1.7rem; border-radius:100px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .18s var(--ease-story), box-shadow .18s var(--ease-story), background .18s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-coral{ background:var(--coral); color:var(--indigo); box-shadow:0 14px 30px -12px rgba(239,111,83,.65); }
.btn-coral:hover{ background:var(--coral-light); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:rgba(238,241,250,.4); color:var(--surface); }
.btn-outline:hover{ border-color:var(--marigold-soft); color:var(--marigold-soft); transform:translateY(-2px); }
.btn-ghost-dark{ background:transparent; border-color:var(--line); color:var(--indigo); }
.btn-ghost-dark:hover{ border-color:var(--indigo); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* =================== NAVBAR =================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(238,241,250,.9); backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.85rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--indigo);
}
.brand-mark{
  width:38px; height:38px; border-radius:11px; background:var(--indigo);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:inset 0 0 0 2px rgba(232,163,61,.5);
}
.brand-mark svg{ width:20px; height:20px; }
.brand-name{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; }
.brand-name em{ color:var(--coral); font-style:normal; }

.nav-links{ display:flex; align-items:center; gap:1.9rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  position:relative; text-decoration:none; font-weight:600; font-size:.94rem; color:var(--ink-soft);
  transition:color .15s; padding-bottom:.2rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--coral);
  transition:right .22s var(--ease-story);
}
.nav-links a:hover{ color:var(--coral-deep); }
.nav-links a:hover::after{ right:0; }

.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-price{
  font-family:var(--font-mono); font-weight:700; font-size:.92rem; color:var(--indigo);
  background:var(--marigold-soft); padding:.35rem .8rem .35rem 1rem; position:relative;
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);
}
.nav-price::before{
  content:""; position:absolute; left:5px; top:50%; width:4px; height:4px; margin-top:-2px;
  border-radius:50%; background:var(--paper);
}
.nav-menu-btn{ display:none; background:none; border:2px solid var(--line); border-radius:10px; padding:.5rem .6rem; }

@media (max-width:820px){
  .nav-links{ display:none; }
}
@media (max-width:480px){
  .nav-price{ display:none; }
  .nav-cta{ gap:.6rem; }
}

/* =================== HERO (illustrated night sky) =================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, var(--indigo-deep), var(--indigo) 55%, var(--indigo-soft));
  color:var(--surface); padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:6.5rem;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 2l2.6 8h8.4l-6.8 5 2.6 8-6.8-5-6.8 5 2.6-8-6.8-5h8.4z' fill='%23E8A33D' stroke='%231B2A4A' stroke-width='1.3'/%3E%3C/svg%3E") 14 14, auto;
}
.hero-illustration{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-illustration .twinkle{ animation:twinkle 3.6s ease-in-out infinite; transform-origin:center; }
@keyframes twinkle{
  0%,100%{ opacity:.25; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1.05); }
}
.hero-illustration .drift{ animation:drift 22s ease-in-out infinite; }
@keyframes drift{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(18px); }
}

.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
}

.story-opener{
  display:block; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.1rem,2vw,1.35rem); color:var(--marigold-soft); margin-bottom:.6rem;
}
.story-opener svg{ display:block; width:120px; height:14px; margin-top:.15rem; color:var(--coral); }

.hero-copy .eyebrow{ margin-bottom:1.3rem; }
.hero h1{ color:var(--surface); }
.hero h1 .accent{ color:var(--marigold-soft); font-style:italic; }
.hero-lede{ font-size:clamp(1.05rem,1.6vw,1.18rem); color:rgba(238,241,250,.78); max-width:48ch; margin-bottom:1.8rem; }
.hero-lede::first-letter{
  font-family:var(--font-display); font-style:italic; font-size:2.6em; line-height:.6; color:var(--marigold-soft);
  float:left; padding:.08em .09em 0 0;
}

.price-row{ display:flex; align-items:baseline; gap:.85rem; margin-bottom:1.9rem; flex-wrap:wrap; }
.price-now{ font-family:var(--font-mono); font-size:clamp(2rem,3.6vw,2.6rem); font-weight:700; color:var(--marigold-soft); }
.price-was{ font-family:var(--font-mono); font-size:1.15rem; color:rgba(238,241,250,.5); text-decoration:line-through; }
.price-save{ font-family:var(--font-mono); font-size:.8rem; background:rgba(239,111,83,.2); color:var(--coral); padding:.3rem .6rem; border-radius:100px; font-weight:600; }
.stock-pill{ font-family:var(--font-mono); font-size:.78rem; display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:100px; font-weight:600; }
.stock-pill.in{ background:rgba(47,158,110,.18); color:var(--growth-soft); }
.stock-pill.out{ background:rgba(239,111,83,.18); color:var(--coral); }
.stock-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.2rem; }

.trust-strip{ display:flex; gap:1.6rem; flex-wrap:wrap; font-size:.85rem; color:rgba(238,241,250,.72); }
.trust-strip span{ display:flex; align-items:center; gap:.45rem; }
.trust-strip svg{ width:16px; height:16px; color:var(--marigold-soft); flex-shrink:0; }

/* ---- interactive product panel: styled like a bound storybook page ---- */
.product-stage{ position:relative; margin-top:1.6rem; padding-left:.6rem; }
.product-frame{
  position:relative; z-index:2; background:var(--paper); border-radius:4px var(--radius-lg) var(--radius-lg) 4px;
  padding:clamp(1rem,2vw,1.6rem) clamp(1rem,2vw,1.6rem) clamp(1rem,2vw,1.6rem) clamp(1.5rem,2.6vw,2.2rem);
  box-shadow:var(--shadow-deep);
  transform:rotate(.6deg);
}
/* stacked pages peeking out behind the top page */
.product-frame::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--surface-dim);
  border-radius:4px var(--radius-lg) var(--radius-lg) 4px; transform:rotate(3deg) translate(10px,10px);
  box-shadow:var(--shadow-soft);
}
.product-frame::after{
  content:""; position:absolute; inset:0; z-index:-2; background:var(--marigold-soft);
  border-radius:4px var(--radius-lg) var(--radius-lg) 4px; transform:rotate(-2.5deg) translate(-8px,14px);
  opacity:.7;
}
/* bound spine along the left edge */
.product-frame .spine{
  position:absolute; left:0; top:8px; bottom:8px; width:14px; border-radius:4px 0 0 4px;
  background:linear-gradient(90deg, var(--indigo-deep), var(--indigo) 60%, rgba(27,42,74,.15));
  box-shadow:inset -3px 0 6px rgba(0,0,0,.35);
}
.product-frame .ribbon{
  position:absolute; top:-6px; left:38px; width:22px; height:56px; background:var(--coral);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4); z-index:3;
}
.product-image-wrap{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1/1; background:var(--surface-dim); }
.product-image-wrap img{ width:100%; height:100%; object-fit:cover; }
.product-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.6rem;
  color:var(--ink-soft); text-align:center; padding:1.5rem; font-size:.85rem; background:
    repeating-linear-gradient(135deg, rgba(27,42,74,.05) 0 12px, rgba(27,42,74,.02) 12px 24px);
}
.product-placeholder strong{ font-family:var(--font-display); font-size:1.1rem; color:var(--indigo); }

.hotspot-connectors{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; }
.hotspot-connectors path{ fill:none; stroke:var(--marigold-deep); stroke-width:1.5; stroke-dasharray:2 6; stroke-linecap:round; }

.hotspot{
  position:absolute; width:34px; height:34px; border-radius:50%;
  background:var(--marigold); border:3px solid var(--paper); color:var(--indigo);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem;
  cursor:pointer; box-shadow:0 6px 16px -4px rgba(27,42,74,.4); transform:translate(-50%,-50%);
  transition:transform .2s var(--ease-story), background .2s; z-index:2;
}
.hotspot::before{
  content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--marigold);
  opacity:.55; animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.7); opacity:.6; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ opacity:0; }
}
.hotspot:hover, .hotspot:focus-visible, .hotspot[aria-expanded="true"]{
  background:var(--coral); color:var(--indigo); transform:translate(-50%,-50%) scale(1.12);
}
.hotspot[aria-expanded="true"]::before{ animation:none; opacity:0; }

.feature-callout{
  margin-top:1.1rem; background:var(--indigo); color:var(--surface); border-radius:var(--radius-md);
  padding:1.1rem 1.3rem; display:flex; gap:.9rem; align-items:flex-start;
  box-shadow:var(--shadow-soft);
  opacity:0; transform:translateY(8px); transition:opacity .28s var(--ease-story), transform .28s var(--ease-story);
}
.feature-callout.is-visible{ opacity:1; transform:translateY(0); }
.feature-callout .num{
  font-family:var(--font-mono); background:var(--marigold); color:var(--indigo); width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; flex-shrink:0;
}
.feature-callout .callout-title{ font-family:var(--font-display); font-weight:600; color:var(--marigold-soft); font-size:1.05rem; margin:0 0 .25rem; }
.feature-callout p{ margin:0; font-size:.92rem; color:rgba(238,241,250,.82); }
.feature-callout-hint{ font-size:.85rem; color:var(--ink-soft); margin-top:1.3rem; text-align:center; }

.tap-badge{
  position:absolute; top:-16px; left:44px; z-index:5; background:var(--coral); color:var(--indigo);
  font-family:var(--font-mono); font-size:.72rem; padding:.4rem .8rem; border-radius:100px;
  box-shadow:0 8px 18px -6px rgba(239,111,83,.6); transform:rotate(-4deg);
  white-space:nowrap;
}

/* =================== TORN PAPER SECTION DIVIDERS =================== */
.torn-divider{
  position:relative; height:36px; margin-top:-36px; margin-bottom:0; z-index:3;
  clip-path:polygon(
    0% 55%, 3% 15%, 7% 40%, 11% 5%, 15% 38%, 19% 12%, 23% 48%, 27% 8%, 31% 42%,
    35% 0%, 39% 32%, 43% 52%, 47% 14%, 51% 40%, 55% 4%, 59% 46%, 63% 18%, 67% 50%,
    71% 10%, 75% 36%, 79% 2%, 83% 40%, 87% 14%, 91% 44%, 95% 8%, 100% 50%,
    100% 100%, 0% 100%
  );
  filter:drop-shadow(0 -10px 14px rgba(16,28,51,.28));
}
.torn-divider--surface{ background:var(--surface); }
.torn-divider--indigo{ background:var(--indigo-deep); }

/* =================== FEATURE GRID (scattered storybook cards) =================== */
.section{ padding-block:clamp(3.5rem,7vw,6rem); }
.section-head{ max-width:640px; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head.center{ margin-inline:auto; text-align:center; }

.feature-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem;
  padding-top:.5rem;
}
.feature-card{
  background:var(--paper); border-radius:var(--radius-md); padding:1.9rem 1.6rem 1.7rem;
  border:1px solid var(--line); transition:transform .25s var(--ease-story), box-shadow .25s var(--ease-story), border-color .25s;
  position:relative; overflow:hidden;
}
.feature-grid > .feature-card:nth-child(1){ transform:rotate(-1.6deg); }
.feature-grid > .feature-card:nth-child(2){ transform:rotate(1.2deg); }
.feature-grid > .feature-card:nth-child(3){ transform:rotate(-0.8deg); }
.feature-grid > .feature-card:nth-child(4){ transform:rotate(1.8deg); }
.feature-grid > .feature-card:nth-child(5){ transform:rotate(-1.3deg); }
.feature-card::before{
  /* washi-tape accent, tone alternates per card */
  content:""; position:absolute; top:-9px; left:26px; width:50px; height:18px;
  background:var(--marigold); opacity:.85; box-shadow:0 4px 8px -3px rgba(16,28,51,.35);
  transform:rotate(-5deg);
}
.feature-grid > .feature-card:nth-child(even)::before{ background:var(--coral); transform:rotate(4deg); left:auto; right:26px; }
.feature-card .watermark-num{
  position:absolute; top:-.4rem; right:-.3rem; font-family:var(--font-display); font-size:5rem; font-weight:600;
  color:var(--indigo); opacity:.05; line-height:1; pointer-events:none;
}
.feature-card:hover{ transform:rotate(0deg) translateY(-6px) !important; box-shadow:var(--shadow-soft); border-color:transparent; z-index:2; }
.feature-card.is-active{ outline:2px solid var(--marigold); outline-offset:-2px; transform:rotate(0deg) translateY(-4px) !important; }
.feature-icon{
  width:48px; height:48px; border-radius:14px; background:rgba(232,163,61,.15); color:var(--marigold-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem; position:relative;
}
.feature-icon svg{ width:24px; height:24px; }
.feature-card h3{ margin-bottom:.4rem; position:relative; }
.feature-card p{ margin:0; color:var(--ink-soft); font-size:.94rem; position:relative; }

/* =================== TRUST / RATINGS =================== */
.trust-section{
  background:linear-gradient(180deg, var(--indigo), var(--indigo-deep)); color:var(--surface); position:relative; overflow:hidden;
}
.trust-section::before{
  content:""; position:absolute; inset:0; background-image:radial-gradient(ellipse 50% 40% at 85% 10%, rgba(246,207,143,.14), transparent 60%);
}
.trust-inner{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:760px){ .trust-inner{ grid-template-columns:1fr; text-align:center; } }
.rating-block{ text-align:center; position:relative; }
.rating-circle{ position:relative; display:inline-block; }
.rating-circle svg{ position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px); color:var(--marigold); opacity:.6; }
.rating-number{ font-family:var(--font-display); font-size:4rem; color:var(--marigold-soft); line-height:1; position:relative; }
.stars{ color:var(--marigold); font-size:1.3rem; letter-spacing:.15em; margin-block:.5rem; }
.rating-count{ font-size:.85rem; color:rgba(238,241,250,.65); }

.badge-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.2rem; }
.badge-card{
  background:rgba(238,241,250,.06); border:1px solid rgba(238,241,250,.14); border-radius:var(--radius-md);
  padding:1.2rem 1.3rem; display:flex; gap:.85rem; align-items:flex-start; transition:transform .2s var(--ease-story);
}
.badge-card:nth-child(even){ transform:translateY(10px); }
.badge-card:hover{ transform:translateY(-4px); }
.badge-card svg{ width:26px; height:26px; color:var(--marigold-soft); flex-shrink:0; margin-top:.1rem; }
.badge-card h3{ font-size:1rem; margin-bottom:.2rem; color:var(--surface); }
.badge-card p{ margin:0; font-size:.85rem; color:rgba(238,241,250,.68); }

/* =================== FAQ =================== */
.faq-list{ display:flex; flex-direction:column; gap:.8rem; max-width:820px; margin-inline:auto; }
.faq-item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.15rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--font-display); font-size:1.05rem; font-weight:600;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-plus{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:rgba(232,163,61,.15); color:var(--marigold-deep);
  display:flex; align-items:center; justify-content:center; transition:transform .25s var(--ease-story), background .25s;
  font-weight:700;
}
.faq-item[open] .faq-plus{ transform:rotate(45deg); background:var(--coral); color:var(--indigo); }
.faq-answer{ padding:0 1.4rem 1.3rem; color:var(--ink-soft); font-size:.96rem; }

/* =================== FOOTER =================== */
.site-footer{ background:var(--indigo-deep); color:rgba(238,241,250,.75); padding-block:3.5rem 2rem; font-size:.9rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h3{ color:var(--surface); font-size:.95rem; font-family:var(--font-body); font-weight:700; margin-bottom:.9rem; letter-spacing:.02em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.footer-grid a{ color:rgba(238,241,250,.68); text-decoration:none; }
.footer-grid a:hover{ color:var(--marigold-soft); }
.footer-brand p{ max-width:36ch; color:rgba(238,241,250,.6); }
.footer-bottom{ border-top:1px solid rgba(238,241,250,.12); padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem; font-size:.82rem; color:rgba(238,241,250,.5); }

/* =================== STICKY MOBILE BUY BAR =================== */
.mobile-buy-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--paper); border-top:1px solid var(--line);
  padding:.8rem 1rem; padding-bottom:calc(.8rem + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:1rem;
  box-shadow:0 -12px 30px -18px rgba(16,28,51,.4);
}
.mobile-buy-bar .mb-price{ display:flex; flex-direction:column; }
.mobile-buy-bar .mb-price .now{ font-family:var(--font-mono); font-weight:700; font-size:1.15rem; }
.mobile-buy-bar .mb-price .was{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); text-decoration:line-through; }
@media (max-width:820px){
  .mobile-buy-bar{ display:flex; }
  .section:last-of-type{ padding-bottom:6rem; }
}

/* =================== CHECKOUT PAGE =================== */
.checkout-shell{ background:var(--surface); min-height:100vh; }
.checkout-header{ background:var(--indigo); color:var(--surface); padding:1.2rem 0; }
.checkout-header .container{ display:flex; align-items:center; gap:.8rem; }
.checkout-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:start; padding-block:clamp(2rem,5vw,3.5rem); }
@media (max-width:900px){ .checkout-grid{ grid-template-columns:1fr; } }

.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.2rem); }
.form-row{ margin-bottom:1.2rem; }
.form-row label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.4rem; }
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:.8rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.96rem; background:var(--surface); color:var(--ink); transition:border-color .15s;
}
.form-row select{ cursor:pointer; }
.form-row textarea{ resize:vertical; min-height:4rem; }
.form-row-split{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:480px){ .form-row-split{ grid-template-columns:1fr; } }
.field-optional{ font-weight:400; color:var(--ink-soft); font-size:.85em; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ border-color:var(--marigold); outline:none; }
.form-row.qty-row{ display:flex; align-items:center; gap:1rem; }
.qty-control{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:100px; overflow:hidden; }
.qty-control button{ width:38px; height:38px; border:none; background:var(--surface-dim); font-size:1.1rem; cursor:pointer; font-weight:700; }
.qty-control input{
  width:50px; height:38px; padding:0; text-align:center; border:none; background:transparent;
  font-family:var(--font-mono); font-size:.96rem; font-weight:700; color:var(--ink); line-height:38px;
}
.error-text{ color:var(--coral-deep); font-size:.82rem; margin-top:.3rem; display:none; }
.form-row.has-error input{ border-color:var(--coral); }
.form-row.has-error .error-text{ display:block; }

.order-summary-line{ display:flex; justify-content:space-between; padding-block:.5rem; font-size:.95rem; }
.order-summary-line.total{ border-top:1px dashed var(--line); margin-top:.5rem; padding-top:1rem; font-weight:700; font-family:var(--font-mono); font-size:1.15rem; }

.qr-box{ text-align:center; padding:1.5rem; background:var(--surface-dim); border-radius:var(--radius-md); margin-block:1.3rem; }
.qr-box canvas{ margin-inline:auto; border-radius:8px; background:#fff; padding:10px; }
.qr-amount{ font-family:var(--font-mono); font-size:1.5rem; font-weight:700; margin-top:.8rem; }
.upi-id-copy{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.85rem; background:var(--paper); padding:.4rem .8rem; border-radius:100px; margin-top:.6rem; border:1px solid var(--line); cursor:pointer; }

.checkout-step{ display:none; }
.checkout-step.is-active{ display:block; }
.step-indicator{ display:flex; gap:.6rem; margin-bottom:1.6rem; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); }
.step-indicator .step{ display:flex; align-items:center; gap:.4rem; }
.step-indicator .step.is-active{ color:var(--coral-deep); font-weight:700; }
.step-indicator .dot{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.step-indicator .step.is-active .dot{ background:var(--coral); }

.status-banner{ padding:.85rem 1.1rem; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:1.2rem; display:none; }
.status-banner.show{ display:block; }
.status-banner.error{ background:rgba(239,111,83,.14); color:var(--coral-deep); }
.status-banner.info{ background:rgba(232,163,61,.14); color:var(--marigold-deep); }

/* =================== ADMIN =================== */
.admin-shell{ min-height:100vh; background:var(--indigo-deep); display:flex; align-items:center; justify-content:center; padding:2rem; }
.admin-card{ background:var(--paper); border-radius:var(--radius-lg); padding:2.5rem; width:100%; max-width:420px; box-shadow:var(--shadow-deep); }
.admin-dashboard{ background:var(--surface); min-height:100vh; }
.admin-topbar{ background:var(--indigo); color:var(--surface); padding:1rem 0; }
.admin-topbar .container{ display:flex; justify-content:space-between; align-items:center; }
.admin-topbar a{ color:var(--marigold-soft); text-decoration:none; font-weight:600; font-size:.9rem; }
.admin-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; padding-block:2.5rem; }
.field-hint{ font-size:.8rem; color:var(--ink-soft); margin-top:.3rem; }
.settings-updated{ font-size:.8rem; color:var(--ink-soft); }
.radio-group{ display:flex; gap:1rem; }
.radio-group label{ display:flex; align-items:center; gap:.4rem; font-weight:500; }