/* ===== Shuttle Academy — demo portfolio ===== */
:root{--bg:#0b1020;--bg2:#111934;--card:#161f3d;--line:#26305a;--lime:#c6ff3d;--txt:#eef2ff;--mut:#9aa6cf;--pink:#ff4d8d;--yel:#ffc53d;--r:18px;--bar:40px;--nav:64px;--ease:cubic-bezier(.23,1,.32,1);--sh:0 20px 50px #0007}
:root[data-theme=light]{--bg:#f4f6fb;--bg2:#e9edf7;--card:#fff;--line:#dbe1ef;--lime:#5a8f00;--txt:#121830;--mut:#5d6788;--sh:0 18px 40px #1a234a1a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{font-family:Vazirmatn,Tahoma,sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden;line-height:1.8;transition:background .3s,color .3s;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit}
.wrap{max-width:1200px;margin:auto;padding:0 16px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:8px}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:999;background:var(--bg);display:grid;place-items:center;transition:opacity .6s,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader .ld{display:grid;justify-items:center;gap:14px;color:var(--mut);font-size:13px}
#loader img{width:64px;animation:ldBounce 1.1s cubic-bezier(.45,0,.55,1) infinite}
#loader .ln{width:120px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
#loader .ln i{display:block;height:100%;width:40%;background:var(--lime);animation:ldBar 1.1s ease-in-out infinite}
@keyframes ldBounce{0%,100%{transform:translateY(0) rotate(-20deg)}50%{transform:translateY(-34px) rotate(15deg)}}
@keyframes ldBar{0%{transform:translateX(250%)}100%{transform:translateX(-150%)}}

/* ---------- demo bar ---------- */
.demobar{position:fixed;inset:0 0 auto;height:var(--bar);z-index:120;background:#05070f;color:#cfd6f5;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;border-bottom:1px solid #1d2549}
.demobar .lbl{opacity:.7}
.seg{display:flex;background:#141b38;border-radius:30px;padding:3px}
.seg a{padding:4px 14px;border-radius:30px;font-weight:700;color:#9aa6cf;transition:.2s}
.seg a.on{background:#c6ff3d;color:#0b1020}
.seg a:not(.on):hover{color:#fff}
@media(max-width:520px){.demobar .lbl{display:none}.seg a{padding:4px 11px}}

/* ---------- nav ---------- */
.nav{position:fixed;top:var(--bar);inset-inline:0;z-index:100;height:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:12px}
.logo{display:flex;gap:10px;align-items:center;font-weight:900;font-size:18px;white-space:nowrap}
.logo svg{width:36px;height:36px;flex-shrink:0}
.links{display:flex;gap:2px}
.links a{padding:8px 13px;border-radius:30px;color:var(--mut);font-weight:600;font-size:14px;transition:.2s}
.links a:hover,.links a.on{color:#0b1020;background:var(--lime)}
.nav-act{display:flex;gap:8px;align-items:center}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--txt);display:grid;place-items:center;cursor:pointer;font-size:18px;flex-shrink:0;transition:.2s}
.icon-btn:hover{border-color:var(--lime)}
.burger{display:none}
@media(max-width:1020px){.links,.nav-act .hide-m{display:none}.burger{display:grid}}
.drawer{position:fixed;inset:0;z-index:150;visibility:hidden}
.drawer .bk{position:absolute;inset:0;background:#000a;opacity:0;transition:.3s}
.drawer .pn{position:absolute;inset-block:0;right:0;width:min(300px,84vw);background:var(--bg2);padding:24px 18px;transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;gap:4px}
.drawer.open{visibility:visible}.drawer.open .bk{opacity:1}.drawer.open .pn{transform:none}
.drawer .pn a{padding:13px 14px;border-radius:12px;font-weight:600}
.drawer .pn a:hover{background:var(--card)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;background:var(--lime);color:#0b1020;font-weight:800;padding:12px 24px;border-radius:40px;border:0;cursor:pointer;font-size:15px;transition:transform .2s var(--ease),box-shadow .2s;box-shadow:0 8px 26px #c6ff3d40;white-space:nowrap;position:relative;overflow:hidden}
:root[data-theme=light] .btn{color:#fff}
.btn:hover{box-shadow:0 14px 36px #c6ff3d66}
.btn:active{transform:scale(.97)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff80 50%,transparent 70%);transform:translateX(120%);transition:none}
.btn:hover::after{transform:translateX(-120%);transition:transform .7s ease}
.btn.ghost{background:transparent;color:var(--txt);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost::after{display:none}
.btn.sm{min-height:40px;padding:8px 16px;font-size:14px}
.btn.block{width:100%}
.mini{min-height:40px;padding:6px 14px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--txt);font-size:13px;cursor:pointer;transition:.2s}
.mini:hover{border-color:var(--pink);color:var(--pink)}

/* ---------- hero ---------- */
.hero{min-height:100svh;position:relative;display:flex;align-items:center;padding-top:calc(var(--bar) + var(--nav) + 20px);padding-bottom:40px;overflow:hidden;
background:radial-gradient(ellipse at 20% 30%,#1b2a6b 0,transparent 55%),radial-gradient(ellipse at 90% 80%,#2a1350 0,transparent 50%)}
:root[data-theme=light] .hero{background:radial-gradient(ellipse at 20% 30%,#cfdcff 0,transparent 55%),radial-gradient(ellipse at 90% 80%,#eedcff 0,transparent 50%)}
.court-svg{position:absolute;inset:auto 0 0;width:100%;height:70%;opacity:.5;pointer-events:none}
.court-svg path{fill:none;stroke:var(--line);stroke-width:2}
#fall{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fall{position:absolute;top:-60px;opacity:.16;animation:drop linear infinite}
@keyframes drop{to{transform:translateY(115vh) rotate(540deg)}}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;position:relative;z-index:2}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
.tag{display:inline-block;background:color-mix(in srgb,var(--lime) 12%,transparent);color:var(--lime);border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);padding:5px 15px;border-radius:30px;font-size:13px;font-weight:700;margin-bottom:14px}
h1{font-size:clamp(34px,6vw,70px);font-weight:900;line-height:1.3}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
h1 .w>span{display:inline-block}
h1 .hl{color:var(--lime);position:relative}
h1 .hl svg{position:absolute;inset-inline:0;bottom:-6px;width:100%;height:14px}
h1 .hl path{stroke:var(--lime);stroke-width:4;fill:none;stroke-linecap:round}
.hero p.lead{color:var(--mut);font-size:clamp(15px,2vw,18px);margin:18px 0 28px;max-width:520px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.stats b{display:block;font-size:30px;color:var(--lime);font-weight:900;line-height:1.3}
.stats small{color:var(--mut)}
/* scene */
.scene{position:relative;height:620px;perspective:1200px}
.halo{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px;border-radius:50%;background:radial-gradient(circle,#3b6cff33,#c6ff3d14 45%,transparent 70%);filter:blur(30px)}
.rk-wrap{position:absolute;left:50%;top:50%;width:290px;margin:-300px 0 0 -170px;transform-origin:43px 532px;will-change:transform}
.racket{width:100%;display:block;filter:drop-shadow(30px 40px 40px #0009)}
.sh-wrap{position:absolute;left:50%;top:50%;width:150px;margin:-75px;will-change:transform}
.shut{width:100%;display:block;filter:drop-shadow(0 25px 25px #0008)}
.trail{opacity:0;pointer-events:none}.trail .shut{filter:blur(3px)}
.shadow{position:absolute;left:50%;bottom:20px;width:180px;height:24px;margin-left:-90px;border-radius:50%;background:radial-gradient(#000a,transparent 70%);filter:blur(6px)}
.imp{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px;border-radius:50%;background:radial-gradient(circle,#fff,#c6ff3d77 30%,transparent 68%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.speed{position:absolute;left:50%;top:50%;height:2px;width:220px;margin-top:-1px;background:linear-gradient(90deg,transparent,#fff9);opacity:0;transform-origin:left center;pointer-events:none}
.hint{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:13px;color:var(--mut);animation:hint 2.4s ease-in-out infinite}
@keyframes hint{50%{transform:translate(-50%,6px);opacity:.5}}
@media(max-width:960px){.scene{height:440px;margin-top:-10px}.scene .stage{transform:scale(.68);transform-origin:center;position:absolute;inset:0}.hint{display:none}}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:16px 0;direction:ltr}
.mq{display:flex;gap:48px;width:max-content;animation:mq 30s linear infinite;font-weight:900;font-size:clamp(18px,3vw,28px);color:var(--mut)}
.mq span{display:flex;align-items:center;gap:48px;white-space:nowrap}
.mq img{width:30px;opacity:.8}
.mq em{font-style:normal;color:var(--lime)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:96px 0;position:relative;scroll-margin-top:calc(var(--bar) + var(--nav))}
@media(max-width:700px){section{padding:64px 0}}
.alt{background:var(--bg2)}
.head{text-align:center;margin-bottom:46px}
.head h2{font-size:clamp(26px,4vw,44px);font-weight:900;line-height:1.4}
.head p{color:var(--mut);margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden;transform-style:preserve-3d}
.card:hover{border-color:var(--lime);box-shadow:var(--sh)}
.card .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffff1c,transparent 40%);opacity:0;transition:opacity .3s}
.card:hover .glare{opacity:1}
.ic{width:58px;height:58px;border-radius:16px;background:color-mix(in srgb,var(--lime) 12%,transparent);display:grid;place-items:center;margin-bottom:16px;transition:transform .5s var(--ease)}
.ic img{width:34px}
.card:hover .ic{transform:rotate(-14deg) scale(1.08)}
.card h3{font-size:19px;margin-bottom:6px}
.card p{color:var(--mut);font-size:14.5px}
.price{margin-top:14px;color:var(--lime);font-weight:800}
.reveal{opacity:0;transform:translateY(40px)}
.no-js .reveal,.rm .reveal{opacity:1;transform:none}

/* ---------- panels / forms ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
@media(max-width:600px){.panel{padding:18px}}
.panel h4{font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--mut);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--txt);font-family:inherit;font-size:16px;outline:0;transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--lime);box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 18%,transparent)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- reserve ---------- */
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px}
@media(max-width:960px){.rgrid{grid-template-columns:minmax(0,1fr)}}
.days{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:20px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.day{min-width:76px;text-align:center;padding:10px 6px;border-radius:14px;border:1px solid var(--line);cursor:pointer;transition:.2s;flex-shrink:0;scroll-snap-align:start;background:var(--bg)}
.day small{display:block;color:var(--mut);font-size:12px}
.day b{font-size:20px}
.day.on{background:var(--lime);color:#0b1020;border-color:var(--lime)}
.day.on small{color:#0b1020aa}
.courts{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.chip{min-height:40px;padding:8px 16px;border-radius:30px;border:1px solid var(--line);cursor:pointer;font-size:14px;transition:.2s;background:transparent;color:var(--txt)}
.chip.on{border-color:var(--lime);color:var(--lime);background:color-mix(in srgb,var(--lime) 8%,transparent)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.slot{min-height:46px;padding:10px 6px;border-radius:12px;background:var(--bg);border:1px solid var(--line);text-align:center;cursor:pointer;font-weight:600;font-size:13.5px;transition:.2s;color:var(--txt)}
.slot:hover{border-color:var(--lime)}
.slot.full{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.slot.on{background:var(--lime);color:#0b1020;border-color:var(--lime);transform:scale(1.03)}
.legend{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-left:5px;vertical-align:middle}
.sum{position:sticky;top:calc(var(--bar) + var(--nav) + 16px);align-self:start}
.sum .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.sum .row span{color:var(--mut)}
.sum .total{font-size:22px;font-weight:900;color:var(--lime);border:0}

/* ---------- quiz ---------- */
.quiz{max-width:720px;margin:auto}
.qbar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-bottom:22px}
.qbar i{display:block;height:100%;width:0;background:var(--lime);transition:width .5s var(--ease)}
.qopts{display:grid;gap:10px;margin-top:16px}
.qopt{min-height:52px;text-align:right;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--txt);font-size:15px;cursor:pointer;transition:.2s}
.qopt:hover{border-color:var(--lime);transform:translateX(-4px)}
.qres{text-align:center}
.qres .big{font-size:30px;font-weight:900;color:var(--lime);margin:8px 0}

/* ---------- sms ---------- */
.sms-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
@media(max-width:900px){.sms-grid{grid-template-columns:1fr}}
.feat{display:flex;gap:14px;margin-bottom:16px}
.feat .ic{width:46px;height:46px;flex-shrink:0;margin:0}
.feat .ic img{width:24px}
.feat p{color:var(--mut);font-size:14px}
.phone{width:280px;margin:auto;background:#05070f;border:10px solid #1f2747;border-radius:42px;padding:22px 14px;height:520px;position:relative;box-shadow:0 30px 80px #000a;overflow:hidden}
.phone:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:20px;background:#1f2747;border-radius:20px}
.ph-h{text-align:center;font-size:13px;color:#9aa6cf;margin:14px 0 10px}
.msg{background:#1c2547;color:#eef2ff;border-radius:16px 16px 4px 16px;padding:10px 13px;font-size:12.5px;margin-bottom:10px;opacity:0;transform:translateY(16px) scale(.96)}
.msg b{color:#c6ff3d}
.typing{display:inline-flex;gap:4px;background:#1c2547;padding:10px 14px;border-radius:16px;opacity:0}
.typing i{width:6px;height:6px;border-radius:50%;background:#9aa6cf;animation:typ 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{50%{transform:translateY(-4px);opacity:.4}}

/* ---------- coaches / achievements / gallery / testimonials ---------- */
.coach{text-align:center;padding:0}
.coach .ph{height:200px;background:linear-gradient(135deg,#1e2b63,#3b1e63);display:grid;place-items:center;overflow:hidden}
.coach .ph img{width:110px;transition:transform .6s var(--ease)}
.coach:hover .ph img{transform:scale(1.15) rotate(-12deg)}
.coach .in{padding:20px}
.medals{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px}
.medal{text-align:center;padding:24px 14px}
.medal .m{width:66px;height:66px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;color:#0b1020}
.medal b{display:block;font-size:30px;font-weight:900}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:right;color:var(--mut);font-weight:600;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 10px;border-bottom:1px solid var(--line)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:12px}
.gal div{border-radius:18px;overflow:hidden;position:relative;background:linear-gradient(135deg,#1e2b63,#3b1e63);cursor:pointer}
.gal div:nth-child(1){grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg,#123d2a,#1e2b63)}
.gal div:nth-child(4){grid-column:span 2;background:linear-gradient(135deg,#3b1e63,#5a1e3b)}
.gal img{position:absolute;width:45%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-20deg);transition:transform .7s var(--ease);opacity:.9}
.gal div:hover img{transform:translate(-50%,-55%) rotate(5deg) scale(1.1)}
.gal span{position:absolute;inset:auto 0 0;padding:14px;background:linear-gradient(transparent,#000a);color:#fff;font-weight:700;font-size:14px;transform:translateY(100%);transition:transform .4s var(--ease)}
.gal div:hover span,.gal div:focus span{transform:none}
.gal .lines{position:absolute;inset:14%;border:2px solid #ffffff1a;border-radius:4px}
.gal .lines:after{content:"";position:absolute;inset:0 50% 0 auto;border-left:2px solid #ffffff1a}
@media(max-width:800px){.gal{grid-template-columns:1fr 1fr;grid-auto-rows:140px}.gal div:nth-child(4){grid-column:span 2}.gal span{transform:none}}
.tst{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.tst .card{min-width:min(320px,82vw);scroll-snap-align:start}
.stars{color:var(--yel);letter-spacing:2px;margin-bottom:8px}
.who{display:flex;gap:10px;align-items:center;margin-top:14px}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#0b1020;background:var(--lime)}

/* ---------- trial ---------- */
.trial{background:linear-gradient(135deg,#16204a,#251a4f);border:1px solid var(--line);border-radius:28px;padding:44px;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;color:#eef2ff}
.trial .field label{color:#9aa6cf}
@media(max-width:850px){.trial{grid-template-columns:1fr;padding:22px}}
.trial h2{font-size:clamp(24px,3.5vw,38px);font-weight:900}
.trial ul{list-style:none;margin-top:16px;color:#9aa6cf}.trial li{margin:8px 0}.trial li:before{content:"✓ ";color:#c6ff3d;font-weight:900}

/* ---------- contact ---------- */
.cbox{display:grid;grid-template-columns:1fr 1fr;border-radius:30px;overflow:hidden;border:1px solid var(--line)}
@media(max-width:900px){.cbox{grid-template-columns:1fr}}
.cleft{background:linear-gradient(150deg,#c6ff3d,#5fd36b 60%,#1fb7a8);color:#0b1020;padding:44px;position:relative;overflow:hidden}
@media(max-width:600px){.cleft,.cright{padding:26px!important}}
.cleft h3{font-size:clamp(28px,4vw,38px);font-weight:900;line-height:1.3}
.cleft p{opacity:.8;margin:12px 0 26px}
.cinfo{display:flex;gap:14px;align-items:center;margin-bottom:16px;font-weight:600}
.cinfo i{width:46px;height:46px;border-radius:14px;background:#0b10201a;display:grid;place-items:center;font-style:normal;font-size:20px;flex-shrink:0}
.soc{display:flex;gap:10px;margin-top:26px}
.soc a{width:46px;height:46px;border-radius:50%;background:#0b1020;color:#c6ff3d;display:grid;place-items:center;font-weight:900;transition:transform .3s var(--ease)}
.soc a:hover{transform:translateY(-5px) rotate(10deg)}
.cleft .bigs{position:absolute;width:240px;left:-50px;bottom:-60px;opacity:.18;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(-12deg) translateY(-8px)}}
.cright{background:var(--card);padding:44px}
.fl{position:relative;margin-bottom:16px}
.fl input,.fl textarea{width:100%;background:transparent;border:0;border-bottom:2px solid var(--line);padding:18px 2px 8px;color:var(--txt);font-family:inherit;font-size:16px;outline:0;transition:.3s}
.fl label{position:absolute;right:2px;top:18px;color:var(--mut);transition:.25s;pointer-events:none}
.fl input:focus,.fl textarea:focus{border-color:var(--lime)}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label{top:-4px;font-size:12px;color:var(--lime)}
.send img{width:24px;transition:transform .8s var(--ease)}
.send.go img{transform:translate(-280px,-90px) rotate(-60deg)}
.map{margin-top:24px;height:190px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(#8881 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,#8881 1px,transparent 1px) 0 0/30px 30px,var(--bg2);position:relative;overflow:hidden}
.pin{position:absolute;left:50%;top:45%;width:50px;transform:translate(-50%,-50%) rotate(-30deg);animation:pinb 1.6s ease-in-out infinite}
@keyframes pinb{50%{transform:translate(-50%,-80%) rotate(-30deg)}}
.pulse{position:absolute;left:50%;top:52%;width:20px;height:20px;margin:-10px;border-radius:50%;border:2px solid var(--lime);animation:pulse 2s infinite}
@keyframes pulse{to{transform:scale(8);opacity:0}}

footer{padding:30px 0 30px;text-align:center;color:var(--mut);font-size:13px;border-top:1px solid var(--line)}
@media(max-width:1020px){footer{padding-bottom:100px}}

/* ---------- bottom nav (mobile) ---------- */
.bnav{display:none;position:fixed;bottom:0;inset-inline:0;z-index:110;background:color-mix(in srgb,var(--bg2) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.bnav a{flex:1;display:grid;justify-items:center;gap:2px;font-size:11px;color:var(--mut);padding:6px 0;border-radius:12px;min-height:52px}
.bnav a span{font-size:20px;line-height:1.2}
.bnav a.on{color:var(--lime)}
.bnav a.main span{width:46px;height:46px;margin-top:-22px;border-radius:50%;background:var(--lime);color:#0b1020;display:grid;place-items:center;box-shadow:0 8px 20px #c6ff3d55}
@media(max-width:1020px){.bnav{display:flex}}

/* ---------- scroll progress ---------- */
.prog-top{position:fixed;top:calc(var(--bar) + var(--nav));inset-inline:0;height:2px;z-index:101;pointer-events:none}
.prog-top i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:right;transform:scaleX(0)}

/* ---------- modal + toast ---------- */
.md{position:fixed;inset:0;z-index:300;background:#000b;display:none;place-items:center;padding:16px}
.md.open{display:grid}
.md .box{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;width:100%;max-width:420px;animation:mdin .35s var(--ease)}
@keyframes mdin{from{opacity:0;transform:translateY(16px) scale(.97)}}
@media(max-width:600px){.md{place-items:end center;padding:0}.md .box{border-radius:22px 22px 0 0;max-width:none;padding-bottom:calc(26px + env(safe-area-inset-bottom))}}
.gw{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.gw label{border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;cursor:pointer;font-weight:700;min-height:50px}
.gw input{position:absolute;opacity:0}.gw input:checked+label{border-color:var(--lime);color:var(--lime)}
.ok{text-align:center}
.ok .ic2{width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--lime) 15%,transparent);color:var(--lime);font-size:38px;display:grid;place-items:center;margin:0 auto 14px;animation:pop2 .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop2{from{transform:scale(.5);opacity:0}}
.spin{width:44px;height:44px;margin:10px auto;border:3px solid var(--line);border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,140px);background:var(--lime);color:#0b1020;font-weight:800;padding:14px 24px;border-radius:40px;z-index:400;transition:transform .5s cubic-bezier(.3,1.4,.5,1);max-width:calc(100vw - 32px);text-align:center;font-size:14px}
.toast.show{transform:translate(-50%,0)}
@media(max-width:1020px){.toast{bottom:92px}}

/* ---------- app pages (panel / admin) ---------- */
.app{padding-top:calc(var(--bar) + var(--nav));min-height:100vh}
.auth{max-width:400px;margin:50px auto;padding:0 16px}
.otp{display:flex;gap:10px;direction:ltr;justify-content:center;margin:10px 0 18px}
.otp input{width:58px;height:62px;text-align:center;font-size:24px;font-weight:800;background:var(--bg);border:1px solid var(--line);border-radius:14px;color:var(--txt);outline:0}
.otp input:focus{border-color:var(--lime)}
.demo-q{margin-top:14px;padding:14px;border:1px dashed var(--lime);border-radius:14px;text-align:center;font-size:13px;color:var(--mut)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px}
.prog{--p:60;width:128px;height:128px;border-radius:50%;background:conic-gradient(var(--lime) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;margin:auto}
.prog b{width:100px;height:100px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:22px}
.li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;gap:10px}
.li:last-child{border:0}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:12px}
.cal span{padding:8px 0;border-radius:8px;background:var(--bg)}
.cal .p{background:color-mix(in srgb,var(--lime) 20%,transparent);color:var(--lime);font-weight:800}.cal .a{background:#ff4d8d22;color:var(--pink)}
.pk{border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center;background:var(--card);transition:.25s}
.pk:hover{border-color:var(--lime);transform:translateY(-4px)}
.pk b{display:block;font-size:22px;color:var(--lime);margin:6px 0 12px}
.badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;background:color-mix(in srgb,var(--lime) 15%,transparent);color:var(--lime);white-space:nowrap}
.badge.r{background:#ff4d8d22;color:var(--pink)}.badge.y{background:#ffc53d22;color:var(--yel)}
.welcome h2{font-weight:900;font-size:clamp(22px,4vw,30px)}
.qr{width:120px;height:120px;margin:auto;background:#fff;padding:8px;border-radius:12px}
/* admin */
.adm{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - var(--bar) - var(--nav))}
.side{border-left:1px solid var(--line);padding:18px 12px;background:var(--bg2)}
.side a{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;color:var(--mut);font-weight:600;font-size:14px;margin-bottom:4px;cursor:pointer;min-height:46px}
.side a.on,.side a:hover{background:color-mix(in srgb,var(--lime) 12%,transparent);color:var(--lime)}
.main{padding:24px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.kpi small{color:var(--mut)}.kpi b{display:block;font-size:24px;margin-top:4px}.kpi i{font-style:normal;font-size:12px;color:var(--lime)}
.bars{display:flex;align-items:flex-end;gap:10px;height:180px;margin-bottom:26px}
.bars div{flex:1;background:linear-gradient(var(--lime),#5fd36b);border-radius:8px 8px 0 0;position:relative;transform-origin:bottom}
.bars div span{position:absolute;bottom:-22px;left:-10px;right:-10px;text-align:center;font-size:11px;color:var(--mut)}
.heat{display:grid;grid-template-columns:54px repeat(15,minmax(14px,1fr));gap:3px;font-size:10px;color:var(--mut);overflow-x:auto}
.heat i{height:22px;border-radius:4px;display:block;transform:scale(0)}
.tab{display:none}.tab.on{display:block}
@media(max-width:900px){
 .adm{grid-template-columns:1fr}
 .side{display:flex;overflow-x:auto;border:0;border-bottom:1px solid var(--line);padding:10px;gap:6px;position:sticky;top:calc(var(--bar) + var(--nav));z-index:5}
 .side a{white-space:nowrap;margin:0}
 .main{padding:16px}
 .kpis{grid-template-columns:1fr 1fr;gap:10px}
 .kpi{padding:14px}.kpi b{font-size:20px}
 /* tables become cards */
 .rt thead{display:none}
 .rt tr{display:block;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:10px}
 .rt td{display:flex;justify-content:space-between;align-items:center;border:0;padding:6px 0;gap:10px}
 .rt td:before{content:attr(data-l);color:var(--mut);font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.msg,.typing{opacity:1;transform:none}.heat i{transform:none}}