@import url("/tokens.css?v=12");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Serif+Telugu:wght@500;600;700&family=Noto+Sans+Telugu:wght@400;700&family=Noto+Serif+Tamil:wght@500;600;700&family=Noto+Sans+Tamil:wght@400;700&family=Noto+Serif+Devanagari:wght@500;600;700&family=Noto+Sans+Devanagari:wght@400;700&family=Noto+Serif+Kannada:wght@500;600;700&family=Noto+Sans+Kannada:wght@400;700&family=Noto+Serif+Malayalam:wght@500;600;700&family=Noto+Sans+Malayalam:wght@400;700&family=Noto+Serif+Bengali:wght@500;600;700&family=Noto+Sans+Bengali:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans); color:var(--c-ink); line-height:1.6;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--stone-25) 0%, transparent 55%),
    var(--c-ivory);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
em{font-style:italic}

/* the living Śrī-Yantra — a faint watermark, not a backdrop. Low opacity + a
   radial mask so it dissolves well before the content, keeping the page clean
   and minimal (the ivory + type should lead, Apple-style). */
#gl{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.10;
  -webkit-mask-image:radial-gradient(58% 48% at 72% 14%, #000 0%, rgba(0,0,0,.5) 38%, transparent 68%);
  mask-image:radial-gradient(58% 48% at 72% 14%, #000 0%, rgba(0,0,0,.5) 38%, transparent 68%)}
@media (max-width:760px){ #gl{ opacity:.06 } }

.eyebrow{font-family:var(--font-deva); color:var(--c-saffron); font-size:14px;
  letter-spacing:.14em; text-transform:none; margin:0 0 18px}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(20px,5vw,56px); background:rgba(244,238,226,.82);
  -webkit-backdrop-filter:saturate(120%) blur(10px); backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--c-line)}
.brand{display:inline-flex; align-items:center; gap:8px}
.brandmark{width:28px; height:28px; display:block; flex:0 0 auto}
.word-deva{font-family:var(--font-deva); font-size:22px; color:var(--c-saffron); line-height:1}
.word-latin{font-family:var(--font-serif); font-weight:600; font-size:20px; letter-spacing:.01em; color:var(--c-ink)}
.nav{display:flex; align-items:center; gap:clamp(16px,3vw,34px); font-size:15px}
.nav a{color:var(--c-ink-2); transition:color .2s var(--ease-out)}
.nav a:hover{color:var(--c-saffron)}
.nav .link-strong{color:var(--c-ink); font-weight:500}

/* ── shared section rhythm ───────────────────────────────────────────────── */
main{position:relative; z-index:1}
section{max-width:980px; margin:0 auto; padding:clamp(80px,12vw,140px) clamp(20px,5vw,40px)}
h1{font-family:var(--font-serif); font-weight:600; letter-spacing:-.015em; color:var(--c-ink);
  font-size:clamp(38px,7.6vw,80px); line-height:1.04; margin:0}
h1 em{color:var(--c-saffron)}
h2{font-family:var(--font-serif); font-weight:500; letter-spacing:-.01em; color:var(--c-ink);
  font-size:clamp(34px,5vw,56px); line-height:1.06; margin:0}
.lead{color:var(--c-ink-2); font-size:clamp(17px,2.1vw,21px); line-height:1.62; max-width:30ch; margin:24px 0 0}
.sec-lead{color:var(--c-ink-2); font-size:clamp(16px,1.9vw,19px); line-height:1.62; max-width:62ch; margin:18px 0 0}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(70px,12vw,120px); padding-bottom:clamp(60px,9vw,110px)}
.cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:40px}
.btn{font:inherit; font-weight:500; font-size:16px; color:var(--c-ivory-2); background:var(--c-saffron);
  padding:14px 28px; border-radius:var(--r-pill); transition:.2s var(--ease-out)}
.btn:hover{background:var(--c-saffron-deep); transform:translateY(-1px)}
.btn-text{font-weight:500; color:var(--c-ink); border-bottom:1px solid var(--c-line-2); padding-bottom:2px; transition:.2s}
.btn-text:hover{color:var(--c-saffron); border-color:var(--c-saffron)}

/* ── why / comparison — hairline rows, no boxes ──────────────────────────── */
.why h2,.features h2{margin-bottom:0}
.rows{margin-top:48px; border-top:1px solid var(--c-line)}
.row{display:grid; grid-template-columns:1.1fr 1.3fr 1.3fr; gap:24px; align-items:baseline;
  padding:20px 4px; border-bottom:1px solid var(--c-line)}
.row .job{font-family:var(--font-serif); font-size:22px; color:var(--c-ink)}
.row .old{color:var(--c-ink-3); font-size:15px}
.row .new{color:var(--c-ink); font-size:15px}
.row .new::before{content:"—  "; color:var(--c-saffron)}
@media(max-width:680px){
  .row{grid-template-columns:1fr; gap:4px; padding:18px 2px}
  .row .old{order:3} .row .new{order:2; font-weight:500}
}

/* ── features — airy grid, hairline top rule ─────────────────────────────── */
.feat-grid{margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--c-line); border:1px solid var(--c-line)}
.feat{background:var(--c-ivory); padding:30px 26px}
.feat h3{font-family:var(--font-serif); font-weight:500; font-size:24px; line-height:1.15; margin:0 0 8px; color:var(--c-ink)}
.feat p{margin:0; color:var(--c-ink-2); font-size:15px; line-height:1.55}
@media(max-width:860px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}

