/* Қыз ұзату, демо. Палитра «изумрудный барқыт и золотое шитье»: то, что носят и выбирают на ұзату,
   плюс ақ киіз для читаемых карточек и вишневый акцент тускиіза. Шрифты Yeseva One и Lora. */
:root{
  --velvet:#0d3a2d; --velvet-2:#124636; --velvet-3:#072119; --velvet-4:#0a2c22;
  --gold:#d9ad4f; --gold-hi:#f1d48b; --gold-lo:#9c7425; --gold-ink:#7a5813;
  --cherry:#a3262f; --cherry-2:#c23a3f;
  --felt:#fbf3e2; --felt-2:#f3e7cc; --ink:#13271f; --ink-2:#3f5148; --line:rgba(122,88,19,.28);
  --on:#f6eedb; --on-2:rgba(246,238,219,.78);
  --f-display:"Yeseva One","Times New Roman",serif;
  --f-body:"Lora",Georgia,"Times New Roman",serif;
  --fs:1;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:clip}
body{margin:0;overflow-x:clip;color:var(--on);font:calc(18px*var(--fs))/1.6 var(--f-body);
  background:var(--velvet-3)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 55% at 15% 8%,rgba(40,110,84,.55),transparent 60%),
    radial-gradient(80% 50% at 90% 60%,rgba(28,90,68,.45),transparent 65%),
    radial-gradient(120% 70% at 50% 110%,rgba(4,20,15,.9),transparent 60%),
    var(--velvet)}
/* ворс бархата: зерно только на фиксированном слое */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body.locked{overflow:hidden;height:100svh}
img{display:block;max-width:100%;height:auto}
button,a{touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- верхние элементы ---------- */
.sample{position:fixed;z-index:60;top:max(12px,env(safe-area-inset-top));left:12px;font:500 12px/1 var(--f-body);letter-spacing:.04em;
  color:var(--on);background:rgba(7,33,25,.8);border:1px solid rgba(217,173,79,.55);padding:8px 11px;border-radius:99px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ctrl{position:fixed;z-index:60;top:max(10px,env(safe-area-inset-top));right:10px;display:flex;gap:6px;align-items:center}
.pill{display:flex;align-items:center;height:38px;border-radius:99px;background:rgba(7,33,25,.8);border:1px solid rgba(246,238,219,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--on)}
/* переключатель языка и «Аа» в духе ою: золотой картуш с заостренными боками, ромб-разделитель, восьмиугольный медальон */
.lang{position:relative;isolation:isolate;gap:3px;height:40px;padding:0 9px;border:0;border-radius:0;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
.lang::before{content:"";position:absolute;z-index:-1;inset:1.5px;background:radial-gradient(120% 140% at 50% 0%,var(--velvet-2),var(--velvet-3) 70%);
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%)}
.lang i{width:5px;height:5px;flex:none;background:var(--gold);transform:rotate(45deg)}
.lang button{border:0;background:none;height:30px;min-width:38px;padding:0 10px;border-radius:0;font:600 13px/1 var(--f-body);letter-spacing:.08em;color:var(--on-2);
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%);transition:background-color .2s ease,color .2s ease}
.lang button[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--velvet-3)}
.icon-btn{width:38px;justify-content:center;padding:0}
.icon-btn svg{width:19px;height:19px}
#elderBtn{position:relative;isolation:isolate;width:42px;height:42px;border:0;border-radius:0;font:400 16px/1 var(--f-display);color:var(--gold-hi);
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);transition:color .2s ease}
#elderBtn::before{content:"";position:absolute;z-index:-1;inset:1.5px;background:radial-gradient(120% 120% at 50% 0%,var(--velvet-2),var(--velvet-3) 70%);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);transition:opacity .2s ease}
#elderBtn[aria-pressed="true"]{color:var(--velvet-3)}
#elderBtn[aria-pressed="true"]::before{opacity:0}
#soundBtn[hidden]{display:none}

/* ---------- ою-есік ---------- */
#gate{position:fixed;inset:0;margin:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:64px 16px max(28px,env(safe-area-inset-bottom));text-align:center;overflow:hidden;
  background:radial-gradient(70% 50% at 50% 46%,#16503e 0%,var(--velvet) 55%,var(--velvet-3) 100%)}
.gate-light{position:absolute;left:50%;top:46%;width:150vmax;height:150vmax;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,226,160,.95) 0%,rgba(241,212,139,.55) 9%,rgba(217,173,79,.12) 24%,transparent 42%);
  opacity:0;transform:scale(.25);transition:opacity .9s ease,transform 1.6s var(--ease-out)}
