:root{
  --bg:#0f1115; --panel:#161a22; --text:#e6e9ef; --muted:#9aa4b2;
  --brand:#6ee7ff; --brand2:#a78bfa;
  --ig:#E4405F; --fb:#1877F2; --tt:#000000; --yt:#FF0000; --tw:#1DA1F2;
  --sp:#1DB954; --am:#fa243c; --sc:#FF5500; --td:#0A0A0A; --bc:#629AA9; --th:#000000;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{position:sticky;top:0;z-index:10;background:rgba(15,17,21,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #22252d}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.5px}
.logo-badge{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--shadow)}
.nav a{margin:0 8px;padding:6px 10px;border-radius:10px}
.nav a.active,.nav a:hover{background:#1e232e}
.hero{background:
radial-gradient(1000px 400px at 10% -10%, rgba(110,231,255,.15), transparent 60%),
radial-gradient(800px 400px at 90% 10%, rgba(167,139,250,.12), transparent 60%),
linear-gradient(180deg, #0f1115 0%, #0f1115 60%, #0d0f13 100%);
border-bottom:1px solid #1f2430;
}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:56px 24px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.h1{font-size:44px;line-height:1.15;margin:0 0 10px;font-weight:900}
.sub{color:var(--muted);max-width:680px}
.cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid #2a2f3b;background:#1a1f2a;color:var(--text);box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#0b0e13;border:none}
.btn.ghost{background:transparent;border:1px solid #2a2f3b}
.panel{background:var(--panel);border:1px solid #212634;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.cols-3{grid-template-columns:1fr 1fr}.grid.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-3,.grid.cols-2,.grid.cols-4{grid-template-columns:1fr}}
.section{padding:30px 24px;border-top:1px solid #1f2430}
.h2{font-size:26px;margin:0 0 8px}
.card{background:linear-gradient(180deg,#171b25 0%,#121722 100%);border:1px solid #202737;border-radius:14px;padding:16px;min-height:120px}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;background:#202738;color:#8aa4c8;border:1px solid #293246;font-size:12px;margin-right:6px}
.footer{padding:32px 24px;border-top:1px solid #1f2430;color:var(--muted)}
.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #2a2f3b;background:#121620;color:var(--text)}
label{display:block;margin:8px 0 6px;color:#b7c1d1;font-size:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.form-row{grid-template-columns:1fr}}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #222838}
.badge{padding:6px 10px;border-radius:10px;background:#1b2130;border:1px solid #2b3243}
.hero-img{
  height:320px;border-radius:18px;border:1px solid #22283a;
  background:
   radial-gradient(200px 80px at 10% 20%, rgba(110,231,255,.15), transparent 60%),
   radial-gradient(200px 80px at 90% 10%, rgba(167,139,250,.2), transparent 60%),
   url('assets/placeholder_hero.svg');
  background-size:cover; background-blend-mode:screen;
}
.kicker{letter-spacing:.15em;color:#8fb7ff;text-transform:uppercase;font-size:12px}
.mini{font-size:13px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.gallery{grid-template-columns:1fr}}
.gallery .tile{position:relative;border-radius:14px;overflow:hidden;border:1px solid #232a38;background:#111520}
.gallery .tile img{width:100%;height:220px;object-fit:cover;display:block;opacity:.95}
.gallery .tile .cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));padding:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #22283a;text-align:left}

/* Social links (color badges) */
.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.social-links a{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;border:1px solid #2a2f3b;background:#1a1f2a;font-size:14px}
.social-links a .ico{width:20px;height:20px;display:inline-block}
.social-links a[data-p="ig"]{background:var(--ig);border-color:transparent}
.social-links a[data-p="fb"]{background:var(--fb)}
.social-links a[data-p="tt"]{background:var(--tt)}
.social-links a[data-p="yt"]{background:var(--yt)}
.social-links a[data-p="tw"]{background:var(--tw)}
.social-links a[data-p="sp"]{background:var(--sp)}
.social-links a[data-p="am"]{background:var(--am)}
.social-links a[data-p="sc"]{background:var(--sc)}
.social-links a[data-p="td"]{background:var(--td)}
.social-links a[data-p="bc"]{background:var(--bc)}
.social-links a span.txt{color:#fff}

.subs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.subs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.subs-grid{grid-template-columns:1fr}}
.brand-badge{display:inline-block;padding:6px 10px;border:1px solid #2a2f3b;border-radius:999px;background:#161b27;color:#9db3d1;margin-bottom:10px}

.social-links a[data-p="th"]{background:var(--th)}

/* Hostinger-ready logo + Shopify enhancements */
.logo-img{height:42px;max-width:160px;object-fit:contain;border-radius:8px;margin-right:10px}
.logo .brand-text{white-space:nowrap}
.hero-logo{max-width:92%;max-height:290px;object-fit:contain;border-radius:16px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
.hero-img.logo-panel{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#111827,#0b0e13)!important}
.shopify-cta{display:inline-block;padding:10px 14px;border:1px solid #2a2f3b;border-radius:10px;background:#1a1f2a;color:#fff!important;text-decoration:none}
.aclass-theme .nav{background:rgba(16,8,24,.94)}
.aclass-theme .hero,.aclass-theme .section{border-top-color:#3b2750}
.aclass-theme .btn.primary{background:linear-gradient(135deg,#d7b56d,#8b5cf6);color:#0b0e13}
.aclass-theme .brand-badge{border-color:#8b5cf6;color:#e9d5ff}
@media(max-width:700px){.logo-img{height:34px;max-width:120px}.nav-inner{align-items:flex-start;gap:10px}.links{display:flex;flex-wrap:wrap}}