/* ============ TOKENS ============ */
:root{
  --cream:#FBF7F1;
  --cream-deep:#F3ECE0;
  --ink:#2B2438;
  --ink-soft:#5B5268;
  --plum:#6E4A8C;
  --plum-deep:#513469;
  --raspberry:#C0447E;
  --raspberry-deep:#A02F65;
  --lilac:#EFE4F8;
  --mint:#DCEFE5;
  --apricot:#F6C892;
  --line:#D8CFE6;
  --radius-card: 20px;
  --shadow-soft: 0 14px 34px -18px rgba(43,36,56,.35);
  --font-display:'Fredoka', system-ui, sans-serif;
  --font-body:'Karla', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.15;
}
p{margin:0 0 1em; color:var(--ink-soft); line-height:1.6;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
ul{margin:0; padding:0; list-style:none;}

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

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  padding:14px 28px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-primary{
  background:var(--raspberry);
  color:#fff;
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{ background:var(--raspberry-deep); transform:translateY(-2px);}
.btn-ghost{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn-small{ padding:10px 20px; font-size:.9rem;}
.btn-full{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important;}

/* ============ MARQUEE ============ */
.scissor-marquee{
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.06em;
}
.scissor-track{
  display:inline-flex;
  gap:2.2rem;
  padding:8px 0;
  animation:scroll-left 26s linear infinite;
}
.scissor-track span{ display:inline-flex; align-items:center; opacity:.9;}
@keyframes scroll-left{
  from{ transform:translateX(0);}
  to{ transform:translateX(-50%);}
}

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(251,247,241,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.logo{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.logo-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--lilac); color:var(--plum-deep);
  font-size:1.05rem;
}
.main-nav{ display:flex; gap:28px; }
.main-nav a{ text-decoration:none; font-weight:500; color:var(--ink-soft); }
.main-nav a:hover{ color:var(--raspberry-deep); }
@media (max-width:820px){ .main-nav{ display:none; } }

/* ============ HERO ============ */
.hero{ padding:64px 0 40px; }
.hero-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero-kicker{
  font-family:var(--font-display);
  color:var(--raspberry-deep);
  font-weight:600;
  margin-bottom:.6em;
}
.hero h1{ font-size:clamp(2rem, 4vw, 2.9rem); max-width:14ch; }
.hero-lead{ max-width:46ch; font-size:1.05rem; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 22px; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px 18px; }
.hero-tags li{
  font-size:.85rem; color:var(--ink-soft);
  padding-left:20px; position:relative;
}
.hero-tags li::before{
  content:"✓"; position:absolute; left:0; color:var(--plum); font-weight:700;
}
.hero-art{ justify-self:center; width:100%; max-width:400px; }
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:280px; }
}

/* ============ BENEFITS ============ */
.benefits{ padding:56px 0; }
.benefits h2{ text-align:center; font-size:clamp(1.5rem,3vw,2rem); max-width:20ch; margin:0 auto .9em; }
.benefit-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px;
}
.benefit-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:28px 24px;
}
.benefit-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px;
  background:var(--lilac); color:var(--plum-deep);
  font-size:1.3rem; margin-bottom:16px;
}
.benefit-card h3{ font-size:1.15rem; }
.benefit-card p{ font-size:.95rem; margin-bottom:0; }
@media (max-width:820px){ .benefit-grid{ grid-template-columns:1fr; } }

/* ============ HOW IT WORKS ============ */
.how{ padding:56px 0; background:var(--cream-deep); }
.how h2{ text-align:center; font-size:clamp(1.5rem,3vw,2rem); }
.how-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px;
  counter-reset:step;
}
.how-steps li{ position:relative; padding-left:4px; }
.how-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:var(--cream);
  font-family:var(--font-display); font-weight:600;
  margin-bottom:14px;
}
.how-steps h3{ font-size:1.1rem; }
.how-steps p{ font-size:.93rem; margin-bottom:0; }
@media (max-width:820px){ .how-steps{ grid-template-columns:1fr; } }

