/* ===========================================================
   Gulshan ❤ Dilmurod
   Tungi olcha • atirgul • oltin
   =========================================================== */

:root{
  --night:#100509;
  --night-2:#1c0812;
  --wine:#3a1024;
  --rose:#ff6d95;
  --rose-2:#ff98b5;
  --rose-soft:#ffc2d3;
  --gold:#e8c27a;
  --gold-2:#f7e0b0;
  --cream:#fdeef2;
  --muted:#bd93a4;
  --serif:"Cormorant Garamond", Georgia, serif;
  --script:"Great Vibes", "Cormorant Garamond", cursive;
  --sans:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }

body{
  background:var(--night);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.locked,body.noscroll{ overflow:hidden; height:100%; }

img{ display:block; max-width:100%; }
button{ font-family:var(--sans); }

/* ============ don (grain) ============ */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-3%,2%); }
  40%{ transform:translate(2%,-3%); }
  60%{ transform:translate(-2%,-2%); }
  80%{ transform:translate(3%,1%); }
}

/* ============ o‘qish chizig‘i ============ */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:95;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  box-shadow:0 0 12px rgba(255,109,149,.8);
  transition:width .1s linear;
}

/* ============ musiqa tugmasi ============ */
.music-btn{
  position:fixed; z-index:97;
  top:calc(14px + env(safe-area-inset-top)); right:14px;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,194,211,.35);
  background:rgba(16,5,9,.5); color:var(--rose-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition:transform .2s, opacity .4s, border-color .3s;
}
.music-btn:active{ transform:scale(.9); }
.eq{ display:flex; align-items:flex-end; gap:2.5px; height:15px; }
.eq i{
  width:2.5px; border-radius:2px; background:currentColor; height:5px;
  animation:eqJump .9s ease-in-out infinite;
}
.eq i:nth-child(2){ animation-delay:.15s; }
.eq i:nth-child(3){ animation-delay:.3s; }
.eq i:nth-child(4){ animation-delay:.45s; }
@keyframes eqJump{ 0%,100%{ height:4px; } 50%{ height:15px; } }

.music-btn .mute-x{
  position:absolute; font-size:15px; color:var(--muted);
  opacity:0; transition:opacity .25s;
}
.music-btn.off{ color:rgba(189,147,164,.55); border-color:rgba(189,147,164,.3); }
.music-btn.off .eq i{ animation-play-state:paused; height:4px; opacity:.45; }
.music-btn.off .mute-x{ opacity:1; }
/* surat to‘liq ekranda ochilganda tugma xalaqit bermasin */
body.noscroll .music-btn{ opacity:0; pointer-events:none; }

/* qo‘shiq nomi (bir marta chiqib ketadi) */
.now-playing{
  position:fixed; z-index:97;
  top:calc(20px + env(safe-area-inset-top)); right:68px;
  max-width:min(62vw,260px);
  padding:8px 14px; border-radius:999px;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream); background:rgba(16,5,9,.6);
  border:1px solid rgba(232,194,122,.3);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateX(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.now-playing.show{ opacity:1; transform:none; }

/* ===========================================================
   PRELOADER — G ❤ D aylanma kirish
   =========================================================== */
.preloader{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%, #220914 0%, var(--night) 62%);
  overflow:hidden;
  transition:opacity .9s ease, visibility .9s;
}
.preloader.done{ opacity:0; visibility:hidden; }

/* --- fon nurlari --- */
.pre-aurora{ position:absolute; inset:0; filter:blur(70px); opacity:.55; }
.p-blob{ position:absolute; border-radius:50%; }
.pb1{ width:52vw; height:52vw; left:-14vw; top:6vh;  background:rgba(255,109,149,.42); animation:pFloat1 15s ease-in-out infinite; }
.pb2{ width:46vw; height:46vw; right:-12vw; top:22vh; background:rgba(232,194,122,.28); animation:pFloat2 18s ease-in-out infinite; }
.pb3{ width:56vw; height:56vw; left:16vw; bottom:-18vh; background:rgba(122,26,74,.55); animation:pFloat1 21s ease-in-out infinite reverse; }
@keyframes pFloat1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,-8%) scale(1.14)} }
@keyframes pFloat2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7%,7%) scale(1.1)} }

/* --- uchayotgan chang zarralari --- */
.pre-dust{ position:absolute; inset:0; pointer-events:none; }
.pre-dust i{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--gold-2); opacity:0;
  box-shadow:0 0 8px rgba(247,224,176,.9);
  animation:dustUp linear infinite;
}
@keyframes dustUp{
  0%{ transform:translateY(0) scale(.4); opacity:0; }
  15%{ opacity:.9; }
  100%{ transform:translateY(-58vh) scale(1); opacity:0; }
}

/* --- sahna --- */
.pre-stage{
  position:relative; flex:0 0 auto;
  width:min(74vw,250px); aspect-ratio:1;
  display:grid; place-items:center;
}

