body{position:relative;isolation:isolate;background-color:#f3f7ff;background-image:linear-gradient(rgba(26,86,232,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(26,86,232,.055) 1px,transparent 1px),radial-gradient(circle at 12% 10%,rgba(65,126,255,.13),transparent 24%),radial-gradient(circle at 86% 36%,rgba(124,190,255,.16),transparent 28%);background-size:32px 32px,32px 32px,100% 100%,100% 100%;background-attachment:fixed}
body::before,body::after{content:"";position:fixed;z-index:-1;width:270px;height:270px;border-radius:50%;pointer-events:none;filter:blur(4px);opacity:.55}
body::before{top:18%;left:-110px;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.95),rgba(80,143,255,.18) 55%,transparent 72%)}
body::after{right:-95px;bottom:8%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.95),rgba(80,195,255,.17) 55%,transparent 72%)}
nav{position:sticky;top:0;z-index:30;background:rgba(245,248,255,.68);border-bottom-color:rgba(157,185,240,.48);box-shadow:0 8px 30px rgba(42,76,145,.045);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}
.wrap{max-width:1160px}
.filters{width:max-content;max-width:100%;padding:6px;border:1px solid rgba(180,202,245,.72);border-radius:15px;background:rgba(255,255,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 12px 35px rgba(40,73,138,.06);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
.filter{border-color:transparent;border-radius:10px;background:transparent;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.filter:hover{background:rgba(255,255,255,.72);transform:translateY(-1px)}
.filter.active{background:linear-gradient(135deg,var(--blue),#3678ff);box-shadow:0 8px 20px rgba(26,86,232,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.grid{gap:22px}
.card{--glass-accent:var(--card-color,var(--blue));--glass-tilt-x:0deg;--glass-tilt-y:0deg;isolation:isolate;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.92);outline:1px solid rgba(146,181,247,.17);outline-offset:-2px;border-radius:24px;background:radial-gradient(circle at 12% 4%,rgba(255,255,255,.92),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.57),rgba(227,239,255,.29));box-shadow:0 26px 65px rgba(24,55,116,.12),inset 1px 1px 0 rgba(255,255,255,1),inset -1px -1px 0 rgba(109,158,243,.2),inset 0 0 34px rgba(255,255,255,.24);backdrop-filter:blur(30px) saturate(1.42) contrast(1.04);-webkit-backdrop-filter:blur(30px) saturate(1.42) contrast(1.04);transform:perspective(950px) translateZ(0) rotateX(var(--glass-tilt-x)) rotateY(var(--glass-tilt-y));transform-style:preserve-3d;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease}
.card::before{content:"";position:absolute;z-index:-1;top:-82px;right:-58px;width:205px;height:205px;border-radius:44% 56% 63% 37%/52% 43% 57% 48%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),color-mix(in srgb,var(--glass-accent) 22%,transparent) 42%,color-mix(in srgb,var(--glass-accent) 6%,transparent) 68%,transparent 72%);filter:blur(7px);transform:rotate(20deg);transition:transform .45s ease,opacity .35s ease}
.card::after{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;background:radial-gradient(circle 170px at 50% 8%,rgba(255,255,255,.72),rgba(255,255,255,.18) 30%,transparent 72%);mix-blend-mode:screen;opacity:.3;pointer-events:none;transition:opacity .25s ease}
.card:not(.soon):hover{transform:perspective(950px) translateY(-9px) scale(1.012) rotateX(var(--glass-tilt-x)) rotateY(var(--glass-tilt-y));border-color:color-mix(in srgb,var(--glass-accent) 28%,white);box-shadow:0 38px 86px rgba(24,55,116,.18),0 12px 36px color-mix(in srgb,var(--glass-accent) 15%,transparent),inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(109,158,243,.22)}
.card:not(.soon):hover::before{transform:translate(-8px,10px) rotate(34deg) scale(1.08)}
.card:not(.soon):hover::after{opacity:.72}
.card-body{position:relative;z-index:1;padding:24px;gap:15px;transform:translateZ(18px)}
.card-body::before,.card-body::after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px 8px rgba(255,255,255,.65),0 10px 25px rgba(65,118,220,.05);backdrop-filter:blur(8px)}
.card-body::before{top:82px;right:-24px;width:76px;height:76px;border-radius:45% 55% 60% 40%/46% 42% 58% 54%;background:linear-gradient(145deg,rgba(255,255,255,.3),color-mix(in srgb,var(--glass-accent) 8%,transparent));transform:rotate(24deg)}
.card-body::after{left:-32px;bottom:92px;width:92px;height:58px;border-radius:58% 42% 47% 53%/60% 48% 52% 40%;background:linear-gradient(145deg,rgba(255,255,255,.38),color-mix(in srgb,var(--glass-accent) 7%,transparent));transform:rotate(-14deg)}
.exam-mark{width:48px;height:48px;flex-basis:48px;border:1px solid rgba(255,255,255,.88);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.82),color-mix(in srgb,var(--glass-accent) 14%,rgba(238,244,255,.8)));color:var(--glass-accent);box-shadow:inset 0 1px 0 #fff,0 10px 24px color-mix(in srgb,var(--glass-accent) 15%,transparent);backdrop-filter:blur(10px)}
.org{color:#66789a}.org>span:first-child{display:flex;align-items:center;gap:7px;min-width:0}.org img{width:30px;height:30px;padding:2px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.7);box-shadow:0 5px 12px rgba(21,54,116,.08)}
.title{font-size:19px;letter-spacing:-.025em;line-height:1.2}.desc{line-height:1.65}
.badge{border-color:rgba(173,198,245,.66);border-radius:999px;background:rgba(244,248,255,.58);box-shadow:inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(10px)}
.badge.soon-badge{border-color:rgba(246,190,73,.45);background:rgba(255,248,220,.66);box-shadow:0 6px 18px rgba(190,121,0,.08),inset 0 1px 0 #fff}
.section-list{border-color:rgba(255,255,255,.72);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(233,242,255,.2));box-shadow:inset 1px 1px 0 rgba(255,255,255,.88),inset -1px -1px 0 rgba(132,170,237,.14),0 10px 28px rgba(28,65,132,.045);backdrop-filter:blur(17px) saturate(1.25)}
.section-row{padding:10px 12px;border-bottom-color:rgba(183,204,242,.36);background:linear-gradient(90deg,rgba(255,255,255,.27),rgba(255,255,255,.05))}
.section-dot{border:1px solid rgba(255,255,255,.85);border-radius:8px;background:color-mix(in srgb,var(--glass-accent) 10%,rgba(255,255,255,.78));color:var(--glass-accent);box-shadow:inset 0 1px 0 #fff}
.btn{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--glass-accent) 68%,white);border-radius:12px;background:linear-gradient(135deg,var(--glass-accent),color-mix(in srgb,var(--glass-accent) 72%,#73a2ff));box-shadow:0 12px 26px color-mix(in srgb,var(--glass-accent) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.32);transition:transform .2s ease,box-shadow .2s ease}
.btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 32px color-mix(in srgb,var(--glass-accent) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.38)}
.card.soon{opacity:1;background:radial-gradient(circle at 12% 4%,rgba(255,255,255,.88),transparent 35%),linear-gradient(145deg,rgba(246,249,255,.52),rgba(218,231,252,.27))}
.card.soon::before{opacity:.52;animation:soonGlassBreath 4.8s ease-in-out infinite}
.card.soon::after{opacity:.28}
.card.soon .card-body{opacity:.84}
.card.soon:hover{transform:perspective(950px) translateY(-6px) scale(1.006) rotateX(var(--glass-tilt-x)) rotateY(var(--glass-tilt-y));border-color:color-mix(in srgb,var(--glass-accent) 20%,white);box-shadow:0 31px 72px rgba(24,55,116,.145),0 9px 28px color-mix(in srgb,var(--glass-accent) 11%,transparent),inset 1px 1px 0 #fff,inset -1px -1px 0 rgba(109,158,243,.2)}
.card.soon:hover::before{opacity:.7;transform:translate(-5px,7px) rotate(30deg) scale(1.05)}
.card.soon:hover::after{opacity:.58}
.card.soon .soon-badge{animation:soonBadgeGlow 3.2s ease-in-out infinite}
.card.soon .btn:disabled{border-color:rgba(165,180,210,.35);background:linear-gradient(135deg,rgba(174,188,216,.62),rgba(143,166,211,.48));box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 10px 24px rgba(75,101,151,.08);color:#fff;backdrop-filter:blur(12px)}
/* Kartalar API orqali yuklanganda ketma-ket liquid reveal */
.card.glass-card-enter{animation:testGlassCardEnter .74s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--glass-enter-index,0) * 72ms);will-change:opacity,translate,scale,filter,clip-path}
@keyframes testGlassCardEnter{
  0%{opacity:0;translate:0 42px;scale:.935;filter:blur(11px) saturate(.65);clip-path:inset(16% 8% 10% round 32px)}
  56%{opacity:1;translate:0 -4px;scale:1.012;filter:blur(1.5px) saturate(1.1);clip-path:inset(0 round 24px)}
  78%{translate:0 2px;scale:.997;filter:blur(0) saturate(1.03)}
  100%{opacity:1;translate:0 0;scale:1;filter:blur(0) saturate(1);clip-path:inset(0 round 24px)}
}
@keyframes soonGlassBreath{0%,100%{filter:blur(7px);transform:rotate(20deg) scale(1);opacity:.48}50%{filter:blur(10px);transform:rotate(25deg) scale(1.08);opacity:.65}}
@keyframes soonBadgeGlow{0%,100%{box-shadow:0 6px 18px rgba(190,121,0,.06),inset 0 1px 0 #fff}50%{box-shadow:0 8px 24px rgba(190,121,0,.16),inset 0 1px 0 #fff}}
@media(max-width:700px){body{background-size:26px 26px,26px 26px,100% 100%,100% 100%}.filters{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.filter{padding:9px 5px;font-size:9px}.grid{grid-template-columns:1fr;gap:18px}.card{border-radius:21px;transform:none}.card-body{padding:20px;transform:none}.card:not(.soon):hover,.card.soon:hover{transform:none}.card.glass-card-enter{animation-duration:.6s;animation-delay:calc(var(--glass-enter-index,0) * 54ms)}}
@media(prefers-reduced-motion:reduce){.card,.card::before,.card::after,.filter,.btn,.soon-badge{transition:none!important;animation:none!important}}