/* EV Bikes Pakistan — futuristic dark theme (cyan/green accents).
   System fonts only. CSS-only motion. Content is fully visible without animation. */
:root{
  --accent1:#06b6d4;
  --accent2:#22c55e;
  --glow:rgba(6,182,212,.35);
  --ink:#0f172a;
  --page:#070b14;
  --text-dark:#e2e8f0;
  --text-muted:#94a3b8;
  --glass:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.14);
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text-dark);
  line-height:1.7;
  background-color:var(--page);
  background-image:
    radial-gradient(640px 320px at 12% -5%, rgba(6,182,212,.30), transparent 60%),
    radial-gradient(720px 360px at 92% 8%, rgba(34,197,94,.22), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px);
}
img{max-width:100%;height:auto}
a{color:#67e8f9}
a:hover{color:#a5f3fc}

/* ---- Sticky blurred header ---- */
header{
  position:sticky;top:0;z-index:10;
  background:rgba(7,11,20,.85);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:1rem 1.25rem;
}
header a{color:#fff;text-decoration:none}
header .brand{
  font-size:1.35rem;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
header .tag{color:#94a3b8;font-size:.95rem}
nav{margin-top:.5rem;display:flex;gap:.75rem 1rem;flex-wrap:wrap}
nav a{color:#cbd5e1;font-weight:600;padding:.25rem .5rem;border-radius:999px}
nav a:hover{color:#fff;background:rgba(6,182,212,.15)}

/* ---- Layout ---- */
main{max-width:900px;margin:0 auto;padding:1.25rem}
main > h1{
  font-weight:800;letter-spacing:-.02em;line-height:1.2;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
main > h2{color:#f8fafc;font-weight:800;letter-spacing:-.02em}
main > p{color:#cbd5e1}

/* ---- Hero: animated gradient headline + entrance rise ---- */
@keyframes gradientShift{
  0%{background-position:0% center}
  100%{background-position:200% center}
}
@keyframes heroRise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.hero{
  background:linear-gradient(135deg, rgba(6,182,212,.20), rgba(34,197,94,.14));
  border:1px solid var(--glass-border);
  border-radius:22px;
  padding:2.5rem 1.75rem;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  animation:heroRise .7s ease both;
}
.hero h1,.gradient-text{
  margin:0 0 .5rem;line-height:1.15;
  font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.9rem, 5vw, 3rem);
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent1));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradientShift 6s linear infinite;
}
.hero p{margin:.5rem 0;color:#cbd5e1}

/* ---- Glass cards ---- */
.glass,.card,.cat{
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--glass-border);
  border-radius:18px;
}
.card{padding:1.25rem;margin:1rem 0;transition:transform .25s ease, box-shadow .25s ease}
.card h2,.card h3{margin-top:0;line-height:1.35;color:#f8fafc}
.card p{color:#cbd5e1}
.card:hover,.cat:hover{transform:translateY(-4px);box-shadow:0 14px 32px var(--glow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.cat{padding:1rem;border-top:4px solid var(--accent1);transition:transform .25s ease, box-shadow .25s ease}
.cat h3{margin:.2rem 0}
.cat a{text-decoration:none;color:#f8fafc}
.cat p{color:#94a3b8}
.meta{color:var(--text-muted);font-size:.9rem}
.note{border-left:4px solid var(--accent2)}
.note h2{color:#f8fafc}

/* ---- Gradient buttons ---- */
.btn{
  display:inline-block;margin-top:1rem;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#04121a !important;font-weight:800;text-decoration:none;
  padding:.7rem 1.4rem;border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--glow);color:#04121a}

/* ---- Article readability FIRST: light surface, dark text ---- */
article{
  background:#ffffff;color:var(--ink);
  border-radius:18px;padding:2rem 1.75rem;
  max-width:720px;margin:0 auto;
  line-height:1.8;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
article h1,article h2,article h3{color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.35}
article h2{margin-top:1.6rem}
article p{margin:.8rem 0;line-height:1.8}
article a{color:#0891b2}
article a:hover{color:#0e7490}
article .meta{color:#64748b}
article ul{margin:.5rem 0}

/* ---- Footer: dark with accent top border ---- */
footer{
  background:rgba(7,11,20,.92);color:#94a3b8;
  border-top:3px solid var(--accent1);
  border-image:linear-gradient(90deg,var(--accent1),var(--accent2)) 1;
  padding:1.5rem 1.25rem;margin-top:2rem;font-size:.95rem;
}
footer a{color:#a5f3fc}

/* ---- Mobile-first: 390px safe ---- */
@media(max-width:600px){
  main{padding:1rem}
  .hero{padding:1.5rem 1rem}
  article{padding:1.25rem 1rem}
  .grid{grid-template-columns:1fr}
  header{padding:.85rem 1rem}
  header .brand{font-size:1.2rem}
  nav{gap:.5rem .75rem}
}

/* ---- Reduced motion: everything fully visible, no animation ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}