/* Zreyas — "Namma" theme layer: warm paper, indigo hero blocks, marigold accents. Loaded last. */
:root{
  --marigold:#f2a516; --marigold-2:#d98a00;
  --gold:#f2a516; --gold-2:#ffc84a; --gold-ink:#a86a00; --gold-soft:#fdefcf;
  --paper:#fffcf5; --cream:#fbf3e2; --cream-2:#f6ead0;
  --tint:#fbf3e2; --tint-2:#f6ead0;
  --line:#eadcbd; --line-2:#e2d2ad;
  --on-dark:#e9e7ff; --on-dark-2:#bdbbe4;
  --night:#16143d;
}
body{background:var(--paper)}
:root{--k-bg:var(--paper);--k-alt:var(--cream);--k-card:#fff;--k-ink:var(--indigo);--k-text:var(--text);--k-muted:var(--muted);--k-line:var(--line);
  --k-pri:var(--indigo);--k-pri2:#33318a;--k-on-pri:#fff;--k-on-pri2:var(--on-dark);--k-acc:var(--marigold);--k-on-acc:var(--night);--k-acc-ink:var(--marigold-2);
  --k-acc-soft:var(--gold-soft);--k-leaf:var(--leaf-ink);--k-display:var(--display);--k-body:var(--body);--k-r:20px;--k-br:14px}
.k-eb{font-family:var(--display)}
.k-eb::before{width:8px;height:8px;border-radius:50%;background:var(--marigold);box-shadow:14px 0 0 var(--leaf),28px 0 0 var(--indigo);margin-right:30px}
.section{background:var(--paper)}
.section + .section{border-top:0}
#services,#goals,.ben,#about,#ways,#myths,#contact,#steps,#tips,.cx-read{background:var(--cream)}
#what,.cx,#fund-types,#start-home,.nse,#investor-services,#faq,#fund-houses{background:var(--paper)}

/* eyebrow: Namma's three dots */
.eyebrow{color:var(--marigold-2);font-family:var(--display)}
.eyebrow::before{width:8px;height:8px;border-radius:50%;background:var(--marigold);box-shadow:14px 0 0 var(--leaf),28px 0 0 var(--indigo);margin-right:30px}
.head.center .eyebrow::after{display:none}
.hl{background:linear-gradient(transparent 62%,rgba(242,165,22,.5) 62% 90%,transparent 90%)}