/* halqa */
.pre-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ring-track{ fill:none; stroke:rgba(255,194,211,.13); stroke-width:1.2; }
.ring-arc{
  fill:none; stroke:url(#ringGrad); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:150 440; stroke-dashoffset:0;
  transform-box:view-box; transform-origin:50% 50%;
  filter:drop-shadow(0 0 10px rgba(255,109,149,.75));
  animation:ringSpin 3.4s cubic-bezier(.5,.1,.5,.9) infinite;
}
@keyframes ringSpin{
  0%{ transform:rotate(0deg); stroke-dasharray:40 500; }
  50%{ stroke-dasharray:300 240; }
  100%{ transform:rotate(360deg); stroke-dasharray:40 500; }
}

/* orbit */
.orbit-wrap{
  position:absolute; inset:0;
  transition:transform 1s cubic-bezier(.6,-.25,.3,1.3), opacity .8s ease, filter .8s ease;
}
.orbit{ position:absolute; inset:0; animation:orbCW 13s linear infinite; }
.orbit.inner{ animation:orbCW 9s linear infinite reverse; }
@keyframes orbCW{ to{ transform:rotate(360deg); } }
@keyframes orbCCW{ to{ transform:rotate(-360deg); } }

/* .orb — butun sahnani qoplab, o‘z burchagiga buriladi */
.orb{ position:absolute; inset:0; transform:rotate(var(--a)); }
/* .anti — orbit aylanishini teskari qaytaradi (harf tik turadi) */
.orb .anti{
  position:absolute; left:50%; top:4%; width:0; height:0;
  display:grid; place-items:center;
  animation:orbCCW 13s linear infinite;
}
.orbit.inner .orb .anti{ top:26%; animation:orbCW 9s linear infinite; }
/* b — .orb ning burchagini qaytaradi */
.orb .anti > b{ display:block; transform:rotate(calc(-1 * var(--a))); font-weight:400; }

.orb-letter b{
  font-family:var(--script);
  font-size:clamp(34px,10vw,46px); line-height:1;
  background:linear-gradient(140deg,#fff 0%,var(--rose-soft) 45%,var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,109,149,.6));
  animation:letterGlow 2.6s ease-in-out infinite;
}
@keyframes letterGlow{
  0%,100%{ filter:drop-shadow(0 0 12px rgba(255,109,149,.45)); }
  50%{ filter:drop-shadow(0 0 24px rgba(247,224,176,.8)); }
}
/* yuraklarda transform band (burchakni ushlab turadi) — shuning uchun
   urish o‘rniga yorug‘lik bilan “nafas oladi” */
.orb-heart b{ color:var(--rose); font-size:15px; animation:heartGlow 1.8s ease-in-out infinite; }
.orb-heart.sm b{ font-size:10px; color:var(--rose-soft); animation-duration:2.4s; }
.orb-mini b{ color:var(--gold); font-size:11px; animation:heartGlow 3s ease-in-out infinite; }
@keyframes heartGlow{
  0%,100%{ opacity:.55; filter:drop-shadow(0 0 4px rgba(255,109,149,.5)); }
  50%    { opacity:1;   filter:drop-shadow(0 0 14px rgba(255,109,149,.95)); }
}

/* markazdagi G ❤ D */
.pre-core{
  position:absolute; place-self:center;
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:scale(.55);
  transition:opacity .55s ease, transform .8s cubic-bezier(.2,1.5,.4,1);
}
.core-l{
  font-family:var(--script); font-size:clamp(40px,12vw,56px); line-height:1;
  background:linear-gradient(140deg,#fff 0%,var(--rose-soft) 45%,var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,109,149,.55));
}
.core-heart{ width:22px; display:block; }
.core-heart svg{ width:100%; fill:var(--rose); filter:drop-shadow(0 0 16px rgba(255,109,149,.9)); }

/* portlash halqalari */
.pre-burst{
  position:absolute; place-self:center;
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid rgba(255,152,181,.9); opacity:0; pointer-events:none;
}
.preloader.merge .pre-burst{ animation:burst 1.1s ease-out .1s both; }
.preloader.merge .pre-burst.b2{ animation:burst 1.1s ease-out .32s both; border-color:rgba(247,224,176,.8); }
@keyframes burst{
  0%{ transform:scale(.4); opacity:1; }
  100%{ transform:scale(5.2); opacity:0; }
}

/* qo‘shilish lahzasi */
.preloader.merge .orbit-wrap{ opacity:0; transform:scale(.18) rotate(140deg); filter:blur(6px); }
.preloader.merge .ring-arc{ opacity:0; transition:opacity .5s; }
.preloader.merge .ring-track{ opacity:0; transition:opacity .5s; }
.preloader.merge .pre-core{ opacity:1; transform:scale(1); transition-delay:.25s; }
.preloader.merge .core-heart{ animation:beat 1.1s ease-in-out .5s infinite; }

/* matn va progress */
.pre-text{
  margin:26px 0 0; min-height:1.2em;
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rose-soft); opacity:.85;
  transition:opacity .4s ease;
}
.pre-text.swap{ opacity:0; }
.pre-bar{
  position:relative; margin-top:20px; width:min(52vw,190px); height:1.5px;
  background:rgba(255,194,211,.14); border-radius:2px; overflow:hidden;
}
.pre-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--rose),var(--gold-2));
  box-shadow:0 0 10px rgba(255,109,149,.8);
  transition:width .25s ease;
}
.pre-pct{
  margin-top:10px; font-size:9px; letter-spacing:.28em; color:rgba(189,147,164,.7);
}
.preloader.merge .pre-bar,
.preloader.merge .pre-pct{ opacity:0; transition:opacity .4s; }

@keyframes fadePulse{ 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes beat{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.18); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.12); }
  70%{ transform:scale(1); }
}

/* ============ aurora fon ============ */
.aurora{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.blob{
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.55;
  will-change:transform;
}
.b1{ width:70vw; height:70vw; left:-20vw; top:-15vh;
     background:radial-gradient(circle,#ff4f83,transparent 70%);
     animation:drift1 18s ease-in-out infinite; }
.b2{ width:60vw; height:60vw; right:-18vw; top:25vh;
     background:radial-gradient(circle,#a3316d,transparent 70%);
     animation:drift2 22s ease-in-out infinite; }
.b3{ width:55vw; height:55vw; left:10vw; bottom:-18vh;
     background:radial-gradient(circle,#e8a25c,transparent 70%);
     opacity:.32; animation:drift3 26s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(12vw,8vh) scale(1.15)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-10vw,-10vh) scale(1.1)} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8vw,-6vh) scale(1.2)} }

/* ============ uchayotgan yuraklar ============ */
.hearts-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.heart-p{
  position:absolute; bottom:-6vh; color:var(--rose);
  opacity:0; animation:floatUp linear forwards;
  filter:drop-shadow(0 0 6px rgba(255,109,149,.55));
  will-change:transform,opacity;
}
@keyframes floatUp{
  0%{ transform:translateY(0) scale(.55) rotate(0); opacity:0; }
  12%{ opacity:.9; }
  88%{ opacity:.45; }
  100%{ transform:translateY(-118vh) scale(1.15) rotate(28deg); opacity:0; }
}

/* uchqunlar */
.spark{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--gold-2); pointer-events:none;
  box-shadow:0 0 8px var(--gold);
  animation:twinkle 3.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(.5); }
  50%{ opacity:.95; transform:scale(1.4); }
}

/* ===========================================================
   INTRO — login'dan oldingi qisqa she'rlar
   =========================================================== */
.intro{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:34px 24px calc(34px + env(safe-area-inset-bottom));
  background:linear-gradient(165deg,#180810 0%,#280b1a 55%,#0c0409 100%);
  opacity:0; transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.6,0,.2,1), filter 1.1s;
}
.intro[hidden]{ display:none; }
.intro.on{ opacity:1; }
.intro.gone{ opacity:0; transform:scale(1.1); filter:blur(12px); pointer-events:none; }

.intro-stage{
  position:relative; z-index:3;
  width:100%; max-width:520px; min-height:44vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}

.intro-line{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(21px,6.2vw,31px); line-height:1.55;
  color:var(--cream);
  text-shadow:0 4px 26px rgba(0,0,0,.5);
  opacity:0; transform:translateY(20px); filter:blur(7px);
  transition:opacity .95s ease, transform .95s cubic-bezier(.2,.8,.25,1), filter .95s ease;
}
.intro-line.in{ opacity:1; transform:none; filter:blur(0); }
.intro-line.out{
  opacity:0; transform:translateY(-16px); filter:blur(7px);
  transition-duration:.7s;
}
.intro-line em{ font-style:italic; color:var(--rose-soft); }

.intro-final{
  opacity:0; transform:translateY(20px); filter:blur(7px);
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.25,1), filter 1.1s ease;
}
.intro-final[hidden]{ display:none; }
.intro-final.in{ opacity:1; transform:none; filter:blur(0); }
.intro-note{
  margin:20px 0 0; font-family:var(--serif); font-style:italic;
  font-size:clamp(15px,4.4vw,19px); color:var(--cream); opacity:.75;
}

/* kichik sanoq (intro ichida) */
.clock-sm .unit{ min-width:64px; padding:12px 8px; border-radius:14px; }
.clock-sm .unit b{ font-size:24px; }

/* qadam nuqtalari */
.intro-dots{ position:absolute; bottom:76px; display:flex; gap:7px; z-index:3; }
.intro-dots i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,194,211,.24); transition:background .5s ease, transform .5s ease;
}
.intro-dots i.on{ background:var(--rose); transform:scale(1.35); }

