:root{
  --bg0:#0b0b10;
  --bg1:#0f0f15;
  --card: rgba(18,18,24,.72);
  --card2: rgba(18,18,24,.55);
  --stroke: rgba(255,255,255,.08);
  --pink:#F53B6A;
  --pink2:#ff5c88;
  --text:#ffffff;
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);
  --shadowPink: 0 0 18px rgba(245,59,106,.35), 0 0 42px rgba(245,59,106,.18);
  --shadowCard: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
}
*{ box-sizing:border-box; }
html,body{ min-height:100%; scroll-behavior:smooth; }
html{
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(245,59,106,.18), transparent 55%),
    radial-gradient(900px 700px at 80% 30%, rgba(153,71,255,.16), transparent 55%),
    radial-gradient(900px 900px at 35% 100%, rgba(245,59,106,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  overflow-x:hidden;
  background: transparent;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.14;
  mask-image: radial-gradient(2400px 1800px at 50% 10%, black 96%, transparent 100%);
}
.top-accent{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg, transparent, rgba(245,59,106,.9), transparent);opacity:.75;z-index:50;}
.wrap{min-height:100%;display:flex;flex-direction:column;}
header{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);background:linear-gradient(180deg, rgba(10,10,14,.75), rgba(10,10,14,.35));border-bottom:1px solid rgba(255,255,255,.06);}
.nav{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);user-select:none;}
.logo{width:38px;height:38px;border-radius:10px;background-image:url('/favicon.png');background-size:cover;background-position:center;background-repeat:no-repeat;background-color:rgba(245,59,106,.2);box-shadow:var(--shadowPink);border:1px solid rgba(255,255,255,.10);}
.brand-title{display:flex;flex-direction:column;line-height:1.05;}
.brand-title b{letter-spacing:.2px;font-size:14px;}
.brand-title span{font-size:12px;color:var(--muted2);}
.navlinks{display:flex;gap:10px;flex-wrap:nowrap;justify-content:flex-end;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:600;font-size:13px;padding:9px 12px;border-radius:999px;border:1px solid transparent;transition:.18s;white-space:nowrap;}
.navlinks a:hover,.navlinks a.active{color:var(--text);border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.04);}
main{max-width:1100px;margin:0 auto;padding:40px 18px 34px;width:100%;flex:1;display:grid;gap:22px;align-items:start;}
.hero,.panel,.card{border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),radial-gradient(900px 420px at 10% 0%, rgba(245,59,106,.20), transparent 55%),radial-gradient(900px 420px at 90% 20%, rgba(153,71,255,.14), transparent 55%),rgba(15,15,20,.65);box-shadow:var(--shadowCard);overflow:hidden;position:relative;}
.hero:before,.panel:before,.card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.55) 100%);opacity:.55;pointer-events:none;}
.hero-inner,.panel-inner,.card-inner{position:relative;padding:28px 24px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);color:var(--muted);font-size:13px;margin-bottom:16px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:var(--shadowPink);}
.title{margin:0;font-family:'Bebas Neue', sans-serif;font-size:clamp(48px, 7vw, 76px);letter-spacing:3px;line-height:.92;transform:skewX(-8deg);display:inline-block;}
.title .pink{color:var(--pink);text-shadow:var(--shadowPink);}
.subtitle{margin:14px 0 0;color:var(--muted);font-size:clamp(16px, 2vw, 20px);max-width:60ch;line-height:1.4;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.info-list{display:grid;gap:12px;margin-top:18px;}
.info{border-radius:16px;border:1px solid var(--stroke);background:var(--card);box-shadow:0 12px 40px rgba(0,0,0,.35);padding:16px;position:relative;}
.info h3{margin:0 0 8px;font-size:18px;}
.info p,.info li{margin:0;color:var(--muted);font-size:14px;line-height:1.6;}
.info ul{margin:10px 0 0;padding-left:18px;display:grid;gap:8px;}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.btn{appearance:none;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--text);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px;border-radius:14px;font-weight:800;letter-spacing:.2px;cursor:pointer;transition:.18s;user-select:none;text-align:center;}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);}
.btn-primary{background: linear-gradient(135deg, rgba(245,59,106,.95), rgba(245,59,106,.65));border-color: rgba(245,59,106,.55);box-shadow: var(--shadowPink);}
footer{max-width:1100px;margin:0 auto;padding:18px 18px 34px;color:var(--muted2);width:100%;}
.footerline{border-top:3px dashed rgba(255,255,255,.10);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.social{display:flex;gap:10px;flex-wrap:wrap;}
.social a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:var(--text);text-decoration:none;transition:.18s;font-weight:900;}
.social a:hover{border-color:rgba(245,59,106,.35);background:rgba(245,59,106,.10);box-shadow:var(--shadowPink);transform:translateY(-1px);}
@media (max-width: 920px){.grid-2{grid-template-columns:1fr;}}
@media (max-width: 560px){.hero-inner,.panel-inner,.card-inner{padding:22px 16px;}.title{font-size:clamp(40px, 13vw, 60px);}.actions .btn{width:100%;}}
