/* Base */
:root{
  --bg:#0a0a0a;
  --text:#f8fafc;
  --muted:#cbd5e1;
  --soft:#ffffff14;
  --soft-2:#ffffff0d;
  --outline:#ffffff26;
  --brand1:#210052;
  --brand2:#db192e;
  --tk:#00f2ea;
  --yt:#ff0000;
  --ig:#e1306c;
  --fb:#1877f2;
  --logo-h: 136px;
  --avatar-min: 58px;
  --avatar-max: 82px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Montserrat',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* Background blobs */
.bg-blobs::before,.bg-blobs::after{content:"";position:fixed;width:40rem;height:40rem;filter:blur(60px);z-index:-2}
.bg-blobs::before{inset:auto auto 10% -10%;background:radial-gradient(ellipse at center,#210052aa 0%,transparent 60%)}
.bg-blobs::after{inset:20% -10% auto auto;background:radial-gradient(ellipse at center,#db192eaa 0%,transparent 60%);width:35rem;height:35rem}
main::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(transparent 49%,#ffffff10 50%,transparent 51%),linear-gradient(90deg,transparent 49%,#ffffff10 50%,transparent 51%);background-size:24px 24px,24px 24px;opacity:.2}

/* Header */
.site-header,.site-footer{max-width:1200px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}
.logo{height:var(--logo-h);width:auto;filter:drop-shadow(0 2px 8px #0008)}
.logo.small{height:calc(var(--logo-h) - 40px)}

/* Social buttons */
.social-inline{display:flex;gap:10px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:#111;border:1px solid var(--outline);transition:all .2s;overflow:hidden}
.icon-btn svg{width:22px;height:22px;fill:#fff}
.icon-btn.yt rect{fill:#ff0000}
.icon-btn.fb{background:#1877f2}
.icon-btn.tk{background:#000}
.icon-btn.ig rect{fill:url(#iggrad_hdr)}
.icon-btn:hover{transform:translateY(-1px);filter:saturate(1.08)}

/* Floating mail */
.floating-email{position:fixed;right:20px;bottom:20px;z-index:50;width:54px;height:54px;border-radius:999px;background:#ffffff22;border:1px solid #ffffff55;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);transition:transform .15s ease,background .2s}
.floating-email:hover{transform:translateY(-2px);background:#ffffff33}
.floating-email svg{width:24px;height:24px;fill:#fff}

/* Social dock left */
.social-dock{position:fixed;left:18px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:14px;z-index:4}
@media(min-width:1024px){.social-dock{display:flex}}

/* Layout / hero */
.grid-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;padding:40px 0 60px}
.hero-text .title-row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.avatar{width:clamp(var(--avatar-min),7vw,var(--avatar-max));height:clamp(var(--avatar-min),7vw,var(--avatar-max));aspect-ratio:1/1;border-radius:999px;border:3px solid #fbbf24;object-fit:cover;object-position:center;box-shadow:0 6px 22px -8px rgba(251,191,36,.65)}
.hero-text h1{font-size:clamp(36px,6vw,58px);line-height:1.05;margin:0}
.subtitle{opacity:.85;font-weight:600;margin:2px 0 8px}
.lead{font-size:clamp(16px,2.2vw,20px);opacity:.9;max-width:56ch;margin-bottom:18px}
.hero-card{position:relative;border:1px solid var(--outline);background:linear-gradient(#ffffff14,#ffffff0a);border-radius:24px;padding:8px;box-shadow:0 10px 60px -10px rgba(0,0,0,.6);min-height:520px;display:flex;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;filter:contrast(1.05) brightness(.96)}

/* Followers Pro */
.followers.pro{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px}
@media(min-width:720px){.followers.pro{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.followers.pro{grid-template-columns:repeat(4,1fr)}}
.fpro{position:relative;display:flex;align-items:center;gap:12px;border-radius:16px;padding:14px;background:var(--soft-2);border:1px solid var(--outline);overflow:hidden;transition:transform .18s,border-color .2s,box-shadow .2s}
.fpro:hover{transform:translateY(-2px);border-color:#ffffff66;box-shadow:0 16px 40px -18px rgba(0,0,0,.7)}
.fpro .icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#111}
.fpro .icon svg{width:22px;height:22px;fill:#fff}
.fpro .meta{display:flex;flex-direction:column;gap:2px}
.fpro .label{font-size:13px;color:#e5e7eb}
.fpro .count{font-weight:600;font-size:14px;letter-spacing:.2px}
.fpro.tk{background:linear-gradient(135deg,#00f2ea22,#00000011)}
.fpro.yt{background:linear-gradient(135deg,#ff000022,#00000011)}
.fpro.ig{background:linear-gradient(135deg,#f9ce3422,#ee2a7b22,#6228d722)}
.fpro.fb{background:linear-gradient(135deg,#1877f222,#00000011)}

/* CTA */
.cta-line{margin-top:16px}
.mega-cta{display:inline-flex;align-items:center;gap:10px;justify-content:center;font-weight:800;letter-spacing:.2px;padding:14px 22px;border-radius:18px;border:0;color:#000;position:relative;background:#fff;box-shadow:0 12px 28px -16px rgba(0,0,0,.55);transition:transform .15s ease,box-shadow .2s,background .2s,filter .2s}
.mega-cta .done{width:18px;height:18px;fill:#16a34a;opacity:.95}
.mega-cta:hover{background:linear-gradient(135deg,#ffffff,#f4f4f5);filter:saturate(1.05);transform:translateY(-1px);box-shadow:0 18px 38px -18px rgba(219,25,46,.35),0 0 0 1px rgba(255,255,255,.15) inset}

/* Sections */
.section{padding:10px 0 60px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.section-head h2{margin:0;font-size:clamp(22px,3.5vw,30px);font-weight:700}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;border:1px solid var(--outline);background:var(--soft-2);padding:18px;border-radius:22px;overflow:hidden;transition:border-color .2s,transform .2s}
.card:hover{border-color:#ffffff66;transform:translateY(-2px)}
.card h3{margin:8px 0 4px;font-size:18px}
.card p{margin:0;color:#dbeafe}
.card .arrow{position:absolute;right:16px;bottom:14px;color:#e5e7eb;font-size:14px}
.card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .2s;background:var(--grad,none)}
.card:hover::after{opacity:.9}
.card[data-grad="purple-blue"]{--grad:linear-gradient(135deg,#a78bfa33,#60a5fa33)}
.card[data-grad="pink-violet"]{--grad:linear-gradient(135deg,#f472b633,#a78bfa33)}
.card[data-grad="amber-rose"]{--grad:linear-gradient(135deg,#f59e0b33,#fb718533)}
.card[data-grad="emerald-cyan"]{--grad:linear-gradient(135deg,#34d39933,#22d3ee33)}
.vthumb{height:480px;border-radius:14px;background:#0f0f12;border:1px dashed #ffffff26;display:flex;align-items:center;justify-content:center}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:#00000066;border:1px solid #ffffff26;color:#fff}
.badge.yt{background:#ff000033}
.badge.tk{background:#00f2ea33}
.badge.ig{background:#e1306c33}
.badge.fb{background:#1877f233}

/* Footer */
.site-footer{color:#cbd5e1}
.email-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--outline);background:#ffffff10;padding:10px 14px;border-radius:999px;color:#fff;transition:all .2s;box-shadow:0 6px 20px -8px rgba(0,0,0,.6)}
.email-chip:hover{background:#ffffff22;border-color:#ffffff55}
.email-chip::before{content:"✉";font-size:14px;opacity:.9}

/* Mobile: hero image first */
@media(max-width:1023px){
  .hero{grid-template-columns:1fr;gap:18px}
  .hero-card{order:-1}
}