/* CSS for TON Acolytes landing page
   Mobile-first, neon brown hacker-night theme with frosted glass */
:root{
  --bg: #0a0a0a;
  --card: rgba(12,12,12,.65);
  --border: rgba(184,114,50,.75);
  --text: #f6efe7;
  --muted: #c8b9ab;
  --grid: rgba(122,66,22,.55);
  --radius: 14px;
  --neon: #b5651a;
}
*,&:before,&:after{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:40px 40px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.site-header{
  padding:1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(0,0,0,.45);
  border-bottom:1px solid rgba(184,114,50,.65);
  backdrop-filter: blur(2px) saturate(1.2);
}
.brand{
  font-weight:700;
  color:#fbead0;
  text-shadow:0 0 8px rgba(184,114,50,.9);
}
.brand::after{
  content:" • cyber";
  color:#e2c18a;
  font-weight:600;
  font-size:.85em;
  margin-left:.25rem;
  opacity:.95;
}

/* Main content area */
main{ padding:1rem; }

/* Section common (frosted glass) */
.section{
  display:grid;
  gap:1rem;
  padding:1rem;
  border-radius:var(--radius);
  background: rgba(12,12,12,.58);
  border:1px solid rgba(184,114,50,.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.section h2{ font-size:1.25rem; color:#ffd39b; margin:0; }

/* Hero section (mobile-first) */
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  align-items:center;
  padding:1rem;
  border-radius:var(--radius);
  background: rgba(12,12,12,.58);
  border:1px solid rgba(184,114,50,.6);
  backdrop-filter: blur(6px);
}
.hero-content{ padding:1rem; }
.hero-content h1{
  font-size:1.8rem;
  line-height:1.08;
  margin:0 0 .5rem;
  color:#fff;
  text-shadow:0 0 10px rgba(184,114,50,.9);
}
.subhead{ color:var(--muted); font-size:1rem; margin-bottom:.75rem; }
.cta{
  display:inline-block;
  padding:.85rem 1.25rem;
  border-radius:999px;
  border:1px solid rgba(184,114,50,.95);
  color:#2a1200;
  background:linear-gradient(#ffd8a3,#f2c18a);
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.cta:hover{ transform:translateY(-1px); box-shadow:0 0 14px rgba(184,114,50,.9); }
.cta:focus-visible{ outline:3px solid #ffd27a; outline-offset:2px; box-shadow:0 0 0 4px rgba(184,114,50,.25); }

.hero-media{ display:flex; justify-content:center; align-items:center; padding:0 1rem; }
.hero-media img{ max-width:100%; height:auto; border-radius:12px;
  border:1px solid rgba(184,114,50,.8);
  box-shadow:0 0 28px rgba(184,114,50,.65);
}

/* Features section */
.features{ padding:1rem; }
.features-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.feature{ background:rgba(8,8,8,.6); border:1px solid rgba(120,70,20,.6); padding:1rem; border-radius:12px; }
.feature h3{ margin:0 0 .25rem; color:#ffd9bd; }
.feature p{ color:#d8c3ad; }

/* Testimonials section */
.testimonials{ padding:1rem; }
.testimonials-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.testimonial{ background:rgba(12,12,12,.58); border:1px solid rgba(120,70,20,.6); padding:.85rem; border-radius:12px; }
.testimonial p{ color:#e9dccb; margin:.25rem 0; }
.testimonial .author{ font-style:italic; color:#f1e0cd; }

/* Footer ad row */
.ad-row{ display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; font-size:.95rem; color:#f1e6d8; }
.ad-label{ background: rgba(184,114,50,.95); color:#111; padding:.25rem .5rem; border-radius:6px; font-weight:700; white-space:nowrap; font-size:.8rem; box-shadow:0 0 8px rgba(184,114,50,.7); }
.ad-row a{ color:#ffd8a3; text-decoration:none; border-bottom:1px dashed rgba(210,150,90,.8); }
.ad-row a:hover{ color:#fff; }

/* Footer base */
.site-footer{ padding:1rem; border-top:1px solid rgba(184,114,50,.5); background: rgba(9,9,9,.6); }

/* Responsive layout tweaks */
@media (min-width:700px){
  .hero-grid{ grid-template-columns:1.05fr 0.95fr; }
  .hero-content h1{ font-size:2rem; }
  .subhead{ font-size:1.05rem; }
  .features-grid{ grid-template-columns: repeat(3,1fr); }
  .testimonials-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width:1024px){
  .hero-grid{ gap:2rem; padding:2rem; }
  .hero-content{ padding:2rem; }
}