/* header / top strip */
.topstrip{background:var(--night);border-bottom:0;color:var(--on-dark-2)}
.topstrip b{color:#fff}
.topstrip a{color:var(--on-dark)}
.topstrip a:hover{color:var(--marigold)}
.hdr{background:rgba(255,252,245,.92)}
.hdr.scrolled{background:rgba(255,252,245,.82);border-color:var(--line)}
.menu-btn{background:#fff;border-color:var(--line-2)}
.nav{background:var(--paper)}

/* buttons: chunkier marigold, Namma style */
.btn{border-radius:14px;border-width:0;box-shadow:0 10px 24px -12px rgba(31,29,85,.7)}
.btn-gold{--bg:var(--marigold);--fg:var(--night);box-shadow:0 10px 24px -10px rgba(242,165,22,.85),inset 0 -2px 0 rgba(0,0,0,.08)}
.btn-gold:hover{box-shadow:0 16px 30px -12px rgba(242,165,22,.95),inset 0 -2px 0 rgba(0,0,0,.08)}
.btn-wa{box-shadow:0 10px 24px -10px rgba(27,133,73,.8)}
.btn-ghost{background:#fff;color:var(--indigo);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-lg{min-height:58px;border-radius:16px}

/* cards on paper / cream */
.card{background:#fff;border-color:var(--line);border-radius:20px}
.card:hover{border-color:var(--marigold)}
.ico{background:var(--indigo);color:#fff;border-radius:14px}
.card:hover .ico{background:var(--marigold);color:var(--night)}
.chip{background:#fff;border-color:var(--line-2)}
.panel{background:var(--cream);border-color:var(--line)}
.cream .panel,#services .panel,#start-home .panel{background:#fff}
.faq details{background:#fff;border-color:var(--line)}
.field input,.field select,.field textarea{border-color:var(--line-2);background:#fff}
.tab{background:#fff;border-color:var(--line-2)}
.qr{border-color:var(--line)}

/* ---- hero: deep indigo, marigold dot field, triangle band ---- */
.hero{background:radial-gradient(1100px 520px at 88% 8%,#33318a 0%,transparent 60%),radial-gradient(800px 420px at 0% 100%,#2a2878 0%,transparent 60%),var(--indigo);border-bottom:0;color:#fff;padding-bottom:clamp(52px,5vw,76px)}
.hero::before{content:"";position:absolute;inset:0;right:auto;top:auto;width:auto;height:auto;border-radius:0;background-image:radial-gradient(rgba(242,165,22,.55) 1.4px,transparent 1.7px);background-size:26px 26px;-webkit-mask-image:radial-gradient(640px 420px at 92% 30%,#000,transparent 72%);mask-image:radial-gradient(640px 420px at 92% 30%,#000,transparent 72%);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;background:conic-gradient(from 135deg at 50% 100%,transparent 90deg,var(--paper) 0) 0 0/22px 14px repeat-x;transform:scaleY(-1);opacity:0}
.hero .wrap{position:relative;z-index:2}
.hero .s-eb{background:rgba(242,165,22,.14);border-color:rgba(242,165,22,.45);color:#ffd98a}
.hero .s-eb i{background:var(--marigold);box-shadow:0 0 0 4px rgba(242,165,22,.28)}
.hero .s-h{color:#fff}
.hero .s-h .hl,.hero .s-h em{background:none;color:var(--marigold);font-style:normal}
.hero .s-p{color:var(--on-dark)}
.hero .s-p b{color:#fff}
.hero .s-note{color:var(--on-dark-2);border-left-color:var(--marigold)}
.hero .btn-ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14)}
.hero .btn-wa{box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.hero .s-art{background:linear-gradient(180deg,#fffaf0,#fbf0d9);border-radius:28px;padding:clamp(10px,1.6vw,20px);box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.4) inset;overflow:hidden}
.hero .s-art::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:12px;z-index:2;background:conic-gradient(from 135deg at 50% 0,var(--marigold) 90deg,transparent 0) 0 0/18px 12px repeat-x;border-radius:0 0 4px 4px}
.hero .car-count{color:var(--on-dark-2)}
.hero .car-count b{color:#fff}
.hero .cdot span{background:rgba(255,255,255,.28)}
.hero .cdot:hover span{background:rgba(255,255,255,.5)}
.hero .cdot[aria-current="true"] span{background:rgba(255,255,255,.22)}
.hero .cdot[aria-current="true"] span::after{background:linear-gradient(90deg,var(--marigold),#ffd98a)}
.hero .cbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff}
.hero .cbtn:hover{background:var(--marigold);border-color:var(--marigold);color:var(--night)}
.tband{height:14px;background:conic-gradient(from 135deg at 50% 0,var(--indigo) 90deg,transparent 0) 0 0/22px 14px repeat-x;position:relative;z-index:3;margin-top:-1px}
.tband::after{content:"";position:absolute;left:0;right:0;top:18px;height:4px;background:radial-gradient(circle,var(--marigold) 1.6px,transparent 2px) 0 0/22px 4px repeat-x;opacity:.8}

/* ---- inner-page heroes: indigo too ---- */
.phero,.g-hero,.sip-hero{background:radial-gradient(900px 420px at 88% 0%,#33318a 0%,transparent 60%),var(--indigo);border-bottom:0;color:var(--on-dark)}
.phero::after{background:radial-gradient(circle,rgba(242,165,22,.22),transparent 65%)}
.phero h1,.g-hero h1,.sip-hero h1{color:#fff}
.phero h1 em,.g-hero h1 em,.sip-hero h1 em,.phero .hl,.g-hero .hl,.sip-hero .hl{color:var(--marigold);font-style:normal;background:none}
.phero p,.g-hero p,.sip-hero-copy p,.phero .lead,.g-hero .lead,.sip-hero-copy .lead,.sip-points li{color:var(--on-dark)}
.sip-hero .crumbs,.sip-hero .crumbs a{color:var(--on-dark-2)}
.sip-points svg{color:var(--marigold)}
.sip-hero .qs-card{color:var(--text)}
.sip-hero .qs-card .small,.sip-hero .qs-note{color:var(--muted)}
.qs-card::before{background:linear-gradient(90deg,var(--marigold),#ffc84a,var(--leaf))}
.sip-hero::before{display:none}
.phero .crumbs,.phero .crumbs a{color:var(--on-dark-2)}
.phero .eyebrow,.g-hero .eyebrow,.sip-hero-copy .eyebrow{color:var(--marigold)}
.phero .btn-ghost,.g-hero .btn-ghost,.sip-hero-copy .btn-ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}

/* ---- dark band: app / QR section ---- */
#app{background:radial-gradient(900px 400px at 90% 0%,#33318a 0%,transparent 60%),var(--indigo);color:var(--on-dark)}
#app h2{color:#fff}
#app .lead{color:var(--on-dark)}
#app .btn-ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
#app .qr-card{background:#fff}
.sip-cta-sec,.g-cta{background:var(--indigo);color:var(--on-dark)}
.sip-cta-sec h2,.g-cta h2{color:#fff}

/* ---- footer ---- */
.ftr{background:var(--night);border-top:0;color:var(--on-dark-2)}
.ftr h4{color:#fff}
.ftr a{color:var(--on-dark-2)}
.ftr a:hover{color:var(--marigold)}
.ftr .reg{color:var(--marigold)}
.social a{border-color:rgba(255,255,255,.25);color:#fff}
.social a:hover{background:var(--marigold);color:var(--night)}
.disclose,.legal-bar{border-color:rgba(255,255,255,.14)}
.disclose .risk{color:#fff}
.mbar{background:#fff}
.sip-hero-copy .link-arrow,.g-hero .link-arrow{color:#fff}
/* Namma three-colour icon tiles */
.sv:nth-child(3n+2) .ico{background:var(--marigold);color:var(--night)}
.sv:nth-child(3n) .ico{background:var(--leaf);color:#fff}
.sv:hover .ico{background:var(--night);color:#fff}
.ico-wa{background:var(--wa);color:#fff}

.phero p.draft-note,.phero p.draft-note b{color:#3d2b00}

/* mobile tap targets (≥44px) */
.hdr .brand{min-height:44px}
.cdot{min-width:44px}
.link-arrow{min-height:44px}
.topstrip a{display:inline-flex;align-items:center;min-height:36px}
@media (max-width:1024px){.cx-num input{min-height:40px;min-width:44px;font-size:16px}}
.k-link{min-height:44px}
/* small phones: dots + pause only (swipe changes banners); keeps controls inside the screen */
@media (max-width:480px){.cdot{min-width:36px}.car-r [data-prev],.car-r [data-next]{display:none}}

/* section-end notes: centred under the content */
.note,.k-sec .k-note{display:block;max-width:820px;margin:28px auto 0;padding:14px 18px 0;text-align:center;border-left:0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.65;color:var(--muted)}
/* one Start SIP entry on desktop: keep the gold button, hide the duplicate menu link (still in the phone menu) */
@media (min-width:1121px){.nav a[data-nav="sip"]{display:none}}
/* QR codes in one row */
@media (min-width:901px){.appg{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.qrs{flex-wrap:nowrap;justify-content:center}
.qrs .qr-card{flex:1 1 0;min-width:0;max-width:220px}
.qrs .qr{width:min(150px,100%);height:auto;aspect-ratio:1}
@media (max-width:560px){.qrs{gap:8px}.qrs .qr-card{flex:1 1 0;padding:12px 6px}.qrs .qr{width:100%;padding:6px}.qrs .qr-card b{font-size:14px}.qrs .qr-card span{font-size:12px}}
.qr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.qr-grid .qr{width:min(150px,100%);height:auto;aspect-ratio:1}
@media (max-width:560px){.qr-grid{gap:8px}.qr-tile{padding:12px 6px}.qr-tile .qr{padding:6px}.qr-tile b{font-size:14px}.qr-tile span{font-size:12px}}
