*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#1a0f33;--bg2:#241245;--card:#2d1857;--accent:#ffd400;--accent2:#ff3d8b;--text:#f3eefb;--muted:#b7a8d6}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif;background:linear-gradient(180deg,#1a0f33,#120a26);color:var(--text);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}
.btn{display:inline-block;background:var(--accent);color:#1a0f33;font-weight:700;padding:12px 26px;border-radius:8px;cursor:pointer;border:none;transition:.2s;text-align:center}
.btn:hover{background:#ffe24d;transform:translateY(-2px)}
.btn-login{background:transparent;color:var(--accent);border:2px solid var(--accent);padding:8px 22px}
.btn-login:hover{background:var(--accent);color:#1a0f33}
.btn-hero{font-size:1.05rem;padding:14px 34px;box-shadow:0 6px 20px rgba(255,212,0,.3)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(26,15,51,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;gap:18px;height:64px}
.logo{font-size:1.5rem;font-weight:800;letter-spacing:1px;background:var(--accent);color:#1a0f33;padding:6px 12px;border-radius:8px}
.logo span{color:var(--accent2)}
.main-nav{display:flex;gap:22px;margin-left:auto}
.main-nav a{font-weight:600;color:var(--muted);transition:.2s}
.main-nav a:hover{color:var(--accent)}
.btn-login{flex-shrink:0}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto}
.burger span{width:26px;height:3px;background:var(--accent);border-radius:3px}

.breadcrumbs{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted);padding-top:12px}
.breadcrumbs a{color:var(--accent)}
.breadcrumbs span{color:var(--muted)}

.hero{background-size:cover;background-position:center;min-height:420px;display:flex;align-items:center;padding:40px 0}
.hero-overlay-box{width:100%}
.hero-card{max-width:560px;background:rgba(26,15,51,.78);border-radius:16px;padding:28px;border:1px solid rgba(255,212,0,.25)}
.hero-h1{font-size:1.35rem;font-weight:800;color:var(--accent);margin-bottom:12px;line-height:1.3}
.hero-heading{font-size:1.6rem;font-weight:800;margin-bottom:12px}
.hero-sub{color:var(--muted);margin-bottom:20px}

.highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:36px auto}
.hl-card{background:var(--card);border-radius:14px;padding:20px 12px;text-align:center;border:1px solid rgba(255,255,255,.06)}
.hl-card svg{width:38px;height:38px;fill:var(--accent);margin:0 auto 8px;display:block}
.hl-num{font-size:1.5rem;font-weight:800;color:var(--accent)}
.hl-lbl{font-size:.85rem;color:var(--muted)}

.slots-section{margin:40px auto}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-title{font-size:1.4rem;font-weight:800}
.see-all{background:var(--accent2);color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;font-size:.9rem}
.slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.slot{position:relative;border-radius:14px;overflow:hidden;background:var(--card);aspect-ratio:1/1;transition:.2s}
.slot img{width:100%;height:100%;object-fit:cover}
.slot:hover{transform:translateY(-4px)}
.slot .play{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:var(--accent);color:#1a0f33;font-weight:700;padding:6px 18px;border-radius:6px;font-size:.85rem;opacity:0;transition:.2s}
.slot:hover .play{opacity:1}

.cta-band{background:linear-gradient(90deg,var(--accent2),#7b1fa2);margin:40px 0}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 16px}
.cta-band-title{font-size:1.4rem;font-weight:800}
.cta-band p{color:rgba(255,255,255,.85)}

.content{margin:40px auto 60px}
article h1{font-size:1.8rem;line-height:1.3;margin-bottom:24px;color:var(--accent)}
article h2{font-size:1.35rem;margin:34px 0 14px;color:#fff;border-left:4px solid var(--accent);padding-left:12px}
article h3{font-size:1.1rem;margin:22px 0 10px;color:var(--accent)}
article p{margin-bottom:14px;color:var(--text)}
article strong{color:#fff}
article ul{list-style:none;margin:0 0 18px}
article li{background:var(--card);border-radius:8px;padding:10px 14px;margin-bottom:8px;border-left:3px solid var(--accent2);word-wrap:break-word}
article section{background:rgba(45,24,87,.35);border-radius:14px;padding:18px;margin-bottom:18px}

.site-footer{background:#0e0820;padding:30px 0;border-top:1px solid rgba(255,255,255,.08)}
.foot-badges{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:16px;color:var(--muted);font-size:.9rem}
.badge18{background:var(--accent2);color:#fff;font-weight:800;border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}
.site-footer p{text-align:center;color:var(--muted);font-size:.85rem;max-width:760px;margin:0 auto}

@media(max-width:860px){
.main-nav{position:fixed;top:64px;left:0;right:0;background:var(--bg2);flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;transition:.3s}
.main-nav.open{max-height:400px;padding:10px 0}
.main-nav a{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.burger{display:flex}
.btn-login{margin-left:auto}
.highlights{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.header-inner{gap:10px}
.logo{font-size:1.2rem;padding:5px 9px}
.hero{min-height:340px}
.hero-h1{font-size:1.1rem}
.hero-heading{font-size:1.3rem}
.slots-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.cta-band-inner{flex-direction:column;text-align:center}
.section-title{font-size:1.2rem}
article h1{font-size:1.4rem}
article h2{font-size:1.15rem}
}
@media(max-width:380px){
.btn-login{padding:7px 14px;font-size:.85rem}
.logo{font-size:1.05rem}
}