/* Зурагаа ав — design system · amber */
:root{
  --ink:#0B1020; --ink2:#151C33; --ink3:#232B47;
  --text:#0B1020; --text2:#374151; --muted:#4A5468; --line:#E3E6EE; --field:#9AA3B5;
  --bg:#F3F4F8; --card:#FFFFFF; --glass:rgba(255,255,255,.94); --num:#EEF0F6;
  /* one accent, amber: fills carry ink text (9.3:1); accent-ink is the text/link/focus shade (5.6:1 on white).
     on-accent is the text on an accent fill; accent-hi is the accent on surfaces that stay dark in both themes */
  --accent:#F5A524; --accent2:#E3920F; --accent-ink:#9A5800; --accent-soft:#FFF3DC; --on-accent:#0B1020; --accent-hi:#F5A524; --tint:rgba(11,16,32,.05);
  --ok:#0E6B53; --ok-soft:#DFF4EC; --bad:#9B1C1C; --bad-mk:#C53030;
  --r-lg:24px; --r-md:16px; --r-sm:12px;
}
/* dark theme: data-theme="dark" on <html> (site) or on a wrapper (canvas) */
[data-theme="dark"]{
  color-scheme:dark;
  --text:#EEF0F7; --text2:#C9CFDD; --muted:#A3ABC0; --line:#232A42; --field:#3A4466;
  --bg:#070A14; --card:#10152A; --glass:rgba(11,16,32,.9); --num:#171D36;
  --accent-ink:#FFB547; --accent-soft:#2A1F0A; --tint:rgba(255,255,255,.07);
  --ok:#4BD597; --ok-soft:#0E2A20; --bad:#FF8A8A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px;border-radius:6px}
.site{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.only-m{display:none!important}
[hidden]{display:none!important}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);color:var(--text);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;min-height:44px}
.logo svg{flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logo:hover svg{transform:rotate(-8deg) scale(1.06)}
.logo-word{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1}
.logo-word b{color:var(--accent-ink);font-weight:800}
.nav{display:flex;gap:2px;margin-left:16px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font-size:15px;font-weight:700;color:var(--muted);transition:background .2s,color .2s}
.nav a:hover{color:var(--text);background:var(--tint)}
.nav a[aria-current]{color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.nav .mnav{display:none}
.hdr-act{margin-left:auto;display:flex;gap:8px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.hdr .icon-btn{border-color:var(--line);color:var(--text)}
.hdr .icon-btn:hover{background:var(--tint)}
.menu-btn{display:none}
.theme-btn .i-sun{display:none}
[data-theme="dark"] .theme-btn .i-sun{display:block}
[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (max-width:760px){
  .nav{display:none}.menu-btn{display:grid}.hdr .wrap{min-height:60px;gap:8px}
  .logo-word{font-size:20px}
  /* logo + CTA + theme + menu share one row down to 400px; below that the theme switch moves into the menu */
  .hdr-act{gap:6px}.hdr-act .btn-sm{padding:0 10px}.hdr .icon-btn{width:42px;height:42px}
  .hdr .wrap{position:relative;flex-wrap:wrap}
  .hdr.open .nav{display:flex;flex-direction:column;flex-basis:100%;order:3;margin:0 0 12px;padding:8px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -24px rgba(11,16,32,.35);animation:menuIn .25s cubic-bezier(.2,.8,.2,1)}
  .hdr.open .nav a{min-height:48px;font-size:16px}
  .hdr.open .nav .mnav{display:flex}
  .hdr.open .nav .nav-theme{display:none}
}
.nav-theme{align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:16px;font-weight:700;text-align:left;cursor:pointer}
.nav-theme:hover{color:var(--text);background:var(--tint)}
.nav-theme .t-light,[data-theme="dark"] .nav-theme .t-dark{display:none}
[data-theme="dark"] .nav-theme .t-light{display:inline}
@media (max-width:400px){
  .hdr-act:has(.menu-btn)>.theme-btn{display:none}
  .hdr.open .nav .nav-theme{display:flex}
}
/* the smallest phones (320px, e.g. iPhone SE 1st gen): a slightly smaller logo and CTA keep one row */
@media (max-width:340px){
  .logo{gap:8px}.logo svg{width:32px;height:32px}.logo-word{font-size:18px}
  .hdr-act .btn-sm{padding:0 8px;font-size:14px}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:16px;font-weight:800;font-size:16px;border:0;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 28px -12px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.12)}
.btn-accent:hover{background:var(--accent2);box-shadow:0 14px 32px -12px color-mix(in srgb,var(--accent) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.15)}
.btn-accent::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%);animation:shine 4s ease-in-out infinite;pointer-events:none}
.btn-ink{background:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 rgba(255,255,255,.08)}
.btn-ink:hover{background:var(--ink3)}
[data-theme="dark"] .btn-ink{background:#EEF0F7;color:#0B1020}
[data-theme="dark"] .btn-ink:hover{background:#D9DDE8}
.btn-ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-glass:hover{background:rgba(255,255,255,.14)}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px;border-radius:12px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed;pointer-events:none}
.btn[disabled]::after,.btn[aria-disabled="true"]::after{display:none}
@keyframes shine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* type */
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:14px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.h1{margin:0;font-size:clamp(40px,6.2vw,76px);line-height:1;letter-spacing:-.045em;font-weight:800}
/* highlighter stroke behind the word: the text stays ink, so it reads on light; on dark the word turns amber and the stroke dims */
.h1 em{font-style:normal;position:relative;z-index:0;white-space:nowrap}
.h1 em::after{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;bottom:.14em;height:.3em;border-radius:.08em;background:var(--accent);transform-origin:left;animation:draw 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
[data-theme="dark"] .h1 em{color:var(--accent)}
[data-theme="dark"] .h1 em::after{opacity:.22}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.h2{margin:0;font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.kicker{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.lead{margin:0;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--muted);max-width:520px}
.muted{color:var(--muted)}
.sec{padding-top:clamp(56px,8vw,104px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.sec-head .t{display:flex;flex-direction:column;gap:10px}

/* hero */
.hero{background:linear-gradient(180deg,var(--card) 0%,var(--bg) 100%);color:var(--text);position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--tint) 1px,transparent 1px),linear-gradient(90deg,var(--tint) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 45%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 45%,#000 10%,transparent 75%)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;padding-top:72px;padding-bottom:84px}
.hero-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-stats{display:flex;flex-wrap:wrap;gap:8px 28px;margin:6px 0 0;padding:0;list-style:none}
.hero-stats li{display:flex;flex-direction:column}
.hero-stats b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.hero-stats span{font-size:13px;color:var(--muted)}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;padding-top:32px;padding-bottom:40px;gap:8px}
  .hero-cta{width:100%}.hero-cta .btn{flex:1 1 100%}
}

/* 3D stage */
.stage{position:relative;height:480px;perspective:1300px;perspective-origin:50% 40%}
.glow{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 32%,transparent),transparent 65%);filter:blur(10px);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.75}}
.deck{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-24deg) rotateZ(2deg);animation:sway 10s ease-in-out infinite}
@keyframes sway{50%{transform:rotateX(9deg) rotateY(-12deg) rotateZ(0deg)}}
.pc{position:absolute;width:30%;aspect-ratio:4/5;border-radius:18px;border:3px solid #fff;box-shadow:0 34px 60px -28px rgba(11,16,32,.55);animation:bob 7s ease-in-out infinite}
.pc.p1{left:2%;top:4%;transform:translateZ(-110px) rotate(-9deg)}
.pc.p2{left:66%;top:0;transform:translateZ(-50px) rotate(8deg);animation-delay:-1.2s}
.pc.p3{left:-2%;top:50%;transform:translateZ(-30px) rotate(5deg);animation-delay:-2.4s}
.pc.p4{left:68%;top:48%;transform:translateZ(30px) rotate(-6deg);animation-delay:-3.6s}
.pc.p5{left:34%;top:66%;transform:translateZ(-160px) rotate(3deg);animation-delay:-4.8s}
.pc.p6{left:36%;top:-8%;transform:translateZ(-190px) rotate(-3deg);animation-delay:-6s}
@keyframes bob{50%{translate:0 -12px}}
.pc.match{border-color:var(--accent);animation:bob 7s ease-in-out infinite,hit 4s ease-in-out infinite}
@keyframes hit{0%,40%,100%{box-shadow:0 34px 60px -28px rgba(11,16,32,.55)}55%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent),0 34px 60px -28px rgba(11,16,32,.55)}}
.ck{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 4px 10px rgba(11,16,32,.3)}
.scan{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:5/6;margin-left:-19%;transform:translateY(-50%) translateZ(90px);border-radius:26px;background:linear-gradient(160deg,#1E2747,#0F1530);border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 90px -30px rgba(11,16,32,.7),inset 0 1px 0 rgba(255,255,255,.12);display:grid;place-items:center;overflow:hidden}
.scan{color:var(--accent-hi)}
.scan svg{width:56%;height:auto}
.cn{position:absolute;width:26px;height:26px;border:3px solid var(--accent-hi)}
.cn.tl{left:14px;top:14px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.cn.tr{right:14px;top:14px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.cn.bl{left:14px;bottom:14px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.cn.br{right:14px;bottom:14px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.scan-line{position:absolute;left:18px;right:18px;height:2px;border-radius:2px;background:var(--accent-hi);box-shadow:0 0 16px 4px color-mix(in srgb,var(--accent-hi) 55%,transparent);animation:scanline 2.6s ease-in-out infinite}
@keyframes scanline{0%,100%{top:16%}50%{top:82%}}
.fbadge{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:14px;font-weight:800;box-shadow:0 18px 40px -18px rgba(11,16,32,.4);animation:float 5s ease-in-out infinite}
.fbadge .d{width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.fbadge small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.fb1{left:2%;bottom:10%}
.fb2{right:0;top:8%;animation-delay:-2.5s}
@keyframes float{50%{transform:translateY(-10px)}}
@media (max-width:900px){
  .stage{height:330px;margin:0 -8px}
  .glow{width:300px;height:300px;margin:-150px 0 0 -150px}
  .fbadge{font-size:13px;padding:8px 12px}
  .fb1{left:0;bottom:2%}.fb2{right:0;top:2%}
}

/* ticker */
.ticker{background:var(--accent);color:var(--on-accent);overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker-track span{display:flex;align-items:center;gap:12px;padding:14px 22px;font-size:15px;font-weight:800;white-space:nowrap}
.ticker-track i{width:7px;height:7px;border-radius:50%;background:var(--on-accent);display:inline-block}
@keyframes tick{to{transform:translateX(-50%)}}

/* how */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.how li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.how li:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(11,16,32,.45)}
.how .num{position:absolute;right:20px;top:10px;font-size:84px;font-weight:800;letter-spacing:-.05em;color:var(--num);line-height:1;z-index:0}
.how li>*{position:relative;z-index:1}
.how li>.num{position:absolute;z-index:0}
.ico3d{width:60px;height:60px;border-radius:18px;background:var(--ink);color:var(--accent-hi);display:grid;place-items:center;transform:perspective(320px) rotateX(16deg) rotateY(-18deg);box-shadow:7px 9px 0 var(--accent);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.how li:hover .ico3d{transform:perspective(320px) rotateX(0) rotateY(0) translateY(-3px)}
.how h3{margin:8px 0 0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.how p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){.how{grid-template-columns:1fr;gap:12px}.how li{padding:20px;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px}.how li>div{flex:1 1 200px}.how h3{margin:0}.how .num{display:none}}

/* search + chips */
.search{position:relative;flex:0 1 380px;min-width:240px}
.search svg{position:absolute;left:16px;top:15px}
.search input{width:100%;height:50px;border:1.5px solid var(--field);border-radius:14px;background:var(--card);padding:0 16px 0 46px;font-size:16px;transition:border-color .2s,box-shadow .2s}
.search input:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{flex:none;height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-weight:700;font-size:14px;cursor:pointer;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--field)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip .c{opacity:.6;margin-left:6px;font-weight:600}
@media (max-width:760px){.search{flex:1 1 100%}.chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}}

/* event cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.ecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;transform:perspective(1000px) rotateX(0)}
.ecard:hover{transform:perspective(1000px) rotateX(5deg) translateY(-8px);box-shadow:0 30px 60px -30px rgba(11,16,32,.45),0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}
.ecard .cov{display:block;aspect-ratio:16/11;position:relative;overflow:hidden}
.ecard .cov .sc{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ecard:hover .cov .sc{transform:scale(1.07)}
.tag{position:absolute;left:12px;top:12px;background:rgba(11,16,32,.8);color:#fff;font-size:12px;font-weight:800;padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px)}
.tag.new{background:var(--accent);color:var(--on-accent)}
.cnt{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.95);color:#0B1020;font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px}
.ecard .bd{padding:18px 20px 0;display:flex;flex-direction:column;gap:6px;flex:1}
.ecard h3{margin:0;font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.ecard .meta{font-size:14px;color:var(--muted);line-height:1.45}
.ecard .mcat{display:none}
.ecard>.btn{margin:16px 20px 20px}
.soon{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:4px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:800;padding:6px 10px;border-radius:10px}
@media (max-width:600px){
  .cards{grid-template-columns:1fr;gap:12px}
  .ecard{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;padding:12px;border-radius:20px}
  .ecard:hover{transform:none}
  .ecard .cov{aspect-ratio:1/1;border-radius:14px}
  .ecard .cov .tag,.ecard .cov .cnt{display:none}
  .ecard .bd{padding:2px 0 0;gap:4px}
  .ecard h3{font-size:16px}
  .ecard .meta{font-size:13px}
  .ecard .mcat{display:inline}
  .ecard>.btn{grid-column:1 / -1;margin:12px 0 0;min-height:48px}
}

/* scenes (placeholder photos) */
.sc{position:relative;overflow:hidden;background:#C9D2E3}
.sc-day{background:radial-gradient(circle at 78% 22%,#FFE7A3 0 8%,rgba(255,231,163,.35) 9%,transparent 16%),linear-gradient(180deg,#7DB8FF 0%,#CFE6FF 56%,#7BC48A 56.2%,#5FA86F 100%)}
.sc-night{background:radial-gradient(circle at 18% 28%,#FFD36B 0 1.6%,transparent 3%),radial-gradient(circle at 42% 18%,#FFE9A8 0 1.2%,transparent 2.4%),radial-gradient(circle at 70% 30%,#9ED3FF 0 1.8%,transparent 3%),radial-gradient(circle at 88% 22%,#FFD36B 0 1.4%,transparent 2.6%),linear-gradient(180deg,#0F1636 0%,#2C2C6E 58%,#383C58 58.2%,#262938 100%)}
.sc-stage{background:conic-gradient(from 195deg at 50% -8%,transparent 0 8deg,rgba(255,255,255,.4) 13deg,transparent 20deg 34deg,rgba(255,214,120,.45) 40deg,transparent 48deg),linear-gradient(180deg,#2A1458 0%,#7A2F96 66%,#140A26 66.2%)}
.sc-trail{background:linear-gradient(162deg,transparent 52%,#55765A 52.3%),linear-gradient(198deg,transparent 44%,#86A777 44.3%),linear-gradient(180deg,#F6B98E,#FCE2C6 62%)}
.sc-grad{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.5) 0 10%,transparent 30%),linear-gradient(180deg,#F5D9A6,#E5B260 70%,#B98738 70.2%)}
.sc-fest{background:radial-gradient(circle at 15% 86%,#FF7A59 0 14%,transparent 14.5%),radial-gradient(circle at 52% 92%,#FFC23D 0 19%,transparent 19.5%),radial-gradient(circle at 88% 84%,#2F6FE4 0 13%,transparent 13.5%),linear-gradient(180deg,#8FD2FF,#E3F4FF)}
.sc-dark{background:linear-gradient(160deg,#1E2747,#0F1530)}
.person::after{content:"";position:absolute;left:36%;bottom:0;width:28%;height:58%;background:radial-gradient(circle at 50% 17%,#141A2E 0 16%,transparent 16.6%),radial-gradient(ellipse 50% 62% at 50% 100%,#141A2E 0 98%,transparent 100%)}
.person.v2::after{left:16%;height:66%}
.person.v3::after{left:56%;height:52%}
.person.v4::after{left:30%;width:40%;height:70%}
.sc-night.person::after,.sc-stage.person::after{background:radial-gradient(circle at 50% 17%,#05070F 0 16%,transparent 16.6%),radial-gradient(ellipse 50% 62% at 50% 100%,#05070F 0 98%,transparent 100%)}

/* price */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.price{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:10px;position:relative}
.price .amt{font-size:clamp(36px,4.4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1}
.price .amt small{font-size:16px;font-weight:700;color:var(--muted);letter-spacing:0}
.price.best{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 3px var(--accent),0 30px 60px -30px rgba(11,16,32,.6)}
.price.best .amt small,.price.best p{color:#B4BCCF}
.price .badge{position:absolute;top:-14px;right:20px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px}
.price p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.price .q{font-size:15px;font-weight:800}
@media (max-width:760px){.prices{grid-template-columns:1fr;gap:22px}.price{padding:22px}}

/* privacy band */
.band{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(24px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:24px;position:relative;overflow:hidden;isolation:isolate}
.band::before{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 32%,transparent),transparent 65%);z-index:-1}
.band .lock{width:64px;height:64px;border-radius:20px;background:color-mix(in srgb,var(--accent-hi) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent-hi) 30%,transparent);color:var(--accent-hi);display:grid;place-items:center;flex:none}
.band .tx{flex:1 1 360px;display:flex;flex-direction:column;gap:8px}
.band h2{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.03em}
.band p{margin:0;font-size:16px;line-height:1.55;color:#B4BCCF}
[data-theme="dark"] .band,[data-theme="dark"] .price.best,[data-theme="dark"] .code{border:1px solid #232A42}

/* faq */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:0 22px;transition:box-shadow .25s}
.faq details[open]{box-shadow:0 18px 40px -28px rgba(11,16,32,.4)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;font-size:17px;font-weight:800;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex:none;width:32px;height:32px;border-radius:50%;background:var(--bg);display:grid;place-items:center;transition:transform .3s}
.faq details[open] summary .pl{transform:rotate(45deg);background:var(--accent);color:var(--on-accent)}
.faq p{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--text2);max-width:760px}

/* footer */
.ftr{background:var(--ink);color:#C3CAD9;margin-top:auto}
.ftr-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 64px;padding-top:56px;padding-bottom:32px}
.ftr-brand{display:flex;flex-direction:column;gap:14px;max-width:340px}
.ftr-brand p{margin:0;font-size:15px;line-height:1.55}
.ftr .logo-word b{color:var(--accent-hi)}
/* logo mark takes the accent, so a palette change stays token-only */
.logo svg rect,.logo svg circle+circle{fill:var(--accent)}
.logo svg path{stroke:var(--on-accent)}
.logo svg circle{fill:var(--on-accent)}
.ftr-col{display:flex;flex-direction:column;font-size:15px}
.ftr-col .h{font-weight:800;color:#fff;margin-bottom:6px}
.ftr-col a{display:flex;align-items:center;min-height:44px}
.ftr-col a:hover{color:#fff}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;padding-bottom:28px;font-size:13px;color:#9EA7BC}
.ftr-mini{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:22px;padding-bottom:22px;font-size:13px;color:#9EA7BC}
[data-theme="dark"] .ftr{border-top:1px solid #1A2038}

/* panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px)}
.two{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px}
.two>.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:28px}
.two>.side{flex:1 1 340px;min-width:0;position:sticky;top:92px;display:flex;flex-direction:column;gap:16px}
@media (max-width:760px){.two{gap:20px}.two>.side{position:static}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:#AEB6C8}
.crumbs a{display:flex;align-items:center;min-height:44px;font-weight:700;color:#D5DBE8}
.crumbs a:hover{color:#fff}

/* event band: the event stays on screen through the whole flow (selfie -> search -> results) */
.evband{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff}
.evband .cover.sc{position:absolute;inset:0;z-index:-2}
.evband::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,16,32,.5) 0%,rgba(11,16,32,.8) 60%,rgba(11,16,32,.94) 100%)}
.evband .in{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:6px;padding-bottom:26px}
.evband.slim .in{padding-top:20px;gap:8px}
.evband.tall .in{padding-bottom:108px}
.evtitle{margin:0;font-size:clamp(28px,4vw,48px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.evband.slim .evtitle{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em}
.evmeta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:14px;font-weight:700;color:#C9CFDD}
.evmeta li{display:flex;align-items:center;gap:6px}
.evmeta svg{flex:none;opacity:.75}
.stepper{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:6px 0 0;padding:0;list-style:none;font-size:14px;font-weight:700;color:#AEB6C8}
.stepper li{display:flex;align-items:center;gap:8px}
.stepper li+li::before{content:"";width:28px;height:2px;border-radius:2px;background:rgba(255,255,255,.25);margin-right:2px}
.stepper .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.4);font-size:13px}
.stepper .done{color:#fff}.stepper .done .n{background:#0E6B53;border-color:#0E6B53}
.stepper .done+li::before{background:#0E6B53}
.stepper .cur{color:#fff}.stepper .cur .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* the first step rides up over the band, so the event stays visible behind the selfie card */
.flow-up{position:relative;z-index:2;margin-top:-84px}
.soon-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.notify{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.notify .input{flex:1 1 220px;height:54px}
.notify .btn{flex:0 0 auto}
@media (max-width:760px){
  .evband .in{gap:10px;padding-bottom:20px}
  .evband.tall .in{padding-bottom:64px}
  .evmeta{font-size:13px;gap:4px 14px}
  .stepper .lbl{display:none}.stepper .cur .lbl{display:inline}.stepper li+li::before{width:16px}
  .flow-up{margin-top:-44px}
}
/* phones: keep "Selfie авах" above the fold — the menu and back button cover the crumbs, the band already shows the photo count */
@media (max-width:600px){
  .evband .crumbs{display:none}
  .evband.tall .in{padding-top:18px}
  .drop{padding-top:20px}
  .drop .reticle{width:112px;height:132px;border-radius:24px}
}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.pill.accent{background:var(--accent-hi);color:var(--ink);border-color:var(--accent-hi)}
.note{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:var(--accent-soft);color:var(--accent-ink)}
.note svg{flex:none;margin-top:2px}
.note b{display:block;font-size:16px;margin-bottom:4px;color:var(--text)}
.note span{font-size:15px;line-height:1.55;color:var(--text2)}
.gets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0;padding:0;list-style:none;font-size:13px;font-weight:700;color:var(--text2)}
.gets li{display:flex;align-items:center;gap:6px}
.gets svg{flex:none;color:var(--ok)}
.ptable{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.ptable caption{text-align:left;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:6px}
.ptable th{text-align:left;padding:11px 10px;font-weight:600;border-top:1px solid var(--line)}
.ptable td{text-align:right;padding:11px 10px;font-weight:800;border-top:1px solid var(--line)}
.ptable tr.on th,.ptable tr.on td{background:var(--accent-soft);color:var(--accent-ink);font-weight:800;border-top-color:transparent}
.ptable tr.on th{border-radius:10px 0 0 10px}.ptable tr.on td{border-radius:0 10px 10px 0}
.ptable tr.on+tr th,.ptable tr.on+tr td{border-top-color:transparent}
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:flex;align-items:center;gap:12px;position:sticky;bottom:0;z-index:25;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -12px 30px -18px rgba(11,16,32,.35)}
  .mbar .tx{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;color:var(--muted);line-height:1.3}
  .mbar .tx b{font-size:17px;color:var(--text)}
}

/* upload */
.drop{position:relative;border-radius:24px;border:2px dashed var(--field);background:var(--bg);padding:clamp(24px,4vw,44px) 20px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;transition:border-color .2s,background .2s}
.drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.reticle{position:relative;width:170px;height:200px;border-radius:30px;background:linear-gradient(160deg,#1E2747,#0F1530);display:grid;place-items:center;overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,16,32,.8);transform:perspective(600px) rotateX(8deg);animation:tilt 6s ease-in-out infinite}
@keyframes tilt{50%{transform:perspective(600px) rotateX(-4deg) rotateY(6deg)}}
.reticle svg.face{width:60%;color:var(--accent-hi)}
.reticle .shot-img,.orb .me .shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.drop-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
@media (max-width:760px){.drop-btns .btn{flex:1 1 100%}.reticle{width:150px;height:176px}}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--text2);cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--accent)}
.check a{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tip{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:800;text-align:center}
.tip .im{aspect-ratio:1/1;border-radius:14px;position:relative;overflow:hidden}
.tip .mk{position:absolute;right:6px;top:6px;z-index:2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff}
.tip.good{color:var(--ok)}.tip.good .im{box-shadow:0 0 0 3px #0E6B53}.tip.good .mk{background:#0E6B53}
.tip.bad{color:var(--bad)}.tip.bad .im{box-shadow:0 0 0 3px var(--bad-mk)}.tip.bad .mk{background:var(--bad-mk)}

/* searching */
.searchbox{width:100%;max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.orb{position:relative;width:200px;height:200px;color:var(--accent)}
.orb .ring{position:absolute;inset:0;animation:spin 1.6s linear infinite}
.orb .ring circle:first-child{stroke:var(--line)}
.orb .ring2{position:absolute;inset:-14px;animation:spin 3.2s linear infinite reverse;opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
.orb .me{position:absolute;inset:18px;color:var(--accent-hi);border-radius:50%;overflow:hidden;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.orb .me .scan-line{left:10px;right:10px;z-index:2}
.minis{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;width:100%}
.mt{aspect-ratio:1/1;border-radius:8px;opacity:.35;animation:flick 2.8s ease-in-out infinite}
.mt:nth-child(3n){animation-delay:-.6s}.mt:nth-child(4n){animation-delay:-1.2s}.mt:nth-child(5n){animation-delay:-1.8s}.mt:nth-child(7n){animation-delay:-2.2s}
@keyframes flick{50%{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 2px var(--accent)}}
.mt.hitm{opacity:1;box-shadow:0 0 0 3px var(--accent);animation:none}
@media (max-width:600px){.minis{grid-template-columns:repeat(6,minmax(0,1fr))}.minis .mt:nth-child(n+13){display:none}}
.bar{width:100%;height:12px;border-radius:999px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:34%;border-radius:999px;background:repeating-linear-gradient(-45deg,var(--accent) 0 12px,var(--accent2) 12px 24px);background-size:34px 34px;animation:stripes .9s linear infinite;transition:width .2s}
@keyframes stripes{to{background-position:34px 0}}
.checks{list-style:none;margin:0;padding:0;align-self:stretch;text-align:left;display:flex;flex-direction:column;gap:12px;font-size:15px;font-weight:700}
.checks li{display:flex;align-items:center;gap:12px}
.checks .dn{color:var(--ok)}.checks .nw{color:var(--text)}.checks .td{color:var(--muted)}
.dot-spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}

/* results */
.grid-ph{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.tile{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;border-radius:18px;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s,box-shadow .3s}
.tile:hover{transform:translateY(-4px)}
.tile.on{box-shadow:0 0 0 4px var(--accent),0 22px 40px -24px rgba(11,16,32,.6);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.tile.off{opacity:.45;filter:grayscale(.7);box-shadow:0 0 0 2px var(--line)}
@keyframes pop{from{transform:scale(.94)}to{transform:scale(1)}}
.tile .ck{top:10px;right:10px;width:30px;height:30px}
.tile .rc{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);border:2px solid #4A5468}
.tile .wm{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:800;letter-spacing:.2em;color:rgba(255,255,255,.55);transform:rotate(-24deg);pointer-events:none}
.tile .lb{position:absolute;left:10px;bottom:10px;background:rgba(11,16,32,.82);color:#fff;font-size:12px;font-weight:800;padding:4px 9px;border-radius:8px}
.tile.off .lb{background:#fff;color:#0B1020}
.ck,.tile .lb,.tile .wm,.tile .rc{z-index:2}
@media (max-width:600px){.grid-ph{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{border-radius:14px}}
.sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.big-price{font-size:40px;font-weight:800;letter-spacing:-.04em}
.chip-ok{background:var(--ok-soft);color:var(--ok);font-size:14px;font-weight:800;padding:11px 14px;border-radius:12px;line-height:1.4}
.chip-up{background:var(--accent-soft);color:var(--accent-ink);font-size:14px;font-weight:800;padding:11px 14px;border-radius:12px;line-height:1.4}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.tbtn{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;font-size:14px;font-weight:800;cursor:pointer}
.tbtn.v{color:var(--accent-ink)}
.paylogos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.paylogos span{padding:4px 10px;border:1px solid var(--line);border-radius:8px}

/* checkout */
.pay-opts{display:grid;gap:10px}
.pay-opt{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pay-opt input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent)}
.pay-opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);background:var(--accent-soft)}
.pay-opt .pi{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:11px;font-weight:800}
.pay-opt .tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.pay-opt .tx b{font-size:15px}
.pay-opt .tx span{font-size:13px;color:var(--muted);font-weight:600}
.pay-opt .badge{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.qrbox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding:24px;border-radius:20px;background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.qrbox::before{content:"";position:absolute;left:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 32%,transparent),transparent 65%);z-index:-1}
.qrbox .p{margin:0;font-size:15px;line-height:1.55;color:#B4BCCF}
.qr{position:relative;width:184px;height:184px;padding:12px;border-radius:18px;background:#fff;box-shadow:0 0 0 3px var(--accent)}
.qr i{position:absolute;inset:12px;background:conic-gradient(#0B1020 25%,#fff 0 50%,#0B1020 0 75%,#fff 0) 0 0/20px 20px;opacity:.9}
.qr i+i{background:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0) 5px 9px/14px 14px;opacity:.8}
.qr .fp{position:absolute;z-index:2;width:46px;height:46px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 7px #0B1020,inset 0 0 0 13px #fff,inset 0 0 0 30px #0B1020}
.qr .fp.a{left:12px;top:12px}.qr .fp.b{right:12px;top:12px}.qr .fp.c{left:12px;bottom:12px}
.qr .lg{position:absolute;z-index:2;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px #fff}
.timer{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;color:var(--accent-hi)}
.ol{display:flex;flex-direction:column}
.ol .li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:15px;color:var(--text2)}
.ol .li.t{margin-top:6px;padding-top:16px;border-top:1px solid var(--line);font-size:18px;font-weight:800;color:var(--text)}
.thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.thumbs .sc{aspect-ratio:1/1;border-radius:8px}
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:15px;font-weight:800}
.input{width:100%;height:52px;border:1.5px solid var(--field);border-radius:14px;padding:0 16px;font-size:16px;background:var(--card);color:var(--text)}
.input:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.hint{font-size:13px;color:var(--muted)}
@media (max-width:600px){
  .qrbox{grid-template-columns:1fr;text-align:center;justify-items:center}
  .only-d{display:none!important}.only-m{display:flex!important}
  .qrbox .btn{width:100%}
  .qrbox .st{justify-content:center}
}

/* my photos */
.success{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:22px 24px;border-radius:22px;background:var(--ok-soft);border:1px solid rgba(14,107,83,.25)}
.success .ic{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;background:#0E6B53;color:#fff;box-shadow:0 0 0 6px rgba(14,107,83,.15)}
.success .tx{flex:1 1 280px;display:flex;flex-direction:column;gap:2px}
.success .tx b{font-size:18px;font-weight:800}
.success .tx span{font-size:15px;color:var(--text2)}
.code{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;background:var(--ink);color:#fff;border-radius:22px;padding:20px 24px;position:relative;overflow:hidden;isolation:isolate}
.code::before{content:"";position:absolute;right:-60px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 32%,transparent),transparent 65%);z-index:-1}
.code .k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:.12em;color:var(--accent-hi)}
.code .tx{flex:1 1 260px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:#B4BCCF}
.code .tx b{font-size:16px;color:#fff}
.grp{display:flex;flex-direction:column;gap:16px}
.grp-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.grp-h .t{display:flex;align-items:center;gap:14px;min-width:0}
.grp-h .th{flex:none;width:52px;height:52px;border-radius:14px}
.grp-h h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.grp-h small{font-size:14px;color:var(--muted)}
.paid{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:12px;font-weight:800;color:var(--ok);background:var(--ok-soft);padding:3px 8px;border-radius:6px;vertical-align:middle}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mgrid .tile{border-radius:14px}
@media (max-width:600px){.mgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mgrid .tile{border-radius:10px}.grp-h .btn{flex:1 1 100%}}

/* site-only helpers (toast, empty state) */
.toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:calc(100% - 32px);transform:translate(-50%,16px);opacity:0;padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:15px;font-weight:700;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px -16px rgba(0,0,0,.6);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){.toast{bottom:92px}}
.ecard[hidden]{display:none!important}

.deck .pc{position:absolute}
[data-theme="dark"] .sc{filter:brightness(.92)}
[data-theme="dark"] .tile.off{filter:grayscale(.7) brightness(.8)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- flow additions: upload, dialogs, payment, lightbox, legal ---- */
[hidden]{display:none!important}
.ftr-bot a:hover{color:#fff}
.err{margin:0;padding:10px 14px;border-radius:12px;background:#FDECEC;color:var(--bad);font-size:14px;font-weight:700;line-height:1.45}
.drop.drag{border-color:var(--accent);background:var(--accent-soft)}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reticle.has-shot svg.face,.orb .me.has-shot>svg{display:none}

html:has(dialog[open]){overflow:hidden}
.modal{border:0;padding:0;background:transparent;width:calc(100% - 32px);max-width:440px;color:var(--text)}
.modal::backdrop{background:rgba(11,16,32,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal[open]{animation:modalIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-in{position:relative;background:var(--card);border-radius:var(--r-lg);padding:28px 24px 24px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.modal .x{position:absolute;right:12px;top:12px;color:var(--text);border-color:var(--line)}
.modal-t{margin:0;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em;padding-right:44px}
.pay-step{display:flex;flex-direction:column;gap:16px}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--bg)}
.seg button{min-height:44px;border:0;border-radius:10px;background:transparent;font-weight:800;font-size:15px;color:var(--muted);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--card);color:var(--text);box-shadow:0 2px 8px -2px rgba(11,16,32,.2)}
.pane{display:flex;flex-direction:column;gap:12px}
.qr{width:196px;height:196px;margin:0 auto;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px}
.qr svg{display:block;width:100%;height:100%}
.banks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.banks button{min-height:44px;padding:0 6px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-size:13px;font-weight:800;cursor:pointer}
.banks button:hover{border-color:var(--accent)}
.dot-spin.big{width:56px;height:56px;border-width:5px;margin:16px auto 0}
.okmark{width:72px;height:72px;margin:4px auto 0;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 15%,transparent);display:grid;place-items:center;animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
.code-k{align-self:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:24px;font-weight:800;letter-spacing:.12em;padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--accent-hi)}

.lbx{max-width:920px;width:calc(100% - 24px)}
.lbx::backdrop{background:rgba(5,7,15,.92)}
.lbx-in{display:flex;flex-direction:column;gap:12px;color:#fff}
.lbx-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;font-weight:800}
.lbx-stage{position:relative;display:flex;justify-content:center}
.lbx-img{width:min(100%,calc((100vh - 120px) * .8));aspect-ratio:4/5;border-radius:18px}
.lbx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(11,16,32,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#lbx-prev{left:8px}#lbx-next{right:8px}
.grp .tile{cursor:zoom-in}

.empty{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding-top:clamp(32px,5vw,56px);padding-bottom:clamp(32px,5vw,56px)}
.empty h2{margin:8px 0 0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.empty p{margin:0;max-width:440px;font-size:15px;line-height:1.55}
.empty .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.exp{display:block;margin-top:2px}
.exp.end{color:#9B1C1C;font-weight:700}

.prose{max-width:760px;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.65;color:var(--text2)}
.prose h2{margin:20px 0 0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.prose p,.prose ul{margin:0}
.prose ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
#wallet{scroll-margin-top:92px}

[data-theme="dark"] .err{background:#3A1418}
[data-theme="dark"] .code-k{border:1px solid #232A42}

/* price tiers (per-photo price drops with quantity) */
.tiers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tier{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.tier .q{font-size:15px;font-weight:800}
.tier .amt{font-size:clamp(24px,2.5vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.tier .per{font-size:14px;font-weight:700;color:var(--muted)}
.tier .off{align-self:flex-start;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.tier.best{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 3px var(--accent),0 30px 60px -30px rgba(11,16,32,.6)}
.tier.best .per{color:#B4BCCF}
.tier.best .off{background:var(--accent-hi);color:var(--ink)}
.tier .badge{position:absolute;top:-13px;left:18px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap}
.tiers-note{margin:14px 0 0;font-size:14px;line-height:1.5}
[data-theme="dark"] .tier.best{border:1px solid #232A42}
@media (max-width:760px){
  .tiers{grid-template-columns:1fr;gap:10px}
  .tier{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:2px;padding:16px 18px;border-radius:18px}
  .tier .q{grid-column:1;grid-row:1;font-size:16px}
  .tier .per{grid-column:1;grid-row:2}
  .tier .amt{grid-column:2;grid-row:1;justify-self:end;font-size:24px}
  .tier .off{grid-column:2;grid-row:2;justify-self:end}
  .tier.best{margin-top:10px}
  .tier .badge{left:auto;right:16px}
}

/* real photos (live mode): same boxes as the placeholder scenes */
img.sc{display:block;width:100%;height:100%;object-fit:cover}
img.th{object-fit:cover}
.tile .shot,.lbx-img .shot{border-radius:inherit}
.banks a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 6px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-size:13px;font-weight:800;text-align:center}
.banks a:hover{border-color:var(--accent)}

/* help widget (assets/help.js) */
.help{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.help>*{pointer-events:auto}
.help-fab{position:relative;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 16px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 14px 34px -12px rgba(11,16,32,.55),0 0 0 1px rgba(255,255,255,.08);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.help-fab:hover{transform:translateY(-2px)}
.help-fab svg{color:var(--accent-hi);flex:none}
/* dark: a raised navy pill with a light ring, so it stays visible over both the page and the amber ticker */
[data-theme="dark"] .help-fab{background:#1B2340;box-shadow:0 14px 34px -12px rgba(0,0,0,.75),0 0 0 1.5px rgba(255,255,255,.22)}
.help-dot{position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:50%;background:var(--bad-mk);box-shadow:0 0 0 2.5px #fff}
.help-nudge{max-width:280px;padding:12px 14px;border:1px solid var(--line);border-radius:16px 16px 4px 16px;background:var(--card);color:var(--text);font-size:14px;font-weight:700;line-height:1.4;text-align:left;cursor:pointer;box-shadow:0 18px 40px -18px rgba(11,16,32,.45);animation:menuIn .3s cubic-bezier(.2,.8,.2,1)}
.help-nudge:hover{border-color:var(--accent)}
.help-panel{width:min(390px,calc(100vw - 32px));height:min(620px,calc(100vh - 112px));display:flex;flex-direction:column;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(11,16,32,.55);animation:menuIn .25s cubic-bezier(.2,.8,.2,1)}
.help-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 18px;background:var(--ink);color:#fff;border-bottom:1px solid var(--line)}
.help-h b{display:block;font-size:17px;font-weight:800}
.help-h small{display:block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)}
.help-x{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:transparent;color:#fff;cursor:pointer}
.help-x:hover{background:rgba(255,255,255,.1)}
.help-log{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px 14px;background:var(--bg)}
.help-msg{max-width:90%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.help-msg p{margin:0}
.help-msg p+p{margin-top:4px}
.help-msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
.help-msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);font-weight:700;border-bottom-right-radius:5px}
.help-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.help-act{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border:1.5px solid var(--line);border-radius:11px;background:var(--card);color:var(--text);font-size:13.5px;font-weight:800;cursor:pointer}
.help-act:hover{border-color:var(--field)}
.help-act.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.help-act.pri:hover{background:var(--accent2)}
.help-act:disabled{opacity:.6;cursor:progress}
.help-card{display:grid;gap:4px}
.help-card b{font-weight:800}
.help-card small{font-size:13px;color:var(--muted)}
.help-card.ok b{color:var(--ok)}
.help-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:21px;font-weight:800;letter-spacing:.06em;color:var(--accent-ink)}
.help-notify{gap:8px}
.help-notify input{min-height:46px;padding:0 12px;border:1.5px solid var(--field);border-radius:11px;background:var(--card);color:var(--text);font-size:16px}
.help-notify input:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.help-err{color:var(--bad)!important;font-weight:700}
.help-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 2px;background:var(--card);border-top:1px solid var(--line)}
.help-chips:empty{display:none}
.help-chips-t{flex-basis:100%;font-size:12.5px;font-weight:800;color:var(--muted)}
.help-chip{min-height:36px;padding:0 13px;border:1.5px solid color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:999px;background:var(--accent-soft);color:var(--text);font-size:13.5px;font-weight:700;cursor:pointer;text-align:left}
.help-chip:hover{border-color:var(--accent)}
.help-in{display:flex;gap:8px;padding:10px 12px;background:var(--card)}
.help-in input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1.5px solid var(--field);border-radius:14px;background:var(--bg);color:var(--text);font-size:16px}
.help-in input:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.help-in button{width:48px;height:48px;flex:none;display:grid;place-items:center;border:0;border-radius:14px;background:var(--accent);color:var(--on-accent);cursor:pointer}
.help-in button:hover{background:var(--accent2)}
.help-f{padding:0 14px 12px;background:var(--card);font-size:12.5px;font-weight:600;color:var(--muted)}
.help-f a{color:var(--accent-ink);font-weight:800}
@media (max-width:760px){
  .help{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  body:has(.mbar) .help{bottom:calc(90px + env(safe-area-inset-bottom))}
  .help-fab{width:56px;height:56px;padding:0;justify-content:center}
  .help-fab-t{display:none}
  /* open: the panel takes the whole screen, its own × closes it */
  .help.is-open .help-fab,.help.is-open .help-nudge{display:none}
  .help-panel{position:fixed;inset:0;width:auto;height:auto;border:0;border-radius:0;padding-bottom:env(safe-area-inset-bottom)}
}
@media (prefers-reduced-motion:reduce){.help-panel,.help-nudge{animation:none}}