.intro-skip{
  position:absolute; bottom:calc(26px + env(safe-area-inset-bottom)); z-index:3;
  padding:9px 16px; border:0; border-radius:99px;
  background:rgba(255,255,255,.06); color:var(--muted);
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:color .3s ease, background .3s ease;
}
.intro-skip:hover{ color:var(--cream); background:rgba(255,255,255,.11); }

@media (prefers-reduced-motion:reduce){
  .intro-line,.intro-final,.intro{ transition-duration:.01ms !important; filter:none !important; }
}

/* ===========================================================
   QULF EKRANI
   =========================================================== */
.lock{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(165deg,#1b0a13 0%,#2b0c1d 55%,#0e050a 100%);
  transition:opacity .9s ease, transform 1s cubic-bezier(.6,0,.2,1), filter .9s;
}
.lock[hidden]{ display:none; }
.lock.out{ opacity:0; transform:scale(1.14); filter:blur(14px); pointer-events:none; }

.lock-card{
  position:relative; z-index:3;
  width:100%; max-width:392px;
  padding:40px 26px 30px;
  text-align:center; border-radius:26px;
  background:linear-gradient(165deg,rgba(255,255,255,.11),rgba(255,255,255,.028));
  border:1px solid rgba(255,194,211,.26);
  box-shadow:0 34px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  animation:cardIn 1.1s cubic-bezier(.2,.8,.25,1) .25s both;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(34px) scale(.95); }
  to{ opacity:1; transform:none; }
}
.lock-card.shake{ animation:shake .5s ease; }
@keyframes shake{
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-12px) rotate(-.6deg)}
  30%{transform:translateX(10px) rotate(.6deg)} 45%{transform:translateX(-7px)}
  60%{transform:translateX(5px)} 80%{transform:translateX(-3px)}
}

/* oltin burchaklar */
.corner{ position:absolute; width:22px; height:22px; opacity:.65; }
.corner.tl{ top:12px; left:12px; border-top:1px solid var(--gold); border-left:1px solid var(--gold); border-radius:8px 0 0 0; }
.corner.tr{ top:12px; right:12px; border-top:1px solid var(--gold); border-right:1px solid var(--gold); border-radius:0 8px 0 0; }
.corner.bl{ bottom:12px; left:12px; border-bottom:1px solid var(--gold); border-left:1px solid var(--gold); border-radius:0 0 0 8px; }
.corner.br{ bottom:12px; right:12px; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold); border-radius:0 0 8px 0; }

.lock-heart{ position:relative; width:58px; margin:0 auto 18px; }
.lock-heart svg{ width:100%; fill:var(--rose); filter:drop-shadow(0 6px 20px rgba(255,109,149,.65));
  animation:beat 1.5s ease-in-out infinite; }
.lock-ring{
  position:absolute; left:50%; top:52%; width:96px; height:96px;
  margin:-48px 0 0 -48px; border-radius:50%;
  border:1px solid rgba(255,109,149,.5);
  animation:ripple 2.6s ease-out infinite;
}
@keyframes ripple{
  0%{ transform:scale(.6); opacity:.9; }
  100%{ transform:scale(1.6); opacity:0; }
}