.gate-kicker{font:500 calc(15px*var(--fs))/1.3 var(--f-body);letter-spacing:.06em;color:var(--gold-hi);position:relative}
.portal{position:relative;width:min(250px,62vw);aspect-ratio:280/340;margin:6px 0 4px}
.arch{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.door{position:absolute;left:10%;right:10%;top:12.5%;bottom:3.5%;border:0;padding:0;background:none;perspective:900px;display:block}
.beam{position:absolute;inset:4% 2% 0;border-radius:50% 50% 0 0/22% 22% 0 0;
  background:radial-gradient(60% 70% at 50% 60%,#fff3d2,#f1d48b 40%,#c99536 100%);opacity:0;transition:opacity .5s ease}
.leaf{position:absolute;top:0;bottom:0;width:50%;
  transition:transform 1.25s cubic-bezier(.65,0,.35,1);filter:drop-shadow(0 10px 14px rgba(3,15,11,.55))}
.leaf svg{width:100%;height:100%;display:block}
.leaf-l{left:0;transform-origin:0 50%}
.leaf-r{right:0;transform-origin:100% 50%}
.door .ring{transform-box:fill-box;transform-origin:50% 0;animation:knock 3.2s var(--ease-out) 1.4s infinite}
.door.open .ring{animation:none}
.door.open .beam{opacity:1}
.door.open .leaf-l{transform:rotateY(-108deg)}
.door.open .leaf-r{transform:rotateY(108deg)}
#gate.opening .gate-light{opacity:1;transform:scale(1)}
#gate.through{transition:opacity .75s ease .1s,transform 1s var(--ease-out);opacity:0;transform:scale(1.35)}
#gate.through>*:not(.portal):not(.gate-light){opacity:0;transition:opacity .3s ease}
.gate-title{font:400 calc(17px*var(--fs))/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);position:relative}
.gate-name{font:400 calc(56px*var(--fs))/1 var(--f-display);color:var(--felt);position:relative;text-shadow:0 2px 20px rgba(3,15,11,.5)}
.gate-to{font:italic 400 calc(18px*var(--fs))/1.35 var(--f-body);color:var(--on);max-width:22em;text-wrap:balance;position:relative;min-height:1.35em}
.hint{font-size:calc(14px*var(--fs));color:var(--on-2);position:relative;display:flex;align-items:center;gap:8px}
.hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 2s ease-in-out infinite}
@keyframes knock{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(14deg)}76%{transform:rotate(-9deg)}84%{transform:rotate(4deg)}}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- первый экран ---------- */
main{position:relative}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.08);opacity:.001;transition:transform 2.2s var(--ease-out),opacity 1s ease}
main.in .hero-media img{transform:none;opacity:1}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,33,25,.55) 0%,transparent 14%,transparent 42%,rgba(9,40,30,.72) 60%,rgba(7,33,25,.96) 80%,var(--velvet-3) 100%)}
.hero-copy{width:100%;max-width:640px;margin:0 auto;padding:0 22px calc(max(30px,env(safe-area-inset-bottom)) + var(--ob));display:grid;justify-items:center;text-align:center;gap:6px}
.eyebrow{font:400 calc(16px*var(--fs))/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.name{font:400 calc(68px*var(--fs))/1.02 var(--f-display);color:var(--felt);text-shadow:0 3px 26px rgba(3,15,11,.6)}
.hero-orn{display:block;width:180px;height:24px;color:var(--gold);margin:2px 0 6px}
.hero-orn svg{width:100%;height:100%;display:block;overflow:visible}
.when{font:600 calc(19px*var(--fs))/1.35 var(--f-body);color:var(--felt)}
.where{font:400 calc(17px*var(--fs))/1.4 var(--f-body);color:var(--on-2)}
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:400px;margin-top:16px}
.count div{display:grid;gap:3px;padding:10px 0 8px;border:1px solid rgba(217,173,79,.38);border-radius:14px;background:rgba(7,33,25,.45)}
.count b{font:600 calc(26px*var(--fs))/1 var(--f-body);font-variant-numeric:tabular-nums;color:var(--gold-hi)}
.count span{font-size:calc(13px*var(--fs));color:var(--on-2)}
.hero-copy>*{opacity:0;transform:translateY(16px)}
main.in .hero-copy>*{opacity:1;transform:none;transition:opacity .9s ease,transform 1s var(--ease-out)}
main.in .hero-copy>*:nth-child(2){transition-delay:.08s}
main.in .hero-copy>*:nth-child(3){transition-delay:.16s}
main.in .hero-copy>*:nth-child(4){transition-delay:.24s}
main.in .hero-copy>*:nth-child(5){transition-delay:.32s}
main.in .hero-copy>*:nth-child(6){transition-delay:.4s}

/* ---------- контент и нить ---------- */
.content{position:relative;padding:34px 0 0;isolation:isolate}
.content>section,.content>footer{position:relative;z-index:1}
.thread{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.thread path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.t-chalk{stroke:rgba(241,212,139,.2);stroke-width:1.2;stroke-dasharray:2 6}
.t-shadow{stroke:rgba(2,12,9,.55);stroke-width:3.2;transform:translate(1px,1.6px)}
.t-gold{stroke:var(--gold);stroke-width:2.3}
.t-needle{fill:var(--gold-hi);filter:drop-shadow(0 0 6px rgba(255,220,140,.9))}
.knot{height:150px}

section{margin:0 16px}
h2{font:400 calc(34px*var(--fs))/1.15 var(--f-display);color:var(--felt);text-wrap:balance;overflow-wrap:anywhere}
.sub{color:var(--on-2);font-size:calc(17px*var(--fs));margin-top:8px}
.rise{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s var(--ease-out)}
.rise.vis{opacity:1;transform:none}

/* для старших */
.elder-card{max-width:600px;margin:0 auto;padding:22px 20px;border-radius:22px;background:rgba(7,33,25,.62);border:1px solid rgba(217,173,79,.45);
  margin-left:max(16px,calc(50% - 300px));margin-right:max(16px,calc(50% - 300px))}
.elder-card h2{font-size:calc(26px*var(--fs))}
.elder-card p{color:var(--on-2);margin-top:6px;font-size:calc(17px*var(--fs))}
.elder-btns{display:grid;gap:10px;margin-top:16px}
.big-toggle{display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 18px;border-radius:18px;text-align:left;
  border:1px solid rgba(246,238,219,.3);background:rgba(246,238,219,.06);transition:background-color .2s ease,border-color .2s ease,transform .12s var(--ease-out)}
.big-toggle:active{transform:scale(.98)}
.big-toggle b{display:block;font:600 calc(21px*var(--fs))/1.2 var(--f-body);color:var(--felt)}
.big-toggle small{display:block;font-size:calc(15px*var(--fs));color:var(--on-2);margin-top:2px}
.big-toggle .aa{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:400 20px/1 var(--f-display);background:rgba(217,173,79,.16);color:var(--gold-hi)}
.big-toggle svg{flex:none;width:46px;height:46px;padding:10px;border-radius:50%;background:rgba(217,173,79,.16);color:var(--gold-hi)}
.big-toggle[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
.big-toggle[aria-pressed="true"] b,.big-toggle[aria-pressed="true"] small{color:var(--velvet-3)}
.big-toggle[aria-pressed="true"] .aa{background:var(--velvet-3);color:var(--gold-hi)}

/* ақ киіз: карточка с шитой рамкой */
.card{max-width:600px;margin-left:max(16px,calc(50% - 300px));margin-right:max(16px,calc(50% - 300px));color:var(--ink);padding:40px 30px 36px;
  border:1.5px solid #a8822f;border-radius:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23a8822f' stroke-linecap='round'%3E%3Cg transform='matrix(1 0 0 1 0 0)'%3E%3Cpath d='M4 32V15A11 11 0 0 1 15 4h17' stroke-width='1.5'/%3E%3Cpath d='M4 32c5 0 7-4 4.5-6.5S3 24 5.5 26.5M32 4c0 5-4 7-6.5 4.5S24 3 26.5 5.5' stroke-width='1.4'/%3E%3Cpath d='M11 11l5 5M16 11l-5 5' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") left 9px top 9px/40px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23a8822f' stroke-linecap='round'%3E%3Cg transform='matrix(-1 0 0 1 40 0)'%3E%3Cpath d='M4 32V15A11 11 0 0 1 15 4h17' stroke-width='1.5'/%3E%3Cpath d='M4 32c5 0 7-4 4.5-6.5S3 24 5.5 26.5M32 4c0 5-4 7-6.5 4.5S24 3 26.5 5.5' stroke-width='1.4'/%3E%3Cpath d='M11 11l5 5M16 11l-5 5' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") right 9px top 9px/40px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23a8822f' stroke-linecap='round'%3E%3Cg transform='matrix(1 0 0 -1 0 40)'%3E%3Cpath d='M4 32V15A11 11 0 0 1 15 4h17' stroke-width='1.5'/%3E%3Cpath d='M4 32c5 0 7-4 4.5-6.5S3 24 5.5 26.5M32 4c0 5-4 7-6.5 4.5S24 3 26.5 5.5' stroke-width='1.4'/%3E%3Cpath d='M11 11l5 5M16 11l-5 5' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") left 9px bottom 9px/40px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23a8822f' stroke-linecap='round'%3E%3Cg transform='matrix(-1 0 0 -1 40 40)'%3E%3Cpath d='M4 32V15A11 11 0 0 1 15 4h17' stroke-width='1.5'/%3E%3Cpath d='M4 32c5 0 7-4 4.5-6.5S3 24 5.5 26.5M32 4c0 5-4 7-6.5 4.5S24 3 26.5 5.5' stroke-width='1.4'/%3E%3Cpath d='M11 11l5 5M16 11l-5 5' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") right 9px bottom 9px/40px no-repeat,var(--felt);
  box-shadow:inset 0 0 0 5px var(--felt),inset 0 0 0 6px rgba(168,130,47,.7),0 30px 60px -30px rgba(2,12,9,.8)}
.card h2{color:var(--ink)}
.card .sub{color:var(--ink-2)}
.dear{font:400 calc(28px*var(--fs))/1.2 var(--f-display);color:var(--cherry);margin-bottom:16px}
.invite{font-size:calc(19px*var(--fs));line-height:1.65;color:var(--ink)}
.hosts{display:grid;gap:4px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.hosts span{font-size:calc(14px*var(--fs));color:var(--ink-2);letter-spacing:.04em}
.hosts b{font:400 calc(23px*var(--fs))/1.25 var(--f-display);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border-radius:99px;border:1.5px solid currentColor;
  background:transparent;font:600 calc(16px*var(--fs))/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .12s var(--ease-out)}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:scale(.97)}
.greet .btn{margin-top:24px;color:var(--velvet)}
@media (hover:hover) and (pointer:fine){.greet .btn:hover{background:var(--velvet);color:var(--felt);border-color:var(--velvet)}}

/* фото */
.photos{max-width:640px;margin:56px auto 0;padding:0 16px;display:grid;gap:14px}
.photos figure{margin:0;overflow:hidden;border:1px solid rgba(217,173,79,.5);background:var(--velvet-4)}
.ph-wide{border-radius:999px 999px 18px 18px/90px 90px 18px 18px}
.ph-wide img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%}
.ph-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
.ph-tall{border-radius:18px}
.ph-tall img{width:100%;aspect-ratio:2/3;object-fit:cover}
.bata{margin:0;display:grid;gap:12px;padding:6px 0}
.bata p{font:400 calc(23px*var(--fs))/1.3 var(--f-display);color:var(--gold-hi)}
.bata cite{font:italic 400 calc(15px*var(--fs))/1.4 var(--f-body);color:var(--on-2)}
.credit{font-size:calc(13px*var(--fs));color:rgba(246,238,219,.55);line-height:1.5}

/* программа и сандық */
.program{max-width:600px;margin-left:max(16px,calc(50% - 300px));margin-right:max(16px,calc(50% - 300px));text-align:center}
.sandyq{position:relative;display:block;width:min(300px,82vw);aspect-ratio:300/258;margin:26px auto 0;border:0;padding:0;background:none;perspective:700px}
.sq-glow{position:absolute;left:4%;right:4%;top:18%;height:42%;z-index:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,160,.95),rgba(241,212,139,.4) 50%,transparent);opacity:0;transform:scale(.6);transition:opacity .6s ease .15s,transform .9s var(--ease-out) .15s;pointer-events:none}
.sq-box{position:absolute;left:0;right:0;bottom:0;height:65.9%}
.sq-lid{position:absolute;left:0;right:0;top:0;height:37.2%;z-index:2;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .9s var(--ease-out)}
.sq-lid svg,.sq-inner{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sq-lid svg{filter:drop-shadow(0 6px 8px rgba(2,12,9,.45))}
.sq-inner{position:absolute;left:2.7%;right:2.7%;top:4%;bottom:0;border-radius:12px;transform:rotateX(180deg);
  background:radial-gradient(80% 90% at 50% 100%,#7a1a20,#3d0a0e);box-shadow:inset 0 0 0 3px #d9ad4f,inset 0 0 0 7px #3d0a0e,inset 0 0 0 8px rgba(241,212,139,.6)}
.sq-box svg,.sq-lid svg{width:100%;height:100%;display:block;overflow:visible}
.sq-box{filter:drop-shadow(0 22px 26px rgba(2,12,9,.6))}
.sq-label{position:absolute;left:50%;bottom:-6px;translate:-50% 100%;white-space:nowrap;font:600 calc(16px*var(--fs))/1 var(--f-body);color:var(--velvet-3);background:var(--gold);padding:12px 20px;border-radius:99px;box-shadow:0 10px 24px -10px rgba(217,173,79,.7);transition:opacity .3s ease,transform .3s var(--ease-out)}
.sandyq:active .sq-lid{transform:rotateX(-12deg)}
.sandyq[aria-expanded="true"] .sq-lid{transform:translateY(91.6%) rotateX(-128deg)}
.sandyq[aria-expanded="true"] .sq-glow{opacity:1;transform:scale(1)}
.sandyq[aria-expanded="true"] .sq-label{opacity:0;transform:translateY(-8px)}
.sandyq .lock{transform-box:fill-box;transform-origin:50% 0;animation:knock 3.4s var(--ease-out) 2s infinite}
.sandyq[aria-expanded="true"] .lock{animation:none}
.prog-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease-out);margin-top:64px}
.prog-wrap>div{overflow:hidden;min-height:0}
.prog-wrap.open{grid-template-rows:1fr}
.prog{list-style:none;margin:0;padding:4px 0 6px;display:grid;gap:12px;text-align:left}
.prog li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:18px;background:var(--felt);color:var(--ink);
  border-left:4px solid var(--gold);opacity:0;transform:translateY(-34px) scale(.96);transition:opacity .5s ease,transform .7s var(--ease-out)}
