/* Homepage hero since v32 — "What's your first wish?" (Anand, 21 and 25 September). Genie mascot, wishes, stats.
   v34 (Anand, 5 Oct): one requirement picker over every product replaces the three pre-filled wish cards. */
.genie-hero{position:relative;overflow:hidden;padding:30px 0 0;color:#fff;background:radial-gradient(115% 95% at 80% 32%,#205599 0%,#16427d 46%,#0f3163 100%)}
.genie-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px 44px;align-items:start}
.genie-copy{padding-top:56px}
.genie-copy .eyebrow{margin-bottom:16px;font-size:11px;letter-spacing:.16em}
.genie-copy h1{font-size:clamp(42px,4.5vw,64px);line-height:1.05;letter-spacing:-.05em}
.genie-lede{max-width:430px;margin-top:18px;font-size:17px;line-height:1.7;color:#d3dce7}
.genie-form{margin-top:28px}
.wish-field-label{display:block;margin-bottom:10px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e1bd73}
.wish-select{position:relative;max-width:460px}
.wish-select select{display:block;width:100%;min-height:58px;margin:0;padding:0 52px 0 20px;border:1px solid #ffffff52;border-radius:12px;background:#ffffff14;color:#fff;font:600 16.5px/1.3 inherit;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s,background .2s}
.wish-select select:hover{border-color:#e1bd73a6}
.wish-select select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* :valid only once a real requirement is chosen (the placeholder has an empty value). */
.wish-select select:valid{border-color:var(--gold);background:#d3aa5829;box-shadow:inset 0 0 0 1px var(--gold)}
.wish-select option{color:#14243a;background:#fff}
.wish-chevron{position:absolute;top:50%;right:18px;width:20px;height:20px;transform:translateY(-50%);color:var(--gold);pointer-events:none}
.genie-button{display:inline-flex;gap:12px;margin-top:18px}
.genie-button .genie-sparkle{width:18px;height:18px}
.genie-stage{position:relative;min-width:0}
.genie-visual{position:relative;margin:0}
/* A soft light halo lifts the blue mascot off the blue hero. */
.genie-visual::before{content:'';position:absolute;inset:6% 10% 4%;border-radius:50%;background:radial-gradient(closest-side,#ffffff38,#e1bd7324 55%,transparent 100%);pointer-events:none}
.genie-visual img{position:relative;display:block;width:100%;max-width:540px;height:auto;margin:0 auto;animation:genie-settle 4.6s ease-out both}
.genie-hero.is-granting .genie-visual img{animation:genie-glow 1.5s ease-out}
@keyframes genie-settle{0%{opacity:0;transform:translateY(18px)}25%{opacity:1;transform:translateY(-6px)}65%{opacity:1;transform:translateY(3px)}100%{opacity:1;transform:none}}
@keyframes genie-glow{0%{filter:none;transform:none}35%{filter:brightness(1.16) drop-shadow(0 0 26px #e1bd738c);transform:translateY(-4px)}100%{filter:none;transform:none}}

/* Only the granted wish shows. Without JavaScript the form opens the contact page instead. */
.genie-response{display:grid;gap:14px;margin-top:10px}
.wish-answer{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:6px 28px;padding:20px 24px;border:1px solid #e1bd7366;border-radius:14px;background:#0f3163e8;box-shadow:0 18px 40px #07182e59}
.genie-ready .genie-response{margin-top:-10px}
.wish-answer.is-granted{display:grid;animation:wish-in .6s ease-out both}
@keyframes wish-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wish-quote{display:block;font-size:12.5px;font-style:italic;color:#c5d1df}
.wish-heard{margin-top:6px;font:italic 600 23px/1.25 Georgia,'Times New Roman',serif;color:var(--gold)}
.wish-next{margin-top:4px;font-size:14px;line-height:1.55;color:#e2e8ef}
.wish-for{display:block;margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e1bd73}
.wish-routes{margin:6px 0 4px;padding:0;list-style:none}
.wish-routes a{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid #ffffff1f;font-size:14.5px;color:#fff}
.wish-routes a>.icon:first-child{width:18px;height:18px;flex-shrink:0;color:var(--gold)}
.wish-routes a>.icon:last-child{width:16px;height:16px;margin-left:auto;flex-shrink:0;color:#e1bd73}
.wish-routes a:hover span{color:var(--gold)}
.wish-answer .text-link{margin-top:8px;font-size:14px}
.wish-short{margin-top:8px;font-size:13.5px;line-height:1.55;color:#c5d1df}

/* Stats confirmed by Anand: ₹700+ Cr in writing on 25 Sep; 15+ years is his published profile. */
.genie-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:34px 0 0;padding:22px 0 26px;border-top:1px solid #ffffff26;list-style:none}
.genie-stats li{display:flex;flex-direction:column;gap:4px;padding:0 24px;border-left:1px solid #ffffff26}
.genie-stats li:first-child{padding-left:0;border-left:0}
.genie-stats strong{font:650 clamp(26px,2.6vw,36px)/1.1 'Manrope',sans-serif;letter-spacing:-.03em;color:var(--gold)}
.genie-stats span{font-size:13px;letter-spacing:.04em;color:#c5d1df}

/* Every product, directly under the hero (nine since v34) */
.genie-products{border-bottom:1px solid var(--line);background:#fff}
.genie-products .container{display:grid;grid-template-columns:repeat(9,minmax(0,1fr))}
.genie-products a{display:flex;flex-direction:column;gap:10px;padding:22px 13px;border-right:1px solid var(--line);color:var(--ink);transition:background .2s}
.genie-products a:first-child{border-left:1px solid var(--line)}
.genie-products a:hover{background:#f7f3ea}
.genie-products .icon{width:24px;height:24px;color:var(--gold-dark)}
.genie-products strong{display:block;font-size:14px;line-height:1.35;font-weight:650}
.genie-products small{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:#6b7785}

@media(max-width:1100px){
  .genie-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 30px}
  .genie-products .container{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);overflow-x:auto;scroll-snap-type:x mandatory}
  .genie-products a{scroll-snap-align:start}
}
@media(max-width:900px){
  /* One column in reading order: intro, the genie, the wishes, then the granted answer. */
  .genie-layout{grid-template-columns:1fr;row-gap:0}
  .genie-copy,.genie-stage{display:contents}
  .genie-copy>*{order:1}
  .genie-visual{order:2;width:100%;max-width:420px;justify-self:center;margin:14px 0 4px}
  .genie-copy{padding-top:0}
  .genie-form{order:3;margin-top:10px}
  .genie-response{order:4;margin-top:22px}
  .genie-ready .genie-response{margin-top:22px}
}
@media(max-width:600px){
  .genie-hero{padding:22px 0 0}
  .genie-stats{margin-top:26px;padding:18px 0 20px}
  .genie-stats li{padding:0 12px}
  .genie-stats strong{font-size:22px}
  .genie-stats span{font-size:11.5px;letter-spacing:.02em}
  .genie-copy h1{font-size:40px}
  .genie-lede{font-size:16px}
  .wish-select{max-width:none}
  .genie-button{width:100%;justify-content:center}
  .wish-heard{font-size:21px}
  .wish-answer{grid-template-columns:1fr;padding:18px 20px}
  .wish-for{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  .genie-visual img,.genie-hero.is-granting .genie-visual img,.wish-answer.is-granted{animation:none}
  .wish-select select,.genie-products a{transition:none}
}

/* v33 (responsive sweep): */
/* Genie stats: on the smallest phones each stat becomes one row, value then label, never split mid-figure. */
.genie-stats strong{white-space:nowrap}
@media(max-width:380px){
  .genie-stats{grid-template-columns:1fr;padding:6px 0 14px}
  .genie-stats li{flex-direction:row;align-items:baseline;gap:12px;padding:10px 0;border-left:0;border-top:1px solid #ffffff1f}
  .genie-stats li:first-child{border-top:0}
  .genie-stats strong{min-width:108px}
}