/* ============ PACKS ============ */
.packs{ padding:64px 0; }
.packs h2{ text-align:center; font-size:clamp(1.5rem,3vw,2.1rem); }
.section-lead{ text-align:center; max-width:52ch; margin:0 auto; }
.pack-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; align-items:stretch;
}
.pack-card{
  position:relative;
  background:#fff;
  border-radius:var(--radius-card);
  padding:28px 26px 26px;
  display:flex; flex-direction:column;
  border:2px dashed var(--line);
}
.pack-card:nth-child(1){ background:var(--lilac); }
.pack-card:nth-child(2){ background:var(--mint); }
.pack-card-combo{
  background:var(--ink);
  border-color:transparent;
  color:var(--cream);
}
.pack-card-combo p, .pack-card-combo .pack-price-old{ color:#C9C2D6; }
.combo-ribbon{
  position:absolute; top:-13px; right:22px;
  background:var(--apricot); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  padding:6px 14px; border-radius:999px;
}
.pack-card-top{ margin-bottom:14px; }
.pack-tag{
  display:inline-block;
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.04em;
  background:rgba(43,36,56,.08);
  padding:5px 12px; border-radius:999px;
  margin-bottom:10px;
}
.pack-tag-combo{ background:rgba(255,255,255,.15); color:var(--cream); }
.pack-card h3{ font-size:1.25rem; }
.pack-themes{ margin:6px 0 14px; flex-grow:0; }
.pack-themes li{
  font-size:.93rem; padding:5px 0 5px 20px; position:relative;
  border-bottom:1px dashed rgba(43,36,56,.12);
}
.pack-card-combo .pack-themes li{ border-bottom-color:rgba(255,255,255,.14); }
.pack-themes li::before{ content:"✂"; position:absolute; left:0; opacity:.6; }
.pack-bonus{ font-size:.85rem; font-style:italic; margin-bottom:16px; }
.pack-combo-desc{ font-size:.98rem; }
.pack-price-row{
  margin-top:auto; padding-top:10px;
  display:flex; align-items:baseline; gap:10px;
}
.pack-price{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; }
.pack-price-old{ text-decoration:line-through; color:var(--ink-soft); font-size:.95rem; }
.buy-btn{ margin-top:16px; }
.pack-card-combo .btn-primary{ background:var(--raspberry); }
@media (max-width:900px){ .pack-grid{ grid-template-columns:1fr; } }

/* ============ FAQ ============ */
.faq{ padding:56px 0 80px; }
.faq h2{ text-align:center; font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.9em; }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-list details{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px;
}
.faq-list summary{
  cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; font-size:1.3rem; color:var(--raspberry-deep); }
.faq-list details[open] summary::after{ content:"–"; }
.faq-list p{ margin:12px 0 0; font-size:.95rem; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--ink); color:var(--cream); padding:36px 0; }
.footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.footer-logo{ margin-bottom:6px; }
.footer-note{ color:#C9C2D6; font-size:.9rem; margin:0; }
.footer-contact p{ margin:0 0 4px; color:#C9C2D6; font-size:.9rem; }
.footer-contact a{ text-decoration:none; font-weight:600; }
.footer-contact a:hover{ color:var(--apricot); }

/* ============ ORDER MODAL ============ */
.order-modal{
  position:fixed; inset:0; background:rgba(43,36,56,.55);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.order-modal[hidden]{ display:none; }
.order-modal-card{
  background:#fff; border-radius:20px; padding:32px 28px; max-width:420px; width:100%;
  position:relative; box-shadow:var(--shadow-soft);
}
.order-modal-close{
  position:absolute; top:12px; right:14px; background:none; border:none;
  font-size:1.4rem; cursor:pointer; color:var(--ink-soft); line-height:1;
}
.order-modal-card h3{ font-size:1.2rem; }
.order-modal-card .download-link{
  display:inline-flex; margin-top:10px;
}
.status-pending{ color:#B7791F; }
.status-error{ color:var(--raspberry-deep); }
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--lilac); border-top-color:var(--raspberry);
  animation:spin .8s linear infinite; margin-bottom:14px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }