/* OSD Tehran - monochrome premium theme (part 1: base, components, header, hero) */
:root{--ink:#0a0a0a;--paper:#f4f4f2;--line:#e2e2de;--brand:#0a0a0a;--brand-dark:#000;--accent:#fff;--soft:#ecece8;--ease:cubic-bezier(.2,.7,.1,1)}
html{scroll-behavior:smooth}
body{font-family:Vazirmatn,Tahoma,sans-serif;background:var(--paper);color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:#fff}
.text-gray-500{color:#6a6a65}.text-gray-600{color:#4a4a46}.text-gray-700{color:#2b2b28}
.wrap{max-width:82rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4.5rem)}
.bg-brand{background:var(--ink);color:#fff}.bg-brand-dark{background:#000}.bg-soft{background:var(--soft)}.bg-accent{background:#fff;color:var(--ink)}
.text-brand{color:var(--ink)}.border-brand{border-color:var(--ink)}
.dark,.band-dark{background:var(--ink);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--ink);color:#fff;padding:.7rem 1.6rem;border-radius:999px;font-weight:800;border:1.5px solid var(--ink);cursor:pointer;transition:background .25s,color .25s,transform .3s var(--ease)}
.btn:hover{background:#fff;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-accent{background:#fff;color:var(--ink);border-color:#fff}.btn-accent:hover{background:transparent;color:#fff}
.dark .btn{background:#fff;color:var(--ink);border-color:#fff}.dark .btn:hover{background:transparent;color:#fff}
.dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}.dark .btn-ghost:hover{background:#fff;color:var(--ink)}
.field{width:100%;border:1.5px solid #cfcfca;border-radius:.9rem;padding:.65rem 1rem;background:#fff;color:var(--ink)}
.field:focus{outline:3px solid rgba(10,10,10,.18);border-color:var(--ink)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:1.25rem;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(10,10,10,.07),transparent 45%)}
.card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 24px 40px -26px rgba(10,10,10,.45)}.card:hover::before{opacity:1}
.pill{display:inline-block;padding:.15rem .8rem;border-radius:999px;font-size:.75rem;font-weight:800}
.pill-ink{background:var(--ink);color:#fff}.pill-line{border:1px solid var(--ink)}
.lvl{display:inline-block;min-width:2.2rem;text-align:center;padding:.05rem .5rem;border:1.5px solid currentColor;border-radius:.5rem;font-weight:900;font-size:.8rem;letter-spacing:.04em;direction:ltr}
.section-title{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:900;line-height:1.45}
.eyebrow{display:block;font-weight:800;letter-spacing:.14em;font-size:.75rem;text-transform:uppercase;opacity:.6;direction:ltr;text-align:start}
.chip{display:inline-block;padding:.25rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);font-size:.85rem;font-weight:700;color:#fff}
.sec{padding-block:clamp(4rem,9vw,8rem)}
.ph{height:9rem;border-radius:1rem;background:var(--soft);display:grid;place-items:center;font-size:3rem;font-weight:900;margin-bottom:1rem}
.flash{background:var(--ink);color:#fff;text-align:center;padding:.7rem;font-weight:800;font-size:.9rem}
.hd{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.72);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);color:#fff;border-bottom:1px solid rgba(255,255,255,.1);transition:background .3s,box-shadow .3s}
.hd.sc{background:rgba(10,10,10,.94);box-shadow:0 10px 30px -18px #000}
.hd a{color:#fff}.hd .btn-accent{color:var(--ink)}.hd .btn-accent:hover{color:#fff}
.hd .logo{width:44px;height:44px;border-radius:12px;display:block}
.nav a{position:relative;font-weight:700;padding:.2rem 0}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.prog{position:fixed;top:0;inset-inline:0;height:3px;background:#fff;mix-blend-mode:difference;transform-origin:right;transform:scaleX(var(--sp,0));z-index:99;pointer-events:none}
.dd{position:relative}.dd-menu{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:12rem;background:#0f0f0f;border:1px solid rgba(255,255,255,.15);border-radius:1rem;padding:.5rem;z-index:50}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}.dd-menu a{display:block;padding:.45rem .8rem;border-radius:.6rem;font-weight:700}.dd-menu a:hover{background:#fff;color:var(--ink)}
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.hero-bg{position:absolute;inset:-10% 0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:30px 30px;opacity:.55;transform:translate3d(0,calc(var(--hp,0)*140px),0);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 75%)}
.hero-main{min-height:calc(100vh - 64px);display:flex;align-items:center}
.hero-inner{transform:translate3d(0,calc(var(--hp,0)*-70px),0);opacity:calc(1 - var(--hp,0)*1.15)}
.glyph-wrap{transform:translate3d(0,calc(var(--hp,0)*90px),0) rotate(calc(var(--hp,0)*10deg)) scale(calc(1 - var(--hp,0)*.15))}
.glyph{width:min(44vw,340px);height:auto;overflow:visible}
.glyph .ring{fill:transparent;stroke:#fff;stroke-width:7;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s var(--ease) .3s forwards,fillin 1.1s ease 2.1s forwards}
.glyph .dot{fill:#fff;transform-box:fill-box;transform-origin:center;transform:scale(0);translate:calc(var(--ex,0)*26px) calc(var(--ey,0)*18px);animation:pop .8s var(--ease) 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fillin{to{fill:#fff}}@keyframes pop{to{transform:scale(1)}}
.orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18);transform:translate3d(0,var(--py,0),0);pointer-events:none;z-index:-1}
.orb1{width:520px;height:520px;inset-inline-start:-180px;top:8%}.orb2{width:300px;height:300px;inset-inline-end:6%;bottom:-80px;background:rgba(255,255,255,.04)}
.scroll-cue{position:absolute;inset-inline-start:50%;bottom:1.5rem;width:26px;height:42px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px;transform:translateX(50%)}
.scroll-cue i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
/* part 2: marquee, exam table, countdown, story */
.marq{overflow:hidden;white-space:nowrap;border-block:1px solid rgba(255,255,255,.14);padding-block:1.1rem}
.marq-track{display:inline-flex;gap:3rem;padding-inline-end:3rem;will-change:transform}
.marq span,.marq b{font-size:clamp(2.2rem,6.5vw,5.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.marq span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.xtbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:1.25rem;overflow:hidden}
.xtbl th{background:var(--ink);color:#fff;text-align:start;padding:.9rem 1rem;font-size:.8rem;font-weight:800}
.xtbl td{padding:1rem;border-top:1px solid var(--line);vertical-align:middle}
.xtbl td b{display:block}.xtbl td small{display:block;color:#6a6a65;font-size:.75rem}
.xrow{transition:background .3s}.xrow:hover{background:#f0f0ec}
.st-pill{display:inline-block;padding:.15rem .75rem;border-radius:999px;font-size:.75rem;font-weight:800;border:1.5px solid var(--ink);white-space:nowrap}
.st-open{background:var(--ink);color:#fff}.st-few{background:#fff}.st-full,.st-closed{opacity:.55;border-style:dashed}
.xbtn{padding:.4rem 1.1rem;font-size:.85rem;white-space:nowrap}
.xempty{padding:2rem;text-align:center;background:#fff;border:1px dashed #b9b9b4;border-radius:1.25rem}
.dkcard{background:var(--ink);color:#fff;border-radius:1.5rem;padding:1.5rem}
.cd{display:flex;gap:.6rem;margin-top:.75rem}
.cdb{flex:1;min-width:0;padding:.8rem .4rem;border:1px solid rgba(255,255,255,.25);border-radius:1rem;text-align:center}
.cdb b{display:block;font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.2;font-variant-numeric:tabular-nums}.cdb i{font-style:normal;font-size:.72rem;opacity:.7}
.story{position:relative}
.storyfig{position:relative;aspect-ratio:1;max-width:360px;margin-inline:auto}
.storyfig svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg,.ring-fg{fill:none;stroke-width:2}.ring-bg{stroke:rgba(255,255,255,.15)}
.ring-fg{stroke:#fff;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--stp,0))}
.sn{position:absolute;inset:0;display:grid;place-items:center;font-size:7rem;font-weight:900;opacity:0;transform:scale(.7);transition:opacity .6s var(--ease),transform .6s var(--ease)}.sn.on{opacity:1;transform:none}
@media (min-width:900px){
 .js .story{height:420vh}
 .js .story-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
 .js .st-box{position:relative;min-height:19rem}
 .js .st{position:absolute;inset-inline:0;top:0;opacity:0;transform:translateY(60px);transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none}
 .js .st.on{opacity:1;transform:none;pointer-events:auto}
}
@media (max-width:899px){.st{margin-bottom:2.5rem}.storyfig{display:none}}
/* part 3: levels, rows, footer, cursor, reveal, responsive */
.lvbar{display:flex;flex-wrap:wrap;gap:.6rem}
.lv{padding:.5rem 1.4rem;border-radius:999px;border:1.5px solid var(--ink);font-weight:900;background:transparent;cursor:pointer;transition:background .25s,color .25s}
.lv.on,.lv:hover{background:var(--ink);color:#fff}
.js .lv-panel{display:none}.js .lv-panel.on{display:grid;animation:fadeup .6s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lv-big{font-size:clamp(5rem,16vw,11rem);font-weight:900;line-height:1;letter-spacing:-.04em;direction:ltr;text-align:center}
.hscroll{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:1rem;cursor:grab;scrollbar-width:thin}
.hscroll.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}.hitem{flex:0 0 min(78vw,290px);scroll-snap-align:start}
.bigrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.6rem 0;border-top:1px solid rgba(255,255,255,.2);font-size:clamp(1.5rem,4.2vw,3.2rem);font-weight:900;color:#fff;transition:padding .4s var(--ease)}
.bigrow:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.bigrow small{display:block;font-size:.9rem;font-weight:700;opacity:.6;direction:ltr;text-align:start}
.bigrow:hover{padding-inline-start:1.5rem}.bigrow .arr{transition:transform .4s var(--ease)}.bigrow:hover .arr{transform:translateX(-14px)}
.mega{font-size:clamp(3.5rem,15vw,13rem);font-weight:900;letter-spacing:-.05em;line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.3);direction:ltr;text-align:center;user-select:none;transition:color .5s}.mega:hover{color:rgba(255,255,255,.9)}
.ft a{opacity:.85}.ft a:hover{opacity:1;text-decoration:underline}
.cur{position:fixed;left:0;top:0;width:34px;height:34px;border:1.5px solid #fff;border-radius:50%;pointer-events:none;z-index:100;mix-blend-mode:difference;transition:width .25s,height .25s,background .25s}.cur.big{width:70px;height:70px;background:#fff}
.js .rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv-l{transform:translate3d(60px,0,0)}.js .rv-s{transform:scale(.92)}.js .rv-l.in,.js .rv-s.in{transform:none}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .sw>span{display:inline-block;transform:translate3d(0,118%,0);transition:transform 1.05s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js .split.in .sw>span{transform:none}
@media (max-width:820px){
 .xtbl thead{display:none}.xtbl,.xtbl tbody,.xtbl tr,.xtbl td{display:block}
 .xtbl{background:transparent;border:0}.xtbl tr{background:#fff;border:1px solid var(--line);border-radius:1rem;margin-bottom:.9rem;padding:.4rem 0}
 .xtbl td{border:0;padding:.45rem 1rem;display:flex;justify-content:space-between;gap:1rem;text-align:end}
 .xtbl td::before{content:attr(data-l);font-weight:800;opacity:.55;font-size:.78rem;text-align:start}
}
@media (prefers-reduced-motion:reduce){.js .rv,.js .sw>span{transition:none;opacity:1;transform:none}.glyph .ring{animation:none;stroke-dashoffset:0;fill:#fff}.glyph .dot{animation:none;transform:none}.scroll-cue i{animation:none}html{scroll-behavior:auto}}
/* countdown reads left to right: days, hours, minutes, seconds */
.cd{direction:ltr}.cdb{direction:rtl}