/* ── start / demo ────────────────────────────────────────────────────────── */
.start-card{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(24px,5vw,56px);
  background:
    radial-gradient(130% 100% at 100% 0%, var(--c-saffron-tint) 0%, transparent 52%),
    var(--c-ivory-2);
  border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:clamp(28px,5vw,52px); box-shadow:var(--sh)}
.creds{align-self:center; border-left:1px solid var(--c-line); padding-left:clamp(20px,4vw,40px)}
.creds-label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 14px}
.cred{display:flex; justify-content:space-between; gap:18px; padding:9px 0; border-bottom:1px solid var(--c-line); font-size:15px}
.cred span{color:var(--c-ink-2)} .cred b{font-family:var(--font-serif); font-size:19px; color:var(--c-ink); letter-spacing:.04em}
.creds-note{margin:14px 0 0; font-size:13px; color:var(--c-ink-3)}
@media(max-width:720px){.start-card{grid-template-columns:1fr} .creds{border-left:0; border-top:1px solid var(--c-line); padding-left:0; padding-top:24px}}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{max-width:980px; margin:0 auto; padding:60px clamp(20px,5vw,40px) 80px; border-top:1px solid var(--c-line); text-align:center}
footer .word-deva{font-size:26px; display:inline-block; margin-bottom:10px}
footer p{margin:4px 0; color:var(--c-ink-2); font-size:15px}
footer .muted{color:var(--c-ink-3); font-size:13px; margin-top:10px}

/* gentle entrance — never leaves content hidden if JS/anim is off */
@media (prefers-reduced-motion:no-preference){
  section,.start-card{animation:rise .7s var(--ease-out) both}
  @keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
}

/* ── assets + motion (refined) ──────────────────────────────────────────────── */
/* JS (anim.js) sets the initial hidden state and animates in, so content is
   visible by default if JS/Motion is unavailable — never stuck hidden. */
.hero{max-width:1180px; display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,6vw,72px); align-items:center}
.hero-copy{min-width:0}
.hero-art{margin:0; overflow:visible}
.hero-art img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:var(--r-lg); border:1px solid var(--c-line); box-shadow:var(--sh-lift);
  will-change:transform; transform:translateY(var(--py,0))}
@media(max-width:820px){.hero{grid-template-columns:1fr} .hero-art{display:none}}

.tradition h2{margin-bottom:0}
.gallery{margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px)}
.plate{margin:0}
.plate img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:var(--r); border:1px solid var(--c-line); box-shadow:var(--sh);
  will-change:transform; transform:translateY(var(--py,0))}
.plate figcaption{margin-top:14px; font-family:var(--font-serif); font-style:italic;
  font-size:16px; color:var(--c-ink-2)}
@media(max-width:760px){.gallery{grid-template-columns:1fr; gap:30px} .plate img{aspect-ratio:16/10}}

/* ── Parinaya Parichayam — featured section ─────────────────────────── */
.parinaya{max-width:1180px; display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(32px,5vw,64px); align-items:center;
  padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(40px,6vw,72px)}
.parinaya-copy{min-width:0}
.par-lockup{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.par-lockup img{width:40px; height:40px; flex:0 0 auto}
.par-lockup span{font-family:var(--font-serif); font-weight:600; font-size:20px; letter-spacing:.01em; color:var(--c-ink)}
.parinaya-art{margin:0; position:relative; min-width:0}
.parinaya-art img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:var(--r-lg); box-shadow:var(--sh-lift)}
.parinaya-art figcaption{margin-top:12px; font-family:var(--font-serif); font-style:italic;
  font-size:16px; color:var(--c-ink-2); text-align:center; line-height:1.5}
.par-points{list-style:none; padding:0; margin:22px 0 26px; display:flex; flex-direction:column; gap:11px}
.par-points li{display:flex; gap:11px; align-items:flex-start;
  font-size:clamp(15px,1.7vw,17px); color:var(--c-ink-2); line-height:1.5}
.par-points li span{flex:0 0 auto; color:var(--c-saffron-deep); font-family:var(--font-deva);
  width:22px; text-align:center; font-size:16px; line-height:1.55}
@media(max-width:820px){ .parinaya{grid-template-columns:1fr; gap:26px} }

/* hero pill — frontloads Parinaya under the headline */
.hero-pill{display:inline-flex; align-items:center; gap:8px; margin-top:22px; text-decoration:none;
  font-size:14px; color:var(--c-ink-2); background:var(--c-glass); border:1px solid var(--c-line-2);
  border-radius:var(--r-pill); padding:8px 15px; transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out)}
.hero-pill:hover{transform:translateY(-1px); box-shadow:var(--sh)}
.hero-pill b{color:var(--c-ink); font-weight:600}
.hero-pill .dot{color:var(--c-saffron); font-size:9px; animation:pulse 2.4s ease-in-out infinite}
.hero-pill .arr{color:var(--c-saffron-deep)}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
/* highlighted feature card */
.feat-star{background:linear-gradient(180deg,rgba(181,96,42,.06),transparent); border:1px solid var(--c-saffron); border-radius:var(--r)}
.feat-star h3 .tag{display:inline-block; font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--c-saffron-deep);
  border-radius:var(--r-pill); padding:2px 8px; margin-left:8px; vertical-align:middle}