:root{
  --bg1:#0b1a1f;
  --bg2:#0f2230;
  --accent:#5eead4; /* teal-mint */
  --accent-2:#a7f3d0;
  --text:#e6f1f3;
  --muted:#b8c7cc;
  --card:#0f1f26cc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(94,234,212,0.07), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(167,243,208,0.06), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

.hero{
  position:relative;
  min-height: 88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 4vw, 28px);
}
/* Mist layers */
.mist, .mist2{
  position:absolute; inset:0;
  background: radial-gradient(500px 140px at 40% 60%, rgba(255,255,255,0.05), transparent 60%),
              radial-gradient(600px 200px at 70% 30%, rgba(255,255,255,0.04), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
}
.mist2{ filter: blur(18px); opacity:.7; mix-blend-mode:screen }

/* Yoga silhouette SVG positioned */
.silhouette{
  position:absolute; inset:auto 0 0 50%;
  transform: translateX(-50%);
  width:min(60vmin, 520px);
  opacity:.12;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.6));
  pointer-events:none;
}

/* Card */
.card{
  width:min(900px, 94vw);
  background: var(--card);
  border-radius: 24px;
  padding: clamp(18px, 4vw, 30px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.topbar{
  position:absolute; top:14px; left:16px;
  opacity:.9; font-weight:600; letter-spacing:.3px;
}
.lang-switch{
  position:absolute; top:14px; right:16px; display:flex; gap:8px;
}
.lang-switch button{
  background:#ffffff12; border:1px solid #ffffff26; color:var(--text);
  padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:600;
}
.lang-switch button.active{ background:var(--accent); color:#052b2f; border-color:transparent }

h1{
  font-size: clamp(28px, 5vw, 46px);
  margin: 0 0 8px 0;
}
p.lead{ color:var(--muted); margin:.2rem 0 1.2rem 0 }

.buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 10px }
.btn{
  appearance:none; border:none; cursor:pointer; font-weight:700;
  padding:12px 18px; border-radius:14px; transition: all .25s ease;
}
.btn-primary{ background:var(--accent); color:#052b2f }
.btn-secondary{ background:#ffffff12; color:var(--text); border:1px solid #ffffff2b }

/* hover glow */
.btn-primary:hover, .btn-secondary:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(94,234,212,0.12), 0 18px 30px rgba(5, 20, 25, .45);
}

/* Grid */
.grid{ display:grid; gap:16px; grid-template-columns: 1fr; margin-top:20px }
.info, .about{ background:#ffffff10; border:1px solid #ffffff1f; border-radius:18px; padding:16px }
.info h3, .about h3{ margin-top:0 }

@media (min-width: 860px){
  .grid{ grid-template-columns: 1.2fr .9fr }
}

footer{
  text-align:center; color:#a7c3c8; padding:30px 10px 50px;
  font-size:14px;
}
footer .om{ display:inline-flex; align-items:center; gap:8px; opacity:.85 }
footer .om span{ font-weight:700; color:var(--accent) }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }