/* ============ Tokens ============ */
:root{
  --bg: #FFFBF3;
  --bg-alt: #FFF3E1;
  --ink: #241C15;
  --ink-soft: #6B5F51;
  --line: #EEE1CC;

  --orange: #FF8A00;
  --orange-deep: #E86A00;
  --yellow: #FFD23F;
  --plum: #2B1E3D;

  --card-bg: #FFFFFF;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --shadow-soft: 0 20px 45px -25px rgba(43,30,10,.35);
  --shadow-lift: 0 30px 60px -20px rgba(232,106,0,.35);

  --font-display: "Unbounded", "Manrope", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(.22,.9,.32,1);
  color-scheme: light;
}

/* ============ Reset ============ */
*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); line-height: 1.1; margin: 0; }
p{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

.wrap{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap-narrow{ max-width: 780px; }

:focus-visible{
  outline: 3px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background: var(--ink); color:#fff; padding: 12px 20px;
  border-radius: 0 0 10px 0; z-index: 999;
}
.skip-link:focus{ left:0; }

/* ============ Progress bar ============ */
.progress-bar{
  position: fixed; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  transform-origin: left;
  z-index: 60;
  animation: grow linear both;
  animation-timeline: scroll(root);
}
@keyframes grow{ from{ transform: scaleX(0);} to{ transform: scaleX(1);} }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn-large{ padding: 18px 32px; font-size: 16px; }
.btn-small{ padding: 11px 20px; font-size: 14px; }
.btn-primary{
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 34px 60px -18px rgba(232,106,0,.5); }
.btn-primary:active{ transform: translateY(0); }
.btn-ghost{
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line);
}
.btn-ghost:hover{ border-color: var(--orange); background: #FFF6E9; }

/* ============ Header ============ */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,251,243,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 14px;
  gap: 20px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px;
  text-decoration:none; color: var(--ink);
  flex-shrink:0;
}
.logo-icon{ border-radius: 9px; }
.main-nav{
  display:flex; gap: 28px;
  font-weight: 600; font-size: 15px;
}
.main-nav a{ text-decoration:none; color: var(--ink-soft); transition: color .2s; }
.main-nav a:hover{ color: var(--orange-deep); }

/* ============ Hero ============ */
.hero{
  position: relative;
  overflow: clip;
  padding-block: 64px 90px;
  isolation: isolate;
}
.hero-splash{
  position:absolute;
  top: -8%; right: -12%;
  width: min(60vw, 780px);
  pointer-events:none;
  z-index:-1;
  opacity:.85;
  transform: translate3d(var(--px,0), var(--py,0), 0) rotate(-4deg);
  transition: transform .2s linear;
  animation: driftSlow 16s ease-in-out infinite;
}
@keyframes driftSlow{
  0%,100%{ transform: translate3d(var(--px,0), var(--py,0), 0) rotate(-4deg); }
  50%{ transform: translate3d(var(--px,0), var(--py,0), 0) rotate(1deg) scale(1.03); }
}
.hero-confetti{ position:absolute; inset:0; pointer-events:none; z-index:-1; }
.hero-confetti span{
  position:absolute;
  width: 9px; height: 14px;
  top: -20px;
  background: var(--orange);
  opacity:.75;
  border-radius: 2px;
  animation: confettiFall linear infinite;
}
.hero-confetti span:nth-child(odd){ background: var(--yellow); border-radius:50%; width:8px; height:8px; }
.hero-confetti span:nth-child(3n){ background: var(--plum); opacity:.5; }
.hero-confetti span:nth-child(1){ left:6%; animation-duration:9s; animation-delay:0s; }
.hero-confetti span:nth-child(2){ left:15%; animation-duration:11s; animation-delay:1.2s; }
.hero-confetti span:nth-child(3){ left:24%; animation-duration:8s; animation-delay:2.4s; }
.hero-confetti span:nth-child(4){ left:33%; animation-duration:12s; animation-delay:.6s; }
.hero-confetti span:nth-child(5){ left:44%; animation-duration:10s; animation-delay:3s; }
.hero-confetti span:nth-child(6){ left:56%; animation-duration:9.5s; animation-delay:1.8s; }
.hero-confetti span:nth-child(7){ left:66%; animation-duration:13s; animation-delay:.3s; }
.hero-confetti span:nth-child(8){ left:74%; animation-duration:8.5s; animation-delay:2.1s; }
.hero-confetti span:nth-child(9){ left:83%; animation-duration:11.5s; animation-delay:1.5s; }
.hero-confetti span:nth-child(10){ left:90%; animation-duration:9.2s; animation-delay:2.8s; }
.hero-confetti span:nth-child(11){ left:50%; animation-duration:10.5s; animation-delay:.9s; }
.hero-confetti span:nth-child(12){ left:96%; animation-duration:12.5s; animation-delay:2s; }
@keyframes confettiFall{
  0%{ transform: translateY(-5vh) rotate(0deg); opacity:0; }
  10%{ opacity:.8; }
  100%{ transform: translateY(70vh) rotate(360deg); opacity:0; }
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  gap: 40px;
}
.eyebrow{
  display:inline-block;
  font-weight:700; font-size: 13px; letter-spacing:.06em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: #FFEFD6;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero-title{
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -.01em;
}
.hero-title-accent{
  background: linear-gradient(100deg, var(--orange-deep), var(--orange) 55%, var(--yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub{
  margin-top: 22px;
  max-width: 46ch;
  font-size: 18px;
  color: var(--ink-soft);
}
.hero-cta-row{
  margin-top: 34px;
  display:flex; flex-wrap:wrap; gap: 14px;
}
.hero-microcopy{
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---- 3D gift box hero visual ---- */
.hero-visual{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  height: 380px;
  perspective: 1100px;
}
.hero-visual-glow{
  position:absolute; inset: 10%;
  background: radial-gradient(circle, rgba(255,138,0,.35), transparent 70%);
  filter: blur(30px);
  z-index:-1;
}
.gift-box-3d{
  width: 220px; height: 220px;
  transform-style: preserve-3d;
  animation: floatBox 6s ease-in-out infinite;
}
.gift-box-3d-inner{
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -14deg)) rotateY(var(--ry, 24deg));
  transition: transform .3s var(--ease);
}
@keyframes floatBox{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}
.box-face{
  position:absolute; inset:0;
  border-radius: 14px;
}
.box-front{
  background: linear-gradient(155deg, var(--orange), var(--orange-deep));
  box-shadow: var(--shadow-lift);
  transform: translateZ(0);
}
.box-lid{
  height: 46px;
  top: -30px;
  background: linear-gradient(155deg, #FFB146, var(--orange));
  border-radius: 12px;
  transform: translateZ(28px) rotateX(4deg);
  box-shadow: 0 14px 24px -10px rgba(232,106,0,.5);
}
.box-ribbon-v{
  position:absolute; top:-30px; bottom:0; left: 50%;
  width: 30px; margin-left:-15px;
  background: linear-gradient(180deg, var(--yellow), #FFE98A);
  transform: translateZ(29px);
}
.box-ribbon-h{
  position:absolute; left:0; right:0; top: 42%;
  height: 30px; margin-top:-15px;
  background: linear-gradient(90deg, var(--yellow), #FFE98A);
  transform: translateZ(1px);
}
.box-bow{
  position:absolute; top:-52px; left:50%;
  width: 64px; height: 34px; margin-left:-32px;
  background: var(--yellow);
  border-radius: 50% 50% 45% 45%;
  transform: translateZ(30px);
  box-shadow: 0 8px 16px -6px rgba(0,0,0,.25);
}
.box-bow::before,
.box-bow::after{
  content:"";
  position:absolute; top:6px; width:26px; height:26px;
  background: var(--yellow); border-radius: 50%;
}
.box-bow::before{ left:-8px; }
.box-bow::after{ right:-8px; }

.scroll-cue{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--line);
  border-radius: 999px;
  display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{
  width:4px; height:8px; border-radius:2px;
  background: var(--orange-deep);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{ transform: translateY(0); opacity:1; }
  70%{ opacity:0; }
  100%{ transform: translateY(14px); opacity:0; }
}

/* ============ Why banner ============ */
.why{ padding-block: 10px 60px; }
.why-inner{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px clamp(24px,4vw,48px);
}
.why-text{
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 74ch;
}
.why-text strong{ color: var(--ink); }

/* ============ Sections ============ */
.section{ position:relative; overflow: clip; isolation: isolate; padding-block: 88px; }
.section-alt{ background: var(--bg-alt); }

/* ---- Parallax section backgrounds ----
   Old-school CSS-only parallax: background-attachment:fixed pins the
   gradient to the viewport while the section scrolls over it, so it
   reads as depth without a single line of scroll-tracking JS. Works
   in every browser back to IE9, costs nothing on weak hardware. */
.parallax-bg{
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.parallax-warm{
  background-image:
    linear-gradient(rgba(255,251,243,.42), rgba(255,251,243,.5)),
    url("../img/bg-how.jpg");
}
.parallax-plum{
  background-image:
    linear-gradient(rgba(40,26,46,.25), rgba(40,26,46,.4)),
    url("../img/bg-categories.jpg");
}
.parallax-sun{
  background-image:
    linear-gradient(rgba(255,251,243,.42), rgba(255,251,243,.5)),
    url("../img/bg-how.jpg");
}
/* iOS Safari ignores background-attachment:fixed — falls back to a
   plain scrolling gradient, still visible, just without the pin effect. */
@supports (-webkit-touch-callout: none){
  .parallax-bg{ background-attachment: scroll; }
}
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.light .section-kicker{ color: #FFE3B3; }
.section-head.light .section-title{ color: #fff; }
.section-head.light .section-lead{ color: rgba(255,255,255,.82); }
.section-kicker{
  font-weight:700; font-size: 13px; letter-spacing:.08em;
  text-transform: uppercase; color: var(--orange-deep);
  margin-bottom: 10px;
}
.section-title{
  font-size: clamp(28px, 3.4vw, 40px);
}
.section-lead{
  margin-top: 14px;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ============ Reveal on scroll ============ */
.reveal{
  opacity: 0;
  transform: translateY(28px);
}
.reveal.is-visible{
  animation: revealUp .7s var(--ease) both;
}
@keyframes revealUp{
  from{ opacity:0; transform: translateY(28px); }
  to{ opacity:1; transform: translateY(0); }
}
@supports (animation-timeline: view()){
  .reveal{
    opacity:0;
    transform:none;
    animation: revealScroll linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .reveal.is-visible{ animation: revealScroll linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes revealScroll{
    from{ opacity:0; transform: translateY(28px); }
    to{ opacity:1; transform: translateY(0); }
  }
}

/* ============ Steps (how it works) ============ */
.steps-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step-card{
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  transform: perspective(900px) rotateX(var(--tx,0)) rotateY(var(--ty,0));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step-card:hover, .step-card:focus-within{
  box-shadow: 0 30px 55px -20px rgba(232,106,0,.4);
}
.step-num{
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  width: 40px; height: 40px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
  animation: numFloat 3.2s ease-in-out infinite;
}
@keyframes numFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.step-card h3{ font-size: 20px; margin-bottom: 10px; }
.step-card p{ color: var(--ink-soft); font-size: 15.5px; }

/* ============ Categories ============ */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cat-card{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transform: perspective(800px) rotateX(var(--tx,0)) rotateY(var(--ty,0));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cat-card:hover, .cat-card:focus-visible{
  box-shadow: 0 30px 55px -20px rgba(232,106,0,.45);
}
.cat-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.cat-card:hover img{ transform: scale(1.06); }
.cat-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,12,4,.78) 0%, rgba(20,12,4,.05) 55%);
}
.cat-card-label{
  position:absolute; left:20px; bottom:18px; z-index:2;
  color:#fff; font-family: var(--font-display); font-weight:600; font-size: 18px;
}
.cat-card-icon{
  background: linear-gradient(155deg, #FFF3E1, #FFE3B8);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.cat-card-icon .cat-card-label{ position:static; color: var(--ink); }
.cat-icon{ color: var(--orange-deep); width: 56px; height:56px; }
.cat-icon svg{ width:100%; height:100%; }

/* ============ Photo parallax band ============ */
/* Classic photo parallax: image pinned to the viewport while the page
   scrolls past it, so it visibly moves slower than the content above
   and below it. Pure CSS, no JS. */
.photo-parallax{
  position: relative;
  height: 46vh;
  min-height: 320px;
  max-height: 520px;
  background-image: url("../img/bg-photo-band.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-parallax-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(43,30,61,.7), rgba(20,12,4,.55));
}
.photo-parallax-inner{ position: relative; z-index: 1; text-align: center; }
.photo-parallax-text{
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  max-width: 46ch;
  margin-inline: auto;
}
@supports (-webkit-touch-callout: none){
  .photo-parallax{ background-attachment: scroll; }
}
@media (max-width: 600px){
  .photo-parallax{ height: 40vh; min-height: 260px; }
}

/* ============ Timeline (как подарить) ============ */
.timeline{
  position: relative;
  display:grid;
  gap: 36px;
  padding-left: 56px;
}
.timeline::before{
  content:"";
  position:absolute; left: 23px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--orange), var(--yellow));
  opacity:.5;
}
.timeline-item{ position: relative; }
.timeline-marker{
  position:absolute; left: -56px; top:0;
  width: 48px; height:48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:18px;
  box-shadow: var(--shadow-lift);
  animation: numFloat 3.2s ease-in-out infinite;
}
.timeline-body h3{ font-size: 21px; margin-bottom: 8px; }
.timeline-body p{ color: var(--ink-soft); max-width: 62ch; }

/* ============ Form ============ */
.section-form{
  position: relative;
  background: linear-gradient(160deg, var(--plum), #1B1228);
  color: #fff;
  overflow: clip;
}
.form-splash{
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 15%, rgba(255,138,0,.35), transparent 45%),
              radial-gradient(circle at 10% 90%, rgba(255,210,63,.22), transparent 40%);
  pointer-events:none;
  animation: formSplashDrift 10s ease-in-out infinite;
}
@keyframes formSplashDrift{
  0%,100%{ transform: translate3d(-10px,-10px,0) scale(1.02); }
  50%{ transform: translate3d(10px,10px,0) scale(1.08); }
}
.form-wrap{ position:relative; z-index:1; }
.gift-form{
  max-width: 760px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
  transform: perspective(1400px) rotateX(var(--tx,0)) rotateY(var(--ty,0));
  transition: transform .4s var(--ease);
}
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field-wide{ grid-column: 1 / -1; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size: 14px; font-weight:600; color: #EFE6D8; }
.field input, .field select{
  appearance: none;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B5F51' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 16px center;
  padding-right: 40px;
}
.field input:focus, .field select:focus{
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,138,0,.25);
  outline:none;
}
.field.has-error input, .field.has-error select{ border-color:#FF6B6B; }
.field-err{ font-size: 13px; color:#FFB4B4; }

.form-error{
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,107,107,.15);
  border: 1px solid rgba(255,107,107,.4);
  color:#FFB4B4;
  font-size: 14px;
}

.switch-field{
  display:flex; align-items:flex-start; gap: 12px;
  margin-top: 24px;
  font-size: 14px; color:#EFE6D8;
  cursor:pointer;
}
.switch-field a{ color: var(--yellow); text-decoration: underline; }

.switch{
  position: relative;
  display:inline-flex;
  flex-shrink:0;
  margin-top: 1px;
}
.switch input{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
  width:100%; height:100%;
}
.switch-track{
  display:inline-block;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  border: 2px solid rgba(255,255,255,.35);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.switch-thumb{
  display:block;
  width: 16px; height: 16px;
  margin: 1px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .2s var(--ease);
}
.switch input:checked + .switch-track{
  background: var(--orange);
  border-color: var(--orange);
}
.switch input:checked + .switch-track .switch-thumb{
  transform: translateX(18px);
}
.switch input:focus-visible + .switch-track{
  box-shadow: 0 0 0 4px rgba(255,138,0,.35);
}

/* ============ Модалка ============ */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,12,8,.6);
  backdrop-filter: blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  z-index: 1000;
}
.modal-overlay[hidden]{ display:none; }
.modal-panel{
  position:relative;
  background: var(--card-bg);
  color: var(--ink);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: var(--shadow-lift);
}
.modal-panel h3{
  font-family: var(--font-display);
  margin: 0 0 16px;
  padding-right: 32px;
  font-size: 20px;
}
.modal-body p{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.modal-body a{ color: var(--orange-deep); }
.modal-close{
  position:absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 20px;
  line-height:1;
  cursor:pointer;
  transition: background .2s var(--ease);
}
.modal-close:hover{ background: var(--line); }

/* ============ Cookie-баннер ============ */
.cookie-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 900;
  max-width: 720px;
  margin: 0 auto;
  background: var(--plum);
  color: #F6EFE6;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 14px;
  box-shadow: var(--shadow-soft);
}
.cookie-banner[hidden]{ display:none; }
.cookie-text{
  flex: 1 1 320px;
  margin:0;
  font-size: 13px;
  line-height: 1.5;
  color:#E8DFEF;
}
.cookie-text a{ color: var(--yellow); text-decoration: underline; }
.cookie-actions{ flex-shrink:0; }
.btn-cookie{
  padding: 10px 22px;
  font-size: 14px;
}
@media (max-width: 520px){
  .cookie-banner{ flex-direction:column; align-items:stretch; text-align:left; }
  .btn-cookie{ width:100%; }
}

.btn-submit{
  margin-top: 28px;
  width: 100%;
  position: relative;
}
.btn-spinner{
  display:none;
  width:18px; height:18px;
  border: 2.5px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: 50%;
}
.btn-submit.is-loading .btn-label{ opacity:.6; }
.btn-submit.is-loading .btn-spinner{ display:inline-block; animation: spin .7s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.form-microcopy{
  margin-top: 14px; text-align:center;
  font-size: 13px; color: rgba(255,255,255,.6);
}

.form-success{
  text-align:center;
  padding: 30px 10px 10px;
}
.form-success-icon{
  width:56px; height:56px; margin: 0 auto 16px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700; color:#fff;
}
.form-success h3{ font-size: 22px; margin-bottom: 8px; }
.form-success p{ color: rgba(255,255,255,.75); max-width: 48ch; margin-inline:auto; }

.hp-field{ position:absolute; left:-9999px; top:-9999px; }

/* ============ FAQ ============ */
.faq-list{ display:grid; gap: 14px; }
.faq-item{
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 24px;
  transform: perspective(900px) rotateX(var(--tx,0)) rotateY(var(--ty,0)) translateY(0);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.faq-item:hover, .faq-item[open]{
  border-color: var(--orange);
  box-shadow: 0 26px 50px -26px rgba(232,106,0,.4);
  transform: perspective(900px) rotateX(var(--tx,0)) rotateY(var(--ty,0)) translateY(-3px);
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding: 18px 0;
  font-weight: 600; font-size: 16.5px;
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  flex-shrink:0;
  width:28px; height:28px; border-radius:50%;
  background: var(--bg-alt);
  display:flex; align-items:center; justify-content:center;
  font-size: 18px; color: var(--orange-deep);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ padding-bottom: 20px; color: var(--ink-soft); }

/* ============ Final CTA ============ */
.final-cta{
  text-align:center;
  padding-block: 100px;
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
}
.final-cta-inner{ max-width: 620px; margin-inline:auto; }
.final-cta h2{ font-size: clamp(26px,3.6vw,38px); }
.final-cta p{ margin-top:14px; color: var(--ink-soft); font-size:17px; }
.final-cta .btn{ margin-top: 30px; }

/* ============ Footer ============ */
.site-footer{
  border-top: 1px solid var(--line);
  padding-block: 40px;
}
.footer-inner{
  display:grid; gap: 12px;
}
.footer-contacts a{ color: var(--orange-deep); text-decoration:none; font-weight:600; }
.footer-legal, .footer-copy{ font-size: 13px; color: var(--ink-soft); max-width: 70ch; }

/* ============ Responsive ============ */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; height: 280px; }
  .steps-row{ grid-template-columns: 1fr; }
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
  .form-grid{ grid-template-columns: 1fr; }
  .main-nav{ display:none; }
}

@media (max-width: 600px){
  body{ font-size: 16px; }
  .section{ padding-block: 64px; }
  .hero{ padding-block: 40px 60px; }
  .logo span{ font-size: 15px; }
  .header-inner .btn-small{ display:none; }
  .cat-grid{ grid-template-columns: 1fr 1fr; }
  .cat-card{ aspect-ratio: 1/1; }
  .cat-card-label{ font-size: 13.5px; left:12px; right:12px; bottom:12px; }
  .why-inner{ padding: 24px; }
  .timeline{ padding-left: 44px; }
  .timeline-marker{ left:-44px; width:38px; height:38px; font-size:15px; }
  .gift-box-3d{ width: 160px; height: 160px; }
  .hero-visual{ height: 220px; }
  .hero-cta-row .btn{ width:100%; }
  .hero-splash{ width: 92vw; top:-6%; right:-30%; opacity:.6; }
}

/* ============ Motion & theme safety ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity:1; transform:none; animation:none !important; }
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#171016;
    --bg-alt:#1F1620;
    --ink:#F6EFE6;
    --ink-soft:#C9BBA9;
    --line:#332A2D;
    --card-bg:#211820;
  }
  .site-header{ background: rgba(23,16,22,.82); }
  .btn-ghost{ color:#F6EFE6; }
  .field input, .field select{ background: rgba(255,255,255,.92); }
}