/* The home page, design v2 (templates/home_v2.html; owner 22 Oct 2026: "a design oriented home page… dont do all blue
   and all single colour"). On top of home.css. Every section has its own soft colours: a twilight hero (indigo, plum,
   rose, a saffron horizon), then cream, lavender, peach, mint and rose sections; the services wear their planet's
   colours. No navy blocks. Text never moves: no reveals, no count-ups, no hover lifts; only pictures and backgrounds
   move, and nothing at all under reduced motion. Headings are the editorial serifs of the service pages. */
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant.dc1ef8ca97cb.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Noto Serif Deva"; src: url("../fonts/noto-serif-deva.8527ba0296bf.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

.v2 { --v2-ink: var(--oa-ink); --v2-text: var(--oa-text-soft); --v2-serif: var(--oa-serif);       /* tokens.css */
      --v2-card-line: var(--oa-card-line); --v2-shadow: var(--oa-shadow); }
.v2:lang(hi), html[lang="hi"] .v2 { --v2-serif: var(--oa-serif-hi); }
.v2 h2 { font-family: var(--v2-serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.15;
         color: var(--v2-ink); letter-spacing: -.005em; margin: 6px 0 14px; }
html[lang="hi"] .v2 h2 { font-weight: 600; font-size: clamp(1.8rem, 3.8vw, 2.7rem); line-height: 1.3; }
.v2 .h-kicker.dark { color: #8C2F39; }
.v2-sub { max-width: 64ch; color: var(--v2-text); font-size: 1.05rem; line-height: 1.65; margin: 0; }

/* 1. Hero: twilight in several colours (the live sky and the kundli stay as they are) */
.v2 .h-hero {
  background:
    radial-gradient(900px 520px at 88% 108%, rgba(240, 160, 70, .55), transparent 62%),
    radial-gradient(760px 480px at 6% 102%, rgba(214, 92, 128, .40), transparent 60%),
    radial-gradient(720px 440px at 50% -12%, rgba(104, 84, 196, .42), transparent 66%),
    linear-gradient(180deg, #17194A 0%, #2B2363 46%, #4B2A63 76%, #6B3058 100%);
}
.v2 .h-hero h1 { font-family: var(--v2-serif); font-weight: 600; letter-spacing: -.01em; }
html[lang="hi"] .v2 .h-hero h1 { line-height: 1.25; }

/* 2. Who we are: cream to rose to lavender */
.v2 .h-about { background: linear-gradient(135deg, #FFF6E6 0%, #FDECF1 55%, #EFEAFF 100%); }

/* tints shared by the steps and the numbers */
.v2 .c-saffron { --tint: linear-gradient(160deg, #FFEBCB 0%, #FFD9A3 100%); }
.v2 .c-rose { --tint: linear-gradient(160deg, #FFE4EB 0%, #F8C8D6 100%); }
.v2 .c-lavender { --tint: linear-gradient(160deg, #EEE9FF 0%, #D9D0FF 100%); }
.v2 .c-mint { --tint: linear-gradient(160deg, #E0F6EF 0%, #BFE8DA 100%); }

/* 3. How it works: four cards, four colours */
.v2-how { padding: clamp(64px, 9vw, 104px) 0; background: linear-gradient(180deg, #F3F0FF 0%, #FFF5E8 100%); }
.v2-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2-step { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 22px; border-radius: 22px;
           background: var(--tint); border: 1px solid var(--v2-card-line); box-shadow: var(--v2-shadow); }
.v2-num { font-family: var(--v2-serif); font-size: 2.6rem; line-height: 1; font-weight: 600; color: rgba(31, 42, 90, .82); margin-top: 6px; }
.v2-step strong { font-size: 1.12rem; color: var(--v2-ink); }
.v2-step > span { color: var(--v2-text); line-height: 1.55; font-size: .97rem; }
.v2-pic { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .55);
          display: grid; place-items: center; }
.v2-pic-map { background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(140, 47, 57, .09) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(140, 47, 57, .09) 21px 22px), rgba(255, 255, 255, .6); }
.v2-pin { position: relative; z-index: 2; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; rotate: -45deg;
          background: #8C2F39; box-shadow: 0 0 0 5px rgba(255, 255, 255, .7); }
.v2-ring { position: absolute; width: 74px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(140, 47, 57, .45);
           animation: v2-breathe 3.2s ease-in-out infinite; }
.v2-ring.two { width: 118px; border-color: rgba(227, 155, 44, .55); animation-delay: -1.6s; }
@keyframes v2-breathe { 0%, 100% { transform: scale(.94); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } }
.v2-pic-grahas { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px 8px; padding: 10px; }
.v2-pic-grahas span { width: 36px; height: 36px; display: block; animation: v2-float 5s ease-in-out infinite; }
.v2-pic-grahas span:nth-child(2n) { animation-delay: -2.5s; }
.v2-pic-grahas svg { width: 100%; height: 100%; display: block; }
@keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.v2-pic-page { background: rgba(255, 255, 255, .7); }
.v2-pic-page img { width: 82%; height: 92%; object-fit: cover; object-position: top; border-radius: 6px 6px 0 0; margin-top: 12%;
                   box-shadow: 0 6px 18px rgba(31, 42, 90, .16); }
.v2-genuine { position: absolute; right: 10px; bottom: 10px; background: #2E7D4F; color: #fff; font-weight: 700; font-size: .8rem;
              padding: 4px 10px; border-radius: 999px; }

/* 4. Services: cream with blooms; each card its planet's colours */
.v2-services { padding: clamp(64px, 9vw, 104px) 0;
  background: radial-gradient(640px 360px at 0% 0%, rgba(255, 196, 120, .30), transparent 70%),
              radial-gradient(620px 360px at 100% 100%, rgba(150, 210, 190, .30), transparent 70%),
              radial-gradient(520px 320px at 100% 0%, rgba(200, 180, 255, .28), transparent 70%), #FFFAF0; }
.v2-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }   /* nine: 3 x 3 */
.v2-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border-radius: 22px; text-decoration: none;
           color: var(--v2-text); background: var(--pc); border: 1px solid var(--v2-card-line); box-shadow: var(--v2-shadow);
           transition: box-shadow .25s ease; }
.v2-card:hover, .v2-card:focus-visible { box-shadow: 0 16px 40px rgba(70, 45, 100, .18); }
.v2-card-ico { display: block; width: 58px; height: 58px; }
.v2-card-ico svg { width: 100%; height: 100%; display: block; }
.v2-planet { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(31, 42, 90, .62); }
html[lang="hi"] .v2-planet { letter-spacing: .02em; text-transform: none; font-size: .85rem; }
.v2-card h3 { font-family: var(--v2-serif); font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: var(--v2-ink); margin: 2px 0 2px; }
.v2-card p { margin: 0; line-height: 1.55; font-size: .96rem; flex: 1; }
.v2-note { display: block; font-size: .78rem; line-height: 1.45; opacity: .72; margin-top: 2px; }   /* the consultation footnote */
.v2-go { margin-top: 8px; font-weight: 700; color: #8C2F39; }
.p-sun { --pc: linear-gradient(160deg, #FFF2CC 0%, #FFD78C 100%); }
.p-moon { --pc: linear-gradient(160deg, #F0F4FF 0%, #D5E1F9 100%); }
.p-mars { --pc: linear-gradient(160deg, #FFE4D9 0%, #F8BBA5 100%); }
.p-mercury { --pc: linear-gradient(160deg, #E4F7E7 0%, #BDE7C7 100%); }
.p-jupiter { --pc: linear-gradient(160deg, #FFF4D3 0%, #F4D07A 100%); }
.p-venus { --pc: linear-gradient(160deg, #FFE7F1 0%, #F5C2D7 100%); }
.p-saturn { --pc: linear-gradient(160deg, #EEEAFF 0%, #CDC4F4 100%); }
.p-rahu { --pc: linear-gradient(160deg, #E1F5F5 0%, #B7E1E2 100%); }
.p-ketu { --pc: linear-gradient(160deg, #F5EEE5 0%, #E1D0BC 100%); }

/* 5. Why choose us: mint, peach and rose; numbers on coloured tiles; each picture its own deep colour */
.v2-why { padding: clamp(64px, 9vw, 104px) 0; background: linear-gradient(135deg, #E7F6F1 0%, #FFF4DF 50%, #FDE8EF 100%); }
.v2-numbers { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 34px; }
.v2-why .v2-promise { margin-top: 12px; font-weight: 500; color: var(--v2-ink); }   /* owner's firm line, 23 Oct */
.v2-numbers div { padding: 20px 20px 18px; border-radius: 20px; background: var(--tint); border: 1px solid var(--v2-card-line); }
.v2-numbers b { display: block; font-family: var(--v2-serif); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--v2-ink); white-space: nowrap; }
.v2-numbers span { display: block; margin-top: 8px; color: var(--v2-text); line-height: 1.45; font-size: .95rem; }
.v2-reasons { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.v2-reasons article { padding: 16px 16px 20px; border-radius: 22px; background: rgba(255, 255, 255, .78);
                      border: 1px solid var(--v2-card-line); box-shadow: var(--v2-shadow); }
.v2-reasons h3 { font-family: var(--v2-serif); font-size: 1.35rem; font-weight: 600; color: var(--v2-ink); margin: 14px 0 4px; }
.v2-reasons p { margin: 0; color: var(--v2-text); line-height: 1.55; }
.v2 .h-tint-wine .demo { background: linear-gradient(160deg, #4E1A2C 0%, #8C2F39 100%); }
.v2 .h-tint-teal .demo, .v2 .h-tint-teal .demo-place {
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 255, 255, .06) 22px 23px), linear-gradient(160deg, #0F4747 0%, #1F7A7A 100%); }
.v2 .h-tint-plum .demo { background: linear-gradient(160deg, #35215A 0%, #6B3F86 100%); }
.v2 .h-tint-forest .demo { background: linear-gradient(160deg, #173F2C 0%, #2E7D4F 100%); }
.v2 .h-tint-amber .demo { background: linear-gradient(160deg, #6A390C 0%, #C27A22 100%); }
.v2 .h-tint-indigo .demo { background: linear-gradient(160deg, #1F2A5A 0%, #4A3B8A 100%); }
.v2-lang { display: flex; align-items: center; justify-content: center; gap: 18px; }
.v2-lang span { position: static; font-family: var(--v2-serif); font-size: 1.9rem; font-weight: 600; color: #FFF3DC; }
.v2-lang span + span { color: #FFD38A; }

/* 6. Final call: a sunrise */
.v2-final { padding: clamp(80px, 11vw, 128px) 0; text-align: center;
  background: radial-gradient(700px 360px at 50% 115%, rgba(255, 196, 92, .55), transparent 70%),
              linear-gradient(120deg, #FFE2AE 0%, #F9C5D1 52%, #DCD3FF 100%); }
.v2-final h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.v2-final p { max-width: 60ch; margin: 0 auto 28px; color: var(--v2-text); font-size: 1.1rem; line-height: 1.65; }
.v2-btn { background: var(--v2-ink); color: #fff; }
.v2-btn:hover, .v2-btn:focus-visible { background: #2B3A7A; }

/* phones and tablets */
@media (max-width: 980px) {
  .v2-steps, .v2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .v2-steps, .v2-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 2px 14px;
                         scrollbar-width: none; }
  .v2-steps::-webkit-scrollbar, .v2-cards::-webkit-scrollbar { display: none; }
  .v2-step, .v2-card { flex: 0 0 82%; scroll-snap-align: center; }
  .v2-numbers b { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-ring, .v2-pic-grahas span { animation: none; }
}