:root {
  --accent:#ff6b1a;
  --accent-2:#ffbb33;
  --glass: rgba(0,0,0,0.45);
  --glass-2: rgba(0,0,0,0.25);
  --text: #fff;
  --max-width:1200px;
}

html,body {
  height:100%;
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.75)), url('banner.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* --- HERO SEKTSIOON --- */
.hero {
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:40px 20px;
  box-sizing:border-box;
}

.container {width:100%;max-width:var(--max-width);margin:0 auto;}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
  border-radius:16px;
  padding:28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,0.03);
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
}

.left {text-align:left;flex:1 1 60%;}
h1 {font-size:36px;margin:0 0 8px 0;letter-spacing:1px;text-shadow:0 3px 12px rgba(0,0,0,0.6);}
p.lead {margin:0 0 12px 0;color:rgba(255,255,255,0.9)}
.cta-row {display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.btn {display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,0.45);}
.btn-primary {background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#120400;border:none}
.btn-outline {background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--text)}
.right {flex:0 0 220px;text-align:center}

/* --- LOGO PILLI SEKTSIOON --- */
.logo-pill {
  width:180px;
  height:180px;
  border-radius:12px;
  overflow:hidden;
  border:6px solid rgba(255,255,255,0.06);
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-color:rgba(0,0,0,0.3);
  margin:auto;
  background-image:url('1500x500.jpg');
}

/* --- MUUSIKAVIDEO SEKTSIOON --- */
.video-section {
  text-align:center;
  padding:100px 20px;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  margin-top:40px;
}

.video-section h2 {
  font-size:32px;
  margin-bottom:20px;
  color:var(--accent-2);
  text-shadow:0 2px 10px rgba(0,0,0,0.6);
}

.video-wrapper {
  position:relative;
  max-width:800px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.1);
  aspect-ratio:16/9;
  background:#000;
}

.video-wrapper video {
  width:100%;
  height:100%;
  display:block;
}

/* --- RESPONSIVE --- */
@media (max-width:880px) {
  .card {flex-direction:column;align-items:center;text-align:center}
  .left {text-align:center}
  .right {flex:0 0 auto}
  h1 {font-size:28px}
}

/* --- TAUSTA EMBER EFEKT --- */
.ember {position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;mix-blend-mode:screen}
.ember i {position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,200,90,0.9);box-shadow:0 0 20px rgba(255,140,0,0.7)}