/* ===========================================================
   TotalNivesh — Design Tokens
   Palette drawn from the app icon gradient (emerald ₹ mark)
   Motif: the ledger/passbook — a nod to a distributor who is
   also an accountant. Ruled hairlines, numbered entries,
   a hand-drawn SIP growth line as the signature mark.
   =========================================================== */

:root{
  /* Color — cool, corporate emerald on neutral white/graphite */
  --sprout:        #04875C;   /* primary emerald, deeper & less candy */
  --sprout-light:  #06A472;   /* hover / secondary emerald */
  --deep-teal:     #08211C;   /* near-black green anchor / nav-on-dark / footer */
  --deep-teal-2:   #051512;
  --paisa-gold:    #B8863B;   /* sparing trust accent */
  --kagaz:         #FFFFFF;   /* page background — clean white, not paper */
  --mist:          #F5F7F6;   /* pale neutral card surface */
  --ink:           #101614;   /* body text — near-black, neutral */
  --ink-soft:      #5B6864;   /* secondary text — neutral gray */
  --line:          #E4E8E6;   /* hairline rule — light neutral gray */
  --line-on-dark:  rgba(255,255,255,0.12);
  --white:         #FFFFFF;
  --shadow: 0 1px 2px rgba(8,33,28,0.04), 0 8px 24px -12px rgba(8,33,28,0.10);
  --shadow-lg: 0 4px 12px rgba(8,33,28,0.06), 0 24px 48px -16px rgba(8,33,28,0.16);

  /* Type — geometric sans display, no serif */
  --f-display: 'Manrope', 'Inter', -apple-system, sans-serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --radius: 10px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  background: var(--kagaz);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.02em;
}
p{ margin: 0 0 1em; }
.container{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}
.eyebrow{
  font-family: var(--f-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sprout);
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:''; width:16px; height:2px; background: var(--sprout); border-radius:2px; display:inline-block; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--paisa-gold);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:30px; height:30px; border-radius:8px; }
.brand span{
  font-family: var(--f-display); font-weight:800; font-size:1.16rem; color: var(--deep-teal); letter-spacing:-0.02em;
}
.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; font-size:0.95rem; color: var(--ink-soft); font-weight:500;
  position:relative; padding: 4px 0;
}
.nav-links a.active, .nav-links a:hover{ color: var(--deep-teal); }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--sprout);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-body); font-weight:600; font-size:0.92rem;
  padding: 13px 24px; border-radius: 8px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-primary{ background: var(--sprout); color: var(--white); box-shadow: 0 1px 2px rgba(4,135,92,0.15), 0 6px 16px -6px rgba(4,135,92,0.45); }
