:root{--bg:#06132d;--deep:#030d22;--panel:#0a2350;--panel2:#102e62;--cyan:#06dcfa;--blue:#247cf9;--ink:#f5fbff;--muted:#afc7e9;--line:#305b9c;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 60% -8%,#06439c 0,transparent 43%),var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}img{max-width:100%}.wrap{width:min(1160px,calc(100% - 36px));margin-inline:auto}.topbar{position:sticky;top:0;z-index:20;background:#04122bf0;backdrop-filter:blur(14px);border-bottom:1px solid #33bbff35}.topbar-inner{display:flex;justify-content:space-between;align-items:center;min-height:74px;gap:16px}.brand{font-size:21px;font-weight:1000;letter-spacing:-.6px;display:flex;gap:10px;align-items:center;white-space:nowrap}.brand i{font-style:normal;color:var(--cyan)}.brand-logo{display:grid;place-items:center;background:linear-gradient(135deg,#08e1fa,#1978ff);border-radius:13px;width:42px;height:42px;box-shadow:0 0 23px #04dcf666}.nav{display:flex;gap:23px;font-size:14px;font-weight:850}.nav a:hover,.footer a:hover{color:var(--cyan)}.mobile-menu{display:none;background:#143665;border:1px solid var(--line);color:white;padding:9px 12px;border-radius:11px}.hero{position:relative;min-height:420px;background:linear-gradient(90deg,#03142fdb 0%,#061b45b0 40%,#04122b0a 75%),url('banniere.png') center center/cover no-repeat;border-bottom:2px solid #06dcfa55}.hero .wrap{min-height:420px;display:flex;align-items:end;padding-bottom:34px}.hero-box{max-width:520px;background:#04142edb;backdrop-filter:blur(10px);border:1px solid #36dfff85;border-radius:19px;padding:24px 28px;box-shadow:0 16px 55px #0008}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:2.3px;font-weight:950;text-transform:uppercase}.hero h1{font-size:clamp(26px,3.6vw,43px);line-height:1.14;margin:9px 0}.hero p{color:#dfedff;margin:0 0 20px}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 18px;border-radius:12px;background:linear-gradient(115deg,#08e2f8,#2789ff);color:#05142c;font-weight:950;box-shadow:0 4px 0 #086c99}.btn:hover{filter:brightness(1.12);color:#05142c}.btn.ghost{color:white;background:#163a71;border:1px solid #4b80bc;box-shadow:0 4px 0 #0b2146}.btn.small{padding:9px 14px;font-size:13px}.btn[disabled]{opacity:.6;cursor:not-allowed}.actions{display:flex;gap:12px;flex-wrap:wrap}.section{padding:65px 0}.section.alt{background:#071a38}.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:24px}.section h2{font-size:clamp(24px,3vw,35px);line-height:1.2;margin:6px 0}.section p.sub{margin:0;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{background:linear-gradient(150deg,#10346c,#081b3d);border:1px solid #33659b;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 27px #0005;transition:transform .18s,border-color .18s}.card:hover{transform:translateY(-4px);border-color:var(--cyan)}.art{height:170px;background:radial-gradient(circle at 50% 45%,#15dafa61,transparent 55%),linear-gradient(135deg,#19519b,#121c45);display:grid;place-items:center;font-size:70px;overflow:hidden}.art img{width:100%;height:100%;object-fit:cover}.card:nth-child(3n+2) .art{background:radial-gradient(circle,#b649ec80,transparent 65%),linear-gradient(135deg,#4b317d,#17284d)}.card:nth-child(3n) .art{background:radial-gradient(circle,#f2c65a77,transparent 60%),linear-gradient(135deg,#754737,#142951)}.card-content{padding:20px}.tag{display:inline-block;background:#06dcfa19;color:#5ce8fc;border:1px solid #0edaf444;border-radius:30px;font-size:11px;letter-spacing:.4px;font-weight:900;padding:3px 9px}.card h3{font-size:20px;line-height:1.25;margin:11px 0 8px}.card p{color:var(--muted);font-size:14px;margin:0 0 17px;min-height:65px}.meta{font-size:12px;color:#8fb4e7;margin-bottom:12px}.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.feature-art{background:linear-gradient(140deg,#0b4b91,#141e49);border:1px solid #4b80bc;border-radius:26px;min-height:290px;display:grid;place-items:center;font-size:100px;box-shadow:0 15px 50px #0006}.split p{color:var(--muted)}.empty{grid-column:1/-1;padding:26px;border:1px dashed #396b9f;border-radius:16px;color:var(--muted)}.footer{background:var(--deep);border-top:1px solid #295587;padding:32px 0;color:#abc0df}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer strong{color:white}.filters{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0}.filter{background:#14315e;color:#e7f5ff;border:1px solid #3c6d9d;border-radius:30px;padding:8px 15px;font-weight:800}.filter.active{background:var(--cyan);color:#05142b;border-color:var(--cyan)}.search{background:#0b2651;color:white;border:1px solid #4b7ab4;padding:12px 14px;border-radius:13px;width:min(100%,390px)}.page-title{padding:52px 0 20px}.page-title h1{font-size:clamp(30px,5vw,49px);margin:6px 0}.page-title p{color:var(--muted)}.detail{max-width:850px;margin:30px auto 80px;background:#0a2350;border:1px solid #32659b;border-radius:23px;padding:clamp(20px,4vw,45px)}.detail h1{font-size:clamp(27px,4vw,44px);line-height:1.2}.detail .body{white-space:pre-line;color:#e3efff;line-height:1.9}.detail .body a{color:var(--cyan)}.back{margin-bottom:24px;display:inline-block;color:var(--cyan)}.hidden{display:none!important}.note{padding:15px 20px;background:#113163;border:1px solid #3677b1;border-radius:13px;color:#dbeaff}.skip{position:absolute;top:-100px;left:0;background:white;color:#06132d;padding:10px;z-index:50}.skip:focus{top:0}:focus-visible{outline:3px solid white;outline-offset:3px}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.hero{background-position:58% center}}@media(max-width:650px){.mobile-menu{display:block}.nav{display:none;position:absolute;top:74px;left:0;right:0;background:#05152e;border-bottom:1px solid #356a9e;padding:20px;flex-direction:column}.nav.open{display:flex}.grid{grid-template-columns:1fr}.hero,.hero .wrap{min-height:370px}.hero-box{padding:18px}.section{padding:42px 0}.section-head{align-items:start;flex-direction:column}.brand{font-size:18px}.feature-art{min-height:190px}}
