
:root{
  --bg:#150812;
  --bg2:#0e040b;
  --text:#ffffff;
  --muted:#f3cfe0;
  --primary:#970747; /* violet */
  --secondary:#970747; /* coral */
  --accent:#ffffff; /* aqua */
  --card:#1c0a16;
  --border:rgba(255,255,255,.09);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 10% 0%, #1b1d3a 0%, var(--bg) 50%, var(--bg2) 100%);color:var(--text);font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;border-radius:18px}
.wrap{max-width:1120px;margin:0 auto;padding:0 1rem}

.nav-bar{position:sticky;top:0;backdrop-filter:blur(10px);background:rgba(10,10,20,.55);border-bottom:1px solid var(--border);z-index:50}
.nav-bar .wrap{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:800}
#nav{display:flex;gap:.5rem;align-items:center}
#nav a{color:#fff;opacity:1;padding:.5rem .9rem;border-radius:999px;background:linear-gradient(90deg,rgba(151,7,71,.6),rgba(255,255,255,.4));border:1px solid var(--border);box-shadow:0 6px 14px rgba(0,0,0,.25)}
#nav a:hover{opacity:1;filter:brightness(1.15);background:linear-gradient(90deg,rgba(151,7,71,.6),rgba(255,255,255,.4))}
.pill{border:1px solid var(--border)}
.nav-btn{display:none;background:none;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.4rem .6rem}
@media(max-width:900px){
  .nav-btn{display:block}
  #nav{position:absolute;right:1rem;top:58px;background:#121330;border:1px solid var(--border);padding:.6rem;border-radius:14px;display:none;flex-direction:column;box-shadow:var(--shadow)}
  #nav.open{display:flex}
}

.hero{position:relative;overflow:hidden}
.hero .copy, .hero .media{position:relative;z-index:2}
.hero .blob{z-index:1}
.hero .wave{z-index:0;pointer-events:none}

.skew{transform:skewY(-3deg);padding:3.4rem 0 3.2rem}
.skew > *{transform:skewY(3deg)}
.blob{position:absolute;filter:blur(40px);opacity:.6;animation:float 12s ease-in-out infinite}
.b1{width:520px;height:520px;background:radial-gradient(circle at 30% 30%, var(--primary), transparent 60%);top:-120px;left:-120px}
.b2{width:520px;height:520px;background:radial-gradient(circle at 70% 60%, var(--secondary), transparent 60%);right:-140px;top:80px;animation-duration:16s}
@keyframes float{50%{transform:translateY(-20px) scale(1.03)}}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:150px;fill:#0b0c1a}

.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.grad{background:linear-gradient(90deg,#ffffff,#970747,#ffffff);-webkit-background-clip:text;background-clip:text;color:transparent}
.copy h1{font-size:clamp(2.2rem,4vw,3.4rem);margin:.2rem 0 1rem}
.btn{display:inline-flex;gap:.5rem;align-items:center;padding:.78rem 1.1rem;border-radius:14px;font-weight:700;border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.primary{background:linear-gradient(90deg,#970747,#ffffff);color:#fff;border:none;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.ghost{background:transparent;color:#fff}
.cta{display:flex;gap:.6rem;flex-wrap:wrap}
.adbox{margin-top:1rem;border:1px dashed var(--border);color:var(--muted);padding:.8rem;border-radius:12px;text-align:center}
.stack{position:relative;perspective:1000px}
.stack img{box-shadow:var(--shadow)}
.stack .float{position:absolute;right:-16px;bottom:-16px;transform:rotate(-3deg) translateZ(0);animation:drift 6s ease-in-out infinite}
@keyframes drift{50%{transform:rotate(0deg) translate(4px, -4px)}}

.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.4rem 0;margin:1rem auto}
.track{display:inline-block;white-space:nowrap;animation:scroll 24s linear infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.features{padding:2rem 0}
.grid-3{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
.tile{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--border);padding:1rem;border-radius:16px;box-shadow:var(--shadow)}
.icon{font-size:1.6rem;color:var(--accent)}
.tilt{transform-style:preserve-3d;will-change:transform}

.asanas{padding:2rem 0}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.mosaic figure{margin:0;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.mosaic figcaption{padding:.5rem 0 1rem;text-align:center;color:var(--muted)}

.blog{padding:2rem 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
.card img{margin-bottom:.6rem}

.pagehead{padding:2.5rem 0 1.5rem;border-bottom:1px solid var(--border)}
.section-title{margin:.2rem 0 1rem}

.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:2rem 0}
.panel{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;padding:1rem}
.check{list-style:'✔  ';padding-left:1.2rem}
.badge{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--primary));padding:.3rem .6rem;border-radius:999px}

.services{padding:2rem 0}
.lift{transition:transform .25s ease}
.lift:hover{transform:translateY(-4px)}

.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.flow{border:1px dashed var(--border);border-radius:14px;padding:.8rem;text-align:center}

.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;padding:2rem 0}
.form .row{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem}
.form input,.form select,.form textarea{background:#0f1130;border:1px solid var(--border);border-radius:12px;color:var(--text);padding:.7rem}
.actions{display:flex;gap:.6rem;align-items:center}
.note{margin-top:.6rem;color:var(--muted)}
.side{height:max-content}

.article{padding:2rem 0}
.heroimg{width:100%;max-height:420px;object-fit:cover;border-radius:18px}

.site-foot{margin-top:2rem;border-top:1px solid var(--border);background:#0b0c1a}
.site-foot .foot-grid{display:grid;grid-template-columns:1.2fr .8fr .6fr;gap:1rem;padding:1.5rem 0}
.site-foot a{color:var(--text)}
.tiny{text-align:center;color:var(--muted);font-size:.85rem;padding:1rem 0 1.4rem;margin:0}

.center{text-align:center}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3,.cards{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .flow-grid{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
