/* ================================
   LearnPulse — Cinematic Styles
   ================================ */

:root{
  --bg:#0b0f17;
  --bg-soft:#101727;
  --card:#141c2f;
  --accent:#4cc9f0;
  --accent-soft:#8be9ff;
  --text:#e7ecf3;
  --muted:#9aa6c3;
  --danger:#ff6b6b;
  --success:#4caf50;
  --radius:18px;
  --blur:18px;
}

/* RESET */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;background:radial-gradient(circle at 20% 10%, #12204a, #05070d 60%);color:var(--text)}

/* CONTAINERS */
.container{max-width:1200px;margin:auto;padding:20px}

/* LINKS */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* TOP BAR */
.topbar{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(var(--blur));
  background:rgba(10,14,26,.8);
  border-bottom:1px solid rgba(255,255,255,.05)
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.brand span{display:block;font-size:12px;color:var(--muted)}

/* REAL LOGO IMAGE */
.logo{
  width:42px;
  height:42px;
  background:url("/assets/logo.png") center / contain no-repeat;
}

/* HERO */
.hero{padding:40px 20px}
.heroGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.heroGrid{grid-template-columns:1fr}}

.kicker{font-size:12px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
.h1{font-size:40px;font-weight:800;margin:10px 0}
.sub{color:var(--muted);line-height:1.6}

/* CARDS */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.pad{padding:20px}

/* BUTTONS */
.btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.12)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),#3a86ff);
  border:none;
  color:#02121c;
  font-weight:700;
}

/* HERO ART */
.heroArt{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.heroArt img{width:100%;height:100%;object-fit:cover;display:block}
.heroArt .overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.7));
}
.artText{
  position:absolute;
  bottom:20px;left:20px;
  color:#fff
}

/* SECTIONS */
.section{margin-top:60px}
.section h2{margin-bottom:16px}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}

/* ICON TITLES */
.iconTitle{display:flex;align-items:center;gap:10px}
.icon{font-size:22px}

/* FEED */
.feedWrap{display:flex;flex-direction:column;gap:14px}
.feedItem{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.feedTitle{font-weight:700;margin-top:6px}
.feedDesc{color:var(--muted);font-size:14px;margin-top:4px}
.feedMeta{display:flex;justify-content:space-between;align-items:center}
.tag{
  background:rgba(76,201,240,.15);
  color:var(--accent);
  padding:4px 10px;
  border-radius:999px;
  font-size:11px
}
.badge{
  font-size:11px;
  padding:4px 10px;
  border-radius:999px
}
.badge.info{background:rgba(255,255,255,.1);color:var(--text)}

/* TOGGLES */
.prefs{display:flex;flex-wrap:wrap;gap:10px}
.toggle{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
}
.toggle input{margin-right:6px}

/* INPUTS */
.input,textarea,select{
  width:100%;
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text)
}
textarea{min-height:90px}

/* PRICING */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){.pricing{grid-template-columns:1fr}}
.price .cost{font-size:32px;font-weight:800;margin:10px 0}

/* LISTS */
.list{padding-left:20px;color:var(--muted)}
.list li{margin-bottom:8px}

/* FOOTER */
.footer{
  margin-top:80px;
  padding:40px 20px;
  border-top:1px solid rgba(255,255,255,.05)
}
.footerGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}

/* SMALL TEXT */
.mini{font-size:12px;color:var(--muted)}
.smallprint{font-size:12px;color:var(--muted);margin-top:10px}
.disclaimer{
  margin-top:14px;
  padding:12px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  color:var(--muted);
  font-size:12px
}

/* SEPARATORS */
.sep{border:none;height:1px;background:rgba(255,255,255,.08);margin:20px 0}

/* MOTION */
.motion-in{
  animation:fadeUp .6s ease both
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* TOAST */
.toast{
  display:none;
  padding:8px 14px;
  border-radius:999px;
  background:var(--success);
  color:#02121c;
  font-size:12px
}

/* PRIVATE GATE */
.privateGate{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
  z-index:5000
}
.privateBanner{
  color:var(--danger);
  font-weight:800;
  margin-bottom:10px
}

/* SCROLLBAR */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.2);
  border-radius:999px
}