.eyebrow{
  margin:0 0 10px; font-size:10px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow.gold{ color:var(--gold); }

.lock-title{
  margin:0; font-family:var(--script); font-weight:400;
  font-size:clamp(46px,14vw,62px); line-height:1.05;
  background:linear-gradient(115deg,#fff 10%,var(--rose-soft) 45%,var(--gold-2) 90%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 24px rgba(255,109,149,.3));
  animation:shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.lock-amp{
  margin:2px 0 0; font-family:var(--serif); font-style:italic;
  font-size:17px; letter-spacing:.12em; color:var(--rose-soft);
}
.lock-sub{
  margin:16px 0 18px; font-family:var(--serif); font-size:16px;
  line-height:1.6; color:var(--cream); opacity:.78;
}

/* --- "…dan beri" jonli sanoq (qulf kartasida) --- */
.since{
  margin:0 0 20px; padding:12px 10px 11px;
  border-radius:15px;
  background:linear-gradient(165deg,rgba(255,109,149,.13),rgba(255,255,255,.02));
  border:1px solid rgba(255,194,211,.2);
  animation:sinceIn 1s cubic-bezier(.2,.8,.25,1) .55s both;
}
.since[hidden]{ display:none; }
@keyframes sinceIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}
.since-lbl{
  margin:0 0 8px; font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); opacity:.9;
}
.since-row{
  display:flex; align-items:baseline; justify-content:center;
  gap:6px; flex-wrap:wrap;
  font-size:10px; letter-spacing:.1em; color:var(--muted);
}
.since-row b{
  font-family:var(--serif); font-weight:600; font-size:19px;
  color:var(--rose-2); letter-spacing:0;
}
.since-row i{ color:rgba(255,194,211,.35); font-style:normal; }

.lock-form{ display:flex; flex-direction:column; gap:11px; }
.field{ position:relative; display:block; }
.field .ico{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:14px; color:var(--rose); opacity:.85; pointer-events:none;
}
.field input{
  width:100%; padding:16px 46px 16px 40px;
  font-family:var(--sans); font-size:16px; font-weight:300; color:#fff;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,194,211,.26);
  border-radius:15px; outline:none;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder{ color:rgba(253,238,242,.4); letter-spacing:.04em; }
.field input:focus{
  border-color:var(--rose); background:rgba(0,0,0,.42);
  box-shadow:0 0 0 4px rgba(255,109,149,.16);
}
.eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; border-radius:50%;
  background:transparent; color:var(--rose-soft); font-size:15px; cursor:pointer;
}

.btn{
  border:0; border-radius:15px; cursor:pointer; color:#fff;
  font-size:15.5px; font-weight:600; letter-spacing:.02em;
  background:linear-gradient(120deg,#ff4f83,#ff87ad 55%,#f0a9c4);
  background-size:180% 100%;
  box-shadow:0 14px 34px rgba(255,79,131,.4);
  transition:transform .18s ease, box-shadow .25s, background-position .6s;
}
.btn:active{ transform:scale(.97); }
.btn:hover{ background-position:100% 0; }
.btn-main{ padding:17px 20px; margin-top:4px; }

.lock-error{
  min-height:20px; margin:14px 0 0; font-size:13.5px; color:#ff9db6;
  opacity:0; transform:translateY(-4px); transition:.3s;
}
.lock-error.show{ opacity:1; transform:none; }

.hint-btn{
  margin-top:8px; padding:6px; border:0; background:none; cursor:pointer;
  color:var(--muted); font-size:11.5px; letter-spacing:.1em;
  text-decoration:underline; text-underline-offset:4px;
}
.hint{
  margin:6px 0 0; font-family:var(--serif); font-style:italic; font-size:14px;
  color:var(--gold); white-space:pre-line;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s ease, opacity .45s ease;
}
.hint.show{ max-height:120px; opacity:1; }

.lock-foot{
  position:relative; z-index:3; margin:24px 0 0;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(189,147,164,.5);
}

/* ===========================================================
   TOPBAR
   =========================================================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:52px; font-family:var(--serif); font-size:15px; letter-spacing:.24em;
  color:var(--cream);
  background:linear-gradient(180deg,rgba(16,5,9,.9),rgba(16,5,9,0));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(-100%); transition:.5s ease; pointer-events:none;
}
.topbar.show{ opacity:1; transform:none; }
.tb-heart{ color:var(--rose); font-size:12px; animation:beat 1.6s ease-in-out infinite; }

/* ===========================================================
   HERO
   =========================================================== */
.app{ animation:fadeIn 1.2s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:70px 26px; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center 22%;
  filter:saturate(.85) brightness(.55);
  transform:scale(1.08);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.06) translateY(0); }
  to{ transform:scale(1.18) translateY(-2%); }
}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(75% 55% at 50% 45%, rgba(70,12,38,.5), transparent 70%),
    linear-gradient(180deg, rgba(16,5,9,.72) 0%, rgba(16,5,9,.35) 40%, rgba(16,5,9,.96) 100%);
}
.hero-inner{ position:relative; z-index:3; }

.hero-title{
  margin:0; font-family:var(--script); font-weight:400;
  font-size:clamp(64px,21vw,110px); line-height:1;
  color:transparent;
  filter:drop-shadow(0 10px 34px rgba(255,109,149,.35));
}
/* har bir harf o‘zi paydo bo‘ladi (gradient har harfda alohida) */
.hero-title .ch{
  display:inline-block; opacity:0;
  transform:translateY(44px) rotate(8deg);
  background:linear-gradient(115deg,#fff 5%,var(--rose-soft) 50%,var(--gold-2) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:chIn 1s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes chIn{ to{ opacity:1; transform:none; } }

.hero-rule{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:20px auto 0; max-width:230px; color:var(--gold); font-size:14px;
  opacity:0; animation:fadeIn 1s 1.1s forwards;
}
.hero-rule::before,.hero-rule::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,194,122,.7),transparent);
}
.hero-line{
  margin:18px auto 0; max-width:23ch; min-height:3.4em;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(18px,5.2vw,23px); line-height:1.7; color:var(--cream);
}
.hero-line .cursor{
  display:inline-block; width:1px; height:1em; margin-left:2px;
  background:var(--rose); vertical-align:-.13em;
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }

.scroll-cue{
  position:absolute; bottom:calc(24px + env(safe-area-inset-bottom)); left:0; right:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(189,147,164,.85); animation:bob 2.4s ease-in-out infinite;
}
.scroll-cue i{
  width:9px; height:9px; border-right:1px solid var(--rose); border-bottom:1px solid var(--rose);
  transform:rotate(45deg);
}
@keyframes bob{ 0%,100%{transform:translateY(0);opacity:.7} 50%{transform:translateY(8px);opacity:1} }

