/* =========================================================================
   Mahendra's Skills — PREMIUM LANDING LAYER (index.html only)
   Loads AFTER style.css. Brand: Saffron #F4C430 · Blue #0000FF · White.
   Adds: full-height 3D hero, glass chips, shimmer headline, partner marquee.
   ========================================================================= */

/* ============================== HERO SHELL ============================== */
.hero-3d{
  display:flex;flex-direction:column;
  min-height:calc(100svh - var(--header-h));
  padding-bottom:58px; /* keeps the overlapping statbar off the marquee text */
  background:
    radial-gradient(1100px 640px at 76% 26%,rgba(34,51,255,.60),transparent 62%),
    radial-gradient(880px 620px at 8% 88%,rgba(244,196,48,.17),transparent 56%),
    linear-gradient(128deg,#04072e 0%,#081290 44%,#0d1ae0 76%,#2233ff 100%);
}
.hero-3d>.container{flex:1;display:flex;align-items:center;width:100%}
.hero-3d .hero-grid{
  flex:1;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,56px);
  padding:clamp(44px,5.5vw,72px) 0 clamp(30px,4vw,54px);
}

/* layered atmosphere: grid lines + noise + vignette */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg .grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(78% 70% at 60% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(78% 70% at 60% 40%,#000 30%,transparent 78%);
}
.hero-bg .noise{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-bg .beam{
  position:absolute;top:-30%;right:8%;width:420px;height:160%;
  background:linear-gradient(180deg,rgba(244,196,48,.10),rgba(244,196,48,0) 70%);
  transform:rotate(24deg);filter:blur(28px);
}

/* ============================== COPY SIDE =============================== */
.badge-glass{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);
  color:#ffe9a8;backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(2,6,60,.35);
}
.hero-3d h1{
  font-size:clamp(2.6rem,5.6vw,4.5rem);line-height:1.04;letter-spacing:-.03em;
  margin-top:18px;
}
/* animated liquid-gold shimmer on the key word */
.hl-shine{
  background:linear-gradient(100deg,#F4C430 18%,#fff3c2 38%,#ffd75e 50%,#F4C430 66%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldShine 4.5s linear infinite;
}
@keyframes goldShine{to{background-position:-220% 0}}
/* hand-drawn saffron swoosh under "the job" */
.swoosh-wrap{position:relative;display:inline-block;white-space:nowrap}
.swoosh-wrap .swoosh{
  position:absolute;left:-2%;bottom:-.22em;width:104%;height:.42em;overflow:visible
}
.swoosh path{
  fill:none;stroke:#F4C430;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:230;stroke-dashoffset:0;
  animation:swooshDraw 1s 1s cubic-bezier(.7,0,.3,1) both;
  filter:drop-shadow(0 4px 14px rgba(244,196,48,.45));
}
@keyframes swooshDraw{from{stroke-dashoffset:230}to{stroke-dashoffset:0}}

.hero-3d .lead{max-width:44ch}

/* social proof row: avatar stack + numbers */
.hero-proof{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap}
.avs{display:flex;padding-left:10px}
.avs span{
  width:40px;height:40px;border-radius:50%;margin-left:-10px;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;
  font-size:.82rem;color:#fff;border:2px solid #0a14a0;
  box-shadow:0 6px 18px rgba(2,6,60,.4);
}
.avs span:nth-child(1){background:linear-gradient(135deg,#F4C430,#c98f00)}
.avs span:nth-child(2){background:linear-gradient(135deg,#2233ff,#0000b8)}
.avs span:nth-child(3){background:linear-gradient(135deg,#15a36b,#0d7a4e)}
.avs span:nth-child(4){background:linear-gradient(135deg,#ff8a3d,#e05e00)}
.avs .more{background:#fff!important;color:var(--navy);font-size:.7rem}
.hero-proof p{font-size:.94rem;color:#b9c6e2;max-width:30ch}
.hero-proof p b{color:#fff}
.hero-proof .stars{color:#F4C430;letter-spacing:2px;display:block;font-size:.86rem}

/* ============================== 3D STAGE ================================ */
.hero-stage{
  position:relative;height:clamp(380px,42vw,580px);z-index:1;
  filter:drop-shadow(0 50px 90px rgba(1,3,40,.55));
}
#hero3d{position:absolute;inset:0}
#hero3d canvas{display:block;width:100%;height:100%}

/* pure-CSS glossy orb — shown until WebGL boots (and as no-JS fallback) */
.orb-fallback{
  position:absolute;top:50%;left:50%;width:min(62%,360px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:
    radial-gradient(circle at 33% 27%,#fffbe9 0%,#ffe37a 22%,#F4C430 45%,#b98a00 72%,#4d3a00 100%);
  box-shadow:
    inset -28px -34px 70px rgba(30,10,0,.45),
    inset 14px 18px 42px rgba(255,255,255,.5),
    0 50px 120px rgba(244,196,48,.28);
  animation:orbBob 6s ease-in-out infinite;
}
.orb-fallback::after{
  content:"";position:absolute;top:9%;left:16%;width:34%;height:22%;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);
  filter:blur(2px);transform:rotate(-18deg);
}
@keyframes orbBob{0%,100%{transform:translate(-50%,-52%)}50%{transform:translate(-50%,-48%)}}
.hero-stage.gl-on .orb-fallback{display:none}

/* floating glass chips over the 3D object */
.hero-chip{
  position:absolute;z-index:2;display:flex;align-items:center;gap:11px;
  padding:12px 16px;border-radius:16px;
  background:rgba(7,12,72,.55);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 45px rgba(2,6,60,.45);color:#fff;
  animation:chipFloat 6s ease-in-out infinite;
}
.hero-chip .cic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
}
.hero-chip .cic svg{width:20px;height:20px}
.hero-chip b{display:block;font-family:var(--font-head);font-size:1.02rem;line-height:1.15}
.hero-chip small{display:block;font-size:.74rem;color:#c3cdf0}
.chip-cert{top:6%;right:-2%;animation-delay:.6s}
.chip-cert .cic{background:var(--grad-gold);color:#3a2a00}
.chip-placed{bottom:9%;left:-4%}
.chip-placed .cic{background:linear-gradient(135deg,#15a36b,#0d7a4e);color:#fff}
.chip-placed .live{
  position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;
  background:#25d366;border:2px solid #071060;animation:pulse 2s infinite;
}
.chip-centres{top:26%;left:-7%;animation-delay:1.2s}
.chip-centres .cic{background:linear-gradient(135deg,#2233ff,#0000b8);color:#fff}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ============================ PARTNER MARQUEE =========================== */
.hero-mq{
  position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);
  background:rgba(3,6,50,.35);backdrop-filter:blur(6px);
  padding:16px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.hero-mq-track{display:flex;gap:48px;align-items:center;width:max-content;animation:scrollx 52s linear infinite}
.hero-mq:hover .hero-mq-track{animation-play-state:paused}
.hero-mq .mq{
  font-family:var(--font-head);font-weight:700;font-size:1.02rem;white-space:nowrap;
  color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:48px;
}
.hero-mq .mq::after{content:"◆";font-size:.55rem;color:#F4C430;opacity:.8}
.hero-mq .mq.gold{color:#F4C430}

/* ======================= PREMIUM POLISH BELOW HERO ====================== */
/* stat bar: gradient hairline + saffron→blue top accent */
.statbar{border:1px solid var(--line);overflow:hidden}
.statbar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#F4C430 0%,#ffd75e 30%,#2233ff 70%,#0000FF 100%);
}

/* CTA band: breathing saffron aura */
.cta-band::after{
  content:"";position:absolute;width:460px;height:460px;border-radius:50%;left:-120px;bottom:-200px;
  background:radial-gradient(circle,rgba(34,51,255,.5),transparent 62%);z-index:-1;
  animation:floaty 13s ease-in-out infinite;
}

/* ============================== RESPONSIVE ============================== */
@media(max-width:880px){
  .hero-3d{min-height:0}
  .hero-3d .hero-grid{grid-template-columns:1fr;gap:8px;padding-top:38px}
  .hero-stage{order:2;height:min(88vw,420px);margin-top:6px}
  .chip-centres{left:0;top:30%}
  .chip-placed{left:auto;right:0;bottom:4%}
  .chip-cert{right:0;top:0}
  .hero-chip{padding:10px 13px;border-radius:13px}
  .hero-chip b{font-size:.92rem}
  .hero-proof{justify-content:center}
  .hero-proof p{text-align:left}
  .swoosh path{stroke-width:8}
}
@media(prefers-reduced-motion:reduce){
  .hero-mq-track{animation:none}
  .hero-chip,.orb-fallback{animation:none}
  .swoosh path{animation:none;stroke-dashoffset:0}
}

/* branded static fallback: shows whenever the 3D engine can't run (no WebGL /
   old browser / canvas blocked). Hidden the moment the engine boots (.gl-on). */
.card-fallback{position:absolute;inset:0;margin:auto;width:min(88%,430px);height:auto;
  z-index:1;animation:cardFloat 5s ease-in-out infinite;
  filter:drop-shadow(0 26px 44px rgba(0,0,25,.5))}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-stage.gl-on .card-fallback,.hero-stage.gl-on .orb-fallback{display:none}
@media(prefers-reduced-motion:reduce){.card-fallback{animation:none}}