/* Single, mobile-first CSS for the "DeFi Acolytes" page (neon hacker-night theme) */
/* Neon glassy UI with responsive grid */

:root{
  --bg:#000000;
  --glass: rgba(255,255,255,.08);
  --border: rgba(0,255,255,.25);
  --text:#e8f7ff;
  --muted: rgba(232,246,255,.85);
  --neon:#00e5ff;
  --shadow: 0 8px 22px rgba(0,230,255,.4);
  --radius:12px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height:100%; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:#000;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}

/* subtle neon backdrop */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 25% 25%, rgba(0,180,255,.15), transparent 40%),
    radial-gradient(circle at 75% 15%, rgba(0,230,255,.12), transparent 40%);
  background-size:60px 60px,60px 60px;
  mix-blend-mode:screen;
  opacity:.95;
  z-index:-1;
  pointer-events:none;
  animation: glow 12s infinite ease-in-out;
  filter: saturate(120%);
}
@keyframes glow {
  0%,100%{ transform: translateZ(0); }
  50%{ transform: scale(1.01); }
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  padding:12px 16px;
  background: rgba(0,0,0,.55);
  border-bottom:1px solid rgba(0,255,255,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.brand{
  font-weight:700;
  color:#d8f0ff;
  letter-spacing:.4px;
}
.brand:focus-visible{ outline:3px solid var(--neon); outline-offset:2px; }

/* Layout helpers */
main{ padding:0 0 40px; }

/* Hero: mobile-first, two-column on wide screens */
.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:center;
  padding:20px 16px 0;
}
.hero-content{
  padding:20px;
  border-radius:var(--radius);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(0,255,255,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.hero-content h1{
  font-size: clamp(1.8rem,6vw,2.6rem);
  line-height:1.1;
  margin:0 0 8px;
  color:#e6f7ff;
  text-shadow:0 0 8px rgba(0,230,255,.8);
}
.subhead{
  color: var(--muted);
  font-size: clamp(1rem,3vw,1.05rem);
  margin:6px 0 12px;
}
.cta{
  display:inline-block;
  padding:12px 20px;
  border-radius:10px;
  font-weight:700;
  color:#001018;
  text-decoration:none;
  background: linear-gradient(135deg, rgba(0,230,255,.95), rgba(0,120,255,.95));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 6px 18px rgba(0,230,255,.5);
}
.cta:hover{ transform: translateY(-1px); }
.cta:focus-visible{ outline:3px solid var(--neon); outline-offset:2px; }

.hero-media{
  display:grid; place-items:center;
  padding:6px; border-radius:12px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(0,255,255,.25);
  min-height:260px;
}
.hero-media img{
  width:100%; height:auto; max-width:640px;
  border-radius:12px;
  display:block;
  box-shadow:0 0 28px rgba(0,255,255,.6);
}
@media (min-width:768px){
  .hero{ grid-template-columns:1.05fr .95fr; gap:40px; padding:40px 60px; }
  .hero-media{ min-height:320px; }
}
@media (min-width:1024px){
  .brand{ font-size:1.05rem; }
  .hero-content{ padding:36px; }
  .hero-content h1{ font-size:clamp(2.6rem,4vw,3.6rem); }
}

/* Features */
.features{ padding:24px 16px; }
.features h2{ font-size:1.6rem; margin:0 0 12px; color:#b9f0ff; }
.grid{ display:grid; gap:12px; }
.features-grid{ grid-template-columns:1fr; }
.feature{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(0,255,255,.25);
  border-radius:12px;
  padding:14px;
}
.feature h3{ margin:0 0 6px; color:#eafffb; }

/* Testimonials */
.testimonials{ padding:16px; }
.testimonials h2{ font-size:1.6rem; margin:0 0 10px; color:#b9f0ff; }
.testimonials-list{ list-style:none; display:grid; gap:10px; padding:0; margin:0; grid-template-columns:1fr; }
.testimonials-list li{ background: rgba(255,255,255,.04); border:1px solid rgba(0,255,255,.25); padding:12px; border-radius:10px; }
blockquote{ margin:0; padding:0; color:#eaffff; }
blockquote footer{ color:#c7fbff; font-weight:700; font-size:0.92em; }

/* Footer / Ad bar */
.site-footer{ padding:14px 16px; background: rgba(0,0,0,.6); border-top:1px solid rgba(255,255,255,.15); text-align:center; }
.ad-bar{ color:#b9f0ff; }
.ad-bar a{ color:#a9f0ff; text-decoration:none; font-weight:700; }

/* Focus styles */
a:focus-visible{ outline:3px solid var(--neon); outline-offset:2px; }

/* Responsive grids for larger screens */
@media (min-width:768px){
  .features-grid{ grid-template-columns:repeat(3,1fr); }
  .testimonials-list{ grid-template-columns:repeat(2,1fr); }
}