:root{
  --bg:#0b0d12;
  --panel:#0f1321;
  --text:#e9eefc;
  --muted:#a8b2d1;
  --line:rgba(255,255,255,.09);
  --brand:#7c5cff;
  --brand2:#23d5ff;
  --radius:18px;
  --shadow: 0 16px 44px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: linear-gradient(180deg, #0b0d12 0%, #070910 100%);
  line-height:1.5;
}

a{color:inherit; text-decoration:none}
.container{width:min(1160px, 92vw); margin:0 auto}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,13,18,.92);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:12px 0;
}

.brand{display:flex; align-items:center; gap:10px; min-width: 180px}
.brand__mark{width:34px; height:34px; border-radius:10px}
.brand__word{height:22px; width:auto; opacity:.95}

.nav{display:flex; gap:16px; align-items:center}
.nav a{color:var(--muted); font-weight:900}
.nav a:hover{color:var(--text)}

.header__cta{display:flex; align-items:center; gap:10px}

@media (max-width: 980px){
  .nav{display:none}
  .brand__word{display:none}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-weight:1000;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14)}
.btn--primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#071019;
}
.btn--ghost{background: transparent}
.btn--lg{padding:14px 18px; font-size: 1.02rem}

.hero{padding: 46px 0 20px}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 980px){ .hero__grid{grid-template-columns:1fr} }

.pill{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(124,92,255,.30);
  background: rgba(124,92,255,.14);
  font-weight:1000;
}

h1{font-size: clamp(30px, 4vw, 50px); margin:12px 0 10px; line-height:1.1}
h2{font-size: clamp(24px, 2.4vw, 34px); margin:0 0 6px}
h3{margin:0 0 6px}
.lead{color:var(--muted); font-size:1.08rem; margin:0 0 18px; max-width: 62ch}
.grad{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin: 12px 0 14px}

.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top: 10px;
}
.stat{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:12px;
}
.stat__k{color:var(--muted); font-weight:1000; font-size:.85rem}
.stat__v{font-weight:1000; margin-top: 2px}

.note{
  margin-top: 12px;
  color: var(--muted);
}

.card{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-80px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(124,92,255,.18), transparent 60%);
  pointer-events:none;
}
.card__title{font-weight:1100; margin:0 0 10px}

.card__row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top: 12px;
}

.dot{
  width:8px; height:8px; border-radius:50%;
  background: rgba(35,213,255,.7);
  box-shadow: 0 0 0 6px rgba(35,213,255,.10);
}

.divider{height:1px; background: var(--line); margin: 14px 0}

.miniinfo{display:flex; justify-content:space-between; gap:10px}
.miniinfo__k{color:var(--muted); font-weight:1000}
.miniinfo__v{font-weight:1000}

.section{padding: 44px 0}
.section--soft{
  background: rgba(255,255,255,.02);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section__head{margin-bottom: 14px}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.grid{display:grid; gap:12px}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid--2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 980px){
  .grid--3,.grid--2{grid-template-columns:1fr}
}

.feature{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding:16px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.feature::before{
  content:"";
  position:absolute;
  inset:auto auto -90px -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(35,213,255,.10), transparent 60%);
  pointer-events:none;
}
.feature__icon{font-size: 1.4rem; margin-bottom: 8px}

.bullets{margin:0; padding-left: 18px; color: var(--muted)}
.bullets li{margin: 8px 0}

.gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){ .gallery{grid-template-columns:1fr} }

.shot{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.shot img{width:100%; height:auto; display:block}

.steps{margin:0; padding-left: 18px; color: var(--muted)}
.steps li{margin: 10px 0}

.qa{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  margin-top: 12px;
}
.qa summary{cursor:pointer; font-weight:1100}
.qa p{margin:10px 0 0; color: var(--muted)}

.support{display:flex; flex-direction:column; gap:10px; align-items:flex-start}

.donate{display:flex; flex-direction:column; gap:10px}
.qrrow{margin-top: 12px; display:flex; align-items:center; gap:12px}
.qr{
  width: 110px; height: 110px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
}

.link{color: rgba(35,213,255,.95); font-weight:1000}
.link:hover{text-decoration: underline}

.footer{padding: 24px 0 30px}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:18px;
}