.prog-wrap.open .prog li{opacity:1;transform:none}
.prog time{font:400 calc(25px*var(--fs))/1.1 var(--f-display);color:var(--cherry);padding-top:2px}
.prog h3{font:600 calc(20px*var(--fs))/1.25 var(--f-body);color:var(--ink)}
.prog p{color:var(--ink-2);font-size:calc(16px*var(--fs));line-height:1.45;margin-top:3px}

/* место */
.venue{max-width:600px;margin-left:max(16px,calc(50% - 300px));margin-right:max(16px,calc(50% - 300px));text-align:center;padding:30px 20px;border-radius:200px 200px 24px 24px/150px 150px 24px 24px;
  background:radial-gradient(90% 70% at 50% 0%,rgba(241,212,139,.14),transparent 70%),rgba(7,33,25,.55);border:1px solid rgba(217,173,79,.45)}
.v-label{font-size:calc(15px*var(--fs));color:var(--gold);letter-spacing:.06em;margin:46px 0 8px}
.venue h2{font-size:calc(36px*var(--fs))}
.addr{margin-top:12px;font-size:calc(18px*var(--fs));color:var(--felt)}
.addr small{display:block;color:var(--on-2);font-size:calc(14.5px*var(--fs));margin-top:6px}
.go{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;justify-content:center}
.go .btn{color:var(--felt);border-color:rgba(246,238,219,.5);flex:1 1 auto}
@media (hover:hover) and (pointer:fine){.go .btn:hover{background:var(--felt);color:var(--velvet-3)}}