.btn-primary:hover{ background: var(--deep-teal); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(8,33,28,0.15), 0 8px 18px -6px rgba(8,33,28,0.4); }
.btn-ghost{ background: transparent; color: var(--deep-teal); border-color: var(--line); }
.btn-ghost:hover{ background: var(--deep-teal); color: var(--white); border-color: var(--deep-teal); }
.btn-sm{ padding: 9px 16px; font-size: 0.85rem; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{ padding: 88px 0 64px; position:relative; overflow:hidden; }
.hero .container{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center;
}
.hero h1{
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  color: var(--deep-teal);
  max-width: 12ch;
}
.hero .lede{
  margin-top: 20px; font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch;
}
.hero-actions{ display:flex; gap:14px; margin-top: 32px; flex-wrap:wrap; }
.hero-visual{ position:relative; }
.hero-visual svg{ width:100%; height:auto; }
.dash-card{
  background: var(--white); border:1px solid var(--line); border-radius: 18px;
  padding: 28px 28px 22px; box-shadow: var(--shadow-lg);
}
.dash-card-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.dash-label{ font-size:0.78rem; color: var(--ink-soft); font-weight:600; margin-bottom:6px; }
.dash-value{ font-family: var(--f-display); font-size:1.7rem; font-weight:800; color: var(--deep-teal); letter-spacing:-0.02em; }
.dash-pill{
  background: rgba(4,135,92,0.1); color: var(--sprout); font-family: var(--f-mono);
  font-size:0.78rem; font-weight:600; padding: 6px 12px; border-radius: 20px; margin-top:2px;
}
.dash-foot{ display:flex; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:0.85rem; color: var(--ink-soft); }
.dash-foot strong{ color: var(--deep-teal); font-weight:700; }
/* ---------- Hero decoration ---------- */
.hero{ position:relative; overflow:hidden; }
.hero::before, .hero::after{
  content:''; position:absolute; border-radius:50%; filter: blur(70px); z-index:0; opacity:0.35;
}
.hero::before{ width:420px; height:420px; background: radial-gradient(circle, #06A472, transparent 70%); top:-140px; right:-80px; }
.hero::after{ width:320px; height:320px; background: radial-gradient(circle, #04875C, transparent 70%); bottom:-120px; left:10%; opacity:0.18; }
.hero .container{ position:relative; z-index:1; }
.hero h1 .accent{ color: var(--sprout); }

.trust-row{ display:flex; align-items:center; gap:12px; margin-top:30px; }
.trust-row .avatars{ display:flex; }
.trust-row .avatars span{
  width:30px; height:30px; border-radius:50%; background: var(--mist); border:2px solid var(--white);
  margin-left:-8px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; color: var(--sprout);
  box-shadow: var(--shadow);
}
.trust-row .avatars span:first-child{ margin-left:0; }
.trust-row .trust-text{ font-size:0.85rem; color: var(--ink-soft); }
.trust-row .trust-text strong{ color: var(--deep-teal); }

/* ---------- Feature icon cards ---------- */
.feat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.feat-card{
  background: var(--white); border:1px solid var(--line); border-radius: 16px; padding: 28px;
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative; overflow:hidden;
}
.feat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(4,135,92,0.25); }
.feat-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.feat-card h3{ font-size:1.05rem; color: var(--deep-teal); font-weight:700; margin-bottom:8px; letter-spacing:-0.01em; }
.feat-card p{ color: var(--ink-soft); font-size:0.92rem; margin:0; }

/* ---------- Phone mockup ---------- */
.phone-mock{
  position:relative; width:230px; margin: 0 auto; background: #08211C; border-radius: 34px;
  padding: 10px; box-shadow: var(--shadow-lg);
}
.phone-mock .screen{
  background: linear-gradient(160deg, #06A472 0%, #04875C 100%); border-radius: 24px;
  padding: 22px 16px; min-height: 340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.phone-mock .screen img{ width:64px; height:64px; border-radius:16px; }
.phone-mock .screen .app-name{ color:#fff; font-family: var(--f-display); font-weight:800; font-size:1.1rem; }
.phone-mock .screen .app-tag{ color: rgba(255,255,255,0.75); font-size:0.78rem; text-align:center; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: linear-gradient(135deg, var(--deep-teal) 0%, #0E3B30 60%, #04875C 130%);
  border-radius: 24px; padding: 64px 56px; text-align:center; position:relative; overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.cta-banner::before{
  content:''; position:absolute; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%); top:-100px; right:-60px;
}
.cta-banner h2{ color:#fff; font-size: clamp(1.6rem,2.6vw,2.1rem); position:relative; z-index:1; }
.cta-banner p{ color: rgba(255,255,255,0.72); margin-top:12px; max-width:44ch; margin-left:auto; margin-right:auto; position:relative; z-index:1; }
.cta-banner .hero-actions{ justify-content:center; margin-top:26px; position:relative; z-index:1; }
.cta-banner .btn-ghost{ color:#fff; border-color: rgba(255,255,255,0.35); }
.cta-banner .btn-ghost:hover{ background: rgba(255,255,255,0.12); color:#fff; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

@media (max-width: 880px){
  .feat-grid{ grid-template-columns: 1fr; }
  .phone-mock{ display:none; }
}

.growth-path{
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 1.8s ease-out .3s forwards;
}
.growth-dot{ opacity:0; animation: pop .5s ease-out forwards; }
.growth-dot:nth-of-type(1){ animation-delay: .6s; }
.growth-dot:nth-of-type(2){ animation-delay: 1.0s; }
.growth-dot:nth-of-type(3){ animation-delay: 1.4s; }
.growth-dot:nth-of-type(4){ animation-delay: 1.8s; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes pop{ from{ opacity:0; transform: scale(0.3);} to{ opacity:1; transform: scale(1);} }

/* ---------- Stat strip ---------- */
.ledger-strip{ background: var(--mist); padding: 8px 0 48px; }
.ledger-strip .container{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--line); border:1px solid var(--line); border-radius: 14px;
  overflow:hidden; box-shadow: var(--shadow);
}
.ledger-item{
  background: var(--white); padding: 26px 24px;
}
.ledger-item .num{ font-family: var(--f-display); font-size:1.5rem; color: var(--deep-teal); font-weight:800; letter-spacing:-0.02em; }
.ledger-item .label{ font-family: var(--f-body); font-size:0.78rem; color: var(--ink-soft); font-weight:500; margin-top:4px; }

/* ---------- Section rhythm ---------- */
section{ padding: 84px 0; }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--deep-teal); margin-top:10px; }
.section-head p{ color: var(--ink-soft); margin-top:14px; font-size:1.05rem; }

/* ---------- Feature list rows ---------- */
.entries{ border-top: 1px solid var(--line); }
.entry{
  display:grid; grid-template-columns: 44px 1fr;
  gap: 22px; padding: 26px 4px; border-bottom: 1px solid var(--line);
  align-items:start; transition: background .15s ease;
}
.entry:hover{ background: var(--mist); }
.entry .idx{
  width: 34px; height:34px; border-radius:50%;
  background: var(--mist); color: var(--sprout);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-mono); font-size:0.82rem; font-weight:600;
  border: 1px solid var(--line);
}
.entry h3{ font-size:1.08rem; color: var(--deep-teal); font-weight:700; letter-spacing:-0.01em; }
.entry p{ color: var(--ink-soft); margin-top:6px; margin-bottom:0; max-width: 60ch; font-size:0.96rem; }

/* ---------- App showcase ---------- */
.showcase{
  background: linear-gradient(155deg, var(--deep-teal) 0%, #0E3B30 100%);
  color: #F5F7F6; border-radius: 20px;
  padding: 56px; display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center;
  box-shadow: var(--shadow-lg);
}
.showcase img{ border-radius: 12px; }
.showcase .eyebrow{ color: var(--sprout-light); }
.showcase h2{ color: var(--white); margin-top:10px; font-size: clamp(1.7rem,2.6vw,2.2rem); }
.showcase p{ color: rgba(255,255,255,0.72); margin-top:14px; }
.showcase .btn-primary{ background: var(--sprout-light); }
.badge-row{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.store-badge{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-on-dark);
  padding:11px 18px; border-radius: 8px; font-size:0.85rem; font-weight:600; color: #fff;
  text-decoration:none; background: rgba(255,255,255,0.06); transition: background .2s ease;
}
.store-badge:hover{ background: rgba(255,255,255,0.14); }

/* ---------- Cards ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.card{
  background: var(--white); border:1px solid var(--line); border-radius: 14px; padding: 30px;
  box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card h3{ color: var(--deep-teal); font-size:1.1rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.01em; }
.card p{ color: var(--ink-soft); font-size:0.95rem; margin:0; }
.card .tag{ font-family: var(--f-mono); font-size:0.68rem; color: var(--paisa-gold); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* ---------- Quote / about strip ---------- */
.quote-strip{ background: var(--deep-teal); }
.quote-strip blockquote{
  font-family: var(--f-display); font-weight:700; font-size: clamp(1.25rem,2.2vw,1.65rem); color: var(--white);
  max-width: 30ch; margin:0 0 18px; letter-spacing:-0.01em; line-height:1.3;
}
.quote-strip cite{ font-style:normal; font-family: var(--f-body); font-weight:600; font-size:0.85rem; color: rgba(255,255,255,0.6); }

/* ---------- Footer ---------- */
footer{ background: var(--deep-teal-2); color: rgba(255,255,255,0.85); padding: 64px 0 32px; }
footer .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
footer h4{ font-family: var(--f-body); font-weight:700; font-size:0.78rem; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.45); margin-bottom:18px; }
footer .brand span{ color: var(--white); }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
footer a{ text-decoration:none; color: rgba(255,255,255,0.75); font-size:0.92rem; }
footer a:hover{ color: var(--sprout-light); }
.foot-bottom{
  border-top:1px solid var(--line-on-dark); margin-top: 48px; padding-top: 24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.82rem; color: rgba(255,255,255,0.45);
}

/* ---------- Page header (inner pages) ---------- */
.page-hero{ padding: 64px 0 48px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size: clamp(2rem,3.4vw,2.8rem); color: var(--deep-teal); }
.page-hero p{ margin-top:14px; color: var(--ink-soft); max-width:56ch; font-size:1.05rem; }
.crumb{ font-family: var(--f-mono); font-size:0.76rem; color: var(--sprout); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
label{ font-size:0.85rem; font-weight:600; color: var(--deep-teal); }
input, textarea, select{
  font-family: var(--f-body); font-size:0.96rem; padding:12px 14px;
  border:1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink);
}
input:focus, textarea:focus{ border-color: var(--sprout); }
textarea{ resize: vertical; min-height:120px; }

/* ---------- Contact / info blocks ---------- */
.info-block{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.info-block:last-child{ border-bottom:none; }
.info-block .k{ font-family: var(--f-mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:.08em; color: var(--sprout); min-width:140px; }
.info-block .v{ color: var(--ink); }

/* ---------- Blog ---------- */
.post-list{ display:flex; flex-direction:column; }
.post-row{
  display:grid; grid-template-columns: 120px 1fr auto; gap:24px; align-items:baseline;
  padding: 26px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
}
.post-row .date{ font-family: var(--f-mono); font-size:0.8rem; color: var(--ink-soft); }
.post-row h3{ font-size:1.16rem; color: var(--deep-teal); }
.post-row .arrow{ color: var(--sprout); font-family: var(--f-mono); }
.post-row:hover h3{ color: var(--sprout); }
.article-body h2{ color: var(--deep-teal); font-size:1.5rem; margin: 38px 0 14px; }
.article-body p{ color: var(--ink); font-size:1.03rem; }
.article-body{ max-width: 68ch; }

/* ---------- Disclaimer box ---------- */
.disclaimer{
  background: var(--mist); border-left:3px solid var(--paisa-gold);
  padding: 18px 22px; font-size:0.88rem; color: var(--ink-soft); border-radius: 0 8px 8px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .nav-links{ display:none; }
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; }
  .grid-3, .grid-2, .form-grid, footer .foot-grid{ grid-template-columns: 1fr; }
  .showcase{ grid-template-columns:1fr; padding:32px; }
  .ledger-strip .container{ flex-direction:column; }
  .ledger-item{ border-right:none; border-bottom:1px solid var(--line); }
  .entry{ grid-template-columns: 40px 1fr; }
  .post-row{ grid-template-columns: 1fr; gap:6px; }
}