/* ==========================================================================
   Ogabek & Nozanin : raqamli to'y taklifnomasi
   Til: "shisha bog'" : yorug' botanik zamin ustida oq shisha qatlam.
   Zamin och krem-yashil, panellar oq shisha (backdrop-filter), matn to'q
   yashil : shuning uchun kontrast har qanday holatda ham AA dan o'tadi.
   Rejim: faqat yorug' (immersiv taklifnoma, bo'limlar orasida almashmaydi).
   Shaffoflik : approksimatsiya, Apple Liquid Glass emas.
   ========================================================================== */

/* ------------------------------------------------------------- 1. token -- */
:root{
  color-scheme: light;

  /* zamin */
  --paper:       #eef3e8;
  --paper-warm:  #f4f2e7;

  /* Shisha : namunada .40, lekin gul foni juda band bo'lgani uchun .47 —
     shu bilan panel ustidagi matn AA dan o'tadi, ko'rinish esa o'zgarmaydi. */
  --glass:       rgba(255, 255, 255, 0.47);
  --glass-2:     rgba(255, 255, 255, 0.56);
  --glass-brd:   rgba(255, 255, 255, 0.35);
  --glass-blur:  blur(7px) saturate(1.08);
  --glass-shadow:
    inset  1.5px  1.5px 2px rgba(255, 255, 255, 0.45),
    inset -1.5px -1.5px 3px rgba(120, 140, 110, 0.12),
    0 18px 50px -6px rgba(53, 69, 47, 0.30),
    0 6px  20px  2px rgba(53, 69, 47, 0.14);

  /* matn : to'q yashil siyoh */
  --ink:         #35452f;
  --ink-1:       rgba(53, 69, 47, 0.94);
  /* .92 : gul foni band, .82 da panel ustidagi mayda matn AA dan o'tmaydi */
  --ink-2:       rgba(53, 69, 47, 0.92);
  --ink-3:       rgba(53, 69, 47, 0.52);   /* faqat dekor */

  /* yagona akcent : butun sahifada o'zgarmaydi */
  --accent:      #47613e;
  --accent-soft: #7d9270;
  --accent-dim:  rgba(71, 97, 62, 0.28);

  --rule:        rgba(71, 97, 62, 0.18);

  /* shrift */
  --display:     'Viaoda Libre', 'Cormorant Garamond', 'Times New Roman', serif;
  --serif:       'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --sans:        'Lora', Georgia, serif;

  /* o'lcham : havoladagidek tor ustun */
  --shell:       480px;
  --shell-wide:  900px;
  --pad:         clamp(1.1rem, 4.5vw, 2rem);
  --rhythm:      clamp(3rem, 8vw, 5rem);

  /* burchak radiusi : bitta tizim */
  --r:           30px;
  --r-sm:        14px;
  --r-pill:      999px;

  --z-bg: 0;  --z-petal: 1;  --z-page: 2;  --z-bar: 40;  --z-gate: 90;  --z-box: 95;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100dvh;
  background-color: var(--paper);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: clamp(0.92rem, 0.88rem + 0.25vw, 1rem);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.locked{ overflow: hidden; }

h1,h2,h3{ margin: 0; font-weight: 400; text-wrap: balance; }
p{ margin: 0; }
a{ color: inherit; }
img{ display: block; max-width: 100%; }
::selection{ background: var(--accent); color: var(--paper-warm); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- 2. fon -- */
/* To'rt qatlam: krem zamin + yengil yuvindi + evkalipt fotosi + skrim.
   Foto oqartirilgan holda saqlangan, skrim esa yuqori va pastki chekkani
   yana yoritadi : shishasiz turgan matn ham AA kontrastidan o'tadi. */
.bg{
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background-color: var(--paper);
}

/* Yengil yuvindi : evkalipt fotosi ustida markazni biroz yoritadi.
   Foto o'zi tekstura berganidan keyin bu qatlam kuchli bo'lmasligi kerak,
   aks holda fon loyqa bo'lib qoladi. */
.bg-wash{
  position: absolute;
  inset: -14%;
  background-image:
    radial-gradient(circle at 50% 44%, rgba(248,250,242,.42), transparent 52%),
    radial-gradient(circle at 12% 16%, rgba(244,247,238,.24), transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(244,247,238,.24), transparent 40%);
  filter: blur(46px);
}

/* Shablonning asl gul naqshi (litsenziya sotib olingan).
   O'lcham 180% : namunadagi kattalik. Lekin sof foiz bo'lsa keng ekranda
   rasm o'z eniga nisbatan 3 barobardan ortiq cho'zilib, sifati buziladi
   (1920px ekranda 3456px chiziladi, manba esa 1900px).
   Shuning uchun clamp : kichik ekranda ham juda maydalashmaydi,
   kattasida esa manba enidan oshib ketmaydi. */
.bg-tile{
  position: absolute;
  inset: 0;
  background-image: url("../img/floral-bg.webp");
  background-repeat: repeat;
  background-size: clamp(900px, 180%, 1700px) auto;
  background-position: center top;
}

/* Foydalanuvchi o'z fotosini qo'yganda : juda yumshoq, naqsh ustida */
.bg-photo{
  position: absolute;
  inset: -4%;
  background-image: var(--bg-src, none);
  background-size: cover;
  background-position: center;
  filter: blur(3px) saturate(.86);
  transform: scale(1.04);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.bg-photo.on{ opacity: .34; }

/* Skrim : juda yengil : naqsh ko'rinib tursin, lekin chetlari yumshasin.
   Matn kontrasti shisha panellar ustida ta'minlanadi, skrim ustida emas. */
.bg-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(238,243,232,.46) 0%,
      rgba(238,243,232,.34) 15%,
      transparent 32%,
      transparent 76%,
      rgba(238,243,232,.42) 100%);
}

/* Tushayotgan gulbarglar. Kam sonli, transform ustida, mobil FPS ni yemaydi. */
.petals{
  position: fixed;
  inset: 0;
  z-index: var(--z-petal);
  pointer-events: none;
  overflow: hidden;
}
/* Olti bargli gulcha (Heroicons uslubidagi oddiy geometriya, MIT). */
.petals i{
  position: absolute;
  top: -8vh;
  width: 13px; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4f8ee'%3E%3Cg%3E%3Cellipse cx='12' cy='5' rx='2.2' ry='4.5'/%3E%3Cellipse cx='12' cy='5' rx='2.2' ry='4.5' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='5' rx='2.2' ry='4.5' transform='rotate(120 12 12)'/%3E%3Cellipse cx='12' cy='5' rx='2.2' ry='4.5' transform='rotate(180 12 12)'/%3E%3Cellipse cx='12' cy='5' rx='2.2' ry='4.5' transform='rotate(240 12 12)'/%3E%3Cellipse cx='12' cy='5' rx='2.2' ry='4.5' transform='rotate(300 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23d9c9a4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 1px rgba(53,69,47,.18));
  opacity: 0;
  animation: drift linear infinite;
  will-change: transform;
}
@keyframes drift{
  0%   { transform: translate3d(0,0,0) rotate(0deg)   scale(.7); opacity: 0; }
  8%   {                                                          opacity: .75; }
  92%  {                                                          opacity: .45; }
  100% { transform: translate3d(var(--dx, 3vw), 112vh, 0) rotate(420deg) scale(1); opacity: 0; }
}

/* ------------------------------------------------------------- 3. shisha -- */
.glass{
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r);
  box-shadow: var(--glass-shadow);
}
/* Ichki kartalar : panel ichida turgani uchun biroz zichroq */
.glass-2{
  background: var(--glass-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-sm);
  box-shadow:
    inset 1px 1px 1.5px rgba(255,255,255,.5),
    0 6px 18px -4px rgba(53,69,47,.16);
}