/* ===========================================================
   UMUMIY BO‘LIM SARLAVHALARI
   =========================================================== */
.sec-head{ text-align:center; margin:0 auto 42px; max-width:520px; padding:0 22px; }
.sec-eyebrow{
  margin:0 0 12px; font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
}
.sec-title{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(28px,7.5vw,40px); line-height:1.25; color:#fff;
}

/* reveal */
.rv{ opacity:0; transform:translateY(38px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.25,1); }
.rv.in{ opacity:1; transform:none; }
.rv-l{ transform:translateX(-40px); }
.rv-r{ transform:translateX(40px); }

/* ===========================================================
   KUNLAR HISOBI
   =========================================================== */
.counter-sec{
  position:relative; padding:80px 22px; text-align:center;
  background:linear-gradient(180deg,#100509,#1c0812 50%,#100509);
}
.clock{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:6px;
}
.unit{
  min-width:74px; padding:16px 10px; border-radius:16px;
  background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,194,211,.2);
}
.unit b{
  display:block; font-family:var(--serif); font-weight:600; font-size:30px;
  color:var(--rose-2); line-height:1;
}
.unit span{
  display:block; margin-top:7px; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.counter-note{
  margin:22px 0 0; font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--cream); opacity:.75;
}

/* ===========================================================
   SABABLAR
   =========================================================== */
.reasons{ padding:86px 0 30px; }
.reason-grid{
  display:grid; gap:14px; padding:0 20px;
  max-width:620px; margin:0 auto;
  grid-template-columns:1fr;
}
.reason{
  position:relative; padding:24px 22px 22px; border-radius:20px; overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,194,211,.16);
}
.reason::before{
  content:attr(data-n);
  position:absolute; right:14px; top:4px;
  font-family:var(--serif); font-size:56px; font-weight:700;
  color:rgba(255,109,149,.13); line-height:1;
}
.reason h3{
  margin:0 0 8px; font-family:var(--serif); font-size:22px; font-weight:600;
  color:var(--rose-2);
}
.reason p{
  margin:0; font-family:var(--serif); font-size:17px; line-height:1.6;
  color:var(--cream); opacity:.82;
}

/* ===========================================================
   GALEREYA
   =========================================================== */
.gallery{ padding:80px 0 20px; }
.feed{
  display:flex; flex-direction:column; gap:78px;
  max-width:600px; margin:0 auto; padding:0 20px;
}

.card{ position:relative; }
.card .frame{
  position:relative; border-radius:24px; overflow:hidden; cursor:pointer;
  background:#24101c;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transform:rotate(var(--tilt,0deg));
  transition:transform .6s cubic-bezier(.2,.8,.25,1);
}
.card:nth-child(odd){ --tilt:-1.1deg; }
.card:nth-child(even){ --tilt:1.1deg; }
.card .frame::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:24px; border:1px solid rgba(232,194,122,.4);
  box-shadow:inset 0 0 0 5px rgba(16,5,9,.55);
}
.card .frame::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(16,5,9,.6) 100%);
}
.card .frame .shot{
  width:100%; height:auto; display:block;
  transform:scale(1.12) translateY(var(--py,0px));
  transition:transform .3s linear;
  will-change:transform;
}
.card .frame:active{ transform:rotate(0deg) scale(.99); }

.num{
  position:absolute; z-index:3; left:16px; top:16px;
  padding:6px 12px; border-radius:999px;
  font-size:10px; letter-spacing:.18em; color:var(--cream);
  background:rgba(16,5,9,.55); border:1px solid rgba(232,194,122,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tapme{
  position:absolute; z-index:3; right:16px; bottom:16px;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(253,238,242,.75);
}

.poem{ margin:24px 10px 0; text-align:center; }
.poem .mark{
  display:block; font-family:var(--serif); font-size:30px; line-height:1;
  color:var(--rose); opacity:.6; margin-bottom:10px;
}
.poem p{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(19px,5.4vw,25px); line-height:1.55; color:var(--cream);
}
.poem .who{
  display:block; margin-top:14px;
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); opacity:.75;
}

/* oraliq iqtiboslar */
.interlude{
  position:relative; margin:26px -20px; padding:78px 30px; overflow:hidden;
  text-align:center;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(122,26,66,.65), transparent 70%),
    linear-gradient(180deg,#160710,#230d19);
  border-top:1px solid rgba(232,194,122,.15);
  border-bottom:1px solid rgba(232,194,122,.15);
}
.interlude p{
  margin:0 auto; max-width:20ch;
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(24px,7vw,34px); line-height:1.4;
  background:linear-gradient(115deg,#fff,var(--rose-soft) 60%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.interlude .il-mark{
  display:block; margin-bottom:14px; font-family:var(--serif);
  font-size:44px; color:rgba(232,194,122,.5); line-height:.6;
}

/* ===========================================================
   XAT / KONVERT
   =========================================================== */
.letter{
  position:relative; padding:96px 22px 90px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg,#100509,#1c0812);
}
.letter-glow{
  position:absolute; left:50%; top:40%; width:min(90vw,520px); height:min(90vw,520px);
  margin-left:min(-45vw,-260px); border-radius:50%;
  background:radial-gradient(circle,rgba(255,109,149,.22),transparent 70%);
  filter:blur(40px); animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.2);opacity:1} }

.envelope{
  position:relative; z-index:2; width:min(84vw,320px); height:min(56vw,214px);
  margin:0 auto; cursor:pointer;
  transition:transform .5s ease, opacity .5s ease;
}
.envelope:active{ transform:scale(.97); }
.envelope.gone{ opacity:0; transform:scale(.8) translateY(-30px); pointer-events:none; }
.env-body{
  position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(165deg,#4b1730,#2c0e1d);
  border:1px solid rgba(232,194,122,.45);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.env-flap{
  position:absolute; left:0; right:0; top:0; height:56%;
  background:linear-gradient(180deg,#5d1c3b,#3b1226);
  border:1px solid rgba(232,194,122,.45);
  border-radius:12px 12px 0 0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top; transition:transform .7s ease;
  z-index:2;
}
.envelope.open .env-flap{ transform:rotateX(180deg); }
.env-seal{
  position:relative; z-index:3;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff;
  background:linear-gradient(140deg,#ff4f83,#c02b57);
  box-shadow:0 8px 24px rgba(255,79,131,.5), inset 0 2px 6px rgba(255,255,255,.35);
  animation:beat 1.6s ease-in-out infinite;
}
.env-hint{
  position:relative; z-index:3; margin:0;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--rose-soft);
  animation:fadePulse 2.4s ease-in-out infinite;
}

.letter-paper{
  position:relative; z-index:2; max-width:520px; margin:0 auto;
  padding:40px 26px 34px; border-radius:20px; text-align:left;
  background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(232,194,122,.3);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  animation:paperIn .9s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes paperIn{ from{opacity:0; transform:translateY(30px) scale(.97)} to{opacity:1;transform:none} }
.paper-to{
  margin:0 0 14px; font-family:var(--script); font-size:34px; color:var(--rose-2);
}
.paper-body{
  margin:0; min-height:11em; font-family:var(--serif);
  font-size:clamp(17px,4.6vw,20px); line-height:1.8; color:var(--cream); opacity:.92;
  white-space:pre-wrap;
}
.paper-sign{
  margin:22px 0 0; text-align:right;
  font-family:var(--script); font-size:30px; color:var(--gold-2);
}
.btn-love{ display:block; width:100%; margin:26px 0 0; padding:16px; }
.love-count{
  margin:14px 0 0; text-align:center; font-size:12px;
  letter-spacing:.08em; color:var(--muted);
}

/* uchadigan yuraklar (bosilganda) */
.pop-heart{
  position:fixed; z-index:99; pointer-events:none; font-size:22px;
  animation:pop 1.4s ease-out forwards;
}
@keyframes pop{
  0%{ transform:translate(-50%,-50%) scale(.4); opacity:1; }
  100%{ transform:translate(-50%,-280%) scale(1.6); opacity:0; }
}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{
  padding:50px 22px calc(46px + env(safe-area-inset-bottom));
  text-align:center; background:#0b0407;
}
.foot-rule{
  width:70px; height:1px; margin:0 auto 22px;
  background:linear-gradient(90deg,transparent,rgba(232,194,122,.8),transparent);
}
.foot p{
  margin:0 0 10px; font-family:var(--serif); font-size:19px;
  letter-spacing:.3em; color:var(--rose-soft);
}
.foot span{
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(189,147,164,.5);
}

/* ===========================================================
   LIGHTBOX
   =========================================================== */
.lightbox{
  position:fixed; inset:0; z-index:96;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,3,6,.96);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:60px 12px 108px; animation:fadeIn .28s ease both;
}
/* MUHIM: yopiq bo‘lganda ko‘rinmasin (display:flex ni bosib ketmasin) */
.lightbox[hidden]{ display:none !important; }
.lb-stage{ max-width:100%; max-height:100%; display:flex; }
.lightbox img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.7);
  animation:paperIn .45s ease both;
}
.lb-close{
  position:absolute; top:16px; right:16px; z-index:3;
  width:42px; height:42px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:16px; cursor:pointer;
}
.lb-nav{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; font-size:26px; line-height:1; cursor:pointer;
}
.lb-prev{ left:10px; } .lb-next{ right:10px; }
.lb-cap{
  position:absolute; bottom:52px; left:22px; right:22px; margin:0; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.5; color:var(--cream);
}
.lb-count{
  position:absolute; bottom:26px; left:0; right:0; margin:0; text-align:center;
  font-size:10px; letter-spacing:.24em; color:var(--muted);
}

/* ===========================================================
   QO‘SHIMCHA BEZAKLAR
   =========================================================== */

/* --- tushayotgan atirgul barglari (butun sayt bo‘ylab) --- */
.petals{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.petals i{
  position:absolute; top:-8vh;
  width:12px; height:12px;
  background:linear-gradient(140deg,var(--rose-2),var(--wine));
  border-radius:50% 0 50% 0;
  opacity:0;
  animation:petalFall linear infinite;
  will-change:transform;
}
/* tushish + chayqalish — bitta animatsiyada (telefon uchun yengil) */
@keyframes petalFall{
  0%  { transform:translate(0,0) rotate(0deg); opacity:0; }
  8%  { opacity:.7; }
  25% { transform:translate(26px,28vh) rotate(150deg); }
  50% { transform:translate(-24px,55vh) rotate(290deg); }
  75% { transform:translate(22px,82vh) rotate(430deg); }
  92% { opacity:.35; }
  100%{ transform:translate(-8px,112vh) rotate(560deg); opacity:0; }
}

/* --- bo‘lim sarlavhalarida oltin yaltirash --- */
.sec-title{
  background:linear-gradient(100deg,#fff 0%,#fff 36%,var(--gold-2) 50%,#fff 64%,#fff 100%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:titleSheen 7.5s ease-in-out infinite;
}
@keyframes titleSheen{
  0%{ background-position:135% 0; }
  60%,100%{ background-position:-35% 0; }
}
/* sarlavha ostidagi kichkina bezak */
.sec-head::after{
  content:"❦"; display:block; margin:14px auto 0;
  font-size:13px; color:var(--gold); opacity:.65;
  animation:fadePulse 4s ease-in-out infinite;
}

/* --- qulf kartasi chekkasida aylanuvchi nur --- */
.lock-card::after{
  content:""; position:absolute; inset:-1px; border-radius:27px;
  padding:2px; pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,109,149,.95) 45deg,
    rgba(247,224,176,1) 85deg, transparent 145deg, transparent 360deg);
  /* faqat chekka chizig‘i ko‘rinsin */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  filter:blur(1.2px); opacity:.9;
  animation:haloSpin 7s linear infinite;
}
@keyframes haloSpin{ to{ transform:rotate(360deg); } }

/* --- tugmalarda yorug‘lik yugurishi --- */
.btn-main, .btn-love{ position:relative; overflow:hidden; }
.btn-main::after, .btn-love::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:btnShine 4.2s ease-in-out infinite;
}
@keyframes btnShine{
  0%,62%{ left:-60%; } 92%,100%{ left:120%; }
}

