/* ============================================================
   KUNDALI VICHAAR — Detailed Kundali Analysis landing page
   Palette: maroon #5A1820 · saffron #D88A2B · gold #C9A45C
            ivory #FAF5EA · brown #261A16 · whatsapp #25D366
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --maroon:#5A1820;
  --maroon-deep:#3B0E16;
  --maroon-rich:#73202B;
  --saffron:#D88A2B;
  --saffron-deep:#B26A14;
  --gold:#C9A45C;
  --gold-lt:#F1DCAC;
  --gold-dk:#8E6A2E;
  --ivory:#FAF5EA;
  --ivory-lt:#FFFDF7;
  --cream:#F2E6CE;
  --brown:#261A16;
  --wa:#25D366;
  --wa-dark:#0E7C43;

  --ink:#2B1C17;
  --ink-70:rgba(43,28,23,.76);
  --ink-55:rgba(43,28,23,.6);
  --ink-40:rgba(43,28,23,.44);
  --line:rgba(201,164,92,.5);
  --line-strong:rgba(201,164,92,.72);
  --line-soft:rgba(43,28,23,.1);

  --serif:"Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Gold leaf — used for foil text, rules and buttons */
  --foil:linear-gradient(118deg,#F7E9C6 0%,#D9BB7E 16%,#C9A45C 32%,#8E6A2E 48%,#EBD9AB 64%,#C9A45C 80%,#94702F 100%);
  --foil-soft:linear-gradient(118deg,#E8D3A0,#C9A45C 40%,#9A7333 70%,#DCC489);

  --shadow-sm:0 1px 2px rgba(43,28,23,.05), 0 8px 20px -14px rgba(43,28,23,.4);
  --shadow-md:0 2px 8px rgba(43,28,23,.06), 0 22px 46px -26px rgba(43,28,23,.5);
  --shadow-lg:0 40px 80px -38px rgba(59,14,22,.55), 0 8px 22px -14px rgba(43,28,23,.3);
  --glow-gold:0 0 0 1px rgba(201,164,92,.4), 0 18px 44px -22px rgba(201,164,92,.65);

  --r-sm:8px;
  --r-md:16px;
  --r-lg:22px;

  --head-h:74px;
  --wrap:1200px;
  --gutter:22px;
  --ease:cubic-bezier(.22,.7,.28,1);

  /* Repeating Kundali-cell watermark */
  --wm-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148' viewBox='0 0 148 148'%3E%3Cg fill='none' stroke='%23C9A45C' stroke-width='1' opacity='.15'%3E%3Crect x='.5' y='.5' width='147' height='147'/%3E%3Cpath d='M74 0 148 74 74 148 0 74z'/%3E%3C/g%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Note: do NOT set overflow-x on <html>. It stops <body>'s overflow-x:hidden from propagating to
   the viewport, which turns <body> into its own scroll box — that breaks window scrolling and
   leaves the fixed mobile CTA bar floating above the bottom edge. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 20px)}
body{
  margin:0;
  color:var(--ink);
  font:400 16.5px/1.72 var(--sans);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-color:var(--ivory);
  background-image:
    radial-gradient(78% 52% at 50% -6%, rgba(216,138,43,.16), transparent 62%),
    radial-gradient(60% 42% at 104% 4%, rgba(90,24,32,.10), transparent 60%),
    radial-gradient(70% 46% at -6% 26%, rgba(201,164,92,.16), transparent 62%);
  background-attachment:fixed;
}
/* Fine paper grain over the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:3; pointer-events:none;
  background-image:var(--grain); background-size:200px 200px;
  opacity:.3; mix-blend-mode:multiply;
}
body.is-locked{overflow:hidden}
[hidden]{display:none !important}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.008em; line-height:1.16}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
::selection{background:rgba(216,138,43,.26)}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:880px}
.ico{width:1.05em; height:1.05em; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

:focus-visible{outline:2px solid var(--saffron); outline-offset:3px; border-radius:4px}

/* Gold-leaf text */
.u-accent{position:relative; color:var(--saffron); white-space:nowrap}
.u-accent::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:-.16em; height:.3em;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C64 3 186 1.5 297 5.5' fill='none' stroke='%23C9A45C' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M18 12.5c66-3.5 148-4.5 250-2' fill='none' stroke='%23D88A2B' stroke-width='1.6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- 3. Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important}
}

/* ---------- 4. Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.84em 1.5em;
  border-radius:999px;
  font:600 14.5px/1 var(--sans);
  letter-spacing:.02em;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), filter .28s var(--ease);
}
.btn > *{position:relative; z-index:1}
.btn .ico{width:17px; height:17px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* Light sweep across premium buttons */
.btn--primary::after,.btn--gold::after,.btn--wa::after{
  content:""; position:absolute; top:-20%; left:-70%; width:45%; height:140%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg); transition:left .65s var(--ease); pointer-events:none;
}
.btn--primary:hover::after,.btn--gold:hover::after,.btn--wa:hover::after{left:130%}

.btn--sm{padding:.7em 1.2em; font-size:13.5px}
.btn--lg{padding:1.06em 2em; font-size:15.5px}
.btn--block{width:100%}

.btn--primary{
  background:linear-gradient(165deg,var(--maroon-rich),var(--maroon) 55%,var(--maroon-deep));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.38), inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px -14px rgba(59,14,22,.9);
}
.btn--primary:hover{box-shadow:inset 0 0 0 1px rgba(201,164,92,.66), 0 18px 34px -14px rgba(59,14,22,.8)}

.btn--gold{
  background:var(--foil); background-size:200% 100%;
  color:#3A1109;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(90,60,10,.25), 0 12px 28px -14px rgba(154,115,51,.95);
}
.btn--gold:hover{background-position:100% 0}

.btn--wa{
  background:linear-gradient(165deg,#3ee27d,var(--wa) 48%,#14a355);
  color:#04301a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px -14px rgba(14,124,67,.95);
}
.btn--wa:hover{filter:saturate(1.08) brightness(1.03)}

.btn--ghost{background:rgba(255,253,247,.6); color:var(--maroon); box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:rgba(201,164,92,.16); box-shadow:inset 0 0 0 1px var(--line-strong)}

.btn--outline-light{background:rgba(250,245,234,.04); color:#fff; box-shadow:inset 0 0 0 1px rgba(201,164,92,.55)}
.btn--outline-light:hover{background:rgba(250,245,234,.1); box-shadow:inset 0 0 0 1px var(--gold)}

.icon-btn{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  color:var(--maroon);
  box-shadow:inset 0 0 0 1px var(--line);
  background:rgba(255,253,247,.6);
  transition:background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.icon-btn .ico{width:17px; height:17px}
.icon-btn:hover{background:var(--maroon); color:var(--gold-lt); box-shadow:inset 0 0 0 1px var(--maroon)}

/* ---------- 5. Section furniture ---------- */
.section{position:relative; padding:clamp(70px,9vw,124px) 0}
.section--tint{
  background-color:#F6EDDC;
  background-image:
    var(--wm-diamond),
    radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.85), transparent 70%);
  background-size:148px 148px, auto;
}
.section--tint::before,.section--tint::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 30%,var(--line-strong) 70%,transparent);
}
.section--tint::before{top:0} .section--tint::after{bottom:0}

.sec-head{max-width:780px; margin-bottom:clamp(38px,4.4vw,60px)}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-title{font-size:clamp(29px,4.3vw,47px); line-height:1.13; color:var(--maroon); margin-bottom:.5em}
.sec-title--light{color:#FFF6E4}
.sec-lede{color:var(--ink-70); font-size:clamp(15.5px,1.5vw,17.5px); max-width:62ch}
.sec-head--center .sec-lede{margin-inline:auto}

.eyebrow{
  display:flex; align-items:center;
  margin-bottom:1.05em;
  font:600 11.5px/1 var(--sans);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--saffron-deep);
}
.eyebrow--center,.sec-head--center .eyebrow{
  justify-content:center;
  padding-left:.24em;   /* balances the trailing letter-space so the text sits truly centred over the ornament */
}
.eyebrow--light{color:var(--gold-lt)}

/* Ornamental flourish beneath a centred subheading */
.orn{display:block; width:120px; margin:0 auto 20px; line-height:0}
.eyebrow + .orn{margin-top:-4px}
.orn svg{width:100%; height:auto; fill:var(--gold); stroke:var(--gold); stroke-width:.8; opacity:.9}
.orn--light svg{fill:var(--gold-lt); stroke:var(--gold-lt); opacity:.75}

.sec-cta{margin-top:clamp(42px,4.8vw,62px); text-align:center}

/* Decorative mandala */
.mandala{fill:none; stroke:var(--gold); stroke-width:1; vector-effect:non-scaling-stroke}
.mandala--hero{width:min(122vw,1080px); opacity:.3}
.mandala__spin{transform-origin:300px 300px; animation:spin 240s linear infinite}
.mandala__spokes{opacity:.55}
.mandala__petals{opacity:.4}
.mandala__ticks{opacity:.8; stroke-width:2}
.mandala__glyphs text{
  font:400 27px var(--serif); fill:var(--gold); stroke:none;
  text-anchor:middle; opacity:.62;
}
@keyframes spin{to{transform:rotate(360deg)}}
.mandala--dark{stroke:var(--gold); opacity:.15; width:min(112vw,920px)}
.sec-orn{position:absolute; inset:0; overflow:hidden; pointer-events:none; display:grid; place-items:center}

/* Diamond gem tile — echoes a Kundali chart cell */
.gem{position:relative; display:grid; place-items:center; width:56px; height:56px; flex:none}
.gem::before{
  content:""; position:absolute; inset:8px;
  transform:rotate(45deg); border-radius:9px;
  background:linear-gradient(145deg,#FFFCF2,#EFE0C0);
  box-shadow:inset 0 0 0 1px var(--line-strong), inset 0 0 0 4px rgba(255,255,255,.55), 0 8px 18px -12px rgba(43,28,23,.7);
  transition:background .38s var(--ease), box-shadow .38s var(--ease), transform .5s var(--ease);
}
.gem > svg{position:relative; z-index:1; width:24px; height:24px; fill:none; stroke:var(--gold-dk); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; transition:stroke .38s var(--ease)}
.gem--sm{width:50px; height:50px}
.gem--sm::before{inset:7px}
.gem--sm > svg{width:21px; height:21px}

/* ---------- Top accent strip ---------- */
.top-strip{
  height:4px;
  background:linear-gradient(90deg,var(--maroon-deep),var(--maroon) 18%,var(--saffron) 38%,var(--gold-lt) 50%,var(--saffron) 62%,var(--maroon) 82%,var(--maroon-deep));
}

/* ============================================================
   6. HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:70;
  background:rgba(250,245,234,.84);
  backdrop-filter:saturate(170%) blur(16px);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck{background:rgba(252,248,239,.97); box-shadow:0 14px 34px -26px rgba(59,14,22,.85)}
.header-rule{height:1px; background:linear-gradient(90deg,transparent,var(--line-strong) 16%,var(--line-strong) 84%,transparent)}
.site-header__inner{display:flex; align-items:center; gap:18px; height:var(--head-h)}

.brand{display:flex; align-items:center; gap:12px; margin-right:auto; flex:none}
/* Round logo artwork (assets/logo.png) — it carries its own maroon disc and gold ring */
.brand__mark{
  display:block; flex:none;
  width:44px; height:44px; border-radius:50%;
  box-shadow:0 8px 18px -10px rgba(59,14,22,.75);
}
.brand__mark img{display:block; width:100%; height:100%; object-fit:contain}
.brand__mark--sm{width:42px; height:42px; box-shadow:none}
.brand__text{display:flex; flex-direction:column; line-height:1.15}
.brand__name{font:400 20.5px/1 var(--serif); color:var(--maroon); letter-spacing:.012em; white-space:nowrap}
.brand__tag{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-40); margin-top:5px; white-space:nowrap}

.nav{display:flex; align-items:center; gap:28px}
.nav__link{position:relative; white-space:nowrap; font-size:14.5px; font-weight:500; color:var(--ink-70); padding:6px 0; transition:color .22s var(--ease)}
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--foil-soft); border-radius:2px; transition:right .35s var(--ease);
}
.nav__link:hover{color:var(--maroon)}
.nav__link:hover::after,.nav__link.is-active::after{right:0}
.nav__link.is-active{color:var(--maroon)}
.nav__cta{display:none}

.site-header__actions{display:flex; align-items:center; gap:10px; flex:none}
.burger{display:none; width:42px; height:42px; border-radius:11px; padding:11px 10px; box-shadow:inset 0 0 0 1px var(--line); background:rgba(255,253,247,.6)}
.burger span{display:block; height:1.7px; background:var(--maroon); border-radius:2px; transition:transform .3s var(--ease), opacity .25s var(--ease)}
.burger span + span{margin-top:5px}
.burger.is-open span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

.nav-scrim{position:fixed; inset:0; z-index:60; background:rgba(43,28,23,.5); backdrop-filter:blur(3px); animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ============================================================
   7. HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; padding:clamp(46px,6vw,88px) 0 clamp(64px,7.5vw,112px)}
.hero__bg{position:absolute; top:-20%; right:-24%; width:min(122vw,1080px); display:grid; place-items:center; pointer-events:none}
.hero__fade{position:absolute; left:0; right:0; bottom:0; height:110px; background:linear-gradient(180deg,transparent,rgba(250,245,234,.9) 60%,var(--ivory))}

/* Mobile source order: title → video → supporting copy + CTAs.
   On desktop the two copy blocks stack in column 1, video fills column 2. */
.hero__inner{position:relative; z-index:2; display:grid; gap:clamp(30px,4.2vw,42px); align-items:center}
.hero__head,.hero__body{max-width:660px}
.hero__title{font-size:clamp(34px,5.6vw,58px); line-height:1.08; color:var(--maroon); text-shadow:0 1px 0 rgba(255,255,255,.5)}
.hero__sub{font-size:clamp(16px,1.75vw,19px); color:var(--ink-70); max-width:56ch}
.hero__sub strong{color:var(--maroon); font-weight:600}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.2vw,38px)}

/* Stacked hero (phones & tablets): centre everything on the same axis as the video card */
@media (max-width:999.98px){
  .hero__head,.hero__body{margin-inline:auto; text-align:center}
  .hero__head .eyebrow{justify-content:center; padding-left:.24em}   /* offsets trailing letter-space */
  .hero__price-line{justify-content:center}
  .hero__sub{max-width:42ch; margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero__trust{justify-content:center}
}
@media (max-width:559.98px){
  .hero__cta .btn{flex:1 1 auto}   /* buttons share the row evenly, and go full width if they wrap */
}
.hero__trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:.65em;
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line);
  font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-55);
}
.hero__trust i{color:var(--gold); font-style:normal; font-size:14px}
/* Price sits right under the headline: on phones it lands on the first screen, above the video */
.hero__price-line{display:flex; margin-top:clamp(16px,2vw,22px)}
.hero__price{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:12px; font-weight:600; text-transform:uppercase;
  padding:.5em 1em .5em .85em; border-radius:999px;
  color:var(--gold-lt); letter-spacing:.14em;
  background:linear-gradient(160deg,var(--maroon-rich),var(--maroon-deep));
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.6), 0 8px 18px -12px rgba(59,14,22,.9);
}
.hero__price b{font:700 15px/1 var(--sans); letter-spacing:.01em; color:#FFF6E4}
@media (min-width:1000px){
  .hero__trust{font-size:11.5px; letter-spacing:.085em; column-gap:.55em}   /* keeps the three points on one line in the narrower desktop column */
}
/* Where the three points can wrap, drop the separator dots so none are stranded at a line end */
@media (max-width:1199.98px){
  .hero__trust{column-gap:18px; row-gap:10px}
  .hero__trust i{display:none}
}

/* --- Hero chart card --- */
.hero__visual{position:relative; display:flex; justify-content:center}
.chart-stage{position:relative; width:min(100%,440px)}
.chart-stage::before{
  content:""; position:absolute; inset:-14% -12%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(216,138,43,.3), rgba(216,138,43,.08) 55%, transparent 75%);
}
.chart-card{
  position:relative; z-index:2;
  background:linear-gradient(170deg,#FFFDF6,#F7EEDB);
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-lg);
  overflow:hidden;
}
.chart-card::before{
  content:""; position:absolute; inset:7px; border:1px solid rgba(201,164,92,.4);
  border-radius:15px; pointer-events:none; z-index:3;
}
.chart-card__head{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:15px 22px 14px;
  background:linear-gradient(160deg,var(--maroon-rich),var(--maroon-deep));
  color:var(--gold-lt);
}
.chart-card__head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--foil-soft);
}
.chart-card__label{font:600 10.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase}
.chart-card__status{display:inline-flex; align-items:center; font-size:11.5px; color:rgba(250,245,234,.78); white-space:nowrap}
/* spacing on the icon only — a flex gap would also land before " video" and double the space */
.chart-card__status .ico{width:10px; height:10px; margin-right:6px; color:var(--saffron)}
/* Narrow phones: keep both labels on one line */
@media (max-width:420px){
  .chart-card__head{padding-inline:18px}
  .chart-card__label{letter-spacing:.15em; white-space:nowrap}
  .chart-card__status-extra{display:none}
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--saffron); box-shadow:0 0 0 0 rgba(216,138,43,.6); animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(216,138,43,.55)}
  70%{box-shadow:0 0 0 10px rgba(216,138,43,0)}
  100%{box-shadow:0 0 0 0 rgba(216,138,43,0)}
}
.chart-card__body{position:relative; padding:24px 24px 14px}

/* --- Hero video --- */
.chart-media{
  position:relative; overflow:hidden;
  aspect-ratio:1 / 1;                 /* source is 1080 × 1080 */
  background:linear-gradient(170deg,#FFFDF6,#F7EEDB);
}
.chart-media__video{
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%;
  object-fit:cover;
}
/* Cover image holds the frame until the video paints — and stays if it never does */
.chart-media__fallback{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(170deg,#FFFDF6,#F7EEDB);
  transition:opacity .6s var(--ease);
}
.chart-media__cover{display:block; width:100%; height:100%; object-fit:cover}
.chart-media.is-playing .chart-media__fallback{opacity:0; visibility:hidden; pointer-events:none}
/* Gold hairline + inner vignette over whichever layer is showing */
.chart-media__frame{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.45), inset 0 0 70px rgba(59,14,22,.16);
}
.chart-media{cursor:pointer}

/* Soft dark wash behind the play button so it reads over any frame of the preview */
.chart-media::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(38,9,14,.42), rgba(38,9,14,.12) 62%, transparent 90%);
  opacity:0; transition:opacity .5s var(--ease);
}
.chart-media.is-playing.has-cta::before{opacity:1}   /* only over footage, not the ivory SVG fallback */

/* Round play button — play / watch again */
.vid-cta{
  position:absolute; left:50%; top:50%; z-index:5;
  display:grid; place-items:center;
  width:60px; height:60px; padding:0;
  border-radius:50%;
  background:rgba(38,9,14,.38);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(241,220,172,.55), 0 18px 40px -14px rgba(0,0,0,.7);
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  animation:fade .45s var(--ease) both;
}
.vid-cta__icon{
  position:relative; display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--foil); background-size:180% 100%;
  color:var(--maroon-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(90,60,10,.3), 0 6px 16px -6px rgba(0,0,0,.55);
  transition:background-position .6s var(--ease);
}
.vid-cta__icon .ico{width:20px; height:20px; margin-left:2px; stroke-width:2.2}   /* nudge ▶ to its optical centre */
/* Two staggered pulse rings */
.vid-cta::before,.vid-cta::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(241,220,172,.75);
  animation:ring 2.6s var(--ease) infinite;
}
.vid-cta::after{animation-delay:1.3s}
@keyframes ring{0%{transform:scale(1); opacity:.85}100%{transform:scale(1.55); opacity:0}}

.vid-cta:hover{transform:translate(-50%,-50%) scale(1.07); box-shadow:inset 0 0 0 1px var(--gold-lt), 0 22px 46px -14px rgba(0,0,0,.8)}
.vid-cta:hover .vid-cta__icon{background-position:100% 0}
.vid-cta:active{transform:translate(-50%,-50%) scale(.97)}

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:400px){
  .vid-cta{width:54px; height:54px}
  .vid-cta__icon{width:43px; height:43px}
  .vid-cta__icon .ico{width:18px; height:18px}
}

/* Control bar */
.vid-bar{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:5;
  display:flex; align-items:center; gap:8px;
  padding:5px 8px;
  border-radius:12px;
  background:rgba(38,9,14,.78);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.45), 0 12px 26px -14px rgba(0,0,0,.8);
  color:var(--gold-lt);
  cursor:default;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.vid-btn{
  display:grid; place-items:center; flex:none;
  width:34px; height:34px; border-radius:50%;
  color:var(--gold-lt); transition:background-color .2s var(--ease);
}
.vid-btn:hover{background:rgba(201,164,92,.22)}
.vid-btn .ico{width:17px; height:17px; stroke-width:1.9}
.vid-seek{position:relative; flex:1; height:24px; cursor:pointer; touch-action:none}
.vid-seek::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:3px; margin-top:-1.5px; border-radius:3px; background:rgba(255,246,228,.22);
}
.vid-seek__fill{
  position:absolute; left:0; top:50%; width:0;
  height:3px; margin-top:-1.5px; border-radius:3px; background:var(--foil-soft);
}
.vid-seek__fill::after{
  content:""; position:absolute; right:-6px; top:50%;
  width:12px; height:12px; margin-top:-6px; border-radius:50%;
  background:var(--gold-lt); box-shadow:0 0 0 3px rgba(201,164,92,.32);
}
.vid-seek:focus-visible{outline-offset:1px}
.vid-time{flex:none; font:500 11px/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.02em; color:rgba(255,246,228,.84)}

/* While playing on mouse screens, tuck the bar away until the video is hovered */
@media (hover:hover){
  .chart-media.is-engaged:not(.is-paused):not(:hover):not(:focus-within) .vid-bar{opacity:0; transform:translateY(8px)}
}
.chart-card__foot{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
  padding:14px 22px 17px; border-top:1px solid rgba(201,164,92,.36);
  font-size:11.8px; color:var(--ink-55);
}
.chart-card__foot span{display:inline-flex; align-items:center; gap:6px}
.chart-card__foot b{color:var(--maroon); font-weight:600}
.chart-card__foot .ico{width:14px; height:14px; color:var(--gold-dk)}


/* ============================================================
   7b. OUR TEAM — carousel
   ============================================================ */
.team__slider{position:relative}
.team__track{
  --per:1.2;              /* cards visible; fraction peeks the next one on phones */
  --gap:16px;
  position:relative;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
  gap:var(--gap);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* room for card shadows and the hover lift inside the scroller */
  padding:14px 4px 34px; margin:-14px -4px -34px;
  scroll-padding-inline:4px;
}
.team__track::-webkit-scrollbar{display:none}

.team-card{
  position:relative;
  scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:24px 20px 20px;
  background:linear-gradient(168deg,#FFFDF7,#F6ECD8);
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.4), 0 18px 36px -28px rgba(43,28,23,.65);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.team-card::before{
  content:""; position:absolute; inset:7px; border-radius:15px; pointer-events:none;
  border:1px solid rgba(201,164,92,.28);
}
.team-card:hover{transform:translateY(-5px); box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-md)}

/* Temple-arch portrait in a gold-leaf frame */
.team-card__photo{
  position:relative;
  width:min(100%,196px); aspect-ratio:4 / 5;
  margin:0 auto 28px;
  padding:5px;
  border-radius:999px 999px 14px 14px;
  background:var(--foil-soft);
  box-shadow:0 20px 36px -22px rgba(59,14,22,.85);
}
.team-card__frame{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:100%; height:100%;
  border-radius:999px 999px 10px 10px;
  background-color:var(--maroon-deep);
  background-image:
    var(--wm-diamond),
    radial-gradient(90% 60% at 50% 22%, rgba(150,48,60,.95), transparent 72%),
    linear-gradient(175deg,var(--maroon),var(--maroon-deep));
  background-size:92px 92px, auto, auto;
}
.team-card__frame::after{
  content:""; position:absolute; inset:7px; z-index:2; pointer-events:none;
  border-radius:999px 999px 6px 6px;
  border:1px solid rgba(201,164,92,.6);   /* reads on both the cream photo backdrop and the maroon fallback */
}
.team-card__frame img{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover}
.team-card__initials{
  font:400 clamp(40px,4vw,50px)/1 var(--serif); letter-spacing:.04em;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.team-card__exp{
  position:absolute; left:50%; bottom:-13px; z-index:3;
  transform:translateX(-50%);
  padding:.6em 1.1em; border-radius:999px; white-space:nowrap;
  background:linear-gradient(160deg,var(--maroon-rich),var(--maroon-deep));
  color:var(--gold-lt);
  font:600 10.5px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.65), 0 8px 18px -10px rgba(59,14,22,.9);
}

.team-card__name{font-size:21px; color:var(--maroon); margin-bottom:5px}
.team-card__role{
  margin-bottom:14px;
  font:600 10.5px/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--saffron-deep);
}
.team-card__tags{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 4px}
.team-card__tags li{
  padding:.45em .85em; border-radius:999px;
  font-size:12px; line-height:1.2; color:var(--ink-70);
  background:rgba(201,164,92,.12);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.36);
}

/* Controls: prev · dots · next */
.team__controls{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:clamp(26px,3vw,38px);
}
.team__nav{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:50%;
  color:var(--maroon);
  background:rgba(255,253,247,.8);
  box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-sm);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.team__nav:hover{
  background:linear-gradient(160deg,var(--maroon-rich),var(--maroon-deep));
  color:var(--gold-lt); transform:translateY(-2px);
}
.team__nav .ico{width:18px; height:18px; stroke-width:2}
.team__nav--prev .ico{transform:rotate(90deg)}
.team__nav--next .ico{transform:rotate(-90deg)}

.team__dots{display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:2px; max-width:260px}
.team__dot{position:relative; width:16px; height:24px}   /* generous tap target around a small dot */
.team__dot::before{
  content:""; position:absolute; left:4px; right:4px; top:50%; height:8px; margin-top:-4px;
  border-radius:999px; background:rgba(201,164,92,.42);
  transition:background .35s var(--ease);
}
.team__dot.is-active{width:36px}
.team__dot.is-active::before{background:var(--foil-soft)}
.team__dot{transition:width .35s var(--ease)}

@media (min-width:560px){ .team__track{--per:2; --gap:18px} }
@media (min-width:900px){ .team__track{--per:3; --gap:22px} }
@media (min-width:1180px){ .team__track{--per:4; --gap:24px} }

/* ============================================================
   7c. CLIENT FEEDBACK
   ============================================================ */
.testimonials__lede{margin-bottom:0}

/* Phones: a swipeable row that bleeds to the screen edges */
.tgrid{
  display:flex; gap:14px;
  margin-inline:calc(var(--gutter) * -1);
  padding:8px var(--gutter) 22px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.tgrid::-webkit-scrollbar{display:none}

.tcard{
  position:relative;
  display:flex; flex-direction:column;
  flex:0 0 min(84%,340px);
  scroll-snap-align:start;
  margin:0;
  padding:26px 24px 20px;
  background:linear-gradient(170deg,#FFFCF4,#F3E6CC);
  border-radius:var(--r-md);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.55), 0 26px 46px -28px rgba(0,0,0,.8);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tcard::before{
  content:""; position:absolute; inset:7px; border-radius:11px; pointer-events:none;
  border:1px solid rgba(201,164,92,.3);
}
/* Large gold opening quote mark */
.tcard::after{
  content:"\201C"; position:absolute; top:6px; right:18px;
  font:400 84px/1 var(--serif); color:var(--gold); opacity:.32;
  pointer-events:none;
}
.tcard:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--gold), 0 32px 54px -28px rgba(0,0,0,.85)}

.tcard__stars{display:flex; gap:3px; margin-bottom:14px; color:var(--saffron)}
.tcard__stars .ico{width:16px; height:16px}

.tcard__quote{margin:0 0 20px}
.tcard__quote p{font:400 16px/1.62 var(--serif); color:var(--ink)}

.tcard--featured{background:linear-gradient(165deg,#FFFDF7,#F1DFBE)}
.tcard--featured .tcard__quote p{font-size:clamp(17px,1.9vw,20.5px); line-height:1.55; color:var(--maroon-deep)}
.tcard--featured .tcard__stars .ico{width:18px; height:18px}

.tcard__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin-top:auto; padding-top:16px;   /* pins the author row to the card bottom */
  border-top:1px solid rgba(201,164,92,.38);
}
.tcard__avatar{
  display:block; flex:none;
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(155deg,var(--maroon-rich),var(--maroon-deep));
  object-fit:cover;   /* it's an <img> now — keeps the face centred in the circle */
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.6), 0 6px 14px -8px rgba(59,14,22,.8);
}
.tcard__who{display:flex; flex-direction:column; line-height:1.3; margin-right:auto}
.tcard__name{font:600 14.5px/1.3 var(--sans); color:var(--maroon)}
.tcard__meta{font-size:12.5px; color:var(--ink-55)}
.tcard__topic{
  padding:.5em .85em; border-radius:999px;
  font:600 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--saffron-deep);
  background:rgba(216,138,43,.12);
  box-shadow:inset 0 0 0 1px rgba(216,138,43,.34);
}

.tgrid__hint{
  margin-top:4px; text-align:center;
  font:600 10.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(241,220,172,.6);
}
.tgrid__hint::after{content:"  \2192"}

/* Tablet: featured quote full width, then a 2 × 2 grid */
@media (min-width:760px){
  .tgrid{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    margin-inline:0; padding:0; overflow:visible;
  }
  .tcard{padding:30px 28px 22px}
  .tcard--featured{grid-column:1 / -1}
  .tgrid__hint{display:none}
}
/* Desktop: featured quote spans two rows beside the 2 × 2 block */
@media (min-width:1100px){
  .tgrid{grid-template-columns:1.2fr 1fr 1fr; gap:24px}
  .tcard--featured{grid-column:auto; grid-row:span 2; padding:36px 34px 26px}
  .tcard--featured .tcard__quote{margin-top:auto}   /* share the spare height above and below the quote */
}

/* ============================================================
   8. PROBLEM
   ============================================================ */
.problem-copy{max-width:800px; margin-bottom:clamp(44px,5.2vw,68px)}
.pull{
  position:relative; margin:0; padding:0 0 0 clamp(20px,3vw,32px);
}
.pull::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px; border-radius:3px;
  background:var(--foil-soft);
}
.pull p{color:var(--ink-70); font-size:clamp(16px,1.6vw,18px)}
.pull p + p{margin-top:.9em}
.pull strong{display:block; color:var(--maroon); font-family:var(--serif); font-weight:400; font-size:1.28em; line-height:1.35; letter-spacing:-.01em}

.highlight-line{margin-top:clamp(26px,3vw,36px)}
.highlight-line span{
  display:inline-block; padding:.66em 1.4em;
  background:linear-gradient(160deg,rgba(216,138,43,.17),rgba(201,164,92,.1));
  box-shadow:inset 0 0 0 1px rgba(216,138,43,.4);
  border-radius:999px;
  font:400 clamp(17px,2vw,22px)/1.3 var(--serif);
  color:var(--maroon);
}

.compare{display:grid; gap:16px; align-items:stretch}
.compare__card{
  position:relative; padding:clamp(26px,3.2vw,38px);
  border-radius:var(--r-md);
}
.compare__card--plain{
  background:rgba(43,28,23,.035);
  box-shadow:inset 0 0 0 1px rgba(43,28,23,.1);
}
.compare__card--ours{
  background:linear-gradient(168deg,#FFFDF6,#F6EAD2);
  box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-md);
}
.compare__card--ours::before{
  content:""; position:absolute; inset:7px; border-radius:11px;
  border:1px solid rgba(201,164,92,.45); pointer-events:none;
}
.compare__ribbon{
  position:absolute; top:-12px; left:clamp(26px,3.2vw,38px); z-index:2;
  padding:.5em 1em; border-radius:999px;
  background:linear-gradient(160deg,var(--maroon-rich),var(--maroon-deep)); color:var(--gold-lt);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.5), 0 8px 18px -12px rgba(59,14,22,.9);
  font:600 10px/1 var(--sans); letter-spacing:.17em; text-transform:uppercase;
}
.compare__title{font-size:clamp(21px,2.5vw,26px); color:var(--maroon); margin-bottom:1em}
.compare__card--plain .compare__title{color:var(--ink-55)}
.compare__list li{position:relative; padding-left:28px; color:var(--ink-70); font-size:15.5px}
.compare__list li + li{margin-top:.78em}
.compare__list li::before{
  content:""; position:absolute; left:7px; top:.6em;
  width:8px; height:8px; transform:rotate(45deg);
  box-shadow:inset 0 0 0 1px rgba(43,28,23,.34);
}
.compare__list--check li{color:var(--ink)}
.compare__list--check li::before{
  content:""; left:0; top:.34em; width:17px; height:17px; transform:none; box-shadow:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B26A14' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.6 9.4 17.4 19.4 7'/%3E%3C/svg%3E");
}
.compare__vs{display:grid; place-items:center; padding:4px 0}
.compare__vs span{
  position:relative; display:grid; place-items:center; width:54px; height:54px;
  font:600 12px/1 var(--sans); letter-spacing:.14em; color:var(--gold-dk);
}
.compare__vs span::before{
  content:""; position:absolute; inset:0; transform:rotate(45deg); border-radius:10px;
  background:linear-gradient(145deg,#FFFCF2,#EFE0C0);
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 8px 18px -12px rgba(43,28,23,.6);
  z-index:-1;
}
.compare__vs span{isolation:isolate}

/* ============================================================
   9. THE DIFFERENCE (dark)
   ============================================================ */
.section--dark{
  position:relative; overflow:hidden;
  background-color:var(--maroon-deep);
  background-image:
    radial-gradient(96% 70% at 50% -4%, rgba(139,44,54,.85), transparent 62%),
    radial-gradient(60% 50% at 8% 100%, rgba(216,138,43,.16), transparent 65%),
    repeating-linear-gradient(135deg, rgba(201,164,92,.05) 0 1px, transparent 1px 16px),
    linear-gradient(180deg,var(--maroon),#2F0A11);
  color:#FFF6E4;
}
.section--dark::before,.section--dark::after{
  content:""; position:absolute; left:0; right:0; height:2px; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(201,164,92,.75) 25%,rgba(241,220,172,.9) 50%,rgba(201,164,92,.75) 75%,transparent);
}
.section--dark::before{top:0} .section--dark::after{bottom:0}
.section--dark .wrap{position:relative; z-index:2}
.dark-lede{
  max-width:58ch; margin:0 auto clamp(50px,6vw,78px);
  text-align:center; color:rgba(255,246,228,.78);
  font-size:clamp(15.5px,1.6vw,18px);
}

.bignum{position:relative; display:flex; flex-direction:column; align-items:center; margin:clamp(6px,2vw,18px) 0 clamp(22px,3vw,32px)}
.bignum::before{
  content:""; position:absolute; top:50%; left:50%; width:min(76vw,440px); aspect-ratio:1;
  transform:translate(-50%,-56%);
  background:radial-gradient(closest-side, rgba(216,138,43,.28), transparent 70%);
  pointer-events:none;
}
.bignum__value{
  position:relative;
  font:400 clamp(84px,17vw,196px)/.9 var(--serif);
  background:var(--foil); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.03em;
  animation:shimmer 9s linear infinite;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.4));
}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:250% 0}}
.bignum__unit{
  margin-top:8px; font:600 clamp(13px,1.6vw,16px)/1 var(--sans);
  letter-spacing:.45em; text-transform:uppercase; color:var(--gold-lt); padding-left:.45em;
}
.bignum__note{margin-top:18px; font-size:13.5px; color:rgba(255,246,228,.58); letter-spacing:.05em}

.timeline{position:relative; max-width:840px; margin-inline:auto}
.timeline::before{
  content:""; position:absolute; left:29px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,164,92,.6) 10%,rgba(201,164,92,.6) 90%,transparent);
}
.timeline__item{position:relative; display:flex; gap:clamp(18px,3vw,32px); padding:0 0 clamp(30px,3.6vw,44px) 0}
.timeline__item:last-child{padding-bottom:0}
.timeline__num{
  position:relative; isolation:isolate; z-index:2; flex:none;
  display:grid; place-items:center;
  width:59px; height:59px;
  font:400 16px/1 var(--serif); color:var(--gold-lt);
}
.timeline__num::before{
  content:""; position:absolute; inset:7px; z-index:-1;
  transform:rotate(45deg); border-radius:8px;
  background:linear-gradient(150deg,#5E1720,#300A11);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.7), 0 10px 22px -12px rgba(0,0,0,.9);
}
.timeline__num::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:50%;
  border:1px solid rgba(201,164,92,.22);
}
.timeline__body h3{font-size:clamp(19px,2.2vw,24px); color:#FFF6E4; margin:14px 0 .42em}
.timeline__body p{color:rgba(255,246,228,.74); font-size:15.5px; max-width:58ch}

/* ============================================================
   10. WHAT WE ANALYZE
   ============================================================ */
.grid-analyze{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.acard{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px;
  padding:16px 14px;
  background:linear-gradient(165deg,#FFFDF7,#F8F0DF);
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.34), 0 10px 22px -18px rgba(43,28,23,.6);
  transition:transform .34s var(--ease), box-shadow .34s var(--ease);
}
.acard:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-md)}
.acard:hover .gem::before{
  background:linear-gradient(150deg,var(--maroon-rich),var(--maroon-deep));
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.7), 0 10px 20px -12px rgba(59,14,22,.9);
  transform:rotate(135deg);
}
.acard:hover .gem > svg{stroke:var(--gold-lt)}
.acard h3{font:600 15px/1.3 var(--sans); color:var(--maroon); letter-spacing:0}
.acard--accent{
  background:linear-gradient(155deg,var(--maroon-rich),var(--maroon-deep));
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.55), 0 14px 30px -18px rgba(59,14,22,.9);
}
.acard--accent h3{color:var(--gold-lt)}
.acard--accent .gem::before{
  background:var(--foil-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.acard--accent .gem > svg{stroke:#3A1109}
.acard--accent:hover .gem::before{background:var(--foil-soft); transform:rotate(135deg)}
.acard--accent:hover .gem > svg{stroke:#3A1109}

.grid-analyze__note{
  position:relative;
  margin:clamp(34px,4vw,48px) auto 0; padding-top:clamp(28px,3.2vw,38px);
  text-align:center;
  font:400 clamp(19px,2.4vw,26px)/1.45 var(--serif); color:var(--maroon);
  max-width:36ch;
}
.grid-analyze__note::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ============================================================
   11. ASK
   ============================================================ */
.ask{display:grid; gap:clamp(36px,4.6vw,64px); align-items:start}
.ask__copy .sec-title{margin-bottom:.5em}
.ask__line{
  margin:clamp(22px,2.8vw,30px) 0;
  padding-left:18px; border-left:3px solid var(--gold);
  font:400 clamp(17px,2vw,22px)/1.45 var(--serif); color:var(--maroon);
}
.qlist{display:grid; gap:11px}
.qcard{
  position:relative;
  padding:18px 22px 18px 52px;
  background:linear-gradient(165deg,#FFFDF7,#F7EFDE);
  border-radius:var(--r-md);
  font:400 16.5px/1.45 var(--serif);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.34), 0 10px 22px -18px rgba(43,28,23,.55);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.qcard::before{
  content:"”"; position:absolute; left:18px; top:14px;
  font:400 38px/1 var(--serif); color:var(--gold); opacity:.85;
}
.qcard:hover{transform:translateX(5px); box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-sm)}

/* ============================================================
   12. WHAT YOU RECEIVE
   ============================================================ */
.receive{display:grid; gap:clamp(40px,5vw,68px); align-items:center}
.checklist{margin-top:clamp(24px,3vw,32px)}
.checklist li{display:flex; align-items:flex-start; gap:13px; font-size:16px; color:var(--ink-70)}
.checklist li + li{margin-top:.86em}
.checklist .ico{
  width:22px; height:22px; margin-top:2px; padding:3px; border-radius:50%;
  color:var(--wa-dark); stroke-width:2.6;
  background:rgba(37,211,102,.12); box-shadow:inset 0 0 0 1px rgba(14,124,67,.28);
}
.receive__emph{
  position:relative; margin-top:clamp(28px,3vw,36px); padding:20px 22px;
  background:linear-gradient(150deg,rgba(37,211,102,.12),rgba(37,211,102,.04));
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  box-shadow:inset 3px 0 0 var(--wa);
  font-size:15.5px; color:var(--ink);
}

/* WhatsApp mock */
.phone{
  position:relative;
  width:min(100%,368px); margin-inline:auto;
  background:#ECE5DD;
  border:11px solid #17100E;
  border-radius:38px;
  box-shadow:0 0 0 1px rgba(201,164,92,.4), var(--shadow-lg);
  overflow:hidden;
}
.phone__bar{display:flex; align-items:center; gap:11px; padding:14px 15px; background:linear-gradient(180deg,#0b6e62,#075E54); color:#fff}
.phone__avatar{display:block; flex:none; width:36px; height:36px; border-radius:50%; object-fit:contain; background:#fff}
.phone__meta{display:flex; flex-direction:column; line-height:1.25; margin-right:auto}
.phone__meta b{font-size:14px; font-weight:600}
.phone__meta i{font-style:normal; font-size:11px; opacity:.78}
.phone__wa{width:20px; height:20px; opacity:.85}

.phone__thread{
  padding:16px 13px; display:flex; flex-direction:column; gap:9px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5), transparent 22%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.45), transparent 20%),
    #ECE5DD;
  max-height:440px; overflow:hidden;
}
.bub{
  position:relative; max-width:84%;
  padding:8px 11px 20px; border-radius:10px;
  font-size:13.4px; line-height:1.5;
  box-shadow:0 1px 1px rgba(0,0,0,.12);
}
.bub p{margin:0}
.bub--in{align-self:flex-start; background:#fff; border-top-left-radius:3px}
.bub--out{align-self:flex-end; background:#DCF8C6; border-top-right-radius:3px}
.bub__t{position:absolute; right:9px; bottom:5px; font-size:10px; color:rgba(0,0,0,.42)}
.bub--file{padding-top:10px}
.bub__file{display:flex; align-items:center; gap:10px; padding:8px; background:rgba(0,0,0,.05); border-radius:8px}
.bub__file .ico{width:22px; height:22px; color:var(--maroon)}
.bub__file span{display:flex; flex-direction:column; line-height:1.35}
.bub__file b{font-size:12.8px}
.bub__file i{font-style:normal; font-size:11px; color:rgba(0,0,0,.45)}
.phone__input{
  display:flex; align-items:center; gap:10px; padding:10px 13px 14px; background:#ECE5DD;
  font-size:13px; color:rgba(0,0,0,.35);
}
.phone__input span{flex:1; padding:9px 14px; background:#fff; border-radius:999px}
.phone__send{width:34px; height:34px; border-radius:50%; background:var(--wa-dark); flex:none}

/* ============================================================
   13b. PRICING — one fixed price
   ============================================================ */
.pricing{overflow:hidden}   /* the glow below must never widen the page */
.pricing::before{
  content:""; position:absolute; left:50%; top:52%; width:min(100%,1100px); height:620px;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(216,138,43,.14), transparent 72%);
}
.pricing .wrap{position:relative}

.price-card{
  position:relative;
  display:grid;
  max-width:980px; margin:0 auto;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(170deg,#FFFDF7,#F7EEDB);
  box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-lg);
}

/* Left: the price */
.price-card__main{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(38px,5vw,56px) clamp(24px,4vw,44px);
  text-align:center; color:#FFF6E4;
  background-color:var(--maroon-deep);
  background-image:
    radial-gradient(90% 70% at 50% 0%, rgba(146,46,57,.9), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, rgba(216,138,43,.22), transparent 70%),
    repeating-linear-gradient(135deg, rgba(201,164,92,.05) 0 1px, transparent 1px 16px),
    linear-gradient(180deg,var(--maroon),#2F0A11);
}
.price-card__main::after{
  content:""; position:absolute; inset:9px; z-index:-1; pointer-events:none;
  border:1px solid rgba(201,164,92,.38); border-radius:14px;
}
.price-card__label{
  font:600 11px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lt);
}
.price{
  display:flex; align-items:flex-start; justify-content:center; gap:6px;
  margin:18px 0 4px; line-height:1;
}
.price__cur{
  margin-top:.5em;
  font:500 clamp(30px,3.6vw,40px)/1 var(--sans);   /* sans: Marcellus has no ₹ glyph */
  color:var(--gold-lt);
}
.price__amt{
  font:400 clamp(92px,13vw,132px)/.86 var(--serif); letter-spacing:-.02em;
  background:var(--foil); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 9s linear infinite;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.4));
}
.price__per{font-size:14px; letter-spacing:.05em; color:rgba(255,246,228,.72)}
.price__fixed{
  margin-top:18px; padding:.55em 1.1em; border-radius:999px;
  font:600 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lt);
  background:rgba(201,164,92,.1);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.5);
}
.price-card__cta{display:grid; justify-items:center; gap:14px; width:100%; margin-top:30px}
.price-card__cta .btn{width:100%; max-width:300px}
.price-card__alt{font-size:13.5px; color:rgba(255,246,228,.74)}
.price-card__alt a{color:var(--gold-lt); font-weight:600; border-bottom:1px solid rgba(241,220,172,.45)}
.price-card__alt a:hover{color:#fff; border-color:#fff}

/* Right: what's included */
.price-card__details{padding:clamp(32px,4.4vw,52px) clamp(24px,4vw,48px)}
.price-card__h{font-size:clamp(21px,2.4vw,26px); color:var(--maroon); margin-bottom:6px}
.price-card__sub{font-size:14.5px; color:var(--ink-55); margin-bottom:22px}

.price-list li{display:flex; align-items:flex-start; gap:13px; font-size:15.5px; color:var(--ink)}
.price-list li + li{margin-top:14px}
.price-list .ico{
  width:24px; height:24px; margin-top:0; padding:5px; border-radius:50%;
  color:var(--saffron-deep); stroke-width:2.8;
  background:rgba(216,138,43,.12);
  box-shadow:inset 0 0 0 1px rgba(216,138,43,.38);
}

.price-card__meta{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:28px; padding-top:22px;
  border-top:1px solid var(--line);
}
.price-card__meta span{
  display:inline-flex; align-items:center; gap:7px;
  padding:.5em .9em; border-radius:999px;
  font-size:12.5px; color:var(--ink-70);
  background:rgba(201,164,92,.1);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.34);
}
.price-card__meta .ico{width:15px; height:15px; color:var(--gold-dk)}

@media (min-width:860px){
  .price-card{grid-template-columns:.92fr 1.08fr}
}

/* ============================================================
   16. FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line); transition:background-color .3s var(--ease)}
.faq__item.is-open{background:linear-gradient(90deg,rgba(201,164,92,.09),transparent 70%)}
.faq__q{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:100%; padding:23px 10px 23px 28px; text-align:left;
  font:400 clamp(16.5px,1.9vw,19.5px)/1.4 var(--serif); color:var(--maroon);
  transition:color .25s var(--ease);
}
.faq__q::before{
  content:""; position:absolute; left:4px; top:50%; width:9px; height:9px;
  margin-top:-4.5px; transform:rotate(45deg) scale(.7);
  background:var(--foil-soft); border-radius:2px;
  opacity:.35; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.faq__q:hover{color:var(--saffron-deep)}
.faq__q:hover::before,.faq__q[aria-expanded="true"]::before{opacity:1; transform:rotate(45deg) scale(1)}
.faq__chev{width:19px; height:19px; flex:none; color:var(--gold-dk); transition:transform .35s var(--ease)}
.faq__q[aria-expanded="true"] .faq__chev{transform:rotate(180deg)}
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 46px 25px 28px; color:var(--ink-70); font-size:15.5px}
.faq__foot{margin-top:clamp(30px,3.4vw,40px); text-align:center; color:var(--ink-55); font-size:15px}
.faq__foot a{color:var(--maroon); font-weight:600; border-bottom:1px solid var(--line-strong)}
.faq__foot a:hover{color:var(--saffron-deep); border-color:var(--saffron)}

/* ============================================================
   17. FINAL CTA
   ============================================================ */
.final-cta{
  position:relative; overflow:hidden;
  padding:clamp(72px,8.6vw,120px) 0;
  background-color:var(--maroon-deep);
  background-image:
    radial-gradient(92% 74% at 50% -6%, rgba(146,46,57,.9), transparent 60%),
    radial-gradient(50% 44% at 50% 108%, rgba(216,138,43,.22), transparent 70%),
    repeating-linear-gradient(135deg, rgba(201,164,92,.05) 0 1px, transparent 1px 16px),
    linear-gradient(180deg,var(--maroon),#2C0910);
  color:#FFF6E4;
  text-align:center;
}
.final-cta::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(201,164,92,.75) 25%,rgba(241,220,172,.9) 50%,rgba(201,164,92,.75) 75%,transparent);
}
.final-cta__inner{position:relative; z-index:2; max-width:780px}
.final-cta__title{font-size:clamp(31px,4.8vw,53px); color:#FFF8EA; margin-bottom:.5em; text-shadow:0 2px 24px rgba(0,0,0,.35)}
.final-cta__sub{color:rgba(255,246,228,.8); font-size:clamp(16px,1.7vw,18.5px); max-width:54ch; margin-inline:auto}
.final-cta__btns{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(32px,3.8vw,44px)}
.final-cta__note{
  margin-top:30px; padding-top:24px; font-size:12.5px; letter-spacing:.09em;
  color:rgba(255,246,228,.6);
  border-top:1px solid rgba(201,164,92,.3);
  display:inline-block;
}

/* ============================================================
   18. FOOTER
   ============================================================ */
.site-footer{
  position:relative;
  background-color:var(--brown);
  background-image:radial-gradient(70% 100% at 50% 0%, rgba(90,24,32,.55), transparent 70%);
  color:rgba(250,245,234,.74);
  padding:clamp(48px,5.4vw,70px) 0 110px;
}
.site-footer__inner{display:grid; gap:34px}
.site-footer__brand{display:flex; gap:14px; align-items:flex-start; max-width:390px}
.site-footer__brand b{display:block; font:400 20px/1 var(--serif); color:var(--gold-lt); margin-bottom:9px}
.site-footer__brand p{font-size:14px; color:rgba(250,245,234,.56)}
.site-footer__nav{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14.5px}
.site-footer__nav a:hover{color:var(--gold-lt)}
.site-footer__contact{display:flex; flex-direction:column; gap:11px; font-size:14.5px}
.site-footer__contact a{display:inline-flex; align-items:center; gap:9px}
.site-footer__contact .ico{color:var(--gold)}
.site-footer__contact a:hover{color:var(--gold-lt)}
.site-footer__legal{
  margin-top:clamp(36px,4vw,52px); padding-top:26px;
  border-top:1px solid rgba(201,164,92,.24);
  display:grid; gap:10px; font-size:12.5px; color:rgba(250,245,234,.42);
}
.site-footer__disc{max-width:70ch}

/* ============================================================
   19. STICKY MOBILE CTA
   ============================================================ */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  /* three up: call (icon only on narrow phones), WhatsApp, then pay */
  display:grid; grid-template-columns:auto 1fr 1fr;
  gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(252,248,239,.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -14px 30px -24px rgba(43,28,23,.9);
}
/* Mobile browsers anchor fixed elements to the layout viewport, so while the address bar
   collapses/expands a strip of page can show beneath the bar. This extends its background
   downwards to cover that gap (and the home-indicator area). Off screen normally. */
.mobile-bar::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:160px;
  background:inherit; pointer-events:none;
}
.mobile-bar__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.94em 1em; border-radius:12px;
  font:600 14.5px/1 var(--sans);
}
.mobile-bar__btn .ico{width:17px; height:17px}
.mobile-bar__btn--call{color:var(--maroon); box-shadow:inset 0 0 0 1px var(--line-strong)}
.mobile-bar__btn--wa{background:linear-gradient(165deg,#3ee27d,var(--wa) 50%,#14a355); color:#04301a}
.mobile-bar__label{display:none}
.mobile-bar__btn--call{padding-inline:1.05em}
.mobile-bar__btn--pay{
  color:#fff;
  background:linear-gradient(165deg,var(--maroon-rich),var(--maroon-deep));
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.45);
}
@media (min-width:430px){
  .mobile-bar{grid-template-columns:.85fr 1fr 1fr}
  .mobile-bar__label{display:inline}
}

/* ============================================================
   20. PAY MODAL
   ============================================================ */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:10px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(34,10,14,.7); backdrop-filter:blur(5px); animation:fade .3s var(--ease)}
.modal__panel{
  position:relative; z-index:2;
  width:min(100%,478px); max-height:calc(100dvh - 20px);
  overflow-y:auto;
  /* top padding clears the close button (40px tall at top:12px) so the title can't run under it */
  padding:48px clamp(20px,3.4vw,36px) 18px;
  text-align:center;
  background-color:#FDF8EC;
  background-image:
    var(--wm-diamond),
    radial-gradient(100% 70% at 50% 0%, rgba(255,255,255,.96), rgba(247,238,219,.7) 60%, rgba(243,230,206,.85));
  background-size:148px 148px, auto;
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 50px 90px -40px rgba(0,0,0,.7);
  animation:pop .4s var(--ease);
}
@keyframes pop{from{opacity:0; transform:translateY(20px) scale(.97)}to{opacity:1; transform:none}}
.modal__panel::before{
  content:""; position:absolute; inset:8px; border:1px solid rgba(201,164,92,.42);
  border-radius:15px; pointer-events:none; z-index:2;
}
.modal__panel > *{position:relative; z-index:1}
/* Solid maroon disc so the way out is obvious against the cream panel */
.modal__close{
  position:absolute; top:12px; right:12px; z-index:4;
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  color:var(--gold-lt);
  background:linear-gradient(160deg,var(--maroon-rich),var(--maroon-deep));
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.65), 0 8px 18px -10px rgba(59,14,22,.9);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.modal__close .ico{width:18px; height:18px; stroke-width:2.2}
.modal__close:hover{transform:scale(1.07); filter:brightness(1.12); box-shadow:inset 0 0 0 1px var(--gold-lt), 0 12px 22px -10px rgba(59,14,22,.95)}
.modal__close:active{transform:scale(.96)}

.modal__title{font-size:22px; color:var(--maroon); margin-bottom:.5em}

/* Parent-company line: the name customers will see in their UPI app */
.modal__org{
  display:inline-flex; align-items:baseline; gap:.4em;
  margin:0 auto 8px; padding:.4em .95em; border-radius:999px;
  font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--maroon);
  background:rgba(201,164,92,.13);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.4);
}
.modal__org i{font-style:normal; font-weight:400; letter-spacing:.1em; color:var(--ink-40)}
.modal__org b{color:var(--saffron-deep); font-weight:700}

.modal__qr{margin:clamp(12px,1.8vw,16px) 0 clamp(12px,1.8vw,16px)}
.qr-frame{
  position:relative; display:inline-block; padding:16px;
  background:#fff; border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 18px 40px -24px rgba(43,28,23,.85);
}
.qr-frame::before,.qr-frame::after{
  content:""; position:absolute; width:20px; height:20px; border:2px solid var(--gold);
}
.qr-frame::before{top:6px; left:6px; border-right:0; border-bottom:0; border-radius:5px 0 0 0}
.qr-frame::after{bottom:6px; right:6px; border-left:0; border-top:0; border-radius:0 0 5px 0}
.qr-frame img{display:block; width:min(42vw,150px); height:auto}
/* Reads as one badge, with the amount as a maroon chip inside it */
.qr-caption{
  /* flex + fit-content: block-level (keeps its own row) but still hugs its text */
  display:flex; width:fit-content; align-items:center; gap:.7em;
  margin:0 auto 11px; padding:.34em .34em .34em 1.1em;
  border-radius:999px;
  background:rgba(201,164,92,.16);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.5);
  font:600 11.5px/1 var(--sans);
  letter-spacing:.2em; text-transform:uppercase; color:var(--maroon);
}
.qr-caption b{
  padding:.42em .72em; border-radius:999px;
  background:linear-gradient(160deg,var(--maroon-rich),var(--maroon-deep));
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.55);
  color:var(--gold-lt);
  font:700 15px/1 var(--sans); letter-spacing:.03em;
}
/* UPI ID as its own card — the fallback for anyone who can't scan */
.qr-upi{
  display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:8px 10px;
  max-width:100%; margin:14px auto 0; padding:10px 12px 10px 14px;
  border-radius:999px;
  background:var(--ivory-lt);
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 8px 18px -14px rgba(43,28,23,.7);
}
.qr-upi__label{
  font:600 9.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-40);
}
.qr-upi b{
  font:600 15.5px/1 var(--sans); letter-spacing:.015em; color:var(--maroon);
  word-break:break-all;
}
.copy-btn{
  padding:.45em .9em; border-radius:999px;
  background:rgba(201,164,92,.16);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font:600 11px/1.4 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--maroon); transition:background-color .25s var(--ease)
}
.copy-btn:hover{background:rgba(201,164,92,.18)}

/* UPI app buttons — shown only on touch devices, where the deep links actually open an app.
   `.is-touch` is set by main.js; the media query is the no-JS fallback. */
.pay-apps{display:none}
.is-touch .pay-apps{display:block; margin-top:12px; text-align:center}
@media (hover:none) and (pointer:coarse){
  .pay-apps{display:block; margin-top:16px; text-align:center}
}
.pay-apps__or{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
  font:600 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-40);
}
.pay-apps__or::before,.pay-apps__or::after{
  content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent);
}
/* Compact pill, light ground so the grey UPI mark sits on it without a chip */
.pay-upi{
  display:inline-flex; align-items:center; gap:10px;
  padding:.8em 1.5em; border-radius:999px;
  background:var(--ivory-lt);
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 8px 18px -12px rgba(43,28,23,.6);
  transition:background-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.pay-upi__text{font:700 15px/1 var(--sans); letter-spacing:.01em; color:var(--maroon)}
.pay-upi__logo{display:block; width:auto; height:15px}
.pay-upi:hover{background:rgba(201,164,92,.14); box-shadow:inset 0 0 0 1px var(--gold), 0 10px 22px -12px rgba(43,28,23,.65)}
.pay-upi:active{transform:scale(.98)}
.copy-btn.is-done{background:var(--wa); box-shadow:inset 0 0 0 1px var(--wa); color:#04301a}


.pay-note{
  max-width:36ch; margin:0 auto clamp(12px,1.6vw,14px);
  font-size:13px; line-height:1.5; color:var(--ink-70);
}
.modal__actions{display:grid; gap:10px; justify-items:center}
.modal__actions .btn{width:100%}
/* help is a quiet text link, not a second full-size button */
.modal__help{
  margin-top:2px; padding-bottom:2px;
  font:600 13px/1 var(--sans); color:var(--ink-55);
  border-bottom:1px solid var(--line-strong);
}
.modal__help:hover{color:var(--maroon); border-color:var(--maroon)}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */
@media (min-width:560px){
  .grid-analyze{grid-template-columns:repeat(2,1fr); gap:14px}
  .acard{padding:18px 16px; gap:14px}}

@media (min-width:760px){
  :root{--gutter:30px}
  .compare{grid-template-columns:1fr auto 1fr; gap:clamp(16px,2.4vw,30px)}
  .compare__vs{padding:0}
  .grid-analyze{grid-template-columns:repeat(3,1fr)}
  .ask{grid-template-columns:1fr 1fr; align-items:center}
  .receive{grid-template-columns:1.05fr .95fr}
  .site-footer__inner{grid-template-columns:1.4fr 1fr 1fr; align-items:start}
  .site-footer__legal{grid-template-columns:auto 1fr; align-items:center; gap:30px}
  .site-footer__disc{text-align:right}
}

@media (min-width:1000px){
  :root{--head-h:84px; --gutter:40px}
  .hero__inner{
    grid-template-columns:1.05fr .95fr;
    column-gap:clamp(40px,5vw,68px);
    row-gap:0;
  }
  /* Desktop puts the pill back under the headline (row 2); on phones it follows the video */
  .hero__head{grid-area:1 / 1 / 2 / 2; align-self:end}
  .hero__price-line{
    grid-area:2 / 1 / 3 / 2; align-self:center;
    /* extra room under the headline's gold underline, which dips below the text baseline */
    margin:clamp(28px,2.8vw,36px) 0 clamp(20px,2.2vw,30px);
  }
  .hero__body{grid-area:3 / 1 / 4 / 2; align-self:start}
  .hero__visual{grid-area:1 / 2 / 4 / 3; align-self:center}
  .chart-stage{width:min(100%,480px)}   /* larger video card balances the copy column's height */
  .grid-analyze{grid-template-columns:repeat(4,1fr)}
  .timeline__item{align-items:flex-start}
  .timeline__body h3{margin-top:15px}
}
/* The full menu (5 items) plus both CTAs only fits from here; below this it lives in the drawer,
   and the sticky Call/WhatsApp/Pay bar stays available instead. */
@media (min-width:1200px){
  .nav{display:flex}
  .mobile-bar{display:none}
  .site-footer{padding-bottom:clamp(48px,5.4vw,70px)}
}
/* Small laptops: narrower copy column, so a slightly smaller headline keeps it to three lines */
@media (min-width:1000px) and (max-width:1199.98px){
  .hero__title{font-size:46px}
  .hero__sub{font-size:16.5px}
}

/* Nav drawer — phones, tablets and small laptops */
@media (max-width:1199.98px){
  .nav{
    position:fixed; z-index:61; inset:calc(var(--head-h) + 4px) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:10px var(--gutter) 24px;
    background:#FCF8EF;
    border-bottom:1px solid var(--line-strong);
    box-shadow:var(--shadow-md);
    transform:translateY(-16px); opacity:0; pointer-events:none;
    transition:transform .34s var(--ease), opacity .34s var(--ease);
  }
  .nav.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav__link{padding:16px 2px; font-size:16px; border-bottom:1px solid var(--line-soft)}
  .nav__link::after{display:none}
  .nav__cta{display:grid; gap:10px; margin-top:20px}
  .nav__cta .btn{width:100%; padding:.98em 1.2em; font-size:15px}
  .burger{display:block}
  .hide-md{display:none}
  .site-header__actions .btn--primary{display:none}
}

@media (max-width:759.98px){
  body{font-size:16px}
  .hero{padding-top:28px}
  .hero__bg{top:-8%; right:-46%}
  .mandala--hero{opacity:.24}
  .chart-stage{width:min(100%,382px); margin-top:10px}
  .compare__vs span{width:48px; height:48px}
  .timeline::before{left:24px}
  .timeline__num{width:49px; height:49px; font-size:14px}
  .timeline__num::before{inset:5px}
  .timeline__body h3{margin-top:9px}
  .qcard{font-size:15.5px}
  .faq__a p{padding-right:10px}
  .site-footer{padding-bottom:98px}
}

@media (max-width:400px){
  .hero__title{font-size:32px}
  .btn--lg{padding:.98em 1.4em; font-size:14.5px}
  .orn{width:108px}
}

/* ============================================================
   22. MOBILE PERFORMANCE
   Phones repaint the whole screen for fixed backgrounds, full-viewport
   blend modes and backdrop blur. Below 1024px these are swapped for cheap
   equivalents — the look is near-identical, the scrolling is smooth.
   ============================================================ */
@media (max-width:1024px){
  body{background-attachment:scroll}
  body::before{display:none}                 /* grain overlay: blends the whole viewport every frame */

  .site-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(250,245,234,.96)}
  .site-header.is-stuck{background:rgba(252,248,239,.98)}
  .mobile-bar{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(252,248,239,.98)}
  .nav-scrim{backdrop-filter:none}
  .modal__backdrop{backdrop-filter:none; background:rgba(34,10,14,.82)}
  .vid-bar{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(38,9,14,.88)}
  .vid-cta{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(38,9,14,.5)}

  /* continuous repaints that are invisible at phone size */
  .mandala__spin{animation:none}
  .price__amt,.bignum__value{animation:none; background-position:0 0}
}
/* ============================================================
   23. POLICY MODAL (privacy / terms / refund)
   Reuses the pay-modal shell; documents read left-aligned.
   ============================================================ */
.site-footer__doc{
  padding:0; font:inherit; color:inherit; cursor:pointer;
  background:none; border:0; text-align:left;
}
.site-footer__doc:hover{color:var(--gold-lt)}

.modal--doc .modal__panel{
  width:min(100%,640px);
  padding:52px clamp(22px,4vw,40px) clamp(26px,3vw,34px);
  text-align:left;
}
.doc-title{font-size:clamp(22px,3vw,27px); color:var(--maroon); padding-right:44px}
.doc-updated{
  margin-top:6px; font:600 10.5px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40);
}
.doc-body{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.68; color:var(--ink-70);
}
.doc-body h3{
  margin:22px 0 7px;
  font:600 12px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--maroon);
}
.doc-body h3:first-child{margin-top:0}
.doc-body p + p{margin-top:11px}
.doc-body b{color:var(--ink); font-weight:600}
.doc-body ul{margin:9px 0 0; padding:0; list-style:none}
.doc-body li{position:relative; padding-left:18px; margin-bottom:6px}
.doc-body li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; transform:rotate(45deg);
  background:var(--gold);
}
.doc-body a{color:var(--maroon); font-weight:600; border-bottom:1px solid var(--line-strong)}
.doc-body a:hover{color:var(--saffron-deep); border-color:var(--saffron)}
/* Header call: icon only until the layout can spare ~150px for the number */
.header-call__num{display:none}
@media (min-width:1440px){
  .header-call{
    display:inline-flex; align-items:center; justify-content:center;
    width:auto; height:40px; gap:9px; padding:0 1.1em; border-radius:999px;
    font:600 14px/1 var(--sans); letter-spacing:.01em;
  }
  .header-call__num{display:inline; white-space:nowrap}
}
/* Call buttons: short label on phones, the full number once there's room */
.tel-num{display:none}
@media (min-width:1000px){
  .tel-label{display:none}
  .tel-num{display:inline}
}
/* Header actions share one height so the phone pill and the button line up */
.site-header__actions .btn{height:40px; padding:0 1.25em}