/* Shaffoflikni kamaytirish so'ralganda : to'liq to'ldirish, blur yo'q. */
@media (prefers-reduced-transparency: reduce){
  .glass, .glass-2{
    background: rgba(250,252,246,.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ------------------------------------------------------- 4. tipografiya -- */
/* overflow-x: clip : bezaklar panel chetidan chiqadi, lekin ekrandan emas.
   `clip` (scroll emas) : gorizontal siljish paydo bo'lmaydi. */
.page{ position: relative; z-index: var(--z-page); overflow-x: clip; }

/* Havoladagi kabi tor ustun : mobil 480px, kattaroq ekranda 900px. */
.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 0;
}
@media (min-width: 960px){ .shell{ max-width: var(--shell-wide); } }

.section{
  position: relative;
  z-index: 1;                 /* pastki gulchambar ustida turadi */
  padding: var(--rhythm) var(--pad);
  scroll-margin-top: 5rem;
}

.eyebrow{
  display: block;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
}

.h2{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.1rem + 2.2vw, 2.4rem);
  line-height: 1.18;
  color: var(--accent);
  letter-spacing: .02em;
}
.h2 .it{
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.2;
  padding-bottom: .08em;
  display: inline-block;
  color: var(--ink);
}
.h3{
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Havoladagi bo'lim sarlavhasi : markazda, katta harf, keng oraliq.
   Rangi --ink : gul foni ustida --accent yetarli kontrast bermaydi. */
.sec-title{
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.lead{
  font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 44ch;
}
.small{ font-size: .85rem; color: var(--ink-2); }

.divider{
  display: flex; align-items: center; gap: .9rem;
  color: var(--accent-soft);
  margin-inline: auto;
  max-width: 220px;
}
.divider::before, .divider::after{
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
}
.divider svg{ width: 22px; height: 22px; flex: none; }

/* Gul bezaklari : panel burchaklaridan tashqariga chiqadi.
   Chetga chiqish panel chekkasidan kichikroq : gorizontal toshib ketmasin
   (qo'shimcha himoya : .page { overflow-x: clip }). */
.decor{
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.decor img{ width: 100%; height: auto; display: block; }

/* flower2 chap yuqori burchak uchun chizilgan : o'ngga ko'zguda qo'yiladi */
.decor-tr{
  top: -66px;
  right: calc(-1 * clamp(8px, 2.6vw, 26px));
  width: clamp(112px, 31vw, 168px);
  transform: scaleX(-1);
}
.decor-bl{
  bottom: -30px;
  left: calc(-1 * clamp(8px, 2.6vw, 26px));
  width: clamp(112px, 32vw, 172px);
}
/* Panel tagidagi keng gulchambar : pastdan yarmi chiqib turadi.
   z-index 0 : panel foni ustida, lekin matn ostida (.section z-index 1).
   Panelga katta pastki bo'shliq berilgan — matn gulga kirib ketmaydi. */
.decor-bottom{
  left: 50%; bottom: 0;
  transform: translate(-50%, 30%);
  width: 128%;
  z-index: 0;
}

/* -------------------------------------------------------------- 5. gate -- */
/* Konvert. Sayt shu bilan ochiladi, musiqa ham shu bosishda yoqiladi
   (brauzer avtomat ovozga ruxsat bermaydi, foydalanuvchi harakati kerak). */
.gate{
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(238,243,232,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow: hidden;           /* chetdan chiqqan gullar va gulchalar ekranni kengaytirmasin */
  transition: opacity .3s ease, visibility .3s;
}
.gate[hidden]{ display: none; }
.gate.away{ opacity: 0; visibility: hidden; pointer-events: none; }

.gate-card{
  position: relative;
  width: min(100%, 22rem);
  padding: clamp(2.4rem, 7vw, 3.2rem) clamp(1.6rem, 5vw, 2.4rem);
  text-align: center;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  border-radius: 500px;
  animation: rise 1.1s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes rise{ from{ opacity: 0; transform: translateY(22px) scale(.98); } to{ opacity: 1; transform: none; } }

/* Burchak gullari : namunadagidek ikkalasi ham flower2, chap-yuqorisi
   ko'zguda. z-index -1 : karta o'z stacking context'ini yaratadi
   (backdrop-filter), shuning uchun gul shisha fonining ustida, lekin
   yozuvlarning ostida chiziladi. */
.gate-flower{
  position: absolute;
  z-index: -1;
  height: 128px;
  width: auto;
  max-width: none;
  opacity: .9;
  pointer-events: none;
}
/* Telefonda oval ekranning deyarli butun enini egallaydi : gullar
   ichkariroq turadi, aks holda ekran chetidan kesilib qoladi. */
.gate-flower-tl{ top: 3%;    left: -5%;   transform: rotate(5deg) scaleX(-1); }
.gate-flower-br{ bottom: 2%; right: -5%;  transform: rotate(80deg); }
@media (min-width: 768px){
  .gate-flower{ height: 180px; }
  .gate-flower-tl{ top: 2%;    left: -16%; }
  .gate-flower-br{ bottom: 1%; right: -16%; }
}

/* Muhr va undan tarqaladigan halqa : alohida elementlar, aks holda
   muhr kichrayganda halqa ham u bilan birga kichrayib ketadi. */
.gate-seal-wrap{
  position: relative;
  width: 52px; height: 52px;
  display: grid; place-items: center;
}
.gate-seal{
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
}
.gate-seal svg{ width: 22px; height: 22px; }
.gate-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* ---- ochilish : vaqtlar namunadan o'lchangan ----
   0 ms    muhr sinadi (500 ms) + halqa tarqaladi (600 ms)
   500 ms  karta cho'kib tepaga uchadi (800 ms) + 32 gulcha sochiladi (1400 ms)
   1100 ms fon so'na boshlaydi, 1400 ms da olib tashlanadi               */
.gate.opening .gate-seal{ animation: seal-break .5s cubic-bezier(.4,0,.2,1) forwards; }
.gate.opening .gate-ring{ animation: seal-ring .6s ease-out forwards; }
.gate-card.leaving{ animation: envelope-away .8s ease-in forwards; }

@keyframes seal-break{
  0%   { transform: scale(1)    rotate(0deg);  opacity: 1;  filter: brightness(1); }
  30%  { transform: scale(1.15) rotate(5deg);  opacity: .9; filter: brightness(1.3); }
  60%  { transform: scale(1.05) rotate(-3deg); opacity: .5; filter: brightness(1.5); }
  100% { transform: scale(0)    rotate(15deg); opacity: 0;  filter: brightness(1.5); }
}
@keyframes seal-ring{
  0%   { transform: scale(.8);  opacity: .8; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes envelope-away{
  0%   { transform: translateY(0)      rotate(0deg);  opacity: 1; }
  15%  { transform: translateY(10px)   rotate(.5deg); opacity: 1; }
  100% { transform: translateY(-120vh) rotate(-2deg); opacity: 0; }
}

.gate-burst{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.gate-burst i{
  position: absolute;
  left: 50%; top: 50%;
  width: 1em; height: 1em;    /* o'lcham inline font-size orqali */
  opacity: 0;
  /* Namunada fon to'q yashil, bizda och krem : oq gulchalar yo'qolib
     ketmasligi uchun namunadagidan kuchliroq soya. */
  filter: drop-shadow(0 1px 2px rgba(53,69,47,.42));
  animation: particle-burst 1.4s cubic-bezier(.25,.46,.45,.94) forwards;
}
.gate-burst svg{ display: block; width: 100%; height: 100%; }
@keyframes particle-burst{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0)   rotate(0deg); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(var(--rs, 15deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.6) rotate(var(--re, 180deg)); }
}
.gate-names{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.1rem + 3vw, 2.4rem);
  line-height: 1.2;
  color: var(--accent);
}
.gate-names .amp{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .46em;
  color: var(--ink-2);
  padding-block: .16em;
}
.gate-date{
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
}
.gate-note{ font-size: .88rem; color: var(--ink-2); }

/* --------------------------------------------------------------- 6. btn -- */
.btn{
  display: inline-flex;
  align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-warm);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding: .85rem 1.8rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .12s ease, box-shadow .3s ease;
}
.btn:hover{ background: #3a5133; border-color: #3a5133; box-shadow: 0 10px 26px rgba(53,69,47,.22); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .5; cursor: default; box-shadow: none; }
.btn svg{ width: 14px; height: 14px; }

.btn-ghost{
  color: var(--accent);
  background: rgba(255,255,255,.5);
  border-color: var(--accent-dim);
}
.btn-ghost:hover{ background: rgba(255,255,255,.8); border-color: var(--accent); color: var(--accent); box-shadow: none; }

/* ------------------------------------------------------------ 7. topbar -- */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-bar);
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(1rem, 4vw, 2.2rem);
  background: linear-gradient(180deg, rgba(238,243,232,.78), transparent);
  transition: background .4s ease, backdrop-filter .4s ease;
}
.topbar.stuck{
  background: rgba(244,247,239,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(71,97,62,.1);
}
.mono{
  font-family: var(--display);
  font-size: 1.05rem; letter-spacing: .22em; color: var(--accent); text-decoration: none;
}
.bar-right{ display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1rem); }

.lang{ display: flex; align-items: center; gap: .4rem; }
.lang button{
  border: 0; background: none;
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); padding: .3rem 0; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.lang button:hover{ color: var(--accent); }
.lang button[aria-pressed="true"]{ color: var(--accent); border-bottom-color: var(--accent); }

.music{
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  padding: 0;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.music:hover{ border-color: var(--accent); background: rgba(255,255,255,.85); }
.music i{ display: block; width: 1.5px; height: 9px; background: var(--accent); border-radius: 1px; }
.music[aria-pressed="true"] i{ animation: eq 1.05s ease-in-out infinite; }
.music[aria-pressed="true"] i:nth-child(2){ animation-delay: .16s; }
.music[aria-pressed="true"] i:nth-child(3){ animation-delay: .32s; }
@keyframes eq{ 0%,100%{ transform: scaleY(.35); } 50%{ transform: scaleY(1.55); } }
.music[hidden]{ display: none; }

/* -------------------------------------------------------------- 8. hero -- */
/* Havoladagi kabi : baland oval shisha, ostidan botanik dasta chiqadi. */
.hero{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(5rem, 16vw, 7rem) var(--pad) clamp(6rem, 18vw, 9rem);
}
.hero-arch{
  position: relative;
  width: 62%;
  max-width: 250px;
}
.hero-oval{
  position: relative;
  z-index: 2;
  /* Diqqat markazi : gul foni orqada ko'rinib tursin, lekin ismlar va
     ostidagi mayda yozuvlar aniq chiqsin. */
  background: rgba(255, 255, 255, .62);
  width: 100%;
  aspect-ratio: 239 / 368;
  border-radius: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.6rem 1.2rem;
  text-align: center;
}
.hero-kicker{
  font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
}
.hero-names{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 3.2vw, 2.1rem);
  line-height: 1.16;
  color: var(--accent);
  letter-spacing: .01em;
}
.hero-names .amp{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .5em;
  color: var(--ink-2);
  padding-block: .1em;
  line-height: 1.3;
}
.hero-date{
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
/* dastasi ovalning ostidan chiqib turadi */
.hero-spray{
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 44%);
  width: 136%;
  pointer-events: none;
  z-index: 1;
}
.hero-spray img{ width: 100%; height: auto; display: block; }

/* Gul foni juda band : iqtibos shisha ustida turmasa o'qilmaydi.
   (Namunada bu yerda umuman matn yo'q, faqat ovaldagi ismlar.) */
.hero-quote{
  margin-top: clamp(4rem, 13vw, 6rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, .92rem + .5vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink);
  max-width: 32ch;
  text-align: center;
  /* Hero dastasi absolute va z-index'li : usti ochiq qolsa uning barglari
     iqtibosning birinchi qatorini yopib qo'yadi. Shuning uchun z-index 2. */
  position: relative;
  z-index: 2;
  padding: clamp(1.1rem, 4vw, 1.5rem) clamp(1.3rem, 5vw, 1.9rem);
  background: rgba(255, 255, 255, .68);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r);
  box-shadow: var(--glass-shadow);
}
@media (prefers-reduced-transparency: reduce){
  .hero-quote{ background: rgba(250,252,246,.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ------------------------------------------------ 9. asosiy shisha panel -- */
/* Havoladagi kabi : hero'dan keyingi hamma bo'lim bitta shisha panel ichida */
.card{
  position: relative;
  margin-inline: clamp(14px, 4vw, 26px);
  margin-bottom: 10px;
  padding-top: clamp(1.6rem, 5vw, 2.4rem);
  /* Katta pastki bo'shliq : pastki gulchambar matnni yopib qo'ymasin
     (namunada ham shunday : pb-[42%]). */
  padding-bottom: clamp(5rem, 24vw, 10rem);
  isolation: isolate;
}

/* ---------------------------------------------------------- 10. oilalar -- */
.families{
  display: grid;
  gap: clamp(1rem, 3vw, 1.4rem);
  align-items: stretch;
  margin-top: 1.6rem;
}
@media (min-width: 720px){ .families{ grid-template-columns: 1fr auto 1fr; } }
.family{
  padding: clamp(1.3rem, 4vw, 1.8rem);
  text-align: center;
  display: grid;
  gap: .4rem;
  align-content: start;
}
.family .role{ font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.family .parents{
  font-family: var(--display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  line-height: 1.4;
  color: var(--ink);
}
.family .child{
  margin-top: .4rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  color: var(--accent);
}
.family .kind{ font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.families .amp{
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic;
  font-size: 1.8rem; color: var(--accent-soft);
  padding-block: .2rem;
}

/* Katta sana bloki : havoladagi SHANBA | 17 | OKTABR | 2026 */
.bigdate{
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 3vw, 1.2rem);
  font-family: var(--sans);
  color: var(--ink);        /* panel ustida turadi : --accent yetarli emas */
}
.bigdate .side{
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  text-align: center; line-height: 1.5; max-width: 6.5em;
}
.bigdate .day{
  font-family: var(--display);
  font-size: clamp(2.8rem, 2rem + 4.5vw, 4.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bigdate .bar{ width: 1px; align-self: stretch; background: var(--rule); }

/* ------------------------------------------------------- 11. countdown -- */
.count-card{ padding: clamp(1.3rem, 4vw, 1.9rem); display: grid; gap: 1.2rem; align-content: center; margin-top: 1.4rem; }
.countdown{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.tick{ text-align: center; }
.tick .n{
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tick .l{
  display: block; margin-top: .45rem;
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}

/* kalendar setkasi */
.cal{ padding: clamp(1.2rem, 3.5vw, 1.7rem); display: grid; gap: .9rem; margin-top: 1rem; }
.cal-head{
  text-align: center;
  font-family: var(--display);
  font-size: 1.1rem; letter-spacing: .1em; color: var(--accent);
}
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
.cal-grid span{
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-size: .75rem;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.cal-grid .dow{ color: var(--accent); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
/* belgilangan kun : shablonning asl yurak tasviri ichida */
.cal-grid .pick{
  position: relative;
  color: var(--paper-warm);
  font-weight: 600;
}
.cal-grid .pick::before{
  content: "";
  position: absolute;
  inset: -6%;
  background-image: url("../img/cal-heart.webp");
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: contain;
  z-index: -1;
}

.btn-row{ display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .4rem; }

/* ---------------------------------------------------------- 12. manzil -- */
.venue{ padding: clamp(1.4rem, 4vw, 2rem); display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.facts{ display: grid; gap: 0; }
.fact{ display: grid; gap: .3rem; padding-block: clamp(.8rem, 2.2vw, 1.1rem); text-align: center; }
.fact + .fact{ border-top: 1px solid var(--rule); }
.fact dt{ font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.fact dd{
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, .92rem + .55vw, 1.3rem);
  line-height: 1.4; color: var(--ink);
}
.fact dd small{
  display: block; margin-top: .25rem;
  font-family: var(--sans); font-size: .82rem; color: var(--ink-2);
}

/* --------------------------------------------------------- 13. timeline -- */
/* Boshqa bo'limlardagi kabi ichki karta : panel ustida to'g'ridan-to'g'ri
   turgan matn gul foni ustida yetarli kontrast bermaydi. */
.timeline-card{
  margin-top: 1.4rem;
  padding: clamp(.8rem, 3vw, 1.3rem) clamp(.9rem, 3.5vw, 1.5rem);
}
.timeline{ position: relative; display: grid; gap: 0; }
.timeline::before{
  content: ""; position: absolute;
  left: 3.6rem; top: .8rem; bottom: .8rem; width: 1px;
  background: linear-gradient(180deg, transparent, var(--rule) 12%, var(--rule) 88%, transparent);
}
@media (max-width: 480px){ .timeline::before{ left: 3rem; } }
.step{
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: clamp(1rem, 4vw, 1.5rem);
  padding-block: clamp(.8rem, 2.4vw, 1.2rem);
  position: relative;
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
@media (max-width: 480px){ .step{ grid-template-columns: 3rem 1fr; } }
.timeline.in .step{ opacity: 1; transform: none; }
.timeline.in .step:nth-child(1){ transition-delay: .1s; }
.timeline.in .step:nth-child(2){ transition-delay: .22s; }
.timeline.in .step:nth-child(3){ transition-delay: .34s; }
.timeline.in .step:nth-child(4){ transition-delay: .46s; }
.timeline.in .step:nth-child(5){ transition-delay: .58s; }
.step::after{
  content: ""; position: absolute;
  left: 3.6rem; top: calc(clamp(.8rem, 2.4vw, 1.2rem) + .5em);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  transform: translateX(-3px);
  box-shadow: 0 0 0 4px rgba(71,97,62,.12);
}
@media (max-width: 480px){ .step::after{ left: 3rem; } }
.step-time{
  font-family: var(--display);
  font-size: clamp(.95rem, .88rem + .4vw, 1.1rem);
  color: var(--ink); text-align: right;   /* panel ustida : --accent yetarli emas */
  font-variant-numeric: tabular-nums;
  padding-right: .55rem;   /* chiziqdagi nuqta bilan to'qnashmasin */
}
.step-body h3{ color: var(--ink); }
.step-body p{ margin-top: .3rem; font-size: .88rem; color: var(--ink-2); max-width: 34ch; }

/* ------------------------------------------------------- 14. dress code -- */
.dress{ padding: clamp(1.4rem, 4vw, 2rem); display: grid; gap: 1.1rem; justify-items: center; text-align: center; margin-top: 1.4rem; }
.swatches{ display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.swatches i{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 3px 10px rgba(53,69,47,.16);
  display: block;
}

/* ------------------------------------- 15. bizning hikoyamiz : karusel -- */
/* O'lchamlar namunadan : sahna 340px (desktop 520px), perspective 1000px,
   karta sahna balandligining 92% i, 2:3 nisbat, 16px burchak, 1.1s o'tish.
   Burilish/siljish qiymatlarini JS har karta uchun inline qo'yadi. */
.story{
  position: relative;
  width: 100%;
  max-width: 432px;
  margin: 1.5rem auto 0;
  padding-inline: .5rem;
  overflow: hidden;           /* 45° burilgan chetki kartalar panelga toshmasin */
}
@media (min-width: 768px){ .story{ max-width: 800px; } }

.story-stage{
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  touch-action: pan-y;        /* vertikal surish sahifaga, gorizontali karuselga */
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 768px){ .story-stage{ height: 520px; } }

.story-slide{
  position: absolute;
  height: 92%;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper);
  box-shadow:
    0 0 0 .25px rgba(255,255,255,.04),
    0 20px 25px -5px rgba(0,0,0,.10),
    0 8px 10px -6px rgba(0,0,0,.10);
  /* z-index ham o'tadi (butun son, o'rtada almashadi) : aks holda kirib
     kelayotgan karta hali chetda turganida markazdagining ustiga chiqib,
     uning chetini xira qatlam bilan yopib qo'yadi. */
  transition:
    transform 1.1s cubic-bezier(.4,0,.2,1),
    opacity   1.1s cubic-bezier(.4,0,.2,1),
    z-index   1.1s cubic-bezier(.4,0,.2,1);
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.story-slide img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;       /* sichqoncha bilan sudralganda rasm "ushlanmasin" */
}
.story-slide:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* Strelkalar : namunadagidek faqat kattaroq ekranda, telefonda surish yetadi */
.story-nav{
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 120;
  width: 40px; height: 40px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(53,69,47,.25);
  transition: background .25s ease;
}
.story-nav:hover{ background: rgba(255,255,255,.85); }
.story-nav svg{ width: 16px; height: 16px; }
.story-prev{ left: 1rem; }
.story-next{ right: 1rem; }
@media (min-width: 768px){ .story-nav{ display: grid; } }

.story-count{
  margin-top: .9rem;
  text-align: center;
  font-size: .875rem;
  color: var(--ink);          /* panel ustida turadi : --ink-2 yetarli emas */
  font-variant-numeric: tabular-nums;
}

/* lightbox */
.lightbox{
  position: fixed; inset: 0; z-index: var(--z-box);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(40,50,36,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox[hidden]{ display: none; }
.lightbox img{
  max-width: 100%; max-height: 82dvh;
  border-radius: var(--r-sm);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
.lb-btn{
  position: absolute;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease;
}
.lb-btn:hover{ background: rgba(255,255,255,.26); }
.lb-btn svg{ width: 18px; height: 18px; }
.lb-prev{ left: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next{ right: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-close{ top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); }
.lb-count{
  position: absolute; bottom: clamp(.9rem, 3vw, 1.8rem); left: 50%; transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .16em; color: rgba(255,255,255,.8);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ 16. forma umumiy -- */
.form{ display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.row{ display: grid; gap: 1.1rem; }
@media (min-width: 560px){ .row{ grid-template-columns: 1fr 1fr; } }

.field{ display: grid; gap: .45rem; }
.field label{
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
.field input, .field select, .field textarea{
  width: 100%;
  font-family: var(--sans); font-size: .95rem; font-weight: 400;
  color: var(--ink);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(71,97,62,.2);
  border-radius: var(--r-sm);
  padding: .72rem .85rem;
  appearance: none;
  transition: border-color .25s ease, background .25s ease;
}
.field textarea{ resize: vertical; min-height: 5rem; line-height: 1.65; }
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-3); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.88);
}
.field select{
  cursor: pointer;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2347613e' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}
.field .hint{ font-size: .75rem; color: var(--ink-2); }

.status{
  font-size: .86rem; color: var(--accent);
  min-height: 1.3rem; opacity: 0;
  transition: opacity .3s ease;
}
.status.on{ opacity: 1; }
.status.bad{ color: #a14b38; }

/* -------------------------------------------------- 17. mehmonlar kitobi -- */
.wishes{ display: grid; gap: .7rem; max-height: 24rem; overflow-y: auto; padding-right: .3rem; margin-top: 1.2rem; }
.wishes::-webkit-scrollbar{ width: 4px; }
.wishes::-webkit-scrollbar-thumb{ background: var(--accent-dim); border-radius: 4px; }
.wish{
  padding: .9rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.6);
}
.wish .who{
  font-family: var(--display); font-size: 1rem; color: var(--accent);
}
.wish .txt{ margin-top: .3rem; font-size: .88rem; color: var(--ink-1); }
.wishes-empty{ font-size: .88rem; color: var(--ink-2); font-style: italic; text-align: center; }

/* --------------------------------------------- 18. sovg'a : tilak qudug'i -- */
/* Havoladagi "Wishing Well" : bosilganda ochiladigan konvert */
.well{
  margin-top: 1.4rem;
  display: grid; justify-items: center; gap: 1rem;
}
.well-open{
  position: relative;
  width: min(100%, 15rem);
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: .5rem;
  padding: 1.4rem;
  color: var(--accent);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.well-open:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px -8px rgba(53,69,47,.3); }
.well-open .seal{ width: 96px; height: auto; display: block; }
.well-open .tap{
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2);
}
.well-sparkle{
  position: absolute; inset: 0;
  pointer-events: none;
  color: var(--accent-soft);
}
.well-sparkle i{
  position: absolute;
  width: 5px; height: 5px;
  background:
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat;
  opacity: .8;
  animation: twinkle 2.6s ease-in-out infinite;
}
.well-sparkle i:nth-child(1){ top: 14%; left: 16%; animation-delay: 0s; }
.well-sparkle i:nth-child(2){ top: 22%; right: 18%; animation-delay: .5s; }
.well-sparkle i:nth-child(3){ bottom: 24%; left: 22%; animation-delay: 1s; }
.well-sparkle i:nth-child(4){ bottom: 16%; right: 20%; animation-delay: 1.5s; }
@keyframes twinkle{ 0%,100%{ transform: scale(.5); opacity: .25; } 50%{ transform: scale(1.3); opacity: .9; } }

/* modal */
.sheet{
  position: fixed; inset: 0; z-index: var(--z-box);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(40,50,36,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sheet[hidden]{ display: none; }
.sheet-card{
  position: relative;
  width: min(100%, 26rem);
  max-height: 86dvh;
  overflow-y: auto;
  padding: clamp(1.6rem, 5vw, 2.2rem);
  display: grid; gap: 1.2rem;
  animation: rise .5s cubic-bezier(.22,.61,.36,1) both;
  /* Qorong'i fon ustida turgani uchun shaffof shisha emas : aks holda
     karta kulrang bo'lib qoladi va matn kontrasti yo'qoladi. */
  background: rgba(247, 250, 244, .97);
}
.sheet-close{
  position: absolute; top: .9rem; right: .9rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-dim);
  background: rgba(255,255,255,.6);
  color: var(--accent);
  cursor: pointer;
}
.sheet-close svg{ width: 15px; height: 15px; }
.sheet-note{ text-align: center; font-size: .88rem; color: var(--ink-2); }

.gifts{ display: grid; gap: 1rem; }
.gift{
  padding: 1.2rem;
  display: grid; gap: .7rem; justify-items: center; text-align: center;
}
.gift .who{ font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.gift .nm{ font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.gift .bank{ font-size: .74rem; letter-spacing: .08em; color: var(--ink-2); text-transform: uppercase; }
.gift .qr{
  width: 124px; height: 124px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--glass-brd);
  display: grid; place-items: center;
  overflow: hidden;
}
.gift .qr img{ width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gift .qr .ph{ color: var(--ink-3); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; padding: .8rem; text-align: center; }
.cardno{
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: .95rem; letter-spacing: .06em;
  color: var(--ink); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(71,97,62,.2);
  border-radius: var(--r-pill);
  padding: .45rem .45rem .45rem 1rem;
}
.copy{
  border: 0; border-radius: 50%;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--paper-warm);
  cursor: pointer; flex: none;
  transition: background .25s ease;
}
.copy:hover{ background: #3a5133; }
.copy svg{ width: 14px; height: 14px; }
.copied{ font-size: .7rem; color: var(--accent); min-height: 1.1rem; }

/* --------------------------------------------------------- 19. kontakt -- */
.people{ display: grid; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 620px){ .people{ grid-template-columns: 1fr 1fr; } }
.person{
  padding: clamp(1.2rem, 3.5vw, 1.6rem);
  display: grid; gap: .25rem; justify-items: center; text-align: center;
}
.person .role{ font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.person .nm{ font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.person a{
  margin-top: .35rem;
  font-size: .98rem; color: var(--ink-1); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
  font-variant-numeric: tabular-nums;
  transition: color .25s ease, border-color .25s ease;
}
.person a:hover{ color: var(--accent); border-bottom-color: var(--accent); }

.envoi{ text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.envoi-mark{ width: clamp(58px, 12vw, 84px); color: var(--accent-soft); }
.envoi-line{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, .95rem + 1.1vw, 1.7rem);
  line-height: 1.45; padding-bottom: .08em;
  color: var(--accent); max-width: 22ch;
}
/* Panel pozitsiyalangan, futer esa yo'q : z-index bo'lmasa gulchambar
   futer matnini yopib qo'yadi. Ustki bo'shliq chambar chetidan kattaroq. */
.foot-wrap{
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(5.5rem, 21vw, 8rem) var(--pad) clamp(2rem, 6vw, 3rem);
}
/* Gul foni ustida turadi : yengil shisha bo'lmasa o'qilmaydi. */
.foot{
  display: inline-block;
  padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--glass-brd);
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
@media (prefers-reduced-transparency: reduce){
  .foot{ background: rgba(250,252,246,.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ------------------------------------------------------- 20. reveal/a11y -- */
.reveal{ opacity: 0; transform: translateY(20px); }
.reveal.in{
  opacity: 1; transform: none;
  transition: opacity .95s ease, transform .95s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .step{ opacity: 1; transform: none; }
  .petals{ display: none; }
  .bg-photo{ opacity: .34; }
}

@media print{
  .bg, .petals, .topbar, .gate, .lightbox, .sheet, .music, .decor, .hero-spray, .story-nav{ display: none !important; }
  body{ background: #fff; color: #000; }
  .glass, .glass-2{ background: none; border: 1px solid #ccc; box-shadow: none; backdrop-filter: none; }
  .reveal, .step{ opacity: 1; transform: none; }
  .card{ margin: 0; }
}