:root {
  --rose-25: #fff9fb;
  --rose-50: #fff1f6;
  --rose-100: #f9d9e1;
  --rose-200: #f6c6d3;
  --rose-300: #f2adc2;
  --rose-400: #ea8bab;
  --rose-500: #d85d87;
  --rose-600: #b94871;
  --peach: #ffd2b3;
  --cream: #fffaf5;
  --sand: #f7ece1;
  --lav: #e4d8f6;
  --ink: #2b2027;
  --muted: #74666d;
  --line: rgba(43, 32, 39, .08);
  --white: rgba(255,255,255,.82);
  --shadow: 0 28px 72px rgba(181, 87, 117, .18);
  --shadow-soft: 0 18px 42px rgba(181, 87, 117, .12);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 20px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Vazirmatn", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% -5%, rgba(246, 198, 211, .95), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(255, 210, 179, .42), transparent 28%),
    radial-gradient(circle at 0% 72%, rgba(228, 216, 246, .38), transparent 28%),
    linear-gradient(145deg, #fffaf7 0%, #fff1f6 46%, #f8efe7 100%);
  color: var(--ink);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .28; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.aurora {
  position: fixed; width: 44vw; height: 44vw; border-radius: 50%; filter: blur(68px); opacity: .44; pointer-events: none; z-index: 0;
  animation: drift 14s ease-in-out infinite alternate;
}
.aurora-a { background: rgba(242, 173, 194, .9); top: 4%; right: -16%; }
.aurora-b { background: rgba(214, 198, 223, .9); bottom: 10%; left: -16%; animation-delay: -4s; }
@keyframes drift { to { transform: translate3d(2rem,-1rem,0) scale(1.08); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes breathe { 0%,100%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-2px) scale(1.018);} }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(255,190,210,0); } 100% { box-shadow: 0 0 0 0 rgba(255,190,210,0); } }
.app-shell { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 24px 18px 110px; }
.topbar {
  position: sticky; top: 12px; z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; min-height: 86px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,241,246,.74));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-soft);
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo-mark {
  position: relative; display: grid; place-items: center;
  width: clamp(164px, 22vw, 220px); height: 72px;
  padding: 8px 18px; border-radius: 26px; overflow: hidden;
  background: rgba(255,255,255,.94); box-shadow: 0 18px 40px rgba(181,87,117,.16), inset 0 0 0 1px rgba(255,255,255,.9);
  animation: breathe 5.8s ease-in-out infinite;
}
.logo-mark .ring {
  content: ""; position: absolute; inset: -2px; border-radius: 28px;
  background: conic-gradient(from 0deg, rgba(216,93,135,.02), rgba(242,173,194,.95), rgba(255,210,179,.65), rgba(228,216,246,.72), rgba(216,93,135,.02));
  animation: spinSlow 10s linear infinite;
}
.logo-mark::after {
  content: ""; position: absolute; inset: 3px; border-radius: 23px; background: rgba(255,255,255,.96);
}
.logo-mark img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand strong {
  display: block; font-size: 1.22rem; font-weight: 900; color: var(--rose-600); letter-spacing: -.03em;
}
.brand-copy span:last-child { display: block; color: #8a7078; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.pill, .ghost, .filter-btn, .gateway, .inline-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 999px;
  transition: .25s ease; white-space: nowrap;
}
.pill, .ghost, .filter-btn, .gateway, .inline-link { background: rgba(255,255,255,.88); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(43,32,39,.08); }
.pill:hover, .ghost:hover, .filter-btn:hover, .gateway:hover, .inline-link:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(43,32,39,.12), 0 10px 22px rgba(43,32,39,.08); }
.pill-primary {
  background: linear-gradient(135deg, var(--rose-600), var(--rose-500) 55%, var(--rose-300));
  color: #fff; box-shadow: 0 18px 34px rgba(181,87,117,.24);
}
.ghost.small { min-height: 36px; padding: 0 12px; font-size: .78rem; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 410px; gap: 22px; align-items: stretch; margin-top: 22px; }
.hero-copy, .hero-visual, .card, .quiz-card, .login-box, .media-card, .course-card, .soft-card {
  border: 1px solid rgba(255,255,255,.82);
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,241,246,.68));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}
.hero-copy { position: relative; overflow: hidden; border-radius: var(--radius-xl); min-height: 560px; padding: clamp(26px,4vw,54px); }
.hero-copy::after { content: ""; position: absolute; inset-inline-start: -16%; bottom: -28%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,210,179,.34), transparent 62%); }
.hero-logo-stage {
  position: relative; display: inline-grid; place-items: center; width: min(360px, 78vw); min-height: 132px;
  margin: 0 0 22px; padding: 18px 24px; border-radius: 36px;
  background: rgba(255,255,255,.82); box-shadow: 0 26px 68px rgba(181,87,117,.16), inset 0 0 0 1px rgba(255,255,255,.9);
  overflow: hidden; isolation: isolate;
}
.logo-halo {
  position: absolute; width: 460px; height: 460px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 45deg, transparent 0 14%, rgba(242,173,194,.9) 24%, transparent 34%, rgba(255,210,179,.7) 54%, transparent 66%, rgba(216,93,135,.34) 84%, transparent 100%);
  animation: spinSlow 13s linear infinite;
}
.hero-logo-stage img { width: min(280px, 64vw); height: auto; object-fit: contain; }
.kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.82); color: var(--rose-600); box-shadow: inset 0 0 0 1px rgba(216,93,135,.14); font-weight: 700; font-size: .84rem; }
.hero h1 { margin: 22px 0 16px; font-size: clamp(2.6rem, 6vw, 5.8rem); line-height: .97; letter-spacing: -.07em; }
.hero h1 span, .eyebrow, .price, .metric strong { color: var(--rose-600); }
.hero h1 span {
  display: block; font-family: "Cormorant Garamond", "Playfair Display", serif; direction: ltr;
  letter-spacing: .03em; font-size: .46em; margin-top: 10px;
}
.lead { max-width: 720px; margin: 0 0 24px; color: #574e52; line-height: 2.08; font-size: 1.02rem; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.metric { padding: 16px 14px; border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(43,32,39,.05); }
.metric strong { display: block; font-size: 1.35rem; }
.metric span { display: block; margin-top: 4px; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.hero-visual { position: relative; overflow: hidden; border-radius: var(--radius-xl); min-height: 560px; background: linear-gradient(180deg, #fff, #fff1f6); }
.hero-visual img { width:100%; height:100%; object-fit: cover; object-position:center; filter: saturate(.92) contrast(1.03); }
.visual-shade { position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(255,246,249,.95) 100%); }
.float-card { position: absolute; right:18px; left:18px; bottom:18px; border-radius: 26px; background: rgba(255,255,255,.82); backdrop-filter: blur(18px); padding: 16px; box-shadow: 0 18px 40px rgba(43,32,39,.12); }
.float-card strong { display:block; font-size: 1.08rem; }
.float-card p { margin: 8px 0 0; color: var(--muted); line-height: 1.75; font-size: .88rem; }
.orbit { position: absolute; top: 24px; left: 24px; width: 90px; height: 90px; border-radius: 50%; display:grid; place-items:center; text-align:center; background: linear-gradient(135deg, rgba(249,217,225,.9), rgba(255,255,255,.82)); color: var(--rose-600); box-shadow: 0 18px 36px rgba(181,87,117,.16); font-weight: 800; }
.section { margin-top: 26px; }
.section-head { display:grid; grid-template-columns: 1fr minmax(260px, 400px); gap: 16px; align-items:end; margin-bottom: 16px; }
.eyebrow { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; margin-bottom: 8px; }
.section-head h2 { margin: 0; font-size: clamp(1.7rem, 3.8vw, 2.6rem); letter-spacing: -.04em; }
.section-head p { margin: 0; color: var(--muted); line-height: 1.95; }
.about-grid { display:grid; grid-template-columns: 360px minmax(0,1fr); gap: 16px; }
.about-photo { min-height: 430px; overflow:hidden; border-radius: var(--radius-xl); background: linear-gradient(180deg, #fff, #f8eef3); box-shadow: var(--shadow); }
.about-photo.compact { min-height: 320px; }
.about-photo img { width:100%; height:100%; object-fit: cover; }
.card, .soft-card, .quiz-card, .login-box { padding: 22px; border-radius: var(--radius-xl); }
.card h3, .soft-card h3, .login-box h3 { margin: 0 0 14px; font-size: 1.24rem; }
.card p, .soft-card p, .login-box p { color: var(--muted); line-height: 1.92; }
.feature-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.feature { display:flex; gap: 12px; align-items:flex-start; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.74); box-shadow: inset 0 0 0 1px rgba(43,32,39,.05); }
.feature span:first-child { width: 34px; height: 34px; flex: 0 0 auto; display:grid; place-items:center; border-radius: 50%; background: var(--rose-50); color: var(--rose-600); font-weight: 800; }
.feature strong { display:block; }
.feature small { display:block; color: var(--muted); line-height: 1.7; margin-top: 4px; }
.filters { display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filter-btn.active, .gateway.active { background: linear-gradient(135deg, var(--rose-100), var(--peach)); color: #4b2431; }
.courses-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.course-card { display:flex; flex-direction:column; overflow:hidden; border-radius: var(--radius-lg); min-height: 440px; }
.course-top { position:relative; height: 220px; }
.course-top img { width:100%; height:100%; object-fit: cover; }
.course-top::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(43,32,39,.04), rgba(43,32,39,.35)); }
.tag-row { position:absolute; top: 12px; right: 12px; left: 12px; display:flex; justify-content:space-between; gap: 8px; z-index: 1; }
.tag { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.84); border: 1px solid rgba(216,93,135,.08); color: var(--rose-600); font-size: .75rem; }
.course-body { display:flex; flex-direction: column; gap: 10px; padding: 18px; flex:1; }
.course-body h3 { margin:0; font-size: 1.08rem; line-height: 1.55; }
.course-body p { margin:0; color:var(--muted); line-height:1.75; font-size: .88rem; }
.session-chips { display:flex; flex-wrap: wrap; gap: 8px; }
.session-chips span { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.72); color: #7a5b66; font-size: .73rem; }
.price-row { display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; margin-top:auto; }
.price { font-weight: 900; }
.tiny { color: var(--muted); font-size: .76rem; text-align: left; }
.course-actions { display:flex; gap: 8px; padding: 0 18px 18px; }
.course-actions button { flex:1; }
.quiz-options { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.option { padding: 16px; border-radius: 20px; text-align: right; background: rgba(255,255,255,.76); box-shadow: inset 0 0 0 1px rgba(43,32,39,.07); }
.option.active { background: linear-gradient(135deg, var(--rose-600), var(--rose-500)); color:#fff; }
.recommendation { margin-top:16px; padding:18px; border-radius:24px; background: linear-gradient(135deg, rgba(246,198,211,.56), rgba(255,255,255,.84)); }
.recommendation strong { font-size: 1.2rem; }
.studio-grid { display:grid; grid-template-columns: .94fr 1.06fr; gap: 16px; }
.live-panel {
  position:relative; overflow:hidden; min-height: 470px; padding: 28px; border-radius: var(--radius-xl);
  background: linear-gradient(145deg, #5a3c49, #8b6070 60%, #f1b9c9); color: #fff; box-shadow: var(--shadow);
}
.live-panel::before { content: ""; position:absolute; inset:auto -18% -36% -18%; height: 70%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); }
.live-badge { display:inline-flex; gap: 8px; align-items:center; padding: 9px 13px; border-radius:999px; background: rgba(255,255,255,.16); color:#fff; }
.pulse-dot { width:10px; height:10px; border-radius:50%; background:#ffd0dd; box-shadow: 0 0 0 0 rgba(255,208,221,.7); animation: pulse 1.4s infinite; }
.live-panel h3 { position: relative; margin: 24px 0 12px; font-size: clamp(2rem, 5vw, 3.4rem); line-height: .98; letter-spacing: -.06em; color:#fff; }
.live-panel p { position:relative; color: rgba(255,255,255,.95); line-height: 2; }
.mini-stats { position: relative; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 18px 0 24px; }
.mini-stats div { padding: 14px; border-radius: 20px; background: rgba(255,255,255,.16); }
.mini-stats strong { display:block; font-family: "Cormorant Garamond", serif; letter-spacing: .04em; font-size: 1.05rem; }
.mini-stats small { display:block; margin-top: 5px; color: rgba(255,255,255,.88); }
.studio-stack { display:grid; gap:16px; }
.schedule-card, .info-card { background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,241,246,.74)); }
.live-schedule { display:grid; gap: 10px; }
.schedule-item { display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(43,32,39,.06); }
.schedule-item strong { display:block; color: var(--ink); }
.schedule-item small { display:block; color:var(--muted); margin-top:4px; }
.studio-mini-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.info-card h4 { margin:0 0 8px; font-size: 1rem; color: var(--rose-600); }
.info-card p { margin:0; color: var(--muted); }
.featured-player { display:grid; grid-template-columns: .95fr 1.05fr; gap: 16px; margin-bottom: 16px; }
.featured-meta { padding: 24px; border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,241,246,.72)); border: 1px solid rgba(255,255,255,.82); box-shadow: var(--shadow-soft); }
.featured-meta h3 { margin: 4px 0 10px; font-size: 1.5rem; }
.featured-meta p { margin: 0 0 18px; color: var(--muted); line-height: 1.95; }
.source-row, .source-line { display:flex; align-items:center; justify-content:space-between; gap: 10px; color: #8a6873; font-size: .8rem; }
.media-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.media-card { overflow:hidden; border-radius: var(--radius-lg); }
.media-card.active { box-shadow: 0 24px 60px rgba(181,87,117,.22); transform: translateY(-2px); }
.media-thumb { position:relative; height: 180px; overflow:hidden; }
.media-thumb img { width:100%; height:100%; object-fit: cover; }
.play-btn-big { position:absolute; inset:0; display:grid; place-items:center; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18)); }
.play-circle { width:66px; height:66px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.86); color: var(--ink); font-size: 1.2rem; box-shadow: 0 16px 30px rgba(43,32,39,.16); }
.media-body { padding: 16px; }
.media-body h3 { margin:0 0 8px; font-size: 1rem; }
.media-body p { margin:0 0 12px; color: var(--muted); line-height: 1.75; font-size: .86rem; }
.inline-link { min-height: 38px; padding: 0 14px; font-size: .82rem; }
.video-wrap { position: relative; overflow:hidden; border-radius: 28px; background: #151316; aspect-ratio: 16/9; }
.video-wrap.premium { box-shadow: 0 28px 68px rgba(43,32,39,.22); }
.video-wrap video, .video-wrap iframe { width:100%; height:100%; border:0; display:block; }
.audio-stage { position: relative; width:100%; height:100%; }
.audio-stage img { width:100%; height:100%; object-fit: cover; filter: saturate(.92) brightness(.88); }
.audio-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap: 14px; padding: 24px; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(24,18,23,.75)); color:#fff; }
.audio-overlay strong { font-size: 1.15rem; }
.audio-overlay audio { width: 100%; }
.profile-grid { display:grid; grid-template-columns: .92fr 1.08fr; gap: 16px; }
.input { width:100%; height:50px; border:0; outline:0; border-radius: 18px; padding: 0 16px; background: rgba(255,255,255,.86); box-shadow: inset 0 0 0 1px rgba(43,32,39,.09); margin-top: 10px; color: var(--ink); }
.input:focus { box-shadow: inset 0 0 0 2px rgba(216,93,135,.32); }
.helper { color: var(--muted); font-size: .84rem; line-height: 1.8; }
.overview-cards { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 14px 0 18px; }
.mini-card { padding: 14px; border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(43,32,39,.05); text-align: center; }
.mini-card strong { display:block; font-size: 1.2rem; color: var(--rose-600); }
.mini-card span { display:block; color: var(--muted); font-size: .8rem; margin-top: 4px; }
.practice-list { display:grid; gap: 10px; }
.practice-item { display:flex; align-items:center; gap: 12px; padding: 14px; border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(43,32,39,.06); }
.practice-icon { width:42px; height:42px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background: var(--rose-50); color: var(--rose-600); font-weight: 800; }
.practice-item strong { display:block; }
.practice-item small { display:block; color: var(--muted); margin-top: 4px; }
.practice-item .pill { margin-inline-start: auto; }
.contact-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.contact-card { display:flex; flex-direction:column; gap: 8px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.74); box-shadow: inset 0 0 0 1px rgba(43,32,39,.06), var(--shadow-soft); min-height: 136px; }
.contact-card .ico { font-size: 1.6rem; color: var(--rose-600); }
.contact-card strong { font-size: .98rem; }
.contact-card small { color: var(--muted); direction:ltr; text-align:right; line-height: 1.7; }
.faq-card small { direction: rtl; text-align: right; }
.bottom-nav {
  position: fixed; z-index: 30; right: 50%; transform: translateX(50%); bottom: calc(14px + var(--safe-bottom));
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; width: min(720px, calc(100% - 22px));
  padding: 8px; border-radius: 999px; background: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.88); backdrop-filter: blur(22px); box-shadow: 0 20px 50px rgba(43,32,39,.18);
}
.nav-btn { height: 54px; border-radius: 999px; background: transparent; color: var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; flex-direction: column; font-size: .7rem; }
.nav-ico { font-size: 1.13rem; line-height:1; }
.nav-btn.active { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(249,217,225,.94)); color: var(--rose-600); box-shadow: inset 0 0 0 1px rgba(216,93,135,.12); }
.modal-backdrop { position: fixed; inset:0; z-index: 80; display:grid; place-items:center; padding:18px; background: rgba(43,32,39,.42); backdrop-filter: blur(8px); }
.modal { width: min(780px, 100%); max-height: calc(100vh - 42px); overflow:auto; border-radius: 32px; background: rgba(255,255,255,.96); box-shadow: 0 40px 120px rgba(43,32,39,.34); border:1px solid rgba(255,255,255,.9); }
.modal-head { position: sticky; top:0; z-index: 1; display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 16px 18px; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); border-bottom:1px solid var(--line); }
.modal-head strong { font-size: 1.12rem; }
.modal-body { padding: 18px; }
.close { width: 40px; height: 40px; border-radius: 50%; background: #f8eef3; }
.payment-box { display:grid; gap: 12px; }
.gateway-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.gateway { padding: 16px; border-radius: 20px; text-align: right; }
.toast { position: fixed; z-index: 90; right:50%; transform: translateX(50%); bottom: calc(92px + var(--safe-bottom)); padding: 12px 16px; border-radius:999px; color:#fff; background:#2b2027; box-shadow: 0 16px 30px rgba(43,32,39,.24); opacity:0; pointer-events:none; transition:.25s ease; }
.toast.show { opacity:1; transform: translateX(50%) translateY(-4px); }
.fade-in { opacity:0; transform: translateY(18px); transition: .65s cubic-bezier(.22,.61,.36,1); }
.fade-in.visible { opacity:1; transform: translateY(0); }
[dir="ltr"] { text-align: left; }
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 420px; }
  .featured-player, .about-grid, .studio-grid, .profile-grid { grid-template-columns: 1fr; }
  .courses-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .app-shell { padding: 14px 12px 110px; }
  .topbar { top: 8px; border-radius: 28px; min-height: 82px; align-items:flex-start; }
  .logo-mark { width: 150px; height: 66px; padding: 8px 16px; }
  .brand strong { font-size: 1rem; }
  .brand-copy span:last-child { max-width: 120px; }
  .top-actions .ghost:not(:first-child) { display:none; }
  .hero-copy { min-height: auto; padding: 26px 18px; border-radius: 28px; }
  .hero-logo-stage { width: 100%; min-height: 120px; margin-bottom: 16px; }
  .hero-logo-stage img { width: min(250px, 70vw); }
  .hero h1 { font-size: clamp(2.4rem, 14vw, 4.1rem); }
  .lead { font-size: .96rem; }
  .hero-visual { min-height: 390px; border-radius: 28px; }
  .metrics, .feature-list, .courses-grid, .quiz-options, .gateway-grid, .contact-grid, .media-grid, .studio-mini-grid, .overview-cards, .mini-stats { grid-template-columns: 1fr; }
  .section-head { display:block; }
  .section-head p { margin-top: 10px; }
  .bottom-nav { grid-template-columns: repeat(6, 1fr); border-radius: 28px; }
  .nav-btn span:last-child { font-size: .62rem; }
  .nav-btn { height: 50px; }
  .pill { min-height: 40px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Bahar Yoga v4 precision fixes: logo, nav visibility, live contrast, in-app frame player --- */
:root {
  --font-en-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-en-soft: "Cormorant Garamond", "Vazirmatn", serif;
}
.logo-mark {
  width: clamp(188px, 25vw, 270px);
  height: 84px;
  padding: 4px 8px;
  border-radius: 0;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
}
.logo-mark::after { display: none !important; }
.logo-mark .ring {
  inset: -10px;
  border-radius: 999px;
  opacity: .55;
  filter: blur(.2px);
  background: conic-gradient(from 0deg, rgba(216,93,135,.00), rgba(242,173,194,.45), rgba(255,210,179,.38), rgba(228,216,246,.35), rgba(216,93,135,.00));
}
.logo-mark img {
  object-fit: contain;
  transform: scale(1.08);
  filter: drop-shadow(0 12px 18px rgba(43,32,39,.12)) contrast(1.08);
}
.brand-copy strong, .hero h1 span, .eyebrow, .kicker, .mini-card strong, .tool-card strong, .media-notes strong {
  font-family: var(--font-en-display);
  letter-spacing: .015em;
}
.brand-copy strong { font-family: "Vazirmatn", var(--font-en-display); }
.hero-logo-stage {
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,241,246,.58));
}
.hero-logo-stage img {
  width: min(330px, 74vw);
  filter: drop-shadow(0 18px 26px rgba(43,32,39,.13)) contrast(1.08);
}
.live-panel {
  background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.18), transparent 34%), linear-gradient(145deg, #331922 0%, #7f2748 52%, #b55775 100%) !important;
  color: #fff !important;
}
.live-panel h3, .live-panel p, .live-badge { color: #fff !important; }
.live-panel p { color: rgba(255,255,255,.94) !important; }
.live-white { background: #fff !important; color: var(--rose-600) !important; }
.live-ghost { background: rgba(255,255,255,.16) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.38) !important; }
.live-feature-row { position:relative; display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.live-feature-row span { padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.15); color:#fff; font-size:.82rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.schedule-item em { display:block; margin-top:6px; color: var(--rose-600); font-style:normal; font-size:.78rem; }
.studio-tools, .media-notes { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:16px; }
.tool-card, .media-notes div { padding:18px; border-radius:24px; background:linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,241,246,.68)); box-shadow:var(--shadow-soft); border:1px solid rgba(255,255,255,.82); }
.tool-card strong, .media-notes strong { display:block; color:var(--rose-600); font-size:1.04rem; }
.tool-card span, .media-notes span { display:block; margin-top:8px; color:var(--muted); line-height:1.75; font-size:.86rem; }
.modal-media { width:min(1080px, 100%); }
.site-wrap { aspect-ratio:auto; height:min(74vh, 780px); background:#fff; }
.site-frame { width:100%; height:100%; border:0; background:#fff; display:block; }
.player-note { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:12px 14px; border-radius:20px; background:rgba(255,241,246,.78); color:var(--muted); }
.audio-panel { display:grid; place-items:center; gap:12px; padding:18px; height:100%; background:linear-gradient(145deg,#fff1f6,#fffaf7); }
.audio-panel img { width:120px; height:120px; object-fit:cover; border-radius:28px; box-shadow:var(--shadow-soft); }
.audio-panel audio { width:min(420px, 100%); }
.media-card { min-height: 360px; }
.source-line .inline-link { text-decoration:none; }
.fade-in { will-change: transform, opacity; }
@media (max-width: 760px) {
  .topbar { min-height: 82px; padding: 10px 12px; }
  .logo-mark { width: 156px; height: 66px; }
  .brand { gap: 8px; }
  .brand-copy span:last-child { display:none; }
  .top-actions .pill-primary { min-width: 56px; padding: 0 12px; }
  .hero-logo-stage img { width:min(292px, 78vw); }
  .studio-tools, .media-notes { grid-template-columns:1fr; }
  .site-wrap { height:72vh; }
  .player-note { align-items:flex-start; flex-direction:column; }
}

/* --- Bahar Yoga v5: mobile-first wellness app polish + page transition --- */
:root {
  --pantone-rose-quartz: #F7CAC9;
  --pantone-viva-magenta: #BE3455;
  --pantone-peach-fuzz: #FFBE98;
  --pantone-orchid: #D7A9E3;
  --pantone-sage: #B7C9B3;
  --font-en-ui: "Quicksand", "Vazirmatn", system-ui, sans-serif;
  --font-display: "Quicksand", "Vazirmatn", system-ui, sans-serif;
  --mobile-pad: clamp(12px, 4vw, 18px);
}
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[lang="en"] body, html[lang="en"] button, html[lang="en"] input { font-family: var(--font-en-ui); }
html[lang="en"] .hero h1, html[lang="en"] .eyebrow, html[lang="en"] .brand-copy strong,
html[lang="en"] .tool-card strong, html[lang="en"] .media-notes strong { font-family: var(--font-en-ui); letter-spacing: -.02em; }
.app-shell { width: min(1180px, 100%); padding-inline: var(--mobile-pad); }
.page-stage { animation: pageRise .55s cubic-bezier(.2,.75,.2,1) both; transform-origin: 50% 10%; }
@keyframes pageRise { from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.topbar {
  width: min(100%, 1120px);
  margin-inline: auto;
  min-height: 72px;
  padding: 8px 12px;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,241,246,.82));
}
.brand { flex: 1 1 auto; max-width: min(58vw, 520px); }
.brand-copy { min-width: 0; }
.logo-mark {
  width: clamp(118px, 16vw, 168px) !important;
  height: clamp(48px, 7vw, 64px) !important;
  min-width: clamp(118px, 16vw, 168px);
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: visible !important;
}
.logo-mark .ring {
  inset: -5px !important;
  border-radius: 999px !important;
  opacity: .38 !important;
  filter: blur(2px) !important;
}
.logo-mark img {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 14px rgba(80, 45, 62, .12)) contrast(1.08) !important;
}
.brand-copy strong { font-size: clamp(.95rem, 2.4vw, 1.15rem); line-height: 1.35; color: #7f2748; }
.brand-copy span:last-child { font-size: clamp(.68rem, 1.8vw, .82rem); color: #8f6d79; }
.top-actions { flex: 0 0 auto; gap: 6px; }
.pill, .ghost, .filter-btn, .gateway, .inline-link { min-height: 40px; padding: 0 13px; font-size: .88rem; }
.profile-pill { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
.hero { grid-template-columns: minmax(0,1fr) minmax(310px,410px); }
.hero-copy, .hero-visual, .card, .soft-card, .quiz-card, .login-box, .course-card, .media-card, .live-panel { overflow: hidden; }
.hero-logo-stage { width: min(360px, 100%); min-height: 126px; }
.hero-logo-stage img { width: min(320px, 76vw) !important; }
.hero h1 { font-size: clamp(2.25rem, 7vw, 5rem); letter-spacing: -.055em; }
.hero h1 span { font-family: var(--font-en-ui) !important; font-weight: 600; letter-spacing: .01em; color: #9c3b5c; }
.lead { font-size: clamp(.95rem, 2.2vw, 1.05rem); line-height: 2; }
.section { scroll-margin-top: 96px; }
.section-head h2 { font-size: clamp(1.45rem, 5vw, 2.55rem); line-height: 1.45; }
.section-head p { font-size: clamp(.9rem, 2.2vw, 1rem); }
.courses-grid, .media-grid, .contact-grid { width: 100%; }
.course-card, .media-card, .contact-card, .tool-card, .media-notes div, .schedule-item, .feature, .practice-item { min-width: 0; }
.course-body h3, .media-body h3, .card h3 { word-break: normal; overflow-wrap: anywhere; }
.live-panel {
  background: radial-gradient(circle at 18% 8%, rgba(255,255,255,.2), transparent 36%), linear-gradient(145deg, #3a1825 0%, #842846 55%, #b24268 100%) !important;
  color: #fff !important;
}
.live-panel h3 { color: #fff !important; text-shadow: 0 3px 18px rgba(0,0,0,.18); }
.live-panel p, .live-panel small, .live-panel span { color: rgba(255,255,255,.94) !important; }
.live-feature-row span { color: #fff !important; }
.live-white { color: #8a2042 !important; background: #fff !important; }
.live-ghost { color: #fff !important; }
.video-experience {
  position: relative;
  min-height: min(64vh, 620px);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(40,24,32,.56), rgba(166,52,86,.48)), var(--poster) center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.video-experience::before { content:""; position:absolute; inset:0; backdrop-filter: blur(1px); background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.18), transparent 35%); }
.video-glass { position: relative; z-index: 1; width: min(520px, calc(100% - 36px)); padding: 24px; border-radius: 30px; text-align: center; background: rgba(255,255,255,.18); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.34); color:#fff; box-shadow: 0 30px 80px rgba(43,32,39,.26); }
.video-play-mark { width: 76px; height:76px; margin: 0 auto 14px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.88); color:#a72f58; box-shadow: 0 18px 42px rgba(0,0,0,.18); }
.video-glass strong { display:block; font-size: clamp(1.25rem, 4vw, 1.8rem); }
.video-glass p { line-height: 1.85; color: rgba(255,255,255,.93); }
.video-progress { height: 7px; border-radius: 999px; background: rgba(255,255,255,.28); overflow:hidden; margin: 18px 0 10px; }
.video-progress i { display:block; height:100%; width:42%; border-radius:inherit; background: linear-gradient(90deg,#fff,#ffd0df); animation: progressBreath 2.8s ease-in-out infinite alternate; }
@keyframes progressBreath { to { width: 74%; } }
.video-controls { display:flex; justify-content:space-between; gap: 10px; font-size:.82rem; color:rgba(255,255,255,.85); }
.page-bloom { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.page-bloom::before {
  content:""; position:absolute; left: var(--x); top: var(--y); width: 18px; height:18px; border-radius:50%; transform: translate(-50%,-50%) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.98) 0 17%, rgba(255,241,246,.97) 19% 42%, rgba(247,202,201,.95) 43% 70%, rgba(190,52,85,.82) 100%);
  box-shadow: 0 0 80px rgba(190,52,85,.22);
  transition: transform .72s cubic-bezier(.16,.84,.25,1);
}
.page-bloom.is-open::before { transform: translate(-50%,-50%) scale(180); }
.page-bloom.is-close { animation: bloomFade .38s ease forwards; }
@keyframes bloomFade { to { opacity:0; } }
.bloom-orb { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%) scale(.8); width: 190px; height: 126px; display:grid; place-items:center; gap:8px; opacity:0; transition:.38s ease; }
.page-bloom.is-open .bloom-orb { opacity:1; transform:translate(-50%,-50%) scale(1); }
.bloom-orb img { width:160px; max-width:86vw; filter: drop-shadow(0 16px 28px rgba(43,32,39,.16)); }
.bloom-orb em { font-style:normal; color:#7a2340; font-weight:800; background:rgba(255,255,255,.62); padding:5px 12px; border-radius:999px; }
.nav-home-orb {
  position: fixed; z-index: 31; right: 50%; transform: translateX(50%); bottom: calc(78px + var(--safe-bottom));
  width: 92px; height: 52px; border-radius: 999px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,241,246,.9)); border:1px solid rgba(255,255,255,.95); box-shadow: 0 18px 42px rgba(93,45,65,.18); backdrop-filter: blur(18px);
}
.nav-home-orb::before { content:""; position:absolute; inset:-5px; border-radius:inherit; background:conic-gradient(from 0deg, rgba(190,52,85,.04), rgba(247,202,201,.8), rgba(255,190,152,.62), rgba(215,169,227,.55), rgba(190,52,85,.04)); z-index:-1; animation: spinSlow 9s linear infinite; filter: blur(2px); }
.nav-home-orb img { width: 72px; height: 34px; object-fit: contain; filter: contrast(1.08); }
.bottom-nav {
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  width: min(640px, calc(100% - 20px));
  border-radius: 30px;
  padding: 7px;
  gap: 4px;
}
.nav-btn { min-width:0; height: 54px; padding: 0 3px; }
.nav-ico { font-size: 1rem; }
.nav-btn span:last-child { max-width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 860px) {
  .app-shell { padding: 10px var(--mobile-pad) calc(132px + var(--safe-bottom)); }
  .topbar { top: 8px; min-height: 66px; border-radius: 26px; padding: 7px 10px; }
  .brand { gap: 7px; max-width: 68vw; }
  .logo-mark { width: 116px !important; min-width: 116px !important; height: 48px !important; }
  .brand-copy strong { font-size: .94rem; }
  .brand-copy span:last-child { display: none !important; }
  .top-actions { gap: 5px; }
  .action-share, .action-install { display:none !important; }
  .lang-pill { min-width: 42px; padding:0 10px; }
  .profile-pill { max-width: 78px; padding: 0 10px; font-size: .78rem; }
  .hero { display:flex; flex-direction:column; gap: 14px; margin-top: 14px; }
  .hero-copy { padding: 20px 14px; border-radius: 28px; }
  .hero-logo-stage { width: 100%; min-height: 106px; padding: 14px; border-radius: 28px; }
  .hero-logo-stage img { width: min(280px, 82vw) !important; }
  .kicker { font-size:.78rem; padding: 7px 11px; }
  .hero h1 { margin: 16px 0 12px; font-size: clamp(2.1rem, 13vw, 3.45rem); line-height: 1.05; letter-spacing: -.045em; }
  .hero h1 span { font-size: .4em; margin-top: 7px; }
  .lead { font-size:.94rem; line-height: 1.95; }
  .hero-buttons { gap: 8px; }
  .hero-buttons .pill { flex: 1 1 auto; min-width: 132px; }
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px; }
  .metric { padding: 12px 10px; border-radius: 18px; }
  .metric strong { font-size: 1.1rem; }
  .metric span { font-size:.72rem; }
  .hero-visual { min-height: 330px; border-radius: 28px; }
  .orbit { width: 68px; height:68px; font-size:.82rem; top: 14px; left: 14px; }
  .float-card { right: 12px; left: 12px; bottom: 12px; padding: 13px; border-radius: 22px; }
  .section { margin-top: 18px; }
  .section-head { display:block !important; margin-bottom: 12px; }
  .section-head h2 { font-size: clamp(1.35rem, 6vw, 2rem); }
  .section-head p { margin-top: 8px; line-height: 1.85; }
  .about-grid, .featured-player, .studio-grid, .profile-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .about-photo { min-height: 300px; border-radius: 28px; }
  .card, .soft-card, .quiz-card, .login-box { padding: 16px; border-radius: 28px; }
  .feature-list, .quiz-options, .courses-grid, .media-grid, .contact-grid, .gateway-grid, .studio-mini-grid, .overview-cards, .mini-stats, .studio-tools, .media-notes { grid-template-columns: 1fr !important; gap: 10px; }
  .filters { overflow-x:auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display:none; }
  .filter-btn { flex: 0 0 auto; }
  .course-card { min-height: auto; border-radius: 28px; }
  .course-top { height: 172px; }
  .course-body { padding: 15px; gap: 8px; }
  .course-body h3 { font-size: 1rem; }
  .course-body p { font-size:.84rem; }
  .price-row { align-items:flex-start; }
  .course-actions { padding: 0 15px 15px; }
  .course-actions .pill { min-width:0; padding-inline: 8px; }
  .live-panel { min-height: auto; padding: 20px 16px; border-radius: 28px; }
  .live-panel h3 { font-size: clamp(1.8rem, 10vw, 2.65rem); line-height: 1.12; }
  .live-panel p { font-size:.92rem; line-height: 1.9; }
  .live-feature-row span { font-size:.78rem; }
  .schedule-item { flex-direction:column; align-items:stretch; padding: 14px; border-radius: 20px; }
  .schedule-item .pill { width: 100%; }
  .media-card { min-height: auto; border-radius: 28px; }
  .media-thumb { height: 190px; }
  .media-body { padding: 15px; }
  .source-line { align-items: stretch; gap: 8px; }
  .source-line .pill, .source-line .inline-link { flex:1; min-width:0; padding-inline: 8px; }
  .contact-card { min-height: 112px; padding: 15px; border-radius: 22px; }
  .input { width:100%; }
  .bottom-nav { bottom: calc(12px + var(--safe-bottom)); height: 64px; width: min(430px, calc(100% - 16px)); border-radius: 26px; }
  .nav-home-orb { bottom: calc(79px + var(--safe-bottom)); width: 82px; height: 48px; }
  .nav-home-orb img { width: 66px; height: 31px; }
  .nav-btn { height: 50px; gap: 3px; border-radius: 20px; }
  .nav-btn span:last-child { font-size: .59rem; }
  .modal-backdrop { padding: 10px; align-items: end; }
  .modal { width: 100%; max-height: calc(100svh - 20px); border-radius: 28px 28px 18px 18px; }
  .modal-head { padding: 12px 14px; }
  .modal-body { padding: 14px; }
  .modal-body .about-grid { grid-template-columns: 1fr !important; }
  .video-experience { min-height: 54vh; border-radius: 22px; }
  .video-glass { width: calc(100% - 24px); padding: 18px; border-radius: 24px; }
  .video-play-mark { width: 62px; height:62px; }
  .player-note { flex-direction:column; align-items:stretch; }
}
@media (max-width: 390px) {
  .app-shell { padding-inline: 10px; }
  .topbar { padding-inline: 8px; }
  .logo-mark { width: 104px !important; min-width:104px !important; height:44px !important; }
  .brand { max-width: 62vw; }
  .brand-copy strong { font-size: .86rem; }
  .profile-pill { max-width: 62px; font-size: .72rem; }
  .pill { font-size: .8rem; }
  .nav-btn span:last-child { font-size: .54rem; }
  .nav-ico { font-size: .93rem; }
  .hero-logo-stage img { width: min(250px, 82vw) !important; }
  .hero h1 { font-size: clamp(1.95rem, 12vw, 3rem); }
}
@supports (height: 100dvh) {
  .modal { max-height: calc(100dvh - 20px); }
  .video-experience { min-height: min(58dvh, 620px); }
}