/* ============================================================
   TrueOpinion — website styles
   Calm clinical warmth · Bloom brand · light-first
   ============================================================ */

:root {
  --g50: #ECFBF3; --g100: #D1F5E1; --g300: #6FD9A6; --g400: #35C285;
  --g500: #0FA968; --g600: #0C8B54; --g700: #0B7A4B; --g800: #0A5C3A; --g900: #08472D;
  --teal: #0E7C86; --amber: #E4A93F;
  --ink: #0C1A14; --ink2: #33453D; --muted: #5E706A;
  --line: #D7E5DD; --paper: #F4FAF6; --white: #FFFFFF; --tint: #ECF5EF;
  --stage1: #0E5C41; --stage2: #073526; --stage3: #041C14; --stage4: #02100B;

  --fd: "Poppins", "Segoe UI", system-ui, sans-serif;
  --ft: "Mukta", "Noto Sans Gujarati", system-ui, sans-serif;

  --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --sh1: 0 1px 2px rgba(8,40,28,.06), 0 1px 1px rgba(8,40,28,.04);
  --sh2: 0 10px 34px rgba(8,40,28,.10), 0 2px 8px rgba(8,40,28,.05);
  --maxw: 1100px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ft);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.lang-gu {
  font-family: "Mukta Vaani", "Noto Sans Gujarati", var(--ft);
  --fd: "Anek Gujarati", "Mukta Vaani", "Noto Sans Gujarati", sans-serif;
}
body.lang-hi {
  --fd: "Anek Devanagari", "Mukta", sans-serif;
}

h1, h2, h3 { font-family: var(--fd); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
body.lang-gu h1, body.lang-gu h2, body.lang-gu h3,
body.lang-hi h1, body.lang-hi h2, body.lang-hi h3 {
  font-weight: 700; letter-spacing: 0; line-height: 1.3;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--g700); text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

.eyebrow {
  font-family: var(--fd); text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 600; color: var(--g700);
}
body.lang-gu .eyebrow, body.lang-hi .eyebrow { letter-spacing: .05em; text-transform: none; font-size: .85rem; }

/* ---------- header ---------- */
.hd {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hd .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: "Poppins", "Segoe UI", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; }
.brand svg { width: 30px; height: 30px; }
.brand .a { color: var(--ink); } .brand .b { color: var(--g700); }
.nav { display: flex; gap: 22px; font-family: var(--fd); font-size: .88rem; font-weight: 500; }
.nav a { color: var(--ink2); transition: color .2s; }
.nav a:hover { color: var(--g700); }
.hd-right { display: flex; align-items: center; gap: 10px; }

.lang {
  display: flex; border: 1px solid var(--line); border-radius: var(--r-pill);
  overflow: hidden; background: var(--white);
}
.lang button {
  border: 0; background: none; cursor: pointer; font-family: var(--fd);
  font-size: .78rem; font-weight: 600; padding: 6px 11px; color: var(--muted);
  transition: background .2s, color .2s;
}
.lang button.on { background: var(--g500); color: #fff; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--fd); font-weight: 600; font-size: .95rem;
  padding: 12px 22px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid transparent; transition: transform .18s var(--ease), box-shadow .18s, background .18s;
}
.btn-p { background: var(--g500); color: #fff; box-shadow: var(--sh1); }
.btn-p:hover { transform: translateY(-2px); box-shadow: var(--sh2); background: var(--g600); }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { padding: 9px 16px; font-size: .85rem; }

/* ---------- hero stage ---------- */
.stage {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 100% at 50% 0%, var(--stage1) 0%, var(--stage2) 46%, var(--stage3) 76%, var(--stage4) 100%);
}
.stage-grain { position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; pointer-events: none; }
.halo {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%,-50%);
  width: min(640px, 100vw); height: min(640px, 100vw); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46,209,140,.30), rgba(46,209,140,.08) 55%, transparent 72%);
  filter: blur(2px); pointer-events: none;
}
.hero { position: relative; z-index: 2; text-align: center; padding: 74px 0 84px; }
.hero .bloom { width: clamp(120px, 22vw, 170px); margin: 26px auto 26px; filter: drop-shadow(0 18px 50px rgba(0,0,0,.45)); }
.hero h1 { font-size: clamp(1.9rem, 5.4vw, 3.3rem); font-weight: 700; max-width: 21ch; margin: 0 auto; }
.hero .sub { margin: 20px auto 0; max-width: 62ch; font-size: clamp(1rem, 2.4vw, 1.13rem); color: rgba(234,243,238,.85); }
.hero-cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-chips { margin-top: 34px; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fd); font-size: .78rem; font-weight: 600;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #DFF2E7;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #2ED18C; flex: none; }

/* petal bloom-in */
.bloom .petal { transform-origin: 32px 32px; }
.js .bloom .petal { opacity: 0; transform: scale(.2) rotate(-30deg); }
.js .bloom.play .petal { animation: petal .8s var(--ease) forwards; }
.js .bloom.play .petal:nth-child(1) { animation-delay: .05s; }
.js .bloom.play .petal:nth-child(2) { animation-delay: .17s; }
.js .bloom.play .petal:nth-child(3) { animation-delay: .29s; }
.js .bloom.play .petal:nth-child(4) { animation-delay: .41s; }
@keyframes petal { to { opacity: 1; transform: scale(1) rotate(0); } }
.bloom.play { animation: floaty 6s ease-in-out 1.4s infinite alternate; }
@keyframes floaty { from { transform: translateY(0) rotate(0); } to { transform: translateY(-7px) rotate(2deg); } }

/* ---------- sections ---------- */
.sec { padding: 78px 0; }
.sec.alt { background: var(--paper); }
.sec-head { max-width: 640px; margin-bottom: 42px; }
.sec-head h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 600; margin-top: 10px; color: var(--ink); }
.sec-head p { margin-top: 12px; color: var(--ink2); }
.center .sec-head { margin-left: auto; margin-right: auto; text-align: center; }

/* reveal */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .08s; } .js .rv.d2 { transition-delay: .16s; }
.js .rv.d3 { transition-delay: .24s; } .js .rv.d4 { transition-delay: .32s; }
.js .rv.d5 { transition-delay: .40s; }

/* pain */
.pain-list { display: grid; gap: 12px; max-width: 640px; }
.pain-list li {
  list-style: none; display: flex; gap: 12px; align-items: flex-start;
  color: var(--ink2); font-size: 1.02rem;
}
.pain-list li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); margin-top: .55em; flex: none;
}
.anchor-line {
  margin-top: 30px; padding: 20px 24px; max-width: 640px;
  border-left: 3px solid var(--g500); background: var(--tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--fd); font-weight: 600; color: var(--ink); font-size: 1.05rem;
}
body.lang-gu .anchor-line, body.lang-hi .anchor-line { font-family: inherit; }

/* problem vs solution */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ps {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; transition: transform .2s var(--ease), box-shadow .2s;
}
.sec.alt .ps { background: var(--white); }
.ps:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.ps .q { color: var(--muted); font-size: .92rem; }
.ps .arrow { color: var(--g500); font-family: var(--fd); font-weight: 700; margin: 6px 0; }
.ps .a { color: var(--ink); font-weight: 500; }

/* process timeline */
.steps { position: relative; display: grid; gap: 26px; max-width: 700px; }
.step { display: flex; gap: 18px; position: relative; }
.step .num {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--g500); color: #fff; display: grid; place-items: center;
  font-family: var(--fd); font-weight: 700; box-shadow: var(--sh1); z-index: 2;
}
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 20px; top: 46px; bottom: -26px;
  width: 2px; background: var(--line);
}
.step h3 { font-size: 1.08rem; font-weight: 600; }
.step p { color: var(--ink2); margin-top: 4px; font-size: .97rem; }

/* care loop: OPD / IPD tracks */
.loop-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.track { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px 28px; }
.track-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.track-tag { flex: none; font-family: var(--fd); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  padding: 7px 13px; border-radius: var(--r-pill); margin-top: 2px; }
.track-tag.opd { background: var(--tint); color: var(--g700); border: 1px solid var(--g100); }
.track-tag.ipd { background: var(--g500); color: #fff; }
.track-head h3 { font-family: var(--fd); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.track-head p { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.track .steps { max-width: none; gap: 22px; }
.track .step .num { width: 36px; height: 36px; font-size: .95rem; }
.track .step:not(:last-child)::before { left: 17px; top: 40px; bottom: -22px; }
.loop-when { max-width: 760px; margin: 34px auto 0; text-align: center; color: var(--ink2); }
.loop-when b { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .loop-tracks { grid-template-columns: 1fr; } }

/* four checks */
.checks-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
.checks-bloom { width: 100%; max-width: 280px; margin: 0 auto; }
.checks-bloom .petal { transform-origin: 32px 32px; transition: fill .4s, transform .4s var(--ease); fill: var(--g100); }
.checks-bloom .petal.lit { fill: var(--g500); transform: scale(1.06); }
.check-cards { display: grid; gap: 12px; }
.check {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start;
  transition: border-color .3s, box-shadow .3s;
}
.check.lit { border-color: var(--g300); box-shadow: var(--sh1); }
.check .cdot { width: 12px; height: 12px; border-radius: 50%; background: var(--g100); margin-top: .45em; flex: none; transition: background .3s; }
.check.lit .cdot { background: var(--g500); }
.check h3 { font-size: 1.02rem; font-weight: 600; }
.check p { color: var(--ink2); font-size: .93rem; margin-top: 2px; }

/* treatments chips */
.tchips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 820px; }
.tchip {
  font-family: var(--fd); font-weight: 500; font-size: .9rem;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line); color: var(--ink2);
  transition: border-color .2s, color .2s, transform .2s;
}
.tchip:hover { border-color: var(--g400); color: var(--g700); transform: translateY(-2px); }
.tnote { margin-top: 22px; color: var(--muted); font-size: .93rem; max-width: 60ch; }

/* solutions */
.sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sol {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; transition: transform .2s var(--ease), box-shadow .2s;
}
.sol:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.sol .ico {
  width: 38px; height: 38px; border-radius: 11px; background: var(--g50);
  display: grid; place-items: center; margin-bottom: 13px; color: var(--g600);
}
.sol h3 { font-size: 1rem; font-weight: 600; }
.sol p { color: var(--ink2); font-size: .9rem; margin-top: 4px; }

/* trust */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 26px; max-width: 860px; }
.titem { display: flex; gap: 12px; padding: 12px 0; }
.titem .tick { color: var(--g500); font-weight: 700; font-family: var(--fd); flex: none; }
.titem h3 { font-size: .99rem; font-weight: 600; display: inline; }
.titem p { color: var(--ink2); font-size: .92rem; margin-top: 2px; }
.paid {
  margin-top: 38px; max-width: 720px; padding: 26px 28px;
  background: linear-gradient(140deg, var(--g50), var(--tint));
  border: 1px solid var(--g100); border-radius: var(--r-xl);
}
.paid h3 { font-family: var(--fd); font-weight: 600; font-size: 1.05rem; color: var(--g800); }
body.lang-gu .paid h3, body.lang-hi .paid h3 { font-family: inherit; }
.paid p { margin-top: 8px; color: var(--ink2); font-size: .97rem; }

/* fee */
.fee-card {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 40px 30px; box-shadow: var(--sh2);
}
.fee-card .badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--g50); border: 1px solid var(--g100); color: var(--g700);
  font-family: var(--fd); font-weight: 600; font-size: .85rem;
  padding: 8px 16px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.fee-card h2 { font-size: clamp(1.4rem, 3.4vw, 1.85rem); font-weight: 600; }
.fee-inc { margin: 20px auto 0; max-width: 400px; text-align: left; display: grid; gap: 9px; }
.fee-inc li { list-style: none; display: flex; gap: 10px; color: var(--ink2); font-size: .95rem; }
.fee-inc li::before { content: "✓"; color: var(--g500); font-weight: 700; font-family: var(--fd); }
.fee-honest { margin-top: 22px; color: var(--muted); font-size: .85rem; max-width: 46ch; margin-left: auto; margin-right: auto; }

/* faq */
.faq { max-width: 720px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; font-family: var(--fd); font-weight: 600; font-size: .98rem; color: var(--ink);
  transition: color .2s;
}
body.lang-gu .faq summary, body.lang-hi .faq summary { font-family: inherit; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.25rem; color: var(--g500); font-weight: 500;
  transition: transform .3s var(--ease); flex: none; margin-left: 12px;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 20px 18px; color: var(--ink2); font-size: .95rem; }

/* final cta */
.cta-final { position: relative; overflow: hidden; text-align: center; color: #fff; padding: 90px 0; }
.cta-final .bloom-mark { position: absolute; right: -70px; bottom: -70px; width: 320px; opacity: .08; pointer-events: none; }
.cta-final h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); font-weight: 700; position: relative; z-index: 2; }
.cta-final p { margin: 16px auto 0; max-width: 50ch; color: rgba(234,243,238,.85); position: relative; z-index: 2; }
.cta-final .btn { margin-top: 30px; position: relative; z-index: 2; }
.cta-note { margin-top: 14px; font-size: .82rem; color: rgba(223,242,231,.6); position: relative; z-index: 2; }

/* footer */
.ft { background: var(--stage4); color: #8FA89C; padding: 44px 0 54px; font-size: .86rem; }
.ft .wrap { display: grid; gap: 26px; }
.ft-top { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; justify-content: space-between; }
.ft .brand .a { color: #EAF3EE; } .ft .brand .b { color: #59E0A5; }
.ft-links { display: flex; flex-wrap: wrap; gap: 20px; font-family: var(--fd); font-weight: 500; }
.ft-links a { color: #AEC3B8; transition: color .2s; }
.ft-links a:hover { color: #59E0A5; }
.fineprint { border-top: 1px solid #16241D; padding-top: 20px; max-width: 74ch; line-height: 1.7; font-size: .8rem; }

/* whatsapp fab */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--g500); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(11,122,75,.45);
  transition: transform .2s var(--ease), background .2s;
}
.fab:hover { transform: scale(1.08); background: var(--g600); }
.fab svg { width: 26px; height: 26px; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .nav { display: none; }
  .checks-wrap { grid-template-columns: 1fr; gap: 30px; }
  .checks-bloom { max-width: 200px; }
}
@media (max-width: 560px) {
  .sec { padding: 58px 0; }
  .hero { padding: 56px 0 66px; }
  .hero-cta .btn { width: 100%; }
  .lang button { padding: 6px 9px; font-size: .74rem; }
  .btn-hd { display: none; }
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .bloom .petal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- legal pages ---- */
.legal{max-width:820px;margin:0 auto;padding:46px 22px 90px}
.legal h1{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:6px}
.legal .upd{color:var(--muted);font-size:.85rem;margin-bottom:26px}
.legal h2{font-size:1.15rem;margin:30px 0 10px;color:var(--ink)}
.legal p,.legal li{color:var(--ink2);font-size:.96rem;margin-bottom:10px}
.legal ul,.legal ol{padding-left:22px;margin-bottom:12px}
.legal .sum{background:var(--tint);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:10px}
.legal .sum h3{font-family:var(--fd);font-size:.95rem;margin-bottom:8px;color:var(--g700)}
.legal .sum ul{margin-bottom:0}
.legal .consent-box{background:var(--g50);border:1px solid var(--g100);border-radius:var(--r-md);padding:16px 18px;font-weight:500;color:var(--ink)}