:root{
  --bg:#0d0b1a;
  --card:#1e1933;
  --surface:rgba(30,25,51,.9);
  --bd:rgba(112,213,230,.16);
  --tx:#ece6ff;
  --mut:rgba(231,222,255,.78);
  --pri:#9bf0ff;
  --pri-2:#6ed7ff;
  --acc:#8ff700;
  --focus:#8ff700;
  --shadow:0 18px 48px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:
    radial-gradient(circle at 85% 0%, rgba(155,240,255,.08), transparent 30%),
    radial-gradient(circle at 10% 100%, rgba(143,247,0,.06), transparent 28%),
    var(--bg);
  color:var(--tx);
  font-family:'Cairo',sans-serif;
  line-height:1.9;
  padding-top:6.4rem;
}

.wrap{max-width:1080px;margin:auto;padding:1.25rem}

.top{
  position:sticky;
  top:5.3rem;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  padding:.9rem 1rem;
  background:rgba(13,11,26,.8);
  backdrop-filter:blur(14px);
  border:1px solid var(--bd);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.brand{
  font-family:'Space Grotesk',sans-serif;
  color:var(--pri);
  font-weight:700;
  letter-spacing:.09em;
}

.top > div:last-child{display:flex;gap:.55rem;flex-wrap:wrap}

.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:999px;
  border:1px solid var(--bd);
  color:var(--pri);
  text-decoration:none;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .2s,border-color .2s,transform .2s,color .2s;
}

.btn:hover{
  background:rgba(155,240,255,.1);
  border-color:rgba(155,240,255,.38);
  color:#dffdff;
  transform:translateY(-1px);
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:8px;
}

.hero,.section,.cta,.note,.card,.mini{
  background:var(--surface);
  border:1px solid var(--bd);
  border-radius:20px;
  box-shadow:var(--shadow);
}

.hero,.section,.cta,.note{padding:1.5rem;margin-top:1rem}

.hero{
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:'';
  position:absolute;
  top:-34px;
  left:-30px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(155,240,255,.2), transparent 72%);
  pointer-events:none;
}

.hero::after{
  content:'';
  position:absolute;
  bottom:-60px;
  right:-40px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(143,247,0,.08), transparent 70%);
  pointer-events:none;
}

h1{
  margin:.35rem 0 0;
  font-size:clamp(1.85rem,4.6vw,3.1rem);
  line-height:1.28;
  letter-spacing:-.01em;
}

h2{
  margin:.2rem 0 .85rem;
  font-size:1.5rem;
  line-height:1.4;
}

h3{margin:.1rem 0 .6rem;font-size:1.08rem}
p,li{color:var(--mut)}
strong{color:var(--tx)}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}

.mut{color:var(--mut)}

.tag{
  font-size:.72rem;
  color:var(--acc);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
  margin-top:1rem;
}

.mini,.card{padding:1rem}
.mini{border-style:dashed;background:rgba(255,255,255,.02)}

.card{
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(155,240,255,.4);
  box-shadow:0 24px 52px rgba(0,0,0,.3);
}

.card h2{
  margin:.15rem 0 .6rem;
  font-size:1.15rem;
}

.cta{
  background:linear-gradient(135deg, rgba(155,240,255,.08), rgba(30,25,51,.95) 42%), var(--surface);
}

.proof-list,.example-list,.channel-grid,.mini-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.9rem;
}

.proof,.detail-box,.channel-card,.mini-card,.example-item{
  border:1px dashed var(--bd);
  border-radius:16px;
  padding:1rem;
  background:rgba(255,255,255,.02);
}

.hero p:first-child,.section p:first-child{margin-top:0}
img{max-width:100%;height:auto;display:block}

@media (max-width:760px){
  .wrap{padding:1rem}
  body{padding-top:7rem}
  .top{top:5rem;align-items:flex-start}
  .btn{font-size:.7rem;padding:.55rem .85rem}
}