/* Graha homepage. Loaded after style.css, which owns the shared paper/ink tokens, nav and footer conventions.
   Everything here is scoped to body.home so the sister pages are untouched. */

:root{
  --paper2:#EFE5D3;--marigold:#E7A33E;--turmeric:#D9B44A;--gold:#B8924A;
  --night:#141826;--night2:#2C3358;--dusk:#6B5878;--dawn:#F4C48A;--day-end:#F3DFB5;
  --serif:Fraunces,Georgia,"Times New Roman",serif;--sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --shadow:0 32px 60px -36px rgba(27,31,42,.45);
}
@media (prefers-color-scheme:dark){
  :root{--paper2:#1B2133;--marigold:#F0B453;--turmeric:#D9B44A;--gold:#D1AC62;--night:#0B0E1A;--night2:#232A47;--dusk:#5A4A6E;--dawn:#E3B27A;--day-end:#E6CFA6;--shadow:none}
}

/* ---------- base overrides of style.css ---------- */
.home{font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* :where() keeps these resets at element specificity so single-class rules below can set their own margins */
:where(.home) h1,:where(.home) h2,:where(.home) h3,:where(.home) p,:where(.home) ul{margin:0;padding:0;border:0}
:where(.home) ul{list-style:none}
:where(.home) a{border-bottom:0;color:inherit}
.home a:focus-visible,.home button:focus-visible{outline:2px solid var(--kumkum);outline-offset:4px;border-radius:2px}
.home img{max-width:100%}
.container{max-width:1120px;margin:0 auto;padding-inline:24px}
.eyebrow{margin:0 0 14px}
.bindu{display:inline-block;width:.28em;height:.28em;border-radius:50%;background:var(--kumkum);vertical-align:.08em;margin-left:.06em}

/* paper grain: one small turbulence tile, multiplied over the ground */
.home::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .11 0 0 0 0 .12 0 0 0 0 .16 .32 0 0 0 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
@media (prefers-color-scheme:dark){.home::before{mix-blend-mode:screen;opacity:.16}}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--rule)}
.wordmark{font:400 26px/1 var(--serif);color:var(--ink);text-decoration:none}
.top nav{display:flex;gap:24px}
.top nav a{margin:0;font:600 13px/1 var(--sans);letter-spacing:.02em;color:var(--ink2);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.top nav a:hover{border-bottom-color:var(--rule)}
@media (max-width:640px){.top nav a.sec{display:none}}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding-block:80px 72px}
.hero h1{font:400 clamp(76px,10vw,124px)/.95 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.015em;color:var(--ink)}
.hero h1 .bindu{width:.19em;height:.19em;vertical-align:.06em;margin-left:.04em}
.hero .sub{font:400 clamp(24px,3vw,34px)/1.2 var(--serif);font-variation-settings:"opsz" 72;color:var(--ink);margin-top:18px}
.hero .sub em{font-style:italic;font-variation-settings:"opsz" 72}
.hero .lede{font:400 18px/1.55 var(--sans);color:var(--ink2);max-width:50ch;margin-top:18px}
.cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px}
.cta-note{font:400 14px/1.45 var(--sans);color:var(--ink3);max-width:22ch}

.home .badge{display:inline-flex;align-items:center;gap:11px;padding:9px 20px 9px 15px;border-radius:12px;background:var(--ink);color:var(--paper);text-decoration:none;line-height:1;white-space:nowrap}
.badge svg{width:24px;height:28px;fill:currentColor;flex:none}
.badge small{display:block;font:400 11px/1.1 var(--sans);letter-spacing:.01em;opacity:.85}
.badge strong{display:block;font:600 21px/1.1 var(--sans);margin-top:2px;letter-spacing:-.01em}
.badge.soon{cursor:default}
.badge:hover{opacity:.92}

