/* Shankhatheertha Coming Soon — vanilla CSS */
:root {
  --purple: #42164f;
  --purple-deep: #32103f;
  --purple-mid: #6b3b83;
  --purple-soft: #bda0d2;
  --lavender: #eee5f5;
  --ink: #492056;
  --white: #fff;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  background: #fdfbff;
}
a { color: inherit; }
.landing {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 17%, rgba(255,255,255,.98) 0, rgba(255,255,255,.94) 26%, rgba(247,241,251,.85) 60%, rgba(232,218,243,.9) 100%),
    #fbf8ff;
}
.ambient {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  opacity: .34;
  filter: blur(1px);
}
.ambient-left {
  width: 36rem; height: 36rem; left: -17rem; top: -14rem;
  border-radius: 50%;
  border: 1px solid #d7c5e4;
  box-shadow: 0 0 0 18px #f4edf9, 0 0 0 19px #d7c5e4, 0 0 0 42px #f4edf9, 0 0 0 43px #d7c5e4;
}
.ambient-right {
  width: 26rem; height: 26rem; right: -16rem; top: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,153,211,.3), transparent 70%);
}
.water-glow {
  position: absolute; z-index: -1; left: -8%; right: -8%; bottom: 7rem; height: 17rem;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.98) 0, rgba(218,195,235,.48) 46%, transparent 73%);
  filter: blur(8px);
}
.topbar {
  width: min(100% - 3.5rem, 1380px);
  margin: 1.4rem auto 0;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px;
}
.brand-mini {
  font-family: Montserrat, sans-serif; font-size: .75rem; font-weight: 800;
  letter-spacing: .16em; text-decoration: none; opacity: .8;
}
.notify-link {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .7rem 1.2rem; border: 1px solid rgba(66,22,79,.75);
  border-radius: 999px; text-decoration: none; font-size: .9rem;
  background: rgba(255,255,255,.62); transition: background .2s, transform .2s;
}
.notify-link:hover { background: #fff; transform: translateY(-2px); }
.mail-icon { font-size: 1rem; }
.hero {
  width: min(100% - 2rem, 900px);
  margin: .2rem auto 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; z-index: 2;
}
.logo-wrap {
  width: clamp(180px, 23vw, 320px);
  height: clamp(180px, 23vw, 320px);
  display: grid; place-items: center; overflow: hidden;
  margin: 0 auto -.2rem;
}
.brand-logo {
  display: block; width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
}
.brand-copy { width: 100%; }
.brand-copy h1 {
  margin: 0; font-family: Montserrat, sans-serif; font-size: clamp(1.55rem, 3.1vw, 2.55rem);
  line-height: 1.15; font-weight: 800; letter-spacing: -.035em;
}
.product-line {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: .55rem auto 0; font-family: Montserrat, sans-serif;
  font-size: clamp(.95rem, 2vw, 1.35rem); letter-spacing: .13em;
}
.product-line span { width: clamp(25px, 7vw, 90px); height: 1px; background: var(--purple-mid); }
.product-line b { font-weight: 500; white-space: nowrap; }
.tagline { margin: .65rem 0 0; font-size: .83rem; letter-spacing: .26em; }
.tagline i { font-style: normal; margin: 0 .3rem; font-weight: 700; }
.coming-soon { margin-top: .7rem; }
.eyebrow {
  margin: 0 0 .3rem; text-transform: uppercase; font-size: .7rem;
  letter-spacing: .19em; color: #765382; font-weight: 600;
}
.coming-soon h2 {
  margin: 0; font-family: Montserrat, sans-serif; font-weight: 300;
  font-size: clamp(2.55rem, 6.5vw, 4.55rem); letter-spacing: .035em; line-height: 1.13;
}
.coming-soon h2 strong { font-weight: 800; letter-spacing: -.045em; }
.title-ornament { display: flex; justify-content: center; align-items: center; gap: .2rem; margin: .25rem auto .6rem; }
.title-ornament span { width: 26px; height: 2px; background: var(--purple-mid); }
.title-ornament b { font-size: .9rem; }
.intro { margin: 0 auto; font-size: clamp(.9rem, 1.5vw, 1.08rem); line-height: 1.6; letter-spacing: .01em; }
.benefits {
  position: relative; z-index: 3;
  width: min(100% - 2rem, 650px);
  margin: auto auto 5.5rem;
  padding-top: 2.2rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.benefit {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center; color: var(--ink); font-size: .72rem; line-height: 1.35;
  letter-spacing: .15em; font-weight: 500;
}
.benefit + .benefit { border-left: 1px solid rgba(101,62,121,.35); }
.benefit-icon {
  display: grid; place-items: center; width: 49px; height: 49px;
  border: 1px solid var(--purple); border-radius: 50%; background: rgba(255,255,255,.35);
}
.benefit-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.water-scene {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: 3.1rem; height: 19rem;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(223,205,238,.08) 25%, rgba(196,167,218,.24) 68%, rgba(255,255,255,.65) 100%);
}
.distant-hill {
  position: absolute; bottom: 3rem; width: 75%; height: 12rem;
  background: linear-gradient(180deg, rgba(194,163,216,.12), rgba(170,128,199,.3));
  filter: blur(7px); opacity: .75;
}
.hill-one { left: -12%; border-radius: 46% 55% 0 0 / 70% 70% 0 0; transform: rotate(5deg); }
.hill-two { right: -15%; height: 10rem; border-radius: 55% 42% 0 0 / 65% 70% 0 0; transform: rotate(-7deg); }
.water-rings {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  width: min(70vw, 780px); height: 100px; border-radius: 50%;
  border: 2px solid rgba(108,57,137,.32);
  box-shadow: 0 0 0 7px rgba(255,255,255,.22), 0 0 0 12px rgba(112,67,139,.16), 0 0 0 19px rgba(255,255,255,.25), 0 0 0 25px rgba(112,67,139,.12);
}
.water-rings span { position: absolute; inset: 10px 7%; border: 1px solid rgba(99,48,129,.32); border-radius: 50%; }
.water-rings span:nth-child(2) { inset: 22px 17%; }
.water-rings span:nth-child(3) { inset: 32px 29%; }
.water-rings span:nth-child(4) { inset: 39px 40%; }
.water-drop {
  position: absolute; bottom: 5.8rem; left: 50%; width: 15px; height: 20px;
  transform: translateX(-50%); background: linear-gradient(135deg, #fff, #b79aca 70%, #633477);
  border-radius: 70% 30% 65% 35%; rotate: -45deg;
  box-shadow: 0 0 12px rgba(87,39,112,.25);
}
.splash { position: absolute; bottom: 3.7rem; width: 120px; height: 125px; }
.splash-left { left: 1%; transform: rotate(-18deg); }
.splash-right { right: 1%; transform: scaleX(-1) rotate(-18deg); }
.splash i {
  position: absolute; bottom: 0; left: 25px; width: 32px; height: 100px;
  border-left: 4px solid rgba(105,58,134,.56); border-radius: 80% 0 0 0; transform: rotate(18deg);
}
.splash i:nth-child(2) { left: 49px; height: 76px; transform: rotate(34deg); }
.splash i:nth-child(3) { left: 8px; height: 60px; transform: rotate(-10deg); }
.splash i:nth-child(4) { left: 68px; height: 45px; transform: rotate(48deg); }
.footer {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  height: 5.6rem; display: flex; justify-content: center; align-items: center;
  background: linear-gradient(110deg, #32103f, #522064 55%, #32103f); color: #fff;
}
.footer-wave {
  position: absolute; left: -5%; right: -5%; top: -1.6rem; height: 2.7rem;
  background: inherit; border-top: 2px solid rgba(226,205,240,.75);
  border-radius: 50% 48% 0 0 / 48% 55% 0 0; transform: rotate(-.5deg);
}
.footer p {
  z-index: 1; margin: 0; display: flex; align-items: center; justify-content: center; gap: 1rem;
  font-size: .8rem; letter-spacing: .2em;
}
.footer p span { width: 50px; height: 1px; background: rgba(255,255,255,.7); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

@media (min-width: 1000px) and (min-height: 850px) {
  .hero { margin-top: .8rem; }
  .logo-wrap { width: 300px; height: 300px; }
  .coming-soon { margin-top: .9rem; }
}
@media (max-width: 640px) {
  .landing { min-height: 100svh; }
  .topbar { width: calc(100% - 2rem); margin-top: .9rem; }
  .brand-mini { font-size: .58rem; letter-spacing: .1em; }
  .notify-link { padding: .55rem .8rem; font-size: .78rem; gap: .4rem; }
  .hero { width: calc(100% - 1.4rem); margin-top: .6rem; }
  .logo-wrap { width: clamp(160px, 48vw, 220px); height: clamp(160px, 48vw, 220px); }
  .brand-copy h1 { font-size: clamp(1.3rem, 6vw, 1.8rem); letter-spacing: -.04em; }
  .product-line { gap: .4rem; font-size: clamp(.75rem, 3.5vw, 1rem); letter-spacing: .08em; }
  .product-line span { width: 25px; }
  .tagline { font-size: .7rem; margin-top: .5rem; }
  .coming-soon { margin-top: 1.25rem; }
  .eyebrow { font-size: .58rem; letter-spacing: .11em; }
  .coming-soon h2 { font-size: clamp(2.15rem, 10vw, 3.4rem); }
  .intro { max-width: 420px; font-size: .88rem; line-height: 1.55; }
  .desktop-break { display: none; }
  .benefits { width: calc(100% - 1.5rem); margin-bottom: 5.2rem; padding-top: 1.7rem; }
  .benefit { font-size: .58rem; letter-spacing: .08em; gap: .45rem; }
  .benefit-icon { width: 42px; height: 42px; }
  .benefit-icon svg { width: 22px; height: 22px; }
  .water-scene { height: 14rem; bottom: 2.8rem; }
  .distant-hill { height: 8rem; bottom: 2.5rem; }
  .water-rings { width: 85vw; height: 58px; bottom: .8rem; }
  .water-rings span:nth-child(1) { inset: 7px 7%; }
  .water-rings span:nth-child(2) { inset: 14px 18%; }
  .water-rings span:nth-child(3) { inset: 21px 30%; }
  .water-rings span:nth-child(4) { inset: 27px 40%; }
  .water-drop { bottom: 3.9rem; width: 11px; height: 15px; }
  .splash { transform: scale(.65) rotate(-18deg); transform-origin: bottom left; left: -1rem; bottom: 2.6rem; }
  .splash-right { right: -1rem; left: auto; transform: scale(.65) scaleX(-1) rotate(-18deg); transform-origin: bottom right; }
  .footer { height: 4.7rem; }
  .footer-wave { top: -1.1rem; height: 2rem; }
  .footer p { gap: .55rem; font-size: .62rem; letter-spacing: .12em; }
  .footer p span { width: 20px; }
}
@media (max-width: 380px) {
  .brand-mini { max-width: 130px; line-height: 1.4; }
  .notify-link { font-size: .72rem; }
  .logo-wrap { width: 155px; height: 155px; }
  .coming-soon { margin-top: 1rem; }
  .intro { font-size: .8rem; }
  .benefit { font-size: .52rem; }
  .footer p { letter-spacing: .07em; }
}
@media (max-height: 760px) and (min-width: 641px) {
  .logo-wrap { width: 205px; height: 205px; }
  .hero { margin-top: -.2rem; }
  .coming-soon { margin-top: .45rem; }
  .benefits { padding-top: 1.1rem; margin-bottom: 4.8rem; }
  .water-scene { height: 14rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}