/* --- topbar monogrammasi --- */
.tb-name{
  font-family:var(--script); font-size:20px; letter-spacing:0;
  background:linear-gradient(140deg,#fff,var(--rose-soft) 55%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,194,122,.45),transparent);
}

/* --- sabab kartalari --- */
.reason{
  transition:transform .5s cubic-bezier(.2,.8,.25,1), border-color .5s, box-shadow .5s;
}
.reason::after{
  content:""; position:absolute; left:22px; right:22px; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,152,181,.75),transparent);
  opacity:0; transition:opacity .9s ease .2s;
}
.reason.in::after{ opacity:1; }
.reason.in{ box-shadow:0 18px 44px rgba(0,0,0,.35); }
.reason:active{
  transform:translateY(-3px) scale(1.012);
  border-color:rgba(255,152,181,.42);
  box-shadow:0 22px 54px rgba(255,109,149,.16);
}
.reason h3::before{
  content:"♡"; margin-right:9px; font-size:14px;
  color:var(--gold); vertical-align:.06em;
}

/* --- suratlar ustidan yorug‘lik o‘tishi --- */
.card .frame .shine{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-120%);
}
.card.in .frame .shine{ animation:shineSweep 1.5s cubic-bezier(.4,0,.2,1) .35s both; }
@keyframes shineSweep{ to{ transform:translateX(120%); } }

/* --- iqtibos bloklari --- */
.interlude{ position:relative; }
.interlude::before,
.interlude::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:72px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,194,122,.55),transparent);
}
.interlude::before{ top:16px; }
.interlude::after{ bottom:16px; }

/* --- pastki qism --- */
.foot p{
  font-family:var(--script); font-size:30px; letter-spacing:.04em;
  background:linear-gradient(140deg,#fff,var(--rose-soft) 50%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===========================================================
   KATTA EKRAN
   =========================================================== */
@media (min-width:680px){
  .feed{ max-width:640px; gap:100px; }
  .reason-grid{ grid-template-columns:1fr 1fr; }
  .interlude{ margin-left:-40px; margin-right:-40px; border-radius:24px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.15s !important; }
  html{ scroll-behavior:auto; }
}