:root{
  --ink:#0a0b10;
  --ink-2:#0e0f17;
  --panel:#121425;
  --deep:#0b0b0f;
  --text:#ecedff;
  --muted:#a9add6;

  /* Purple theme */
  --vio:#8b5cff;
  --vio-2:#bd8bff;
  --vio-3:#5b36e6;

  --accent:#ff6b3d; /* for tiny pops */
  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(70% 50% at 10% -10%, rgba(139,92,255,.25), transparent 50%),
    radial-gradient(50% 40% at 110% -10%, rgba(93,58,230,.18), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:rgba(11,12,18,.6);
  backdrop-filter: blur(10px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800}
.nav a{color:var(--text); opacity:.9; text-decoration:none; margin-left:18px}
.wrap{max-width:1100px; margin:0 auto; padding:0 16px}

/* Hero */
.hero{position:relative; min-height:68vh; display:grid; place-items:center; overflow:hidden}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.75) saturate(1.1)}
.hero-veil{position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 40%, transparent, rgba(10,10,15,.65) 60%, rgba(10,10,15,.95))}
.hero-content{position:relative; text-align:center}
.hero h1{margin:0 0 8px; font-size:clamp(42px, 9vw, 110px); letter-spacing:.5px}
.stroke{color:transparent; -webkit-text-stroke: 1px rgba(255,255,255,.9)}
.glow{background:linear-gradient(90deg,var(--vio),var(--vio-2)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 42px rgba(139,92,255,.25)}
.tag{opacity:.9; margin:6px 0 16px}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* Buttons (normal) */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); color:var(--text); text-decoration:none; cursor:pointer;
  background:linear-gradient(180deg,#1a1d33,#111527);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.35)}
.btn.disabled{opacity:.5; cursor:not-allowed}

/* === Split Button === */
.btn-split{
  --bg:#121527;
  display:inline-grid;
  grid-template-columns: 0.8fr 1.2fr; /* Details narrower than Posts */
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  isolation:isolate;
  transform: translateZ(0);
}

.btn-split .half{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:12px 18px;
  text-decoration:none; font-weight:600;
  background:var(--bg);
  transition: background .25s ease, transform .12s ease, color .25s ease;
  color:var(--text);
}

/* Thin divider between halves */
.btn-split .half + .half{
  box-shadow: inset 1px 0 0 rgba(255,255,255,.08);
}

/* Subtle lift on hover */
.btn-split .half:hover{ transform: translateY(-1px); }

/* Right half (Posts) */
.btn-split .posts{
  background: linear-gradient(180deg,#181c33,#121527);
}

/* Left half (Details) — lively holo sweep + skew */
.btn-split .details{
  transform: skewX(-8deg);
  padding-left:20px; padding-right:20px;
  background:
    radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.8), rgba(255,255,255,0) 60%),
    linear-gradient(90deg, #5b36e6, #8b5cff, #bd8bff);
  background-blend-mode: screen, normal;
  color:#0b0b10;
}

/* Keep text straight inside Details */
.btn-split .details span{ display:inline-block; transform: skewX(8deg); }

/* Glow ring on hover */
.btn-split:hover{ box-shadow: 0 14px 38px rgba(139,92,255,.28); }

/* === Mobile CTA row fix (compact centered buttons) === */
@media (max-width:520px){
  .cta-row{
    flex-direction: column;
    align-items: center;  /* center the buttons */
    gap: 10px;
  }

  /* Both buttons same neat size */
  .btn-slant,
  .btn-split{
    width: 90%;        /* shrink a bit from full */
    max-width: 280px;  /* keeps them compact */
  }
}


/* Button style from Uiverse.io */
.find-us-btn {
  color: white;
  text-decoration: none;
  font-size: 25px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.find-us-btn::before {
  margin-left: auto;
}

.find-us-btn::after,
.find-us-btn::before {
  content: '';
  width: 0%;
  height: 2px;
  background: #f44336;
  display: block;
  transition: 0.5s;
}

.find-us-btn:hover::after,
.find-us-btn:hover::before {
  width: 100%;
}

.find-us-section {
  text-align: center;
  margin: 40px 0 20px;
}



/* SLANTED BUTTONS (only use twice on the page) */
.btn-slant{
  --grad: radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), #ffffff, rgba(255,255,255,0)),
           linear-gradient(90deg, var(--vio-3), var(--vio), var(--vio-2));
  border:none; color:#0b0b10; font-weight:800; letter-spacing:.2px;
  background: var(--grad);
  background-blend-mode: screen, normal;
  transform: skewX(-12deg);
  position:relative; isolation:isolate;
}
.btn-slant::after{
  content:""; position:absolute; inset:-2px; border-radius:14px; z-index:-1;
  background:linear-gradient(90deg,rgba(139,92,255,.5),rgba(189,139,255,.0),rgba(139,92,255,.5));
  filter:blur(14px); opacity:.75;
}
.btn-slant:hover{background-position: 60% 40%}

/* Middle Highlight (contrasting card) */
.highlight{
  margin-top:-24px;  /* tucks under hero a bit */
  padding:24px 0 8px;
}
.hl-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:18px;
  background:linear-gradient(180deg, #1a1535, #141126);
  border:1px solid rgba(139,92,255,.35);
  border-radius:22px; box-shadow: var(--shadow);
  padding:16px; overflow:hidden;
}
@media (max-width:900px){.hl-grid{grid-template-columns:1fr}}
.hl-art{width:100%; height:100%; object-fit:cover; border-radius:16px}
.hl-copy h2{margin:.2rem 0 0}
.hl-copy p{margin:.5rem 0 1rem; color:var(--text)}
.chips{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.chip{font-size:12px; padding:6px 10px; border-radius:999px; color:#cdbdff; background:#1e153a; border:1px solid rgba(189,139,255,.25)}

/* Section shared */
.section{padding:40px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.section-head h2{margin:0}
.link{color:var(--text); opacity:.85; text-decoration:none}
.socials a{margin-left:12px; color:var(--muted); text-decoration:none}

/* Post Feed */
.post-card{
  background:linear-gradient(180deg, var(--panel), #0c0d14);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; overflow:hidden; box-shadow: var(--shadow);
  margin:14px 0;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:0;
}
@media (max-width:900px){.post-card{grid-template-columns:1fr}}
.thumb{position:relative; aspect-ratio:16/9; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .25s}
.post-card:hover .thumb img{transform:scale(1.06)}
.play{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:44px; text-shadow:0 6px 26px rgba(0,0,0,.55)}
.meta{padding:14px 16px}
.meta h3{margin:.3rem 0 .5rem}
.stats{display:flex; gap:16px; color:var(--muted)}
.lock-overlay{
  position:absolute; inset:auto 8% 8% 8%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#ff7a3a; color:#1a0f05; font-weight:800;
  padding:12px 18px; border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.45)
}
.post-card.locked .thumb::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(1px);
}

/* Store (pure black background as requested) */
.store{background:#000}
.store .section-head h2{color:#fff}
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){.product-grid{grid-template-columns:1fr 1fr}}
.product{
  background:linear-gradient(180deg,#0a0a0a,#080808);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden; box-shadow: var(--shadow);
}
.product img{width:100%; height:auto; display:block; aspect-ratio:1/1; object-fit:cover}
.product h3{margin:12px 12px 8px; color:#f5f5f5}
.price{margin:0 12px 12px; color:#c8c8c8}
.product .btn{margin:0 12px 14px}

/* Footer */
.site-footer{padding:28px 16px; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,.06); background:#000}