.hero-art{display:flex;flex-direction:column;align-items:center;gap:22px}
.moon-line{display:flex;align-items:center;gap:14px;align-self:flex-end;margin-right:6%}
.moon-line svg{width:44px;height:44px;flex:none}
.moon-line .k{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.moon-line .v{font:400 18px/1.2 var(--serif);color:var(--ink);margin-top:4px}
.moon-outline{fill:none;stroke:var(--ink);stroke-width:1.7}
.moon-dark{fill:var(--ink);fill-opacity:.85}
.moon-lit{fill:var(--ink);fill-opacity:.85;fill-rule:evenodd;display:none}
@media (prefers-color-scheme:dark){.moon-dark{display:none}.moon-lit{display:block}}

.lattice{width:min(100%,440px);height:auto;overflow:visible;display:block}
.lattice .ln{fill:none;stroke:var(--ink);stroke-width:.32;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.lattice .num{font:400 5.2px var(--serif);fill:var(--ink);text-anchor:middle}
.lattice .nm{font:600 2.5px var(--sans);letter-spacing:.14em;fill:var(--ink3);text-anchor:middle}
.lattice .pl{font:600 3.9px var(--sans);letter-spacing:.02em;fill:var(--kumkum);text-anchor:middle}
.lattice text{opacity:0}
.lattice .bd{fill:var(--kumkum);opacity:0}
.lattice.drawn .ln{animation:draw .62s cubic-bezier(.45,0,.2,1) forwards;animation-delay:var(--d,0s)}
.lattice.drawn text,.lattice.drawn .bd{animation:fade .55s ease-out forwards;animation-delay:var(--d,1.1s)}
.lattice.static .ln{stroke-dashoffset:0}
.lattice.static text,.lattice.static .bd{opacity:1}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ---------- sections ---------- */
.section{padding:88px 0;border-top:1px solid var(--rule)}
.section-head{max-width:58ch}
.home h2{font:400 clamp(32px,4vw,44px)/1.1 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.008em;color:var(--ink);margin-bottom:16px}
.body{font:400 17px/1.6 var(--sans);color:var(--ink2)}
.body+.body{margin-top:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split>.phone-col{display:flex;justify-content:center}
.split.rev>.phone-col{order:-1}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.6,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* phone mockup */
.phone{width:min(100%,300px);aspect-ratio:718/1560;border:1.5px solid var(--ink);border-radius:46px;padding:9px;background:var(--paper2);box-shadow:var(--shadow);flex:none}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:37px}

/* line glyphs: same 24-grid and size/14 stroke as the app */
.g{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.acc{fill:var(--kumkum);stroke:none}
.acc-stroke{fill:none;stroke:var(--kumkum)}
.g20{width:20px;height:20px}.g28{width:28px;height:28px}.g44{width:44px;height:44px}

/* ---------- today: dawn band + almanac rows ---------- */
.dawn{position:relative;height:152px;border-radius:16px;overflow:hidden;isolation:isolate;
  background:linear-gradient(90deg,var(--night2) 0%,var(--dusk) 22%,var(--dawn) 46%,var(--marigold) 70%,var(--day-end) 100%)}
.dawn .night{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--night) 0%,var(--night2) 55%,#3A3F66 100%)}
.dawn .horizon{position:absolute;left:0;right:0;top:68%;z-index:1;border-top:1px solid rgba(246,239,227,.5)}
.dawn .sun{position:absolute;left:6%;top:98%;z-index:1;width:34px;height:34px;border-radius:50%;background:var(--marigold);transform:translate(-50%,-50%);box-shadow:0 0 0 7px rgba(231,163,62,.22)}
.dawn .greet{position:absolute;left:22px;bottom:18px;z-index:3;font:400 24px/1 var(--serif);color:#F6EFE3;opacity:0;transition:opacity .6s ease-out}
.dawn .greet.on{opacity:1}
.dawn .mark{position:absolute;right:18px;top:16px;z-index:3;width:26px;height:26px;stroke:#F6EFE3;opacity:.9}
.dawn.done .night{opacity:0}
.dawn.done .sun{left:44%;top:30%}

.rows{margin-top:28px;border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:24px minmax(90px,118px) 1fr;column-gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--rule)}
.row .g{margin-top:1px}
.row .term{font:600 12px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.row .gloss{font:400 13px/1.3 var(--sans);color:var(--ink3);margin-top:3px}
.row .vals{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.row .val{font:400 19px/1.2 var(--serif);font-variation-settings:"opsz" 36;color:var(--ink);font-variant-numeric:tabular-nums}
.row .val.k{color:var(--kumkum)}
.row .note{font:400 13px/1.3 var(--sans);color:var(--ink3);font-variant-numeric:tabular-nums}

/* ---------- kundli: callouts + mini lattice ---------- */
.houses{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:center;margin-top:36px}
.mini{width:100%;height:auto;overflow:visible;display:block}
.mini .ln{fill:none;stroke:var(--ink);stroke-width:.5;stroke-linejoin:round}
.mini .h{fill:var(--marigold);fill-opacity:0;stroke:none;transition:fill-opacity .35s ease}
.mini .h.on{fill-opacity:.42}
.mini .num{font:400 7px var(--serif);fill:var(--ink);text-anchor:middle}
.mini .num.on{fill:var(--kumkum)}
.callouts{border-top:1px solid var(--rule)}
.callout{display:grid;grid-template-columns:28px 1fr;column-gap:14px;align-items:start;width:100%;text-align:left;padding:14px 0;background:none;border:0;border-bottom:1px solid var(--rule);color:inherit;font:inherit;cursor:pointer;border-radius:0}
.callout .g{margin-top:2px}
.callout .t,.callout .d{display:block}
.callout .t{font:400 19px/1.2 var(--serif);color:var(--ink)}
.callout .t b{font-weight:400;color:var(--ink3);margin-right:.35em;transition:color .25s}
.callout .d{font:400 14px/1.45 var(--sans);color:var(--ink3);margin-top:4px}
.callout.on .t b,.callout:hover .t b{color:var(--kumkum)}
.callout.on .d{color:var(--ink2)}

/* ---------- festivals ledger ---------- */
.ledger-wrap{position:relative;margin-top:48px}
.ledger{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);scrollbar-width:thin;scrollbar-color:var(--rule) transparent;padding-bottom:1px}
.ledger-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--paper))}
.tile{flex:0 0 auto;width:188px;padding:24px 20px 26px;border-right:1px solid var(--rule);scroll-snap-align:start}
.tile:last-child{border-right:0;margin-right:56px}
.tile .name{font:400 20px/1.15 var(--serif);font-variation-settings:"opsz" 36;color:var(--ink);margin-top:20px}
.tile .date{font:400 13px/1.35 var(--sans);color:var(--ink3);margin-top:6px;font-variant-numeric:tabular-nums}
.tile .kind{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:14px}
.ledger-note{font:400 13px/1.5 var(--sans);color:var(--ink3);margin-top:12px}

/* ---------- premium ---------- */
.premium{max-width:780px;margin:0 auto;text-align:center}
.quote{font:400 clamp(28px,4vw,42px)/1.25 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.005em;color:var(--ink);margin-top:8px}
.quote em{font-style:italic}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:44px;text-align:left;border-top:1px solid var(--rule)}
.perk{display:grid;grid-template-columns:28px 1fr;column-gap:14px;align-items:start;padding:20px 0;border-bottom:1px solid var(--rule)}
.perk .g{margin-top:2px}
.perk .t{font:400 19px/1.25 var(--serif);color:var(--ink)}
.perk .d{font:400 15px/1.5 var(--sans);color:var(--ink2);margin-top:6px}
.price{margin-top:36px;font:400 19px/1.5 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.price .sep{color:var(--ink3);margin:0 .4em}
.calm{font:400 15px/1.5 var(--sans);color:var(--ink3);margin-top:12px}
.soon-note{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:36px}

/* ---------- footer ---------- */
.home footer{margin:0 auto;padding:28px 0 72px;border-top:1px solid var(--rule);font:400 14px/1.7 var(--sans);color:var(--ink3)}
.home footer a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--rule)}
.home footer a:hover{color:var(--kumkum)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px;padding-block:56px}
  .hero-art{align-items:center}
  .moon-line{align-self:center;margin-right:0}
  .lattice{width:min(100%,340px)}
  .split{grid-template-columns:1fr;gap:44px}
  .split.rev>.phone-col{order:0}
  .section{padding:64px 0}
  .houses{grid-template-columns:1fr;gap:24px}
  .mini{width:min(100%,220px);margin:0 auto}
  .perks{grid-template-columns:1fr;gap:0}
}
@media (max-width:480px){
  .container{padding-inline:20px}
  .hero h1{font-size:72px}
  .cta{gap:14px}
  .phone{width:min(100%,264px)}
  .dawn{height:136px}
  .row{grid-template-columns:22px minmax(84px,104px) 1fr;column-gap:10px}
  .tile{width:168px;padding:20px 16px 22px}
  .price .pi{display:block}.price .sep{display:none}
}

/* ---------- reduced motion: show every final state ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .lattice .ln{stroke-dashoffset:0;animation:none!important}
  .lattice text,.lattice .bd{opacity:1;animation:none!important}
  .dawn .night{opacity:0}
  .dawn .sun{left:44%;top:30%}
  .dawn .greet{opacity:1;transition:none}
  .mini .h,.callout .t b{transition:none}
  html{scroll-behavior:auto}
}