:root{
            --bg:#02030a;
            --bg-deep:#05081a;
            --bg-mid:#09122b;
            --panel:rgba(8,14,30,.72);
            --panel-strong:rgba(7,12,26,.90);
            --panel-soft:rgba(255,255,255,.045);
            --line:rgba(118,154,255,.18);
            --line-strong:rgba(91,234,255,.32);
            --text:#f7fbff;
            --muted:#a8badc;
            --brand-cyan:#49e3ff;
            --brand-blue:#1688ff;
            --brand-violet:#8f46ff;
            --brand-pink:#ef3fff;
            --brand-white:#f5f8ff;
            --shadow-hero:0 44px 110px rgba(0,0,0,.52);
            --shadow-card:0 26px 70px rgba(0,0,0,.34);
            --radius-xl:36px;
            --radius-lg:30px;
            --radius-md:20px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        ::selection{
            background:rgba(73,227,255,.22);
            color:#fff;
        }
        body{
            margin:0;
            min-height:100vh;
            font-family:Inter,"SF Pro Display","Segoe UI",Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at 16% 8%, rgba(73,227,255,.20), transparent 20%),
                radial-gradient(circle at 82% 12%, rgba(239,63,255,.18), transparent 22%),
                radial-gradient(circle at 48% 36%, rgba(22,136,255,.10), transparent 24%),
                radial-gradient(circle at 50% 115%, rgba(143,70,255,.18), transparent 28%),
                linear-gradient(180deg, #060917 0%, #050712 36%, #03040b 100%);
            overflow-x:hidden;
        }
        body::before,
        body::after{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            z-index:0;
        }
        body::before{
            background:
                radial-gradient(circle at 22% 14%, rgba(73,227,255,.24), transparent 18%),
                radial-gradient(circle at 80% 12%, rgba(239,63,255,.22), transparent 18%),
                radial-gradient(circle at 68% 76%, rgba(143,70,255,.14), transparent 22%),
                radial-gradient(circle at 40% 90%, rgba(22,136,255,.12), transparent 20%);
            filter:blur(34px);
            opacity:.92;
            animation:auroraShift 18s ease-in-out infinite alternate;
        }
        body::after{
            background:
                radial-gradient(circle at center, transparent 0 48%, rgba(2,4,12,.46) 78%, rgba(2,3,10,.88) 100%),
                linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,0) 18%),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
            background-size:100% 100%, 100% 100%, 58px 58px, 58px 58px;
            opacity:.28;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.24));
        }
        @keyframes auroraShift{
            0%{transform:translate3d(0,0,0) scale(1)}
            50%{transform:translate3d(0,-18px,0) scale(1.03)}
            100%{transform:translate3d(0,12px,0) scale(1.02)}
        }
        @keyframes heroFloat{
            0%,100%{transform:translate3d(0,0,0)}
            50%{transform:translate3d(0,-8px,0)}
        }
        @keyframes cardIntro{
            from{opacity:0;transform:translate3d(0,28px,0) scale(.98)}
            to{opacity:1;transform:translate3d(0,var(--lift),0) rotateX(var(--rx)) rotateY(var(--ry))}
        }
        a{color:inherit}
        .wrap{
            position:relative;
            z-index:1;
            width:min(1320px, calc(100% - 30px));
            margin:0 auto;
            padding:32px 0 88px;
        }
        .wrap::before,
        .wrap::after{
            content:"";
            position:absolute;
            pointer-events:none;
            z-index:-1;
        }
        .wrap::before{
            inset:36px -12% auto;
            height:340px;
            background:
                radial-gradient(circle at 18% 34%, rgba(73,227,255,.18), transparent 24%),
                radial-gradient(circle at 82% 20%, rgba(239,63,255,.20), transparent 28%),
                radial-gradient(circle at 52% 100%, rgba(22,136,255,.14), transparent 32%);
            filter:blur(44px);
            opacity:.92;
        }
        .wrap::after{
            left:50%;
            top:340px;
            width:min(78vw, 1040px);
            height:420px;
            transform:translateX(-50%);
            background:radial-gradient(circle, rgba(73,227,255,.08), rgba(143,70,255,.06) 46%, transparent 72%);
            filter:blur(70px);
            opacity:.9;
        }
        .hero{
            position:relative;
            overflow:hidden;
            margin-bottom:30px;
            padding:38px 34px 32px;
            border-radius:var(--radius-xl);
            border:1px solid rgba(91,234,255,.16);
            background:
                radial-gradient(circle at 18% 18%, rgba(73,227,255,.14), transparent 22%),
                radial-gradient(circle at 84% 20%, rgba(239,63,255,.14), transparent 24%),
                radial-gradient(circle at 50% 125%, rgba(22,136,255,.12), transparent 32%),
                linear-gradient(135deg, rgba(73,227,255,.09), rgba(143,70,255,.10) 56%, rgba(239,63,255,.08)),
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
                rgba(5,10,24,.82);
            box-shadow:
                var(--shadow-hero),
                0 0 0 1px rgba(255,255,255,.02) inset,
                0 0 72px rgba(73,227,255,.08),
                0 0 110px rgba(239,63,255,.06);
            backdrop-filter:blur(22px) saturate(1.12);
            isolation:isolate;
        }
        .hero::before,
        .hero::after{
            content:"";
            position:absolute;
            pointer-events:none;
        }
        .hero::before{
            inset:-1px;
            border-radius:inherit;
            padding:1px;
            background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(73,227,255,.20), rgba(143,70,255,.18), rgba(239,63,255,.12));
            -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite:xor;
            mask-composite:exclude;
            opacity:.95;
        }
        .hero::after{
            right:-80px;
            top:-90px;
            width:460px;
            height:460px;
            background:
                radial-gradient(circle at 50% 50%, rgba(73,227,255,.32), transparent 46%),
                radial-gradient(circle at 42% 42%, rgba(239,63,255,.18), transparent 30%);
            filter:blur(18px);
            opacity:.92;
            animation:heroFloat 9s ease-in-out infinite;
        }
        .brand{
            position:relative;
            z-index:1;
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:22px;
            flex-wrap:wrap;
        }
        .brand-main{
            display:flex;
            align-items:center;
            gap:24px;
            flex-wrap:wrap;
            max-width:900px;
        }
        .brand-main > div{max-width:760px}
        .logo{
            width:92px;
            height:92px;
            object-fit:cover;
            border-radius:30px;
            background:#050b16;
            border:1px solid rgba(255,255,255,.12);
            box-shadow:
                0 24px 50px rgba(0,0,0,.38),
                0 0 0 1px rgba(255,255,255,.04),
                0 0 44px rgba(73,227,255,.12),
                0 0 82px rgba(239,63,255,.08);
        }
        .logo-placeholder{
            display:grid;
            place-items:center;
            font-weight:900;
            letter-spacing:.08em;
            color:#04111c;
            background:linear-gradient(135deg, var(--brand-cyan), var(--brand-blue) 34%, var(--brand-violet) 70%, var(--brand-pink));
        }
        h1{
            margin:0;
            font-size:clamp(2.35rem, 3.6vw, 3.45rem);
            line-height:.92;
            letter-spacing:-.055em;
            font-weight:1000;
            background:linear-gradient(135deg, #ffffff 0%, #f0fcff 20%, #8de9ff 50%, #e0b9ff 100%);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
            text-shadow:0 12px 34px rgba(0,0,0,.20);
        }
        .sub{
            margin:14px 0 0;
            max-width:780px;
            color:#c5d7f4;
            font-size:15px;
            line-height:1.78;
            text-wrap:pretty;
        }
        .hero-badge{
            position:relative;
            display:inline-flex;
            align-items:center;
            gap:10px;
            min-height:56px;
            padding:13px 18px;
            border-radius:999px;
            border:1px solid rgba(91,234,255,.22);
            background:
                linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
                rgba(7,14,28,.60);
            color:#eff8ff;
            font-size:12px;
            font-weight:900;
            letter-spacing:.11em;
            text-transform:uppercase;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.08),
                0 18px 36px rgba(0,0,0,.24),
                0 0 34px rgba(73,227,255,.10);
            backdrop-filter:blur(18px);
            white-space:nowrap;
        }
        .hero-badge::before{
            content:"";
            width:9px;
            height:9px;
            border-radius:50%;
            background:radial-gradient(circle, #fff 0 24%, var(--brand-cyan) 25% 62%, rgba(73,227,255,.16) 63%);
            box-shadow:0 0 16px rgba(73,227,255,.55), 0 0 30px rgba(239,63,255,.22);
            flex:none;
        }
        .toolbar{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
            margin-top:34px;
            padding:14px;
            border-radius:26px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
                rgba(5,10,22,.56);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.05),
                0 18px 46px rgba(0,0,0,.24),
                0 0 34px rgba(73,227,255,.05);
            backdrop-filter:blur(18px);
        }
        .toolbar::after{
            content:"";
            position:absolute;
            inset:auto 18px 0;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
            opacity:.9;
        }
        .search-wrap{
            position:relative;
            flex:1 1 560px;
        }
        .search-wrap::before{
            content:"⌕";
            position:absolute;
            left:20px;
            top:50%;
            transform:translateY(-50%);
            font-size:18px;
            color:#92c4ff;
            pointer-events:none;
            z-index:1;
        }
        .search-wrap::after{
            content:"";
            position:absolute;
            left:54px;
            right:18px;
            bottom:11px;
            height:1px;
            background:linear-gradient(90deg, rgba(73,227,255,.28), transparent 70%);
            opacity:.45;
            pointer-events:none;
        }
        .toolbar input{
            width:100%;
            height:62px;
            padding:0 20px 0 56px;
            border-radius:20px;
            border:1px solid rgba(91,234,255,.16);
            outline:none;
            color:#f8fbff;
            font-size:15px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
                rgba(4,9,20,.82);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.06),
                0 18px 40px rgba(0,0,0,.20),
                0 0 0 1px rgba(255,255,255,.02);
            backdrop-filter:blur(16px);
            transition:border-color .24s ease, box-shadow .24s ease, transform .24s ease, background .24s ease;
        }
        .toolbar input::placeholder{color:#9eb4da}
        .toolbar input:focus{
            border-color:rgba(91,234,255,.44);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.07),
                0 0 0 4px rgba(73,227,255,.10),
                0 20px 44px rgba(0,0,0,.24),
                0 0 24px rgba(73,227,255,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
                rgba(5,10,24,.86);
        }
        .btn,
        .secondary,
        .ghost-btn{
            border:none;
            cursor:pointer;
            text-decoration:none;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease, filter .24s ease;
            will-change:transform;
        }
        .btn{
            position:relative;
            overflow:hidden;
            padding:0 24px;
            min-height:58px;
            border-radius:18px;
            color:#04111c;
            font-weight:950;
            letter-spacing:.01em;
            background:linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-blue) 34%, var(--brand-violet) 70%, var(--brand-pink) 100%);
            box-shadow:
                0 24px 40px rgba(49,114,255,.24),
                0 14px 34px rgba(0,0,0,.24),
                0 0 34px rgba(73,227,255,.18),
                0 0 48px rgba(239,63,255,.10);
            animation:buttonGlow 6.8s ease-in-out infinite;
        }
        .btn::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(118deg, transparent 20%, rgba(255,255,255,.46) 49%, transparent 71%);
            transform:translateX(-130%);
            transition:transform .9s ease;
        }
        .btn:hover::before{transform:translateX(130%)}
        .secondary{
            min-height:58px;
            padding:0 18px;
            border-radius:18px;
            color:#edf5ff;
            font-weight:850;
            background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.18), 0 0 22px rgba(73,227,255,.06);
            backdrop-filter:blur(12px);
        }
        .btn:hover,
        .secondary:hover,
        .ghost-btn:hover{
            transform:translateY(-3px);
            filter:brightness(1.05);
        }

        .grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:20px;
            align-items:stretch;
        }
        .card{
            --mx:50%;
            --my:0%;
            --rx:0deg;
            --ry:0deg;
            --lift:0px;
            --delay:0ms;
            --card-image:none;
            position:relative;
            display:flex;
            flex-direction:column;
            min-height:204px;
            overflow:hidden;
            padding:16px;
            border-radius:30px;
            border:1px solid rgba(126,163,255,.20);
            background:
                radial-gradient(circle at 14% 14%, rgba(73,227,255,.22), transparent 26%),
                radial-gradient(circle at 88% 12%, rgba(239,63,255,.20), transparent 24%),
                radial-gradient(circle at 50% 132%, rgba(143,70,255,.16), transparent 34%),
                linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 34%, rgba(255,255,255,0) 100%),
                linear-gradient(145deg, rgba(13,20,42,.985), rgba(7,11,26,.99) 56%, rgba(4,7,18,1));
            box-shadow:
                0 30px 80px rgba(0,0,0,.42),
                0 18px 30px rgba(0,0,0,.22),
                inset 0 1px 0 rgba(255,255,255,.08),
                inset 0 -1px 0 rgba(255,255,255,.03),
                0 0 0 1px rgba(255,255,255,.03),
                0 0 36px rgba(73,227,255,.05);
            backdrop-filter:blur(22px) saturate(1.08);
            -webkit-backdrop-filter:blur(22px) saturate(1.08);
            transform:translate3d(0,var(--lift),0) rotateX(var(--rx)) rotateY(var(--ry));
            transform-style:preserve-3d;
            transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, filter .28s ease, background .28s ease;
            isolation:isolate;
            opacity:0;
            animation:cardIntro .8s cubic-bezier(.2,.7,.2,1) forwards, cardAmbientGlow 7.5s ease-in-out infinite;
            animation-delay:var(--delay), calc(var(--delay) * 0.25);
        }
        .card::before,
        .card::after{
            content:"";
            position:absolute;
            pointer-events:none;
        }
        .card::before{
            inset:0;
            z-index:4;
            padding:1px;
            border-radius:inherit;
            background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(73,227,255,.10), rgba(143,70,255,.12), rgba(239,63,255,.08));
            -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite:xor;
            mask-composite:exclude;
            opacity:.82;
        }
        .card::after{
            inset:0;
            z-index:0;
            background:
                radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.17), transparent 18%),
                linear-gradient(124deg, transparent 28%, rgba(255,255,255,.07) 48%, transparent 66%),
                linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 26%, transparent 60%),
                radial-gradient(circle at 18% 100%, rgba(73,227,255,.16), transparent 24%),
                radial-gradient(circle at 88% 0%, rgba(239,63,255,.14), transparent 22%);
            opacity:.98;
            animation:cardSheen 9s linear infinite;
        }
        .card.has-image-overlay::after{
            background:
                linear-gradient(90deg, rgba(4,8,20,.96) 0%, rgba(4,8,20,.90) 26%, rgba(4,8,20,.62) 56%, rgba(4,8,20,.86) 100%),
                radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 32%),
                radial-gradient(circle at 18% 100%, rgba(73,227,255,.14), transparent 24%),
                radial-gradient(circle at 88% 0%, rgba(239,63,255,.12), transparent 22%),
                var(--card-image);
            background-repeat:no-repeat;
            background-size:auto, auto, auto, auto, cover;
            background-position:center, center, 18% 100%, 88% 0%, center center;
            opacity:.99;
            filter:saturate(1.03) contrast(1.02);
        }
        .card.has-image-overlay .card-top{
            opacity:1;
            z-index:5;
            isolation:isolate;
        }
        .card.has-image-overlay .card-top::before{
            background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), rgba(8,14,28,.42) 58%, rgba(4,8,18,.14) 74%, transparent 82%);
            filter:blur(7px);
        }
        .card.has-image-overlay .card-top::after{
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(8,12,26,.34), rgba(8,12,26,.06));
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .card.has-image-overlay .thumb-ring{
            box-shadow:
                0 24px 42px rgba(0,0,0,.42),
                0 0 0 7px rgba(7,12,24,.34),
                0 0 0 8px rgba(255,255,255,.02),
                0 0 38px rgba(73,227,255,.16),
                0 0 54px rgba(239,63,255,.14);
            backdrop-filter:blur(10px) saturate(1.08);
            -webkit-backdrop-filter:blur(10px) saturate(1.08);
        }
        .card.has-image-overlay .thumb{
            background:
                radial-gradient(circle at 28% 30%, rgba(255,255,255,.24), transparent 42%),
                linear-gradient(180deg, rgba(10,16,30,.96), rgba(4,8,18,.98));
            border-color:rgba(5,12,24,.82);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 24px rgba(0,0,0,.30);
        }
        .card .content,
        .card .card-top{
            transform:translateZ(1px);
        }
        .card::selection{background:rgba(73,227,255,.22)}
        .card:hover,
        .card:focus-within{
            --lift:-10px;
            border-color:rgba(91,234,255,.40);
            box-shadow:
                0 42px 104px rgba(0,0,0,.48),
                0 0 38px rgba(73,227,255,.14),
                0 0 62px rgba(239,63,255,.11),
                inset 0 1px 0 rgba(255,255,255,.08);
            filter:brightness(1.06) saturate(1.05);
        }
        .card.is-card-link{cursor:pointer;}
        .card.is-card-link:focus-visible{
            outline:none;
            border-color:rgba(91,234,255,.42);
            box-shadow:
                0 0 0 4px rgba(73,227,255,.12),
                0 34px 82px rgba(0,0,0,.46),
                0 0 38px rgba(73,227,255,.12);
        }
        .card:nth-child(3n+2){border-color:rgba(22,136,255,.17)}
        .card:nth-child(3n+3){border-color:rgba(143,70,255,.17)}
        .card-top{
            position:absolute;
            z-index:3;
            top:2px;
            right:-2px;
            width:156px;
            height:156px;
            min-height:auto;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:10px;
            border-radius:34px;
            border:none;
            background:
                radial-gradient(circle at 28% 26%, rgba(73,227,255,.18), transparent 46%),
                radial-gradient(circle at 76% 18%, rgba(239,63,255,.18), transparent 36%),
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
                transparent;
            box-shadow:none;
            overflow:visible;
            opacity:.86;
            pointer-events:none;
        }
        .card-top::before,
        .card-top::after{
            content:"";
            position:absolute;
            pointer-events:none;
        }
        .card-top::before{
            inset:16px;
            border-radius:28px;
            background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 68%);
            filter:blur(4px);
            opacity:.95;
        }
        .card-top::after{
            inset:10px;
            border-radius:30px;
            border:1px solid rgba(255,255,255,.04);
            opacity:.62;
        }
        .orb{
            position:absolute;
            inset:auto auto 10px -6px;
            width:104px;
            height:104px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(73,227,255,.90), rgba(143,70,255,.52), transparent 76%);
            filter:blur(24px);
            opacity:.72;
            animation:floatOrb 6.5s ease-in-out infinite;
            box-shadow:0 0 42px rgba(73,227,255,.14), 0 0 54px rgba(239,63,255,.10);
        }
        @keyframes floatOrb{
            0%,100%{transform:translateY(0) scale(1)}
            50%{transform:translateY(-6px) scale(1.04)}
        }
        .thumb-ring{
            position:relative;
            z-index:1;
            width:108px;
            height:108px;
            padding:5px;
            border-radius:28px;
            background:linear-gradient(135deg, rgba(73,227,255,.92), rgba(22,136,255,.90) 36%, rgba(143,70,255,.92) 72%, rgba(239,63,255,.94));
            box-shadow:
                0 18px 34px rgba(0,0,0,.24),
                0 0 0 6px rgba(255,255,255,.015),
                0 0 28px rgba(73,227,255,.10),
                0 0 40px rgba(239,63,255,.08);
            transform:translate3d(0, 2px, 0);
        }
        .thumb-ring::after{
            content:"";
            position:absolute;
            inset:-11px;
            border-radius:36px;
            border:1px solid rgba(255,255,255,.04);
            pointer-events:none;
        }
        .thumb{
            width:100%;
            height:100%;
            display:block;
            object-fit:cover;
            padding:7px;
            border-radius:24px;
            background:
                radial-gradient(circle at 28% 30%, rgba(255,255,255,.22), transparent 42%),
                linear-gradient(180deg, rgba(19,32,66,.94), rgba(7,12,26,.98));
            border:1px solid rgba(5,12,24,.62);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.16);
        }
        .thumb.empty{
            display:grid;
            place-items:center;
            font-weight:900;
            color:#eef7ff;
            letter-spacing:.05em;
            background:linear-gradient(135deg, #173768, #1d63b7 40%, #6624d5 82%, #cc4dff);
        }
        .floating-chip{display:none}
        .content{
            position:relative;
            z-index:3;
            display:flex;
            flex-direction:column;
            justify-content:center;
            flex:1;
            min-height:auto;
            padding:14px 24px 14px 4px;
            background:none;
        }
        .card.has-image-overlay .content{
            justify-content:center;
        }
        .content::after{display:none}
        .content::before{display:none}
        .badge{
            align-self:flex-start;
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:12px;
            padding:7px 11px;
            border-radius:999px;
            background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
            border:1px solid rgba(255,255,255,.09);
            color:#e1eeff;
            font-size:9px;
            font-weight:900;
            letter-spacing:.18em;
            text-transform:uppercase;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.12);
        }
        .title{
            margin:0 0 12px;
            max-width:16ch;
            font-size:clamp(1.82rem, 2.34vw, 2.24rem);
            line-height:.94;
            font-weight:1000;
            letter-spacing:-.06em;
            text-wrap:balance;
            text-shadow:0 16px 38px rgba(0,0,0,.46), 0 3px 14px rgba(0,0,0,.30);
        }
        .card.has-image-overlay .badge,
        .card.has-image-overlay .title,
        .card.has-image-overlay .desc{
            position:relative;
            z-index:2;
        }
        .card.has-image-overlay .badge{
            backdrop-filter:blur(10px);
        }
        .card.has-image-overlay .title{
            max-width:15ch;
            text-shadow:0 18px 42px rgba(0,0,0,.60), 0 6px 22px rgba(0,0,0,.38), 0 0 24px rgba(255,255,255,.06);
        }
        .card.has-image-overlay .desc{
            max-width:28ch;
            color:#c7d7f4;
            text-shadow:0 8px 24px rgba(0,0,0,.42);
        }
        .desc{
            margin:0;
            max-width:26ch;
            color:#b4c7e8;
            font-size:12.5px;
            line-height:1.62;
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .actions,
        .open-link,
        .ghost-btn{display:none !important;}
        .footer{
            width:fit-content;
            max-width:100%;
            margin:34px auto 0;
            padding:13px 20px;
            text-align:center;
            color:#a8bde0;
            font-size:13px;
            letter-spacing:.05em;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.07);
            background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
            box-shadow:0 18px 36px rgba(0,0,0,.18), 0 0 28px rgba(73,227,255,.04);
            backdrop-filter:blur(14px);
        }
        .empty-state{
            grid-column:1 / -1;
            padding:46px 24px;
            border-radius:30px;
            border:1px dashed rgba(73,227,255,.20);
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
            color:#b7caeb;
            text-align:center;
            box-shadow:0 24px 50px rgba(0,0,0,.24);
        }
        .search-empty{display:none}
        .search-empty.show{display:block}
        #adminPrompt{
            position:fixed;
            right:18px;
            bottom:18px;
            width:min(400px, 92vw);
            padding:18px;
            display:none;
            border-radius:28px;
            border:1px solid rgba(73,227,255,.16);
            background:linear-gradient(180deg, rgba(10,18,34,.96), rgba(6,10,20,.98));
            box-shadow:0 28px 60px rgba(0,0,0,.44), 0 0 30px rgba(73,227,255,.06);
            backdrop-filter:blur(18px);
            z-index:50;
        }
        #adminPrompt.show{display:block}
        #adminPrompt strong{
            display:block;
            margin-bottom:8px;
            font-size:18px;
        }
        .notice{
            margin:0 0 16px;
            color:#a9bde3;
            font-size:12px;
            line-height:1.65;
        }
        code{
            padding:3px 8px;
            border-radius:8px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.08);
        }
        .install-btn{min-width:150px;padding:0 16px;font-weight:900}
        .install-hint,.net-badge{white-space:nowrap}
        @media (max-width:1120px){
            .grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
        }
        @media (max-width:900px){
            .wrap{width:min(100% - 22px, 1000px)}
            .hero{padding:30px 24px 24px}
            .brand{align-items:flex-start}
            .hero-badge{width:100%;justify-content:center;text-align:center}
            .toolbar{margin-top:26px}
        }
        @media (max-width:720px){
            .grid{gap:14px}
            .card{
                min-height:174px;
                padding:13px;
                border-radius:24px;
            }
            .card-top{
                top:2px;
                right:-4px;
                width:120px;
                height:120px;
                border-radius:28px;
            }
            .thumb-ring{width:92px;height:92px;border-radius:26px}
            .thumb{border-radius:22px;padding:6px}
            .thumb-ring::after{border-radius:32px}
            .content{min-height:auto;padding:2px 10px 2px 0}
            .badge{margin-bottom:10px}
            .title{font-size:27px;max-width:15ch}
            .desc{font-size:11.5px;-webkit-line-clamp:3;max-width:23ch}
            .actions,.open-link,.ghost-btn{display:none !important;}
        }
        @media (max-width:560px){
            body::after{opacity:.18}
            .wrap{
                width:min(100% - 16px, 860px);
                padding:14px 0 46px;
            }
            .hero{
                padding:18px 14px 16px;
                border-radius:22px;
                margin-bottom:16px;
            }
            .brand-main{gap:12px}
            .logo{
                width:58px;
                height:58px;
                border-radius:18px;
            }
            h1{font-size:clamp(1.82rem, 7vw, 2.3rem)}
            .sub{font-size:13px;line-height:1.62}
            .hero-badge{min-height:48px;padding:10px 14px;font-size:11px}
            .toolbar{gap:10px;margin-top:18px;padding:10px;border-radius:18px}
            .search-wrap{flex-basis:100%}
            .search-wrap::before{left:16px}
            .search-wrap::after{left:48px;right:14px;bottom:10px}
            .toolbar input,
            .btn,
            .secondary{min-height:48px;height:48px;font-size:13px;border-radius:14px}
            .toolbar input{padding-left:48px}
            .grid{grid-template-columns:1fr;gap:12px}
            .card{
                min-height:168px;
                padding:12px;
                border-radius:22px;
            }
            .card-top{
                top:0;
                right:-8px;
                width:106px;
                height:106px;
                padding:8px;
                border-radius:24px;
            }
            .orb{
                width:76px;
                height:76px;
                inset:auto auto 8px -6px;
                filter:blur(18px);
            }
            .thumb-ring{width:84px;height:84px;border-radius:24px}
            .thumb{padding:5px;border-radius:18px}
            .thumb-ring::after{border-radius:28px}
            .content{min-height:auto;padding:2px 8px 2px 0}
            .badge{font-size:8.5px;padding:6px 9px;margin-bottom:10px}
            .title{font-size:24px;max-width:14ch}
            .desc{
                max-width:21ch;
                font-size:11.5px;
                line-height:1.48;
                -webkit-line-clamp:3;
            }
            .actions,.open-link,.ghost-btn{display:none !important;}
            .footer{font-size:12px;margin-top:22px;padding:10px 14px}
            .install-btn,.install-hint,.net-badge{width:100%;justify-content:center;text-align:center}
        }
        @media (prefers-reduced-motion: reduce){
            *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
            .card{opacity:1;transform:none !important}
        }
    

        .monetization-panel{
            position:relative;
            margin:0 0 30px;
            padding:28px 26px;
            border-radius:30px;
            border:1px solid rgba(91,234,255,.18);
            background:
                linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
                rgba(6,11,24,.72);
            box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.06), 0 0 38px rgba(73,227,255,.06);
            backdrop-filter:blur(18px) saturate(1.1);
            overflow:hidden;
            isolation:isolate;
        }
        .monetization-panel::before,
        .monetization-panel::after{
            content:"";
            position:absolute;
            pointer-events:none;
            z-index:0;
        }
        .monetization-panel::before{
            top:-26%;
            right:-10%;
            width:240px;
            height:240px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(239,63,255,.24), rgba(73,227,255,.12) 42%, transparent 72%);
            filter:blur(10px);
            opacity:.68;
            animation:panelFloat 8s ease-in-out infinite;
        }
        .monetization-panel::after{
            left:-10%;
            bottom:-34%;
            width:280px;
            height:280px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(73,227,255,.20), rgba(143,70,255,.10) 46%, transparent 74%);
            filter:blur(14px);
            opacity:.56;
            animation:panelFloat 10s ease-in-out infinite reverse;
        }
        .monetization-panel > *{position:relative;z-index:1;}
        .monetization-head{margin-bottom:18px;max-width:760px}
        .monetization-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:10px;
            padding:8px 12px;
            border-radius:999px;
            font-size:11px;
            font-weight:900;
            letter-spacing:.12em;
            text-transform:uppercase;
            border:1px solid rgba(91,234,255,.22);
            background:rgba(12,18,34,.66);
            color:#dff7ff;
        }
        .monetization-head h2{margin:0 0 10px;font-size:clamp(1.4rem,2vw,2rem);letter-spacing:-.03em}
        .monetization-head p{margin:0;color:var(--muted);line-height:1.7}
        .ad-shell{
            min-height:124px;
            padding:18px;
            border-radius:24px;
            border:1px dashed rgba(91,234,255,.18);
            background:rgba(255,255,255,.02);
        }
        .affiliate-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
        }
        .affiliate-card{
            position:relative;
            display:flex;
            flex-direction:column;
            gap:14px;
            padding:22px;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
                rgba(255,255,255,.03);
            box-shadow:0 20px 54px rgba(0,0,0,.22), 0 0 28px rgba(73,227,255,.05);
            overflow:hidden;
            isolation:isolate;
            transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, filter .28s ease;
        }
        .affiliate-card::before{
            content:"";
            position:absolute;
            inset:-20% auto auto -14%;
            width:180px;
            height:180px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(73,227,255,.22), rgba(73,227,255,.06) 42%, transparent 72%);
            filter:blur(10px);
            opacity:.7;
            animation:panelFloat 7.5s ease-in-out infinite;
            pointer-events:none;
            z-index:0;
        }
        .affiliate-card::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(118deg, transparent 18%, rgba(255,255,255,.10) 48%, transparent 74%);
            transform:translateX(-140%);
            opacity:.54;
            animation:ctaSheen 6.8s linear infinite;
            pointer-events:none;
            z-index:0;
        }
        .affiliate-card > *{position:relative;z-index:1;}
        .affiliate-card:hover{
            transform:translateY(-6px);
            border-color:rgba(91,234,255,.22);
            box-shadow:0 28px 64px rgba(0,0,0,.28), 0 0 34px rgba(73,227,255,.10), 0 0 46px rgba(239,63,255,.08);
            filter:brightness(1.05);
        }
        .affiliate-card h3{margin:0;font-size:1.22rem;letter-spacing:-.03em}
        .affiliate-card p{margin:0;color:var(--muted);line-height:1.7;flex:1}
        .affiliate-badge{align-self:flex-start}
        .sponsor-panel{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:22px;
            align-items:center;
        }
        .sponsor-copy h2{margin:0 0 12px;font-size:clamp(1.8rem,2.6vw,2.45rem);letter-spacing:-.045em;text-shadow:0 12px 30px rgba(0,0,0,.22)}
        .sponsor-copy p{margin:0;color:var(--muted);line-height:1.75}
        .sponsor-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
        .sponsor-disclosure{font-size:12px;color:#c9daf5;opacity:.88}
        .sponsor-visual{
            position:relative;
            min-height:220px;
            border-radius:28px;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.10);
            background:linear-gradient(135deg, rgba(73,227,255,.18), rgba(143,70,255,.18), rgba(239,63,255,.16));
            display:grid;
            place-items:center;
            box-shadow:0 30px 70px rgba(0,0,0,.26), 0 0 30px rgba(73,227,255,.10);
            isolation:isolate;
            transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, filter .28s ease;
        }
        .sponsor-visual::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(120deg, transparent 16%, rgba(255,255,255,.16) 46%, transparent 72%);
            transform:translateX(-135%);
            animation:ctaSheen 7.4s linear infinite;
            pointer-events:none;
            z-index:1;
        }
        .sponsor-visual:hover{
            transform:translateY(-5px) scale(1.01);
            border-color:rgba(91,234,255,.22);
            box-shadow:0 34px 78px rgba(0,0,0,.28), 0 0 38px rgba(73,227,255,.14), 0 0 50px rgba(239,63,255,.10);
            filter:brightness(1.04);
        }
        .sponsor-visual img{display:block;width:100%;height:100%;object-fit:cover}
        .sponsor-placeholder{display:grid;gap:12px;text-align:center;padding:28px}
        .sponsor-placeholder strong{font-size:clamp(2.3rem,4vw,3.4rem);letter-spacing:.08em}
        .sponsor-placeholder span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#eff8ff}

        .contact-card,
        .contact-panel,
        .contact-item{
            position:relative;
            overflow:hidden;
            border:1px solid rgba(91,234,255,.16);
            background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), rgba(8,12,24,.74);
            box-shadow:0 24px 60px rgba(0,0,0,.24), 0 0 32px rgba(73,227,255,.06);
            transition:transform .28s ease, box-shadow .28s ease, filter .28s ease, border-color .28s ease;
        }
        .contact-card::before,
        .contact-panel::before,
        .contact-item::before{
            content:"";
            position:absolute;
            inset:-18% auto auto -12%;
            width:180px;
            height:180px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(239,63,255,.20), rgba(73,227,255,.12) 44%, transparent 72%);
            filter:blur(12px);
            opacity:.62;
            animation:panelFloat 8s ease-in-out infinite;
            pointer-events:none;
        }
        .contact-card:hover,
        .contact-panel:hover,
        .contact-item:hover{
            transform:translateY(-6px);
            border-color:rgba(91,234,255,.24);
            box-shadow:0 30px 72px rgba(0,0,0,.28), 0 0 34px rgba(73,227,255,.10), 0 0 48px rgba(239,63,255,.08);
            filter:brightness(1.05);
        }
        @keyframes cardAmbientGlow{
            0%,100%{box-shadow:0 30px 80px rgba(0,0,0,.42), 0 18px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(255,255,255,.03), 0 0 30px rgba(73,227,255,.04);}
            50%{box-shadow:0 34px 88px rgba(0,0,0,.44), 0 18px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(255,255,255,.03), 0 0 46px rgba(73,227,255,.08), 0 0 56px rgba(239,63,255,.06);}
        }
        @keyframes cardSheen{
            0%{transform:translateX(-12%);opacity:.84;}
            50%{transform:translateX(12%);opacity:1;}
            100%{transform:translateX(-12%);opacity:.84;}
        }
        @keyframes panelFloat{
            0%,100%{transform:translate3d(0,0,0) scale(1);}
            50%{transform:translate3d(10px,-10px,0) scale(1.06);}
        }
        @keyframes ctaSheen{
            0%{transform:translateX(-140%);}
            100%{transform:translateX(140%);}
        }
        @keyframes buttonGlow{
            0%,100%{box-shadow:0 24px 40px rgba(49,114,255,.24), 0 14px 34px rgba(0,0,0,.24), 0 0 34px rgba(73,227,255,.18), 0 0 48px rgba(239,63,255,.10);}
            50%{box-shadow:0 28px 44px rgba(49,114,255,.28), 0 16px 36px rgba(0,0,0,.24), 0 0 42px rgba(73,227,255,.22), 0 0 56px rgba(239,63,255,.14);}
        }
        @media (max-width: 980px){
            .affiliate-grid,
            .sponsor-panel{grid-template-columns:1fr}
        }