/* Focus Tube – compact, modern styles */
:root {
  --bg: #fffceb;
  --grad: linear-gradient(180deg,#fffce5 0%, #fff9d9 100%);
  --card: #fffdf5;
  --muted: #acacac;
  --text: #2b2b1b;
  --accent: #e0a800; /* golden yellow */
  --green: #22c55e;
  --orange: #fb923c;
  --yellow: #facc15;
  --pink: #fb6f92;
  --slate: #6b6b5b;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--grad);
}

/* Layout helpers */
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.accent{color:var(--accent);}

/* Nav */
.nav{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px); background:rgba(11,16,32,0.65); border-bottom:1px solid rgba(255,255,255,0.06); z-index:20}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{color:#fff; font-weight:800; font-size:20px; text-decoration:none; letter-spacing:0.2px}
.brand span{color:var(--accent)}
.links a{color:var(--slate); text-decoration:none; margin-left:18px; font-weight:600}
.links a.active, .links a:hover{color:#fff}

/* Hero */
.hero{padding:56px 0}
.hero-inner{display:grid; gap:32px; grid-template-columns: 1.2fr 1fr; align-items:center}
.hero-copy h1{font-size:40px; margin:0 0 10px}
.hero-copy p{font-size:16px; line-height:1.6}
.cta-row{display:flex; gap:12px; margin-top:16px}
.btn{display:inline-block; padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:800}
.btn.primary{background:var(--accent); color:#0b1020}
.btn.ghost{border:1px solid rgba(255,255,255,0.2); color:#e6eef8}

.hero-art{
  background:linear-gradient(180deg,rgba(96,165,250,.15),rgba(96,165,250,.03));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.hero-art img{width:100%; display:block; border-radius:10px}
.caption{color:var(--muted); font-size:12px; margin-top:8px}

/* Cards grid */
.grid{padding:24px 0 8px}
.grid-3{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,0.06);
  border-radius:12px; padding:16px;
}
.card h3{margin:0 0 6px}

/* Page head */
.page-head{padding:36px 0 8px}
.page-head h1{margin:0 0 6px}

/* Features list */
.features-list{display:flex; flex-direction:column; gap:22px; padding-bottom:20px}
.feature{display:grid; gap:18px; grid-template-columns:1.1fr 1fr; align-items:center}
.feature .f-art img{width:100%; display:block; border-radius:10px; border:1px solid rgba(255,255,255,0.06)}
.ghost-card{border:1px dashed rgba(255,255,255,0.2); border-radius:10px; display:flex; align-items:center; justify-content:center; min-height:220px}
.placeholder{color:var(--muted); font-size:14px}

/* Legend dots (for your copy) */
.dot{display:inline-block; width:12px; height:12px; border-radius:999px; vertical-align:-2px; margin:0 4px}
.dot.educ{background:rgba(34,197,94,.9)}
.dot.info{background:rgba(59,130,246,.9)}
.dot.ent{background:rgba(251,146,60,.9)}
.dot.music{background:rgba(251,111,146,.9)}
.dot.news{background:rgba(250,204,21,.9)}
.dot.other{background:rgba(148,163,184,.9)}

/* CTA wide */
.cta-wide{padding:16px 0 40px}
.cta-box{
  background:linear-gradient(90deg, rgba(96,165,250,.12), rgba(34,197,94,.1));
  border:1px solid rgba(255,255,255,0.08); border-radius:14px;
  padding:18px 20px; display:flex; align-items:center; justify-content:space-between;
}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,0.06); margin-top:28px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.foot-links a{color:var(--slate); text-decoration:none; margin-left:14px}
.foot-links a:hover{color:#fff}

/* Responsive */
@media (max-width: 980px){
  .hero-inner, .feature{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}
/* Navigation links */
.nav .links a {
  color: var(--muted);       /* lighter muted gray instead of black */
  text-decoration: none;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

/* Hover state */
.nav .links a:hover {
  color: var(--accent);      /* golden yellow on hover */
  background: rgba(0,0,0,0.04);
}

/* Active tab */
.nav .links a.active {
  color: var(--text);        /* strong text color */
  background: var(--accent);
  color: white;              /* text white when active */
}