/* RSVP */
.rsvp{text-align:center}
.rsvp h2{font-size:calc(40px*var(--fs));color:var(--velvet)}
.stage{position:relative;min-height:220px;display:grid;align-content:start;justify-items:center;gap:14px;margin-top:26px}
.big{display:inline-flex;align-items:center;justify-content:center;width:min(100%,340px);min-height:62px;border-radius:99px;font:600 calc(19px*var(--fs))/1.1 var(--f-body);border:1.5px solid transparent;text-decoration:none;padding:0 22px;
  transition:background-color .2s ease,transform .12s var(--ease-out)}
.big:active{transform:scale(.97)}
.yes{background:var(--velvet);color:var(--felt);box-shadow:0 14px 28px -14px rgba(7,33,25,.8)}
@media (hover:hover) and (pointer:fine){.yes:hover{background:var(--velvet-2)}}
.pair{background:var(--felt-2);color:var(--velvet);border-color:var(--velvet)}
@media (hover:hover) and (pointer:fine){.pair:hover{background:#ecdcb8}}
.no{width:auto;min-width:220px;padding:0 30px;background:transparent;color:var(--ink);border-color:rgba(19,39,31,.4);font-size:calc(17px*var(--fs));
  transition:transform .34s cubic-bezier(.3,.7,.2,1),background-color .2s ease}
.no.gave{border-color:var(--cherry);color:var(--cherry)}
.panel{display:grid;gap:16px;justify-items:center;width:100%;max-width:380px;margin:0 auto}
.panel[hidden]{display:none}
.panel h3{font:400 calc(25px*var(--fs))/1.2 var(--f-display);color:var(--ink)}
.panel p{color:var(--ink-2)}
.stepper{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:6px;background:var(--felt-2)}
.stepper button{width:54px;height:54px;border-radius:50%;border:0;background:var(--velvet);color:var(--felt);font:400 26px/1 var(--f-body);transition:transform .12s var(--ease-out)}
.stepper button:active{transform:scale(.93)}
.stepper output{min-width:64px;text-align:center;font:400 calc(32px*var(--fs))/1 var(--f-display);color:var(--ink)}
.field{display:grid;gap:8px;width:100%;text-align:left}
.field span{font-size:calc(15px*var(--fs));color:var(--ink-2)}
textarea,.field input{width:100%;min-height:100px;resize:vertical;border-radius:14px;border:1px solid rgba(19,39,31,.35);background:#fffaf0;color:var(--ink);padding:12px 14px;font:400 max(16px,calc(17px*var(--fs)))/1.5 var(--f-body)}
textarea::placeholder,.field input::placeholder{color:#6d7a72}
textarea:focus,.field input:focus{outline:2px solid var(--gold-lo);outline-offset:1px}
.thanks b{display:block;font:400 calc(34px*var(--fs))/1.2 var(--f-display);color:var(--velvet)}
.link-btn{border:0;background:none;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;font-size:calc(15px*var(--fs));padding:10px}
.demo-note{margin-top:18px;font-size:calc(13px*var(--fs));color:#5c6b63}

/* тілектер */
.wishes{max-width:600px;margin:64px auto 0;padding:0 16px;margin-left:max(0px,calc(50% - 300px));margin-right:max(0px,calc(50% - 300px))}
.wishes h2{text-align:center;margin-bottom:22px}
.wishes-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.wish{border-radius:20px;padding:18px 20px 16px;display:grid;gap:10px;background:rgba(7,33,25,.55);border:1px solid rgba(217,173,79,.3)}
.wish q{quotes:none;font:italic 400 calc(19px*var(--fs))/1.45 var(--f-body);color:var(--felt)}
.wish span{font-size:calc(14.5px*var(--fs));color:var(--gold)}
.wish.mine{border-color:var(--gold);background:rgba(217,173,79,.12)}

/* панель хозяйки (демо) */
.host{max-width:600px;margin-left:max(16px,calc(50% - 300px));margin-right:max(16px,calc(50% - 300px))}
.host-tag{display:grid;gap:4px;justify-items:center;text-align:center;margin-bottom:14px}
.host-tag span{font:600 calc(13px*var(--fs))/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--velvet-3);background:var(--gold);padding:7px 12px;border-radius:99px}
.host-tag small{font-size:calc(14px*var(--fs));color:var(--on-2)}
.host-card{border-radius:26px;background:var(--felt);color:var(--ink);padding:22px 18px 18px;border:2px dashed rgba(217,173,79,.9);outline:6px solid rgba(217,173,79,.12)}
.host-head h2{font-size:calc(27px*var(--fs));color:var(--ink)}
.host-head p{color:var(--ink-2);font-size:calc(15px*var(--fs));margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.st{border-radius:16px;padding:12px 8px 10px;text-align:center;display:grid;gap:2px}
.st b{font:400 calc(34px*var(--fs))/1.05 var(--f-display);font-variant-numeric:tabular-nums}
.st span{font-size:calc(14px*var(--fs));line-height:1.25}
.st-yes{background:var(--velvet);color:var(--felt)}
.st-yes b{color:var(--gold-hi)}
.st-wait{background:#f1dfae;color:#5a400c}
.st-no{background:#efd2cf;color:#7d1f25}
.bar{display:flex;height:12px;border-radius:99px;overflow:hidden;margin-top:14px;gap:3px}
.bar i{display:block;height:100%;border-radius:99px;transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--ease-out)}
.host.vis .bar i{transform:none}
.b-yes{flex:214;background:var(--velvet)}
.b-wait{flex:80;background:#d9ad4f;transition-delay:.12s!important}
.b-no{flex:12;background:var(--cherry);transition-delay:.24s!important}
.host h3{font:600 calc(16px*var(--fs))/1 var(--f-body);color:var(--ink-2);margin:22px 0 6px}
.last{list-style:none;margin:0;padding:0}
.last li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:11px 0;border-top:1px solid var(--line)}
.last b{font:600 calc(16.5px*var(--fs))/1.3 var(--f-body)}
.last span{grid-column:1;font-size:calc(14.5px*var(--fs));color:var(--ink-2)}
.last time{grid-row:1/3;grid-column:2;align-self:center;font-size:calc(13px*var(--fs));color:#6d7a72;white-space:nowrap}
.last .s-yes{color:#1d5a44}
.last .s-no{color:var(--cherry)}
.remind-note{margin:4px 0 0;font-size:calc(15px*var(--fs));line-height:1.45;color:var(--ink-2)}
.remind-row{display:grid;gap:10px;margin-top:14px}
.remind{display:flex;align-items:center;gap:14px;width:100%;min-height:66px;padding:10px 18px;text-decoration:none;font:inherit;border-radius:18px;border:0;text-align:left;
  background:#1f7a4f;color:#fff;box-shadow:0 14px 28px -14px rgba(19,90,58,.8);transition:transform .12s var(--ease-out),background-color .2s ease}
.remind:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.remind:hover{background:#238a59}}
.remind svg{flex:none;width:44px;height:44px;padding:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.remind b{display:block;font:600 calc(21px*var(--fs))/1.2 var(--f-body)}
.remind small{display:block;font-size:calc(14.5px*var(--fs));opacity:.9;margin-top:2px}
.remind-wa{background:transparent;color:#1f7a4f;box-shadow:inset 0 0 0 1.5px #1f7a4f}
.remind-wa svg{background:rgba(31,122,79,.12)}
@media (hover:hover) and (pointer:fine){.remind-wa:hover{background:rgba(31,122,79,.08)}}
.remind-see{display:block;margin:10px auto 0}

/* подвал: только маленькая плашка Келеміз */
.foot{display:flex;justify-content:center;padding:72px 16px max(40px,calc(env(safe-area-inset-bottom) + 24px))}
.brand{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;align-items:center;text-decoration:none;font-size:calc(13px*var(--fs));color:var(--on-2);
  padding:10px 16px;border-radius:99px;border:1px solid rgba(246,238,219,.18);background:rgba(7,33,25,.5)}
.brand b{font-weight:600;color:var(--gold)}

/* шторка напоминания */
.sheet-back{position:fixed;inset:0;z-index:80;background:rgba(2,12,9,.55);opacity:0;transition:opacity .3s ease}
.sheet-back.on{opacity:1}
.sheet{position:fixed;z-index:81;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--felt);color:var(--ink);border-radius:26px 26px 0 0;
  padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;max-height:92svh;overflow:auto;overscroll-behavior:contain;
  transform:translateY(100%);transition:transform .45s var(--ease-drawer)}
.sheet.on{transform:none}
.sheet[hidden],.sheet-back[hidden]{display:none}
.grab{justify-self:center;width:44px;height:5px;border-radius:99px;background:rgba(19,39,31,.25)}
.sheet h2{font-size:calc(26px*var(--fs));color:var(--ink)}
.sheet-sub{color:var(--ink-2);font-size:calc(15.5px*var(--fs))}
.sheet textarea{min-height:200px}
.sheet-btns{display:grid;gap:10px;justify-items:center}
.sheet .yes{background:#1f7a4f;width:100%}
.ghost{background:transparent;border-color:rgba(19,39,31,.4);color:var(--ink);width:100%}
.sheet .link-btn{justify-self:center}

/* Тыңдау: плавающая кнопка в режиме для старших */
.listen{position:fixed;z-index:55;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + var(--ob));translate:-50% 0;display:none;align-items:center;gap:12px;min-height:66px;padding:0 30px;border-radius:99px;
  border:0;background:var(--gold);color:var(--velvet-3);font:600 22px/1 var(--f-body);box-shadow:0 14px 40px -10px rgba(2,12,9,.7)}
.listen svg{width:26px;height:26px}
html.elder .listen{display:inline-flex}
.toast{position:fixed;z-index:90;left:50%;bottom:calc(100px + var(--ob));translate:-50% 0;max-width:min(92vw,420px);background:var(--ink);color:var(--felt);padding:12px 16px;border-radius:14px;font-size:16px;line-height:1.4;text-align:center;opacity:0;transition:opacity .3s ease;pointer-events:none}
.toast.on{opacity:1}

/* ---------- плашка заказа: только в демо, в приглашениях клиентов ее нет ---------- */
body{--ob:0px}
body.has-order{--ob:84px;padding-bottom:var(--ob)}
.order{position:fixed;z-index:58;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));max-width:460px;margin:0 auto;display:flex;align-items:center;gap:12px;
  min-height:66px;padding:9px 16px 9px 10px;border-radius:22px;text-decoration:none;color:var(--on);background:rgba(7,33,25,.94);border:1.5px solid var(--gold);
  outline:4px solid rgba(217,173,79,.14);box-shadow:0 16px 36px -12px rgba(2,12,9,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:translateY(calc(100% + 34px));transition:transform .7s var(--ease-out),background-color .2s ease}
.order.on{transform:none}
.order-ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--velvet-3)}
.order-ic svg{width:24px;height:24px}
.order-txt{flex:1;min-width:0;display:grid;gap:3px}
.order-txt b{font:400 19px/1.1 var(--f-display);color:var(--gold-hi)}
.order-txt small{font:500 13.5px/1.25 var(--f-body);color:var(--on)}
.order-go{flex:none;width:20px;height:20px;color:var(--gold)}
@media (hover:hover) and (pointer:fine){.order:hover{background:rgba(13,58,45,.96)}}
html.elder .order-txt b{font-size:21px}
html.elder .order-txt small{font-size:15px}
#shashu{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:66}

/* ---------- режим для старших ---------- */
html.elder{--fs:1.2;--on-2:#efe6d0;--ink-2:#22352c}
html.elder .name{font-size:calc(60px*var(--fs))}
html.elder .hint::before,html.elder .door .ring,html.elder .sandyq .lock{animation:none}
html.elder .content{padding-bottom:90px}
html.elder .hero-copy{padding-bottom:calc(max(108px,calc(env(safe-area-inset-bottom) + 96px)) + var(--ob))}
html.elder .prog li{grid-template-columns:1fr;gap:4px}
html.elder .ph-pair{grid-template-columns:1fr}

/* ---------- десктоп ---------- */
@media (min-width:900px){
  .hero{align-items:center}
  .hero-media{left:auto;width:50%}
  .hero-media img{object-position:50% 14%}
  .hero-shade{background:linear-gradient(90deg,var(--velvet-3) 50%,rgba(7,33,25,.55) 57%,transparent 68%),linear-gradient(0deg,rgba(7,33,25,.6),transparent 30%)}
  .hero-copy{margin:0;max-width:none;width:50%;padding:80px 48px}
  .name{font-size:calc(96px*var(--fs))}
  .portal{width:280px}
  .gate-name{font-size:calc(68px*var(--fs))}
  .knot{height:190px}
}

/* ---------- меньше движения ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rise{opacity:1;transform:none}
  .prog li{opacity:1;transform:none}
}
html.shot *,html.shot *::before,html.shot *::after{transition:none!important;animation:none!important}

/* поле имени, когда в ссылке нет обращения ?g, и ловушка для ботов */
.field[hidden]{display:none}
.field input{min-height:0}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}