:root{
  --bg:#0b0b0f;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.08);
  --text:#f5f5f7;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.12);
  --red:#e50914;
  --red2:#ff1b2d;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --radius:18px;
  --radius2:26px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 20% 0%, rgba(229,9,20,.25), transparent 60%), radial-gradient(900px 500px at 80% 30%, rgba(229,9,20,.12), transparent 55%), var(--bg); color:var(--text); font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
code{background:rgba(255,255,255,.08); padding:.1rem .3rem; border-radius:8px}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.topbar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);backdrop-filter: blur(14px);background:rgba(11,11,15,.7)}
.topbarInner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brandMark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,var(--red),#9a0008);box-shadow:0 12px 30px rgba(229,9,20,.25);font-weight:900}
.brandText strong{display:block;letter-spacing:.08em}
.brandText small{display:block;color:var(--muted2);font-size:12px;margin-top:2px}

.nav{display:flex;gap:14px;align-items:center}
.nav a{color:var(--muted);padding:8px 10px;border-radius:12px;border:1px solid transparent}
.nav a:hover{border-color:var(--line);background:rgba(255,255,255,.04)}

.section{padding:40px 0}
.sectionHead h2,.sectionHead h1{margin:0 0 8px}
.sectionHead p{margin:0;color:var(--muted)}

.hero{padding:34px 0 10px}
.heroGrid{display:grid;grid-template-columns: 1.1fr .9fr;gap:22px;align-items:stretch}
.heroCopy{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));border:1px solid var(--line);border-radius:var(--radius2);padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.heroCopy:before{content:"";position:absolute;inset:-60px -60px auto auto;width:240px;height:240px;background:radial-gradient(circle at 30% 30%, rgba(229,9,20,.55), transparent 60%);filter:blur(10px)}
.kicker{display:inline-flex;gap:8px;align-items:center;color:#fff;background:rgba(229,9,20,.16);border:1px solid rgba(229,9,20,.35);padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.heroCopy h1{font-size:42px;line-height:1.08;margin:14px 0 10px}
.heroCopy p{margin:0 0 16px;color:var(--muted);font-size:16px;line-height:1.55}
.heroCtas{display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer}
.btn:hover{background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(180deg,var(--red),#b10009);border-color:rgba(255,255,255,.12)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{background:rgba(229,9,20,.12);border-color:rgba(229,9,20,.35)}

.heroBadges{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.badge{border:1px solid var(--line);background:rgba(255,255,255,.04);padding:8px 10px;border-radius:999px;color:var(--muted);font-size:12px}

.sliderShell{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--radius2);box-shadow:var(--shadow);overflow:hidden;position:relative}
.slider{position:relative;height:360px}
.sliderTrack{display:flex;height:100%;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.slide{position:relative;min-width:100%;height:100%;overflow:hidden}
.slide img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.slideOverlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.36) 45%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.6) 100%)}
.slideText{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.slideText h3{margin:0 0 6px;font-size:20px;letter-spacing:.02em}
.slideText p{margin:0;color:var(--muted);max-width:520px}
.slideActions{display:flex;gap:10px;flex-wrap:wrap}

.sliderBtn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:5}
.sliderBtn:hover{background:rgba(0,0,0,.62)}
#sliderPrev{left:10px}
#sliderNext{right:10px}
.sliderDots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;z-index:6}
.dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);cursor:pointer}
.dot.active{background:var(--red);border-color:rgba(255,255,255,.15)}

.grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
.card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;gap:12px;align-items:center}
.card:hover{background:rgba(255,255,255,.07)}
.cardIcon{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:rgba(229,9,20,.12);border:1px solid rgba(229,9,20,.28)}
.card h3{margin:0 0 4px}
.card p{margin:0;color:var(--muted)}

.footer{border-top:1px solid var(--line);padding:18px 0;margin-top:24px;background:rgba(0,0,0,.18)}
.footerInner{display:flex;justify-content:space-between;gap:14px;align-items:center}

.muted{color:var(--muted)}
.tiny{font-size:12px}
.small{font-size:13px}

/* Admin */
.adminLayout{display:grid;grid-template-columns: 280px 1fr;gap:18px;align-items:start}
.adminSide{position:sticky;top:84px;align-self:start;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius2);padding:16px}
.adminBadge{margin-bottom:12px}
.userBadge{font-weight:700;margin-top:4px}
.adminNav{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.navLink{padding:10px 12px;border-radius:14px;border:1px solid transparent;color:var(--muted)}
.navLink:hover{border-color:var(--line);background:rgba(255,255,255,.04);color:#fff}
.navLink.active{border-color:rgba(229,9,20,.35);background:rgba(229,9,20,.10);color:#fff}

.adminMain .panel{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius2);padding:18px;box-shadow:var(--shadow)}
.panel.soft{background:rgba(255,255,255,.03);box-shadow:none}

.form{display:flex;flex-direction:column;gap:12px}
.field label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.field input, .field textarea, select{
  width:100%;padding:11px 12px;border-radius:14px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:#fff;outline:none
}
.field input:focus, .field textarea:focus, select:focus{border-color:rgba(229,9,20,.55)}

.split{display:grid;grid-template-columns: 1fr 1fr;gap:16px;align-items:start}
.grid2{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sep{border:none;border-top:1px solid var(--line);margin:8px 0}

.slidesEditor{display:flex;flex-direction:column;gap:14px}
.slideEditor{border:1px solid var(--line);border-radius:var(--radius2);padding:14px;background:rgba(255,255,255,.03)}
.slideEditorHead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.previewRow{display:grid;grid-template-columns: 180px 1fr;gap:12px;align-items:start;margin-top:10px}
.previewBox{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(0,0,0,.25);height:110px}
.previewBox img{width:100%;height:100%;object-fit:cover;display:block}

.filters{display:flex;gap:10px;align-items:center;margin:12px 0 18px;flex-wrap:wrap}
.filters input{flex:1;min-width:200px}

@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr}
  .slider{height:320px}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .adminLayout{grid-template-columns:1fr}
  .adminSide{position:relative;top:0}
  .split{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .heroCopy h1{font-size:34px}
  .grid{grid-template-columns:1fr}
  .slider{height:300px}
}