/* ============================================================
   FEMINA MISS INDIA 2026 — Entry Form Styles
   ============================================================ */

/* ── Scroll-reveal ─────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX( 40px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal].revealed {
    opacity: 1;
    transform: none;
    transition-delay: var(--sd, 0s);
}

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --c1: #fc0ec0;
    --c2: #ff1fa9;
    --c3: #f51394;
    --c4: #ff9a07;
    --c5: #fe0366;
    --grad: linear-gradient(135deg, #fc0ec0 0%, #ff9a07 100%);
    --grad2: linear-gradient(135deg, #fe0366 0%, #fc0ec0 55%, #ff9a07 100%);
    --border: #ecdce8;
    --border-focus: #ff1fa9;
    --text-main: #1c1c1c;
    --text-muted: #555;
    --text-light: #888;
    --bg-input: #fdfafd;
    --bg-page: #ffffff;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --font-body: 'Quicksand', sans-serif;
    --font-display: 'Libre Bodoni', Georgia, serif;
    --sidebar-w: 320px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
    font-size: 15px;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* ── Typography helpers ─────────────────────────────────────── */
.bodoni { font-family: var(--font-display); }

/* ══════════════════════════════════════════════════════════════
   FORM HERO (new) — .fh
══════════════════════════════════════════════════════════════ */
/* Femina brand tokens */
:root{
    --fh-pink:#ff1493;
    --fh-pink-deep:#e6127f;
    --fh-gold:#ff9a07;
    --fh-gold-lite:#ffb547;
    --fh-ink:#161616;
}
/* NEW FORM HERO — clean 6/6 split, Femina pink bg, brand logos on white chips */
.fh{position:relative;padding:85px 0 80px;background:linear-gradient(180deg,#ff1493 0%,#ff1493 38%,#d8117d 72%,#8a0a51 100%);overflow:hidden;}
.fh::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#ff9a07,#ffcc44,#ff9a07);z-index:2;}
.fh::after{content:'';position:absolute;left:0;right:0;bottom:0;height:260px;background:linear-gradient(180deg,transparent 0%,rgba(70,4,40,.55) 100%);pointer-events:none;z-index:0;}
.fh-wrap{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:3;}
.fh-row{display:grid;grid-template-columns:6fr 6fr;gap:10px;align-items:start;}

/* LEFT ─── content col */
.fh-col--left{color:#fff; padding-top: 45px;}
.fh-eyebrow{display:inline-flex;align-items:center;gap:12px;padding:10px 22px;border-radius:50px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4);font-size:14px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:28px;backdrop-filter:blur(6px);text-shadow:0 1px 2px rgba(0,0,0,.15);}
.fh-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#ff9a07;box-shadow:0 0 0 5px rgba(255,154,7,.35);animation:fhPulse 1.6s ease-in-out infinite;}
@keyframes fhPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:.6;}}
.fh-title{font-family:'Libre Bodoni','Bodoni Moda',serif;font-size:clamp(48px,6.2vw,69px);line-height:1;letter-spacing:-.02em;color:#fff;font-weight:800;margin:0 0 26px;text-shadow:0 4px 24px rgba(70,4,40,.28);}
.fh-title em{font-style:italic;color:#ffcc44;font-weight:800;}
.fh-sub{font-family:'Quicksand',sans-serif;font-size:clamp(17px,1.55vw,21px);line-height:1.65;color:#fff;margin:0 0 36px;max-width:540px;font-weight:600;text-shadow:0 1px 2px rgba(70,4,40,.2);}

/* Brand chips — editorial "In Partnership With" strip */
.fh-brands{
    position:relative;
    margin:0 0 40px;
}

.fh-brands-lbl{
    display:flex;align-items:center;gap:12px;
    font-size:16px;font-weight:900;letter-spacing:.32em;
    text-transform:uppercase;color:#fff;
    margin-bottom:16px;
    text-shadow:0 1px 2px rgba(70,4,40,.28);
}
.fh-brands-lbl::before,
.fh-brands-lbl::after{
    content:'';flex:0 0 24px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,204,68,.7));
}
.fh-brands-lbl::after{background:linear-gradient(90deg,rgba(255,204,68,.7),transparent);flex:1;}
.fh-brands-row{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:6px 10px;
}
.fh-brand-chip{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    height:52px;padding:6px 14px;
    background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.2);
    border-radius:12px;
    backdrop-filter:blur(6px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 4px 14px rgba(70,4,40,.14);
    transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1)),background .3s,border-color .3s,box-shadow .3s;
}
.fh-brand-chip:hover{
    background:linear-gradient(135deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 100%);
    border-color:rgba(255,204,68,.5);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        0 8px 22px rgba(70,4,40,.22);
}
/* Subtle vertical divider between chips */
.fh-brand-chip + .fh-brand-chip::before{
    content:'';
    position:absolute;left:-12px;top:50%;transform:translateY(-50%);
    width:1px;height:26px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.32),transparent);
}
.fh-brand-chip:hover{transform:translateY(-3px);}
.fh-brand-chip img{
    max-height:44px;max-width:155px;width:auto;height:auto;
    object-fit:contain;display:block;
    opacity:.92;
    transition:opacity .25s,filter .25s;
}
.fh-brand-chip img[alt="Strengths Institute"],
.fh-brand-chip img[alt="MIC"]{
    filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(70,4,40,.25));
}

.fh-brand-chip:hover img{
    opacity:1;
    filter:brightness(0) invert(1) drop-shadow(0 4px 10px rgba(255,204,68,.35));
}

/* CTAs */
.fh-ctas{display:flex;flex-wrap:wrap;gap:14px;}
.fh-btn{display:inline-flex;align-items:center;gap:11px;padding:18px 34px;border-radius:50px;font-family:'Quicksand',sans-serif;font-weight:900;font-size:16.5px;text-decoration:none;letter-spacing:.03em;transition:transform .3s,box-shadow .3s,background .3s,color .3s,border-color .3s;}
.fh-btn--primary{background:#fff;color:#ff1493;box-shadow:0 12px 30px rgba(0,0,0,.18);}
.fh-btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.28);background:#fffaf5;}
.fh-btn--outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);}
.fh-btn--outline:hover{background:#fff;color:#ff1493;border-color:#fff;transform:translateY(-3px);}

/* RIGHT ─── photos col */
/* ═══ Portrait stage — hero portrait + blurred aura echoes + name badge ═══ */
.fh-col--right{
    position:relative;
    min-height:660px;
    display:flex;align-items:flex-end;justify-content:center;
}
.fh-stage{
    position:relative;width:100%;min-height:660px;
    display:flex;align-items:flex-end;justify-content:center;
    overflow:hidden;
    border-radius:20px;
}

/* Constellation star field — twinkling white/gold dots covering the whole stage */
.fh-stars{position:absolute;inset:0;z-index:0;pointer-events:none;}
.fh-star{
    position:absolute;
    left:var(--x);top:var(--y);
    width:calc(var(--sz) * 1.8);height:calc(var(--sz) * 1.8);
    border-radius:50%;
    background:#fff;
    box-shadow:
        0 0 6px rgba(255,255,255,1),
        0 0 14px rgba(255,255,255,.9),
        0 0 24px rgba(255,215,120,.7),
        0 0 40px rgba(255,215,120,.4);
    opacity:0;
    animation:fhStarTwinkle var(--dur,3s) ease-in-out var(--d,0s) infinite;
}
@keyframes fhStarTwinkle{
    0%,100%{opacity:0;transform:scale(.5);}
    50%{opacity:1;transform:scale(1.3);}
}

/* Rotating gold light beams from behind the head */
.fh-rays{
    position:absolute;
    left:50%;top:12%;
    width:min(560px,86%);aspect-ratio:1;
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,rgba(255,255,255,.55) 5deg,transparent 12deg,
            transparent 45deg,rgba(255,230,255,.4) 50deg,transparent 57deg,
            transparent 90deg,rgba(255,255,255,.55) 95deg,transparent 102deg,
            transparent 135deg,rgba(255,230,255,.4) 140deg,transparent 147deg,
            transparent 180deg,rgba(255,255,255,.55) 185deg,transparent 192deg,
            transparent 225deg,rgba(255,230,255,.4) 230deg,transparent 237deg,
            transparent 270deg,rgba(255,255,255,.55) 275deg,transparent 282deg,
            transparent 315deg,rgba(255,230,255,.4) 320deg,transparent 327deg,
            transparent 360deg);
    -webkit-mask-image:radial-gradient(circle,#000 20%,transparent 70%);
            mask-image:radial-gradient(circle,#000 20%,transparent 70%);
    filter:blur(1px);
    animation:fhRayRotate 30s linear infinite;
}
@keyframes fhRayRotate{to{transform:translateX(-50%) rotate(360deg);}}

/* Decorative gold crown ornament — top center behind head */
.fh-crown-ornament{
    position:absolute;
    left:50%;top:5%;
    transform:translateX(-50%);
    font-size:clamp(48px,5.4vw,78px);
    background:linear-gradient(135deg,#fff8d6 0%,#ffcc44 45%,#c98a10 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    color:transparent;
    z-index:1;
    pointer-events:none;
    filter:
        drop-shadow(0 0 14px rgba(255,255,255,.8))
        drop-shadow(0 0 26px rgba(255,215,120,.7))
        drop-shadow(0 6px 10px rgba(70,4,40,.55));
    animation:fhCrownGlow 4s ease-in-out infinite;
}
@keyframes fhCrownGlow{
    0%,100%{opacity:.5;transform:translateX(-50%) scale(1);}
    50%{opacity:1;transform:translateX(-50%) scale(1.06);}
}

/* Large floating gradient orbs — soft ambient depth */
.fh-orb{
    position:absolute;border-radius:50%;
    pointer-events:none;z-index:0;
    filter:blur(28px);
}
/* Deep magenta + soft white ambience — same brand family, real contrast */
.fh-orb--1{
    width:260px;height:260px;top:14%;left:-10%;
    background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,182,222,.24) 45%,transparent 72%);
    animation:fhOrbDrift 12s ease-in-out infinite;
}
.fh-orb--2{
    width:300px;height:300px;bottom:18%;right:-12%;
    background:radial-gradient(circle,rgba(138,10,81,0),rgba(70,4,40,.35) 50%,transparent 74%);
    animation:fhOrbDrift 14s ease-in-out infinite reverse;
}
.fh-orb--3{
    width:200px;height:200px;top:58%;left:32%;
    background:radial-gradient(circle,rgba(255,215,120,.4),rgba(255,182,222,.18) 55%,transparent 78%);
    animation:fhOrbDrift 16s ease-in-out infinite 1s;
}
@keyframes fhOrbDrift{
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(20px,-24px) scale(1.08);}
    66%{transform:translate(-14px,18px) scale(.94);}
}

/* Aura echoes — same photo, blurred + faded, flanking the hero portrait */
.fh-echo{
    position:absolute;bottom:0;
    width:98%;height:82%;
    opacity:.35;
    filter:blur(14px) grayscale(1) contrast(1.05);
    pointer-events:none;
    z-index:1;
    animation:fhEchoIn 1.4s cubic-bezier(.22,1,.36,1) .1s both;
}
.fh-echo img{
    width:100%;height:100%;object-fit:contain;object-position:bottom center;display:block;
}
.fh-echo--left{
    left:-14%;
    transform:scale(.86) rotate(-4deg);
    animation:fhEchoIn 1.4s cubic-bezier(.22,1,.36,1) .1s both, fhSwayL 8s ease-in-out infinite;
}
.fh-echo--right{
    right:-14%;
    transform:scale(.86) rotate(4deg);
    animation:fhEchoIn 1.4s cubic-bezier(.22,1,.36,1) .1s both, fhSwayR 8s ease-in-out infinite;
}
@keyframes fhEchoIn{
    from{opacity:0;}
    to{opacity:.35;}
}
@keyframes fhSwayL{
    0%,100%{transform:scale(.86) rotate(-4deg) translateY(0);}
    50%{transform:scale(.88) rotate(-5deg) translateY(-8px);}
}
@keyframes fhSwayR{
    0%,100%{transform:scale(.86) rotate(4deg) translateY(0);}
    50%{transform:scale(.88) rotate(5deg) translateY(-8px);}
}

/* Golden spotlight glow behind hero portrait */
.fh-stage::before{
    content:'';
    position:absolute;
    left:50%;bottom:8%;
    transform:translateX(-50%);
    width:78%;height:72%;
    background:
        radial-gradient(ellipse 55% 60% at 50% 45%,rgba(255,204,68,.34) 0%,rgba(255,154,7,.16) 32%,transparent 66%),
        radial-gradient(ellipse 70% 55% at 50% 58%,rgba(255,255,255,.22) 0%,transparent 60%);
    filter:blur(28px);
    z-index:0;
    animation:fhGlowPulse 6s ease-in-out infinite;
}
@keyframes fhGlowPulse{
    0%,100%{opacity:.85;transform:translateX(-50%) scale(1);}
    50%{opacity:1;transform:translateX(-50%) scale(1.06);}
}

/* Rotating dashed orbital ring */
/* .fh-stage::after{
    content:'';
    position:absolute;
    left:50%;bottom:24%;
    transform:translateX(-50%);
    width:min(460px,72%);aspect-ratio:1;
    border:1.5px dashed rgba(255,255,255,.55);
    border-radius:50%;
    z-index:0;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.4));
    animation:fhOrbit 40s linear infinite;
}
@keyframes fhOrbit{to{transform:translateX(-50%) rotate(360deg);}} */

/* Hero portrait — front-and-center */
.fh-hero-portrait{
    position:relative;
    width:100%;max-width:600px;
    z-index:3;
    /* animation:fhFloat 5s ease-in-out infinite; */
}
@keyframes fhFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}
.fh-hero-portrait img{
    width:100%;display:block;object-fit:contain;
    /* filter:
        grayscale(1) contrast(1.08) brightness(1.02)
        drop-shadow(0 26px 42px rgba(70,4,40,.5))
        drop-shadow(0 0 34px rgba(255,204,68,.22)); */
    transition:filter .4s ease;
}
.fh-hero-portrait:hover img{
    /* filter:
        grayscale(1) contrast(1.1) brightness(1.04)
        drop-shadow(0 32px 54px rgba(70,4,40,.55))
        drop-shadow(0 0 44px rgba(255,204,68,.4)); */
}

/* Golden sparkle particles */
.fh-sparkle{
    position:absolute;border-radius:50%;
    background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.85) 30%,rgba(255,215,120,.5) 60%,transparent 85%);
    box-shadow:
        0 0 8px rgba(255,255,255,1),
        0 0 18px rgba(255,255,255,.75),
        0 0 32px rgba(255,215,120,.55);
    pointer-events:none;z-index:4;opacity:0;
    animation:fhTwinkle 4s ease-in-out infinite;
}
@keyframes fhTwinkle{
    0%,100%{opacity:0;transform:scale(.4);}
    50%{opacity:1;transform:scale(1);}
}
.fh-stage .fh-sparkle:nth-of-type(1){top:14%;left:6%;width:9px;height:9px;animation-delay:0s;}
.fh-stage .fh-sparkle:nth-of-type(2){top:24%;right:4%;width:12px;height:12px;animation-delay:.6s;}
.fh-stage .fh-sparkle:nth-of-type(3){bottom:40%;left:2%;width:7px;height:7px;animation-delay:1.2s;}
.fh-stage .fh-sparkle:nth-of-type(4){bottom:24%;right:6%;width:11px;height:11px;animation-delay:1.8s;}
.fh-stage .fh-sparkle:nth-of-type(5){top:48%;right:14%;width:8px;height:8px;animation-delay:2.4s;}
.fh-stage .fh-sparkle:nth-of-type(6){top:36%;left:10%;width:10px;height:10px;animation-delay:3s;}
.fh-stage .fh-sparkle:nth-of-type(7){bottom:16%;left:22%;width:9px;height:9px;animation-delay:3.6s;}

/* Bottom name badge — pink pill with crown, like the reference "MAGALÍ BENEJAM" */
.fh-name-badge{
    position:absolute;
    left:50%;bottom:0;
    transform:translateX(-50%);
    z-index:5;
    display:inline-flex;align-items:center;gap:12px;
    padding:12px 56px;
    background:linear-gradient(135deg,#ff1493 0%,#c8106f 100%);
    color:#fff;
    border:1.5px solid rgba(255,204,68,.55);
    border-radius:50px;
    box-shadow:
        0 14px 36px rgba(70,4,40,.4),
        0 0 0 4px rgba(255,255,255,.08),
        inset 0 1px 0 rgba(255,255,255,.28);
    backdrop-filter:blur(8px);
    white-space:nowrap;
    animation:fhBadgeIn 1s cubic-bezier(.22,1,.36,1) .7s both;
}
@keyframes fhBadgeIn{
    from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.9);}
    to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
.fh-name-badge i{
    color:#ffcc44;font-size:16px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.fh-name-badge span{
    font-family:'Quicksand',sans-serif;
    font-size:15px;font-weight:900;
    letter-spacing:.22em;text-transform:uppercase;
    text-shadow:0 1px 2px rgba(70,4,40,.35);
}

/* Mystery reward ribbon — sits between hero subtitle and CTAs */
.fh-mystery-ribbon{
    display:inline-flex;align-items:center;gap:14px;
    margin:0 0 28px;
    padding:14px 22px 14px 16px;
    background:linear-gradient(135deg,#fff5fd 0%,#fffaf0 100%);
    border:1.5px dashed rgba(252,14,192,.45);
    border-radius:18px;
    position:relative;
    box-shadow:0 8px 22px rgba(252,14,192,.14);
    animation:fhMrGlow 3s ease-in-out infinite;
    max-width:560px;
}
@keyframes fhMrGlow{
    0%,100%{box-shadow:0 8px 22px rgba(252,14,192,.14);}
    50%    {box-shadow:0 10px 28px rgba(252,14,192,.28);}
}
.fh-mr-icon{
    flex-shrink:0;
    width:32px;height:32px;
    border-radius:50%;
    background:linear-gradient(135deg,#fc0ec0,#ff9a07);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
    box-shadow:0 6px 14px rgba(252,14,192,.35);
}
.fh-mr-text{
    display:flex;flex-direction:column;gap:3px;
    font-size:13px;font-weight:600;
    color:#1a1a2e;
    letter-spacing:.01em;
    line-height:1.45;
}
.fh-mr-text strong{
    font-family:'Libre Bodoni',serif;
    font-size:15px;font-weight:700;
    background:linear-gradient(135deg,#fc0ec0,#ff9a07);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fh-mr-text span{
    font-size:12.5px;
    color:#4a4a5e;
    font-weight:500;
}
.fh-mr-text .fh-mr-tail{
    font-style:italic;
    color:#fc0ec0;
    font-weight:600;
}
.fh-mr-q{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;
    border-radius:50%;
    background:linear-gradient(135deg,#ff9a07,#ffcc44);
    color:#fff;
    font-family:'Libre Bodoni',serif;
    font-size:13px;font-weight:700;
    box-shadow:0 4px 10px rgba(255,154,7,.4);
    animation:fhMrPulse 1.8s ease-in-out infinite;
}
@keyframes fhMrPulse{
    0%,100%{transform:scale(1);}
    50%    {transform:scale(1.18);}
}

/* Responsive */
@media (max-width:960px){
 .fh{padding:110px 0 48px;}
 .fh-row{grid-template-columns:1fr;gap:14px;text-align:center;}
 .fh-col--left{max-width:640px;margin:0 auto;padding-top:0;}
 .fh-sub{margin-left:auto;margin-right:auto;}
 .fh-brands-row,.fh-ctas{justify-content:center;}
 .fh-col--right{min-height:auto;}
 .fh-stage{max-width:560px;margin:0 auto;height:auto;min-height:520px;}
 .fh-echo--left{left:-10%;}
 .fh-echo--right{right:-10%;}
}
@media (max-width:520px){
 .fh-wrap{padding:0 18px;}
 .fh-title{font-size:clamp(38px,10vw,52px);margin-bottom:18px;}
 .fh-sub{font-size:15px;margin-bottom:26px;}
 .fh-brands{margin-bottom:28px;}
 .fh-brands-lbl{font-size:12px;letter-spacing:.28em;margin-bottom:14px;justify-content:center;}
 .fh-brands-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:320px;margin:0 auto;}
 .fh-brand-chip{height:58px;padding:8px 12px;width:100%;}
 .fh-brand-chip img{max-height:36px;max-width:100%;}
 .fh-brand-chip + .fh-brand-chip::before{display:none;}
 .fh-ctas{gap:12px;flex-wrap:nowrap;justify-content:center;}
 .fh-btn{padding:14px 20px;font-size:14px;flex:1;justify-content:center;min-width:0;}
 .fh-col--right{margin-top:8px;}
 .fh-stage{min-height:440px;max-width:100%;border-radius:16px;}
 .fh-echo{opacity:.28;width:78%;}
 .fh-echo--left{left:-14%;bottom:0;}
 .fh-echo--right{right:-14%;bottom:0;}
 .fh-name-badge{padding:10px 20px;bottom:0;}
 .fh-name-badge span{font-size:11px;letter-spacing:.18em;}
 .fh-name-badge i{font-size:14px;}
 /* .fh-hero-portrait img {height:400px;} */
 .fh-eyebrow{font-size:12px;}
}


/* ══════════════════════════════════════════════════════════════
   HERO SECTION (legacy — no longer used on form page)
══════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#fffaf9 0%,#fff0f8 100%);
    overflow: hidden;
    padding: 96px 24px 72px;
}
/* Full-bleed decorative brand frame (fills the side space) */
.hero::before{
    content:'';
    position:absolute;
    top:80px;
    left:0;right:0;
    height:calc(100% - 140px);
    max-width:1440px;
    margin:0 auto;
    border-radius:32px;
    background:
        radial-gradient(circle at 12% 20%,rgba(252,14,192,.12),transparent 45%),
        radial-gradient(circle at 88% 82%,rgba(255,154,7,.10),transparent 45%),
        linear-gradient(160deg,#ffffff 0%,#fffaf9 100%);
    border:1px solid rgba(252,14,192,.08);
    box-shadow:0 30px 80px rgba(252,14,192,.06);
    z-index:0;
    pointer-events:none;
}
/* Corner ornaments hugging the frame edges */
.hero::after{
    content:'';
    position:absolute;
    top:80px;bottom:60px;left:0;right:0;
    max-width:1440px;
    margin:0 auto;
    background:
        linear-gradient(90deg,rgba(252,14,192,.4),rgba(255,154,7,.4)) top left / 40px 2px no-repeat,
        linear-gradient(180deg,rgba(252,14,192,.4),rgba(255,154,7,.4)) top left / 2px 40px no-repeat,
        linear-gradient(90deg,rgba(255,154,7,.4),rgba(252,14,192,.4)) bottom right / 40px 2px no-repeat,
        linear-gradient(180deg,rgba(255,154,7,.4),rgba(252,14,192,.4)) bottom right / 2px 40px no-repeat;
    pointer-events:none;
    z-index:1;
}

/* ── Entrance keyframes ── */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeDown {
    from { opacity: 0; transform: translateY(-28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroScaleIn {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes gradShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* "Miss India" — slide in from right */
@keyframes slideFromRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Rotating border on badge */
@keyframes rotateBorder {
    to { transform: rotate(360deg); }
}

/* ── Background mesh ── */
.hero .hero-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 8%  18%, rgba(252,14,192,.12) 0%, transparent 58%),
        radial-gradient(ellipse 60% 70% at 92% 10%, rgba(255,154,7,.14)  0%, transparent 54%),
        radial-gradient(ellipse 80% 50% at 78% 82%, rgba(254,3,102,.10)  0%, transparent 60%),
        radial-gradient(ellipse 55% 60% at 18% 88%, rgba(255,31,169,.10) 0%, transparent 55%);
    animation: meshPulse 10s ease-in-out infinite alternate;
}
@keyframes meshPulse {
    0%   { opacity: .6; transform: scale(1); }
    100% { opacity: 1;  transform: scale(1.04); }
}

/* Fine grid texture */
.hero .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(245,19,148,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,19,148,.06) 1px, transparent 1px);
    background-size: 55px 55px;
    animation: heroFadeDown 1.4s ease both;
}

/* ── Floating blobs ── */
.hero .hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero .hero-blob-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(252,14,192,.10), rgba(252,14,192,.02) 60%, transparent 75%);
    top: -140px; left: -140px;
    animation: blobDrift1 14s ease-in-out infinite;
}
.hero .hero-blob-2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(255,154,7,.10), rgba(255,154,7,.02) 60%, transparent 75%);
    bottom: -100px; right: -100px;
    animation: blobDrift2 12s ease-in-out infinite;
}
.hero .hero-blob-3 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(254,3,102,.09), rgba(254,3,102,.02) 60%, transparent 75%);
    top: 35%; right: 8%;
    animation: blobDrift3 16s ease-in-out infinite;
}
.hero .hero-blob-4 {
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255,31,169,.10), transparent 70%);
    top: 18%; left: 5%;
    animation: blobDrift2 11s ease-in-out infinite reverse;
}
@keyframes blobDrift1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(30px,-40px) scale(1.05); }
}
@keyframes blobDrift2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-28px, 32px) scale(1.04); }
}
@keyframes blobDrift3 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(24px, 20px) scale(1.06); }
}

/* ── Sparkle dots ── */
.hero .hero-spark {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: var(--grad);
    opacity: 0;
    animation: sparkFloat ease-in-out infinite;
    box-shadow: 0 0 6px 1px rgba(252,14,192,.3);
}
@keyframes sparkFloat {
    0%   { opacity: 0;  transform: translateY(0)    scale(.5); }
    20%  { opacity: .6; }
    75%  { opacity: .5; }
    100% { opacity: 0;  transform: translateY(-60px) scale(1.1); }
}

/* ── Hero side images (decorative, blended) ── */
.hero .hero-side-img {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: clamp(320px, 28vw, 520px);
    height: auto;
    opacity: .85;
    pointer-events: none;
    user-select: none;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 12px 30px rgba(252,14,192,.18));
    -webkit-mask-image: linear-gradient(to top, #000 85%, transparent 100%);
            mask-image: linear-gradient(to top, #000 85%, transparent 100%);
    animation: heroSideFade 1.2s var(--ease) .2s both;
}
.hero .hero-side-img--left  { left: 0;  transform: translateX(-4%); }
.hero .hero-side-img--right { right: 0; transform: translateX(4%); }
@keyframes heroSideFade {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: .85; }
}
.hero .hero-side-img--left  { animation-name: heroSideFadeL; }
.hero .hero-side-img--right { animation-name: heroSideFadeR; }
@keyframes heroSideFadeL {
    from { opacity: 0; transform: translate(-12%, 20px); }
    to   { opacity: .85; transform: translateX(-4%); }
}
@keyframes heroSideFadeR {
    from { opacity: 0; transform: translate(12%, 20px); }
    to   { opacity: .85; transform: translateX(4%); }
}
@media (max-width: 1100px) {
    .hero .hero-side-img { width: clamp(220px, 26vw, 320px); opacity: .7; }
}
@media (max-width: 768px) {
    .hero .hero-side-img { display: none; }
}

/* ── Hero content ── */
.hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 40px 30px;
}
@media (max-width:820px){
    .hero{padding:80px 16px 60px;}
    .hero::before,.hero::after{top:60px;bottom:40px;height:auto;left:8px;right:8px;}
    .hero .hero-content{padding:24px 16px 20px;}
}

/* Staggered entrance — bigger travel distance, springy easing */
.hero .hero-content > * {
    animation: heroFadeUp .8s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-content > *:nth-child(1) { animation-delay: .05s; }  /* logo */
.hero .hero-content > *:nth-child(2) { animation-delay: .22s; }  /* badge */
.hero .hero-content > *:nth-child(3) { animation-delay: .36s; }  /* title */
.hero .hero-content > *:nth-child(4) { animation-delay: .52s; }  /* divider */
.hero .hero-content > *:nth-child(5) { animation-delay: .66s; }  /* chips */
.hero .hero-content > *:nth-child(6) { animation-delay: .80s; }  /* btns */
.hero .hero-content > *:nth-child(7) { animation-delay: .94s; }  /* scroll */

/* Logo */
.hero .hero-logo {
    height: 84px;
    object-fit: contain;
    margin: 0 auto 28px;
    filter: drop-shadow(0 4px 16px rgba(245,19,148,.25));
    transition: transform .3s ease, filter .3s ease;
}
.hero .hero-logo:hover {
    transform: scale(1.07) translateY(-3px);
    filter: drop-shadow(0 10px 32px rgba(245,19,148,.5));
}
/* Main hero logo replaces the wordmark — make it large and prominent */
.hero .hero-logo--main {
    height: clamp(170px, 18vw, 220px);
    margin: 20px auto 32px;
    filter: drop-shadow(0 8px 28px rgba(245,19,148,.32));
}
.hero .hero-logo--main:hover {
    transform: scale(1.04) translateY(-2px);
    filter: drop-shadow(0 14px 40px rgba(245,19,148,.55));
}
@media (max-width: 640px) {
    .hero .hero-logo--main { height: 120px; margin-bottom: 22px; }
}

/* Live badge */
.hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(252,14,192,.08), rgba(255,154,7,.08));
    border: 1.5px solid rgba(252,14,192,.3);
    border-radius: 50px;
    padding: 10px 26px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c3);
    margin-top: 18px;
    margin-bottom: 22px;
    backdrop-filter: blur(6px);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.hero .hero-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(252,14,192,.3);
    border-color: rgba(252,14,192,.7);
}
.badge-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--grad);
    animation: pulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(252,14,192,.8);
}
@keyframes pulse {
    0%,100% { transform: scale(1);  opacity: 1; }
    50%     { transform: scale(1.6); opacity: .5; }
}

/* Hero heading */
.hero .hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: .93;
    letter-spacing: -.02em;
    background: linear-gradient(270deg, #fc0ec0, #ff9a07, #fe0366, #ff1fa9, #fc0ec0);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradShift 5s linear infinite;
    margin-bottom: 20px;
}
/* "Miss India" — animated gradient + slides from right */
.hero .hero-title .grad-text {
    background: linear-gradient(270deg, #fc0ec0, #ff9a07, #fe0366, #ff1fa9, #fc0ec0);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    animation: gradShift 5s linear infinite, slideFromRight .75s cubic-bezier(.22,1,.36,1) .36s both;
}

/* Deco divider */
.deco-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #7a5a75;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    max-width: 360px;
    margin: 0 auto 38px;
}
.deco-divider::before,
.deco-divider::after {
    content: '';
    flex: 1;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(245,19,148,.55), transparent);
}

/* Step chips — staggered hover lift */
.hero .hero-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}
.hero .hero-step-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(245,19,148,.16);
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    backdrop-filter: blur(6px);
    transition: transform .22s ease, border-color .22s, box-shadow .22s;
    animation: heroFadeUp .72s cubic-bezier(.22,1,.36,1) both;
}
/* Stagger chips individually */
.hero .hero-steps .hero-step-chip:nth-child(1) { animation-delay: .65s; }
.hero .hero-steps .hero-step-chip:nth-child(2) { animation-delay: .75s; }
.hero .hero-steps .hero-step-chip:nth-child(3) { animation-delay: .85s; }
.hero .hero-steps .hero-step-chip:nth-child(4) { animation-delay: .95s; }
.hero .hero-step-chip:hover {
    transform: translateY(-3px);
    border-color: rgba(245,19,148,.3);
    box-shadow: 0 6px 20px rgba(245,19,148,.1);
}
/* Override parent stagger for chips (handled above) */
.hero .hero-content > .hero-steps { animation: none; }

.chip-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(252,14,192,.3);
}

/* Hero buttons */
.hero .hero-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 52px;
}
/* Second button — outline style in hero */
.hero .hero-btns .btn-primary:nth-child(2) {
    background: transparent;
    color: var(--c3);
    border: 1.5px solid rgba(245,19,148,.35);
    box-shadow: none;
}
.hero .hero-btns .btn-primary:nth-child(2):hover {
    background: rgba(245,19,148,.06);
    border-color: var(--c3);
    box-shadow: 0 6px 20px rgba(245,19,148,.14);
    transform: translateY(-2px);
}

/* Scroll indicator */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #bbb;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    animation: heroFadeUp .7s ease .95s both;
}
.scroll-track {
    width: 22px; height: 38px;
    border: 1.5px solid rgba(245,19,148,.3);
    border-radius: 11px;
    position: relative;
    overflow: hidden;
}
.scroll-thumb {
    width: 4px; height: 8px;
    background: linear-gradient(180deg, var(--c1), var(--c4));
    border-radius: 4px;
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 5px;
    animation: scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown { 0%,100% { top: 5px; opacity: 1; } 80% { top: 19px; opacity: .15; } }

/* ══════════════════════════════════════════════════════════════
   STEPS TO APPLY SECTION
══════════════════════════════════════════════════════════════ */
.steps-section {
    background: linear-gradient(160deg, #fff9fe 0%, #fff5fb 50%, #fffaf0 100%);
    border-top: 1px solid rgba(245,19,148,.08);
    border-bottom: 1px solid rgba(245,19,148,.08);
    padding: 72px 20px;
}
.steps-inner {
    max-width: 960px;
    margin: 0 auto;
}

/* Heading */
.steps-heading {
    text-align: center;
    margin-bottom: 44px;
}
.steps-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(252,14,192,.08), rgba(255,154,7,.08));
    border: 1px solid rgba(252,14,192,.2);
    border-radius: 50px;
    padding: 5px 16px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c3);
    margin-bottom: 12px;
}
.steps-heading h2 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.4vw, 3.2rem);
    color: var(--text-main);
    margin-bottom: 14px;
    line-height: 1.1;
}
.steps-heading p {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.75;
    max-width: 640px;
    margin: 0 auto;
}

/* Important note */
.steps-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1.5px solid rgba(245,19,148,.16);
    border-left: 4px solid var(--c3);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 40px;
}
.steps-note-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(252,14,192,.12), rgba(255,154,7,.08));
    color: var(--c3);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.steps-note-body {
    font-size: 13.5px;
    color: #555;
    line-height: 1.7;
}
.steps-note-body a { color: var(--c3); font-weight: 700; }

/* Cards grid */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-bottom: 40px;
    position: relative;
}
/* connector line behind cards */
.steps-grid::before {
    content: '';
    position: absolute;
    top: 46px;
    left: calc(10% + 20px);
    right: calc(10% + 20px);
    height: 2px;
    background: linear-gradient(90deg, var(--c1), var(--c4));
    opacity: .18;
    z-index: 0;
}

/* Individual card */
.step-apply-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1.5px solid rgba(245,19,148,.1);
    border-radius: var(--radius-lg);
    padding: 30px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin: 0 6px;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    cursor: default;
}
.step-apply-card:hover {
    border-color: rgba(252,14,192,.28);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(252,14,192,.08);
}

/* Top area: icon + number */
.sac-top {
    position: relative;
    margin-bottom: 16px;
}
.sac-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(252,14,192,.1), rgba(255,154,7,.1));
    border: 1.5px solid rgba(252,14,192,.16);
    color: var(--c3);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background .25s, transform .25s;
}
.step-apply-card:hover .sac-icon {
    background: var(--grad);
    color: #fff;
    transform: scale(1.08);
    border-color: transparent;
}
.sac-icon--gold {
    background: linear-gradient(135deg, rgba(255,154,7,.14), rgba(255,200,7,.08));
    border-color: rgba(255,154,7,.22);
    color: var(--c4);
}
.step-apply-card:hover .sac-icon--gold {
    background: linear-gradient(135deg, var(--c4), #ffcc44);
    color: #fff;
}
.sac-num {
    position: absolute;
    top: -10px; right: -10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .04em;
}

/* Body */
.sac-body { flex: 1; }
.sac-body h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
    line-height: 1.3;
}
.sac-body p {
    font-size: 13.5px;
    color: #555;
    line-height: 1.6;
}

/* Footer chip */
.sac-footer {
    margin-top: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ccc;
    border-top: 1px solid #f5eaf4;
    padding-top: 10px;
    width: 100%;
}
.step-apply-card:hover .sac-footer { color: rgba(245,19,148,.4); }

/* Contact bar */
.steps-contact {
    background: #fff;
    border: 1.5px solid rgba(245,19,148,.12);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    text-align: center;
    margin-top: 36px;
}
.sc-headline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--text-main);
}
.sc-headline i { color: var(--c3); font-size: 16px; }
.steps-contact > p {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}
.sc-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.sc-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c3);
    text-decoration: none;
    transition: opacity .2s;
}
.sc-link i { font-size: 11px; }
.sc-link:hover { opacity: .75; }
.sc-sep { color: #ddd; font-size: 14px; }

/* ══════════════════════════════════════════════════════════════
   STEPS TO APPLY — Vertical numbered pointer list
══════════════════════════════════════════════════════════════ */
.steps-pointer-list{
    list-style: none;
    padding: 0;
    margin: 0 auto 36px;
    max-width: 780px;
    position: relative;
    counter-reset: step;
}
.steps-pointer-list::before{
    content:'';
    position:absolute;
    left: 26px;
    top: 34px;
    bottom: 34px;
    width: 2px;
    background: linear-gradient(180deg, var(--c3), var(--c4));
    opacity: .28;
    border-radius: 2px;
}
.step-point{
    position: relative;
    display: grid;
    grid-template-columns: 52px 48px 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 24px 22px 0;
    background: #fff;
    border: 1.5px solid rgba(245,19,148,.1);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    align-items: center;
}
.step-point:hover{
    transform: translateX(6px);
    border-color: rgba(252,14,192,.32);
    box-shadow: 0 14px 36px rgba(252,14,192,.1);
}
.sp-num{
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: -1.5px 0 -1.5px -1.5px;
    background: linear-gradient(135deg, var(--c3), #ff1fa9);
    color: #fff;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.sp-num--gold{
    background: linear-gradient(135deg, var(--c4), #ffcc44);
}
.sp-icon{
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: 4px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(252,14,192,.1), rgba(255,154,7,.1));
    border: 1.5px solid rgba(252,14,192,.18);
    color: var(--c3);
    font-size: 20px;
    flex-shrink: 0;
    transition: background .3s, color .3s, transform .3s;
}
.step-point:hover .sp-icon{
    background: var(--grad);
    color: #fff;
    transform: scale(1.06);
    border-color: transparent;
}
.sp-icon--gold{
    background: linear-gradient(135deg, rgba(255,154,7,.14), rgba(255,200,7,.08));
    border-color: rgba(255,154,7,.24);
    color: var(--c4);
}
.step-point:hover .sp-icon--gold{
    background: linear-gradient(135deg, var(--c4), #ffcc44);
    color: #fff;
}
.sp-body{
    grid-column: 3;
    padding: 4px 0;
}
.sp-body h4{
    /* font-family: var(--font-display); */
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
    line-height: 1.3;
}
.sp-body p{
    font-size: 16px;
    color: #4a4a55;
    line-height: 1.7;
    margin: 0;
}
@media (max-width: 640px){
    .steps-pointer-list::before{ left: 22px; top: 26px; bottom: 26px; }
    .step-point{
        grid-template-columns: 46px 1fr;
        gap: 14px;
        padding: 16px 16px 16px 0;
    }
    .sp-num{ width: 46px; height: 46px; font-size: 17px; }
    .sp-icon{ display: none; }
    .sp-body{ grid-column: 2; }
    .sp-body h4{ font-size: 16px; }
    .sp-body p{ font-size: 15.5px; }
}

/* ══════════════════════════════════════════════════════════════
   MAIN FORM LAYOUT — Sidebar + Panel
══════════════════════════════════════════════════════════════ */
.main-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    max-width: 1240px;
    margin: 0 auto;
    min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
    background: linear-gradient(170deg, #fff9fe 0%, #fff5fb 45%, #fffaf0 100%);
    border-right: 1px solid rgba(245,19,148,.1);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 36px 28px;
    overflow: hidden;
}
.sidebar-logo { align-self: start; height: 60px; object-fit: contain; margin-bottom: 28px; }
.sidebar-brand h2 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
}
.sidebar-brand h2 em {
    background: var(--grad2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
}
.sidebar-brand p {
    color: var(--text-light);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-top: 5px;
}

/* Step nav */
.step-nav { margin-top: 32px; flex: 1; }
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
}
.step-track {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #e5d5e0;
    background: #fff;
    color: #ccc;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    flex-shrink: 0;
    position: relative;
}
.step-item.active .step-circle {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(252,14,192,.32);
}
.step-item.done .step-circle {
    background: var(--c3);
    border-color: transparent;
    color: #fff;
}
.step-line {
    width: 2px;
    height: 32px;
    background: #eddde8;
    margin: 3px 0;
    border-radius: 2px;
    transition: background .3s;
}
.step-line.filled { background: var(--c3); }
.step-body { padding-top: 4px; padding-bottom: 10px; }
.step-body strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #bbb;
    transition: color .3s;
}
.step-body span {
    font-size: 11px;
    color: #d5c5d0;
    transition: color .3s;
}
.step-item.active .step-body strong { color: var(--c3); }
.step-item.active .step-body span,
.step-item.done .step-body span { color: #aaa; }
.step-item.done .step-body strong { color: #999; }

/* Progress ring */
.progress-ring-wrap {
    margin-top: auto;
    padding-top: 20px;
}
.prw-card {
    background: linear-gradient(135deg, #fff5fd, #fffaf0);
    border: 1.5px solid rgba(245,19,148,.12);
    border-radius: var(--radius-lg);
    padding: 16px;
}
.prw-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.prw-ring-wrap {
    position: relative;
    flex-shrink: 0;
}
.ring-svg { transform: rotate(-90deg); display: block; }
.ring-bg  { fill: none; stroke: #f0e0ec; stroke-width: 4; }
.ring-fill {
    fill: none;
    stroke: url(#ringGrad);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 188.5;
    stroke-dashoffset: 188.5;
    transition: stroke-dashoffset .6s cubic-bezier(.22,1,.36,1);
}
.prw-pct-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prw-pct-inner strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--c3);
    line-height: 1;
}
.prw-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.prw-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-light);
}
.prw-step-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}
.prw-hint {
    font-size: 10.5px;
    color: var(--text-light);
    line-height: 1.4;
}
.prw-bar-track {
    height: 5px;
    background: #f0e0ec;
    border-radius: 10px;
    overflow: hidden;
}
.prw-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--grad);
    border-radius: 10px;
    transition: width .6s cubic-bezier(.22,1,.36,1);
}

/* Sidebar decoration */
.sidebar-deco {
    position: absolute;
    bottom: 0; right: 0;
    pointer-events: none;
    opacity: .5;
}

/* ── Form panel ── */
.form-panel {
    background: #fff;
    padding: 48px 56px;
    min-height: 100vh;
}

/* Section panels */
.sec-panel { display: none; }
.sec-panel.active { display: block; animation: panelIn .4s cubic-bezier(.22,1,.36,1); }
@keyframes panelIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Section header */
.sec-header { margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid #f2e8f2; }
.sec-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(252,14,192,.07), rgba(255,154,7,.07));
    border: 1px solid rgba(252,14,192,.16);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c3);
    margin-bottom: 10px;
}
.sec-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-main);
}
.sec-header p { color: var(--text-muted); font-size: 15.5px; line-height: 1.65; margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn-primary {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--grad);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none;
    border-radius: 7px;
    padding: 13px 28px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(252,14,192,.28);
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -110%;
    width: 70%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-20deg);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(252,14,192,.38); }
.btn-primary:hover::after { animation: shimmer .55s ease forwards; }
@keyframes shimmer { to { left: 140%; } }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--c3);
    border: 1.5px solid rgba(245,19,148,.28);
    border-radius: 7px;
    padding: 11px 22px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
}
.btn-outline:hover { background: rgba(245,19,148,.06); border-color: var(--c3); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--c3);
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════════════════════════════ */
.field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c3);
    margin-bottom: 9px;
}
.field-row  { display: grid; gap: 14px; margin-bottom: 20px; }
.col-1 { grid-template-columns: 1fr; }
.col-2 { grid-template-columns: 1fr 1fr; }
.col-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-group { position: relative; }

/* Text / email / tel inputs */
.fmi-input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    padding: 14px 16px;
    outline: none;
    transition: border-color .18s;
    box-shadow: none;
}
.fmi-input:focus { border-color: var(--border-focus); background: #fff; }
.fmi-input.has-error { border-color: var(--c5); }
.fmi-input::placeholder { color: #c0b0bc; }
.fmi-input[readonly] { background: #f8f3f7; color: #888; cursor: default; }

/* Prefix input (Instagram @) */
.input-with-prefix {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    overflow: hidden;
    transition: border-color .18s;
}
.input-with-prefix:focus-within { border-color: var(--border-focus); background: #fff; }
.input-with-prefix.has-error { border-color: var(--c5); }
.input-prefix {
    padding: 0 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--c3);
    background: rgba(245,19,148,.05);
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1.5px solid var(--border);
    min-height: 44px;
    flex-shrink: 0;
}
.input-with-prefix .fmi-input {
    border: none;
    border-radius: 0;
    background: transparent;
    flex: 1;
}
.input-with-prefix .fmi-input:focus { border: none; box-shadow: none; background: transparent; }

/* Error text */
.err { color: var(--c5); font-size: 13px; font-weight: 600; margin-top: 5px; display: none; }
.err.show { display: block; animation: errSlide .18s ease; }
@keyframes errSlide { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } }

/* ── Passport / OCI Toggle ── */
.radio-pill-group {
    display: inline-flex;
    background: #f8f0f6;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: 4px;
    gap: 4px;
}
.radio-pill-group input[type=radio] { display: none; }
.radio-pill-group label {
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: #bbb;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.radio-pill-group input:checked + label {
    background: #fff;
    color: var(--c3);
    box-shadow: 0 2px 8px rgba(245,19,148,.14);
}

/* ══════════════════════════════════════════════════════════════
   CUSTOM DROPDOWN
══════════════════════════════════════════════════════════════ */
.custom-select { position: relative; }
.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    padding: 14px 16px;
    font-size: 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color .18s;
    text-align: left;
    user-select: none;
}
.cs-trigger:focus { outline: none; border-color: var(--border-focus); }
.cs-trigger.placeholder-shown { color: #c0b0bc; }
.cs-trigger.open { border-color: var(--border-focus); border-bottom-color: transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.cs-trigger.has-error { border-color: var(--c5); }
.cs-arrow { font-size: 10px; color: var(--c3); transition: transform .2s; flex-shrink: 0; }
.cs-trigger.open .cs-arrow { transform: rotate(180deg); }

.cs-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--border-focus);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    z-index: 100;
    max-height: 260px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}
.cs-dropdown.open { display: flex; animation: ddOpen .18s ease; }
@keyframes ddOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Search box */
.cs-search-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid #f0e0ec;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cs-search-wrap i { color: var(--text-light); font-size: 12px; flex-shrink: 0; }
.cs-search {
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-main);
    width: 100%;
    background: transparent;
}
.cs-search::placeholder { color: #ccc; }

/* Options list */
.cs-list { overflow-y: auto; flex: 1; }
.cs-option {
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: background .12s;
}
.cs-option:hover    { background: rgba(245,19,148,.06); }
.cs-option.selected { background: rgba(245,19,148,.1); color: var(--c3); font-weight: 700; }
.cs-option.hidden   { display: none; }
.cs-no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   CUSTOM DATE PICKER
══════════════════════════════════════════════════════════════ */
.datepicker-wrap { position: relative; }
.dp-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: #c0b0bc;
    cursor: pointer;
    transition: border-color .18s;
    text-align: left;
    user-select: none;
}
.dp-trigger.has-value { color: var(--text-main); }
.dp-trigger:focus,
.dp-trigger.open { outline: none; border-color: var(--border-focus); }
.dp-trigger.has-error { border-color: var(--c5); }
.dp-trigger i { color: var(--c3); font-size: 13px; flex-shrink: 0; }

.dp-calendar {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1.5px solid var(--border-focus);
    border-radius: var(--radius-md);
    z-index: 110;
    width: 300px;
    box-shadow: 0 12px 40px rgba(245,19,148,.1);
    overflow: hidden;
}
.dp-calendar.open { display: block; animation: ddOpen .2s ease; }

.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(252,14,192,.06), rgba(255,154,7,.06));
    border-bottom: 1px solid rgba(245,19,148,.1);
}
.dp-nav-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(245,19,148,.2);
    background: #fff;
    color: var(--c3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: all .15s;
}
.dp-nav-btn:hover { background: var(--c3); color: #fff; }
.dp-nav-btn.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.dp-month-year {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text-main);
    cursor: pointer;
}
.dp-month-year.disabled { cursor: default; }
.dp-year-jump {
    margin-left: 6px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    background: #fff;
    border: 1px solid #e8d5e3;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
}
.dp-year-jump:focus, .dp-year-jump:hover { border-color: var(--c2); }

/* Month/Year selector view */
.dp-my-selector { display: none; padding: 10px; }
.dp-my-selector.open { display: block; }
.dp-my-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.dp-my-item {
    padding: 7px 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .15s;
}
.dp-my-item:hover { border-color: rgba(245,19,148,.25); color: var(--c3); }
.dp-my-item.selected { background: var(--grad); color: #fff; }

.dp-days-view {}
.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 10px 4px;
    border-bottom: 1px solid #f5e5f0;
}
.dp-wd {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 4px 0;
}
.dp-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 10px 10px;
    gap: 2px;
}
.dp-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 50%;
    cursor: pointer;
    transition: all .15s;
    color: var(--text-main);
}
.dp-day:hover:not(.empty):not(.disabled) { background: rgba(245,19,148,.1); color: var(--c3); }
.dp-day.other-month { color: #ddd; }
.dp-day.today { border: 1.5px solid rgba(245,19,148,.3); color: var(--c3); }
.dp-day.selected { background: var(--grad); color: #fff !important; }
.dp-day.disabled { color: #ddd; cursor: not-allowed; pointer-events: none; }
.dp-day.empty { pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   ELIGIBILITY CARDS
══════════════════════════════════════════════════════════════ */
.elig-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.elig-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid #f0e5ed;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: #fffafe;
    transition: border-color .2s, transform .2s;
}
.elig-card:hover { border-color: rgba(255,31,169,.3); transform: translateX(4px); }
.elig-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.elig-card h4 { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 2px; }
.elig-card p  { font-size: 14px; color: #444; }
.elig-card.note {
    background: linear-gradient(135deg, #fffaf0, #fff8f5);
    border-color: rgba(255,154,7,.25);
}
.elig-card.note .elig-icon { background: linear-gradient(135deg, var(--c4), #ffcc44); }

/* ══════════════════════════════════════════════════════════════
   MYSTERY REWARD TEASER
══════════════════════════════════════════════════════════════ */
.mystery-reward {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 28px 0 20px;
    padding: 22px 26px;
    background: linear-gradient(135deg, #fff5fd 0%, #fffaf0 100%);
    border: 1.5px dashed rgba(252, 14, 192, .35);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
.mystery-reward::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 200px at 100% 0%, rgba(255,154,7,.10), transparent 60%),
                radial-gradient(300px 180px at 0% 100%, rgba(252,14,192,.10), transparent 60%);
    pointer-events: none;
}
.mystery-reward-icon {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c2, #fc0ec0), var(--c4, #ff9a07));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 10px 26px rgba(252, 14, 192, .30);
    position: relative;
    z-index: 1;
    animation: mysteryPulse 2.4s ease-in-out infinite;
}
.mystery-reward-body { position: relative; z-index: 1; }
.mystery-reward-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c2, #fc0ec0);
    margin-bottom: 6px;
}
.mystery-reward-body h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
    margin: 0 0 6px;
    line-height: 1.25;
}
.mystery-reward-body h4 em {
    font-style: italic;
    background: linear-gradient(135deg, var(--c2, #fc0ec0), var(--c4, #ff9a07));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mystery-reward-body p {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    line-height: 1.6;
    margin: 0;
}
@keyframes mysteryPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 26px rgba(252, 14, 192, .30); }
    50%      { transform: scale(1.06); box-shadow: 0 14px 32px rgba(252, 14, 192, .45); }
}
@media (max-width: 640px) {
    .mystery-reward { flex-direction: column; text-align: center; gap: 14px; padding: 20px; }
    .mystery-reward-body h4 { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════
   STATE ROWS
══════════════════════════════════════════════════════════════ */
.state-rows { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.state-row {
    border: 1.5px solid #f0e0ed;
    border-radius: var(--radius-md);
    padding: 18px;
    background: #fffafe;
    transition: border-color .2s;
}
.state-row:focus-within { border-color: rgba(255,31,169,.3); }
.state-row-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c3);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.state-row-label::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--grad);
}
.state-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ══════════════════════════════════════════════════════════════
   UPLOAD ZONES
══════════════════════════════════════════════════════════════ */
.upload-intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
}
.upload-intro strong { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.upload-intro span { font-size: 13px; color: var(--text-muted); }

.upload-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.upload-item {}
.upload-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c3);
    text-align: center;
    margin-bottom: 10px;
}
.upload-zone {
    border: 2px dashed #f0cde0;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, #fffafe, #fff);
    aspect-ratio: 3 / 4;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s, background .2s;
}
.upload-zone:hover { border-color: var(--c2); background: #fff5fd; }
.upload-zone input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.upload-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    display: none;
}
.upload-zone.has-file { border-style: solid; border-color: var(--c2); }
.upload-zone.has-file .upload-preview { display: block; animation: previewIn .3s ease; }
.upload-zone.has-file .upload-ph { opacity: 0; pointer-events: none; }
@keyframes previewIn { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: scale(1); } }
.upload-ph { text-align: center; padding: 10px; }
.upload-ph-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(252,14,192,.09), rgba(255,154,7,.09));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 16px;
    color: var(--c3);
    transition: transform .2s;
}
.upload-zone:hover .upload-ph-icon { transform: scale(1.1) translateY(-2px); }
.upload-ph p { font-size: 11px; color: var(--text-muted); font-weight: 600; line-height: 1.4; }
.upload-err { color: var(--c5); font-size: 10.5px; font-weight: 600; text-align: center; margin-top: 5px; display: none; }
.upload-err.show { display: block; }

/* Sample photo thumbnail (below each upload zone) */
.sample-thumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 5px 8px 5px 5px;
    background: #fffafe;
    border: 1px solid #f0e0ed;
    border-radius: 8px;
    text-decoration: none;
    cursor: zoom-in;
    transition: border-color .2s, background .2s;
}
.sample-thumb:hover { border-color: var(--c2); background: #fff5fd; }
.sample-thumb img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}
.sample-thumb span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
}
.sample-thumb:hover span { color: var(--c2); }

/* Sample photo lightbox */
.sample-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 5, 20, .85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 30px;
    animation: sampleLbIn .2s ease;
}
.sample-lightbox.open { display: flex; }
.sample-lightbox figure { margin: 0; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sample-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.sample-lightbox figcaption { color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.sample-lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #333;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sample-lightbox-close:hover { background: var(--c2); color: #fff; }
@keyframes sampleLbIn { from { opacity: 0; } to { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════
   T&C + HELPLINE
══════════════════════════════════════════════════════════════ */
.tnc-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffafe;
    border: 1.5px solid #f0e0ed;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 6px;
}
.tnc-row input[type=checkbox] {
    width: 16px; height: 16px;
    accent-color: var(--c2);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}
.tnc-row label { font-size: 15.5px; color: #555; line-height: 1.65; cursor: pointer; }
.tnc-row label a { color: var(--c3); font-weight: 700; text-decoration: underline; }

.helpline-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fff9fe, #fff8f0);
    border: 1px solid rgba(245,19,148,.12);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.helpline-bar i { color: var(--c4); font-size: 16px; flex-shrink: 0; }
.helpline-bar p { font-size: 12.5px; color: #555; line-height: 1.7; }
.helpline-bar a { color: var(--c3); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   FORM FOOTER (Back / Continue row)
══════════════════════════════════════════════════════════════ */
.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid #f2e8f2;
    margin-top: 12px;
}

/* ══════════════════════════════════════════════════════════════
   TOOLTIP
══════════════════════════════════════════════════════════════ */
.tip { position: relative; display: inline-flex; align-items: center; }
.tip-icon {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(245,19,148,.14);
    color: var(--c3);
    font-size: 8px;
    font-weight: 700;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    margin-left: 5px;
}
.tip-popup {
    display: none;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #1c1c1c;
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
}
.tip:hover .tip-popup { display: block; }

/* ══════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12,4,10,.55);
    backdrop-filter: blur(7px);
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-overlay.open { display: flex; animation: fadeIn .22s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
    background: #fff;
    border-radius: var(--radius-xl);
    max-width: 660px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 36px;
    position: relative;
    box-shadow: 0 40px 90px rgba(0,0,0,.18);
    animation: modalIn .32s cubic-bezier(.22,1,.36,1);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.93) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid #eee;
    background: #f9f9f9;
    color: #999;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: all .15s;
}
.modal-close:hover { background: var(--c3); color: #fff; border-color: var(--c3); }
.modal-header { margin-bottom: 20px; }
.modal-header h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--c3);
}
.tnc-list { counter-reset: tnc; }
.tnc-list li {
    counter-increment: tnc;
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
    border-bottom: 1px solid #f8f0f6;
}
.tnc-list li::before {
    content: counter(tnc);
    position: absolute;
    left: 0;
    top: 10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding-top: 20px; border-top: 1px solid #f0e8f0; margin-top: 8px; }

/* ── Success modal ── */
.success-crown {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 0 12px rgba(252,14,192,.1), 0 0 0 24px rgba(252,14,192,.05);
    animation: crownPop .6s cubic-bezier(.22,1,.36,1);
}
@keyframes crownPop { 0% { transform: scale(0) rotate(-15deg); } 70% { transform: scale(1.1) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
.success-modal { text-align: center; }
.success-modal h2 { font-family: var(--font-display); font-size: 1.9rem; margin-bottom: 10px; }
.success-modal p { color: #444; font-size: 13.5px; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════
   CONFETTI
══════════════════════════════════════════════════════════════ */
@keyframes cfFall {
    0%   { transform: translateY(-10px) rotate(0); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(620deg); opacity: 0; }
}
.cf { position: fixed; top: 0; pointer-events: none; z-index: 999; animation: cfFall linear forwards; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    :root { --sidebar-w: 260px; }
    .form-panel { padding: 36px 36px; }
    .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .steps-grid::before { display: none; }
    .step-apply-card { margin: 0; }
}
@media (max-width: 800px) {
    .main-layout { grid-template-columns: 1fr; }
    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid rgba(245,19,148,.1);
    }
    .sidebar-brand { display: none; }
    .step-nav { flex-direction: row; gap: 6px; margin-top: 0; }
    .step-line { display: none; }
    .step-body span { display: none; }
    .progress-ring-wrap, .sidebar-deco { display: none; }
    .form-panel { padding: 24px 16px; }
    .upload-grid { grid-template-columns: repeat(2, 1fr); }
    .col-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 520px) {
    .col-2, .col-3 { grid-template-columns: 1fr; }
    .state-cols { grid-template-columns: 1fr; }
    .hero-title { font-size: 2.8rem; }
    .upload-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: 1fr; }
    .sc-links { flex-direction: column; gap: 10px; }
}
@media (max-width: 1024px) and (min-width: 641px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .steps-grid::before { display: none; }
    .step-apply-card { margin: 0; }
}

/* ══════════════════════════════════════════════════════════════
   AMBASSADORS SECTION (Gayatri + Shreya)
══════════════════════════════════════════════════════════════ */
.ambassadors-section{
    position:relative;
    background:#fff;
    padding:56px 24px;
    overflow:hidden;
}
.ambassadors-section::after{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:200px;height:2px;
    background:linear-gradient(90deg,transparent,#fc0ec0,#ff9a07,transparent);
    opacity:.7;
}
.amb-inner{position:relative;max-width:1080px;margin:0 auto;z-index:1;}
.amb-heading{text-align:center;margin-bottom:52px;}
.amb-tag{
    display:inline-block;
    background:linear-gradient(135deg,rgba(252,14,192,.08),rgba(255,154,7,.08));
    border:1px solid rgba(252,14,192,.28);
    border-radius:50px;
    padding:6px 18px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:#fc0ec0;
    margin-bottom:16px;
}
.amb-heading h2{
    font-size:clamp(2.2rem,4.4vw,3.4rem);
    line-height:1.1;
    color:#1a1a2e;
    margin:0 0 14px;
    letter-spacing:-.01em;
}
.amb-heading h2 em{
    font-style:italic;
    background:linear-gradient(135deg,#fc0ec0,#ff9a07);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.amb-heading p{
    font-size:16px;line-height:1.7;
    color:#5a5a6a;
    max-width:580px;margin:0 auto;
}
.amb-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:36px;
}
/* Clean, professional card */
.amb-card{
    position:relative;
    background:#fff;
    border:1px solid #f0e6ee;
    border-radius:20px;
    overflow:hidden;
    transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s;
    box-shadow:0 8px 28px rgba(26,10,36,.06);
}
.amb-card:hover{
    transform:translateY(-6px);
    border-color:rgba(252,14,192,.35);
    box-shadow:0 22px 46px rgba(252,14,192,.14);
}
.amb-photo-wrap{
    position:relative;
    aspect-ratio:4/4.4;
    overflow:hidden;
    background:#faf5f8;
}
.amb-photo-bg{display:none;}
.amb-photo{
    position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    height:100%;width:auto;max-width:none;
    object-fit:contain;object-position:bottom center;
    transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.amb-card:hover .amb-photo{
    transform:translateX(-50%) scale(1.03);
}
.amb-crown{
    position:absolute;top:16px;right:16px;
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#ff9a07,#ffcc44);
    color:#fff;font-size:15px;
    box-shadow:0 6px 18px rgba(255,154,7,.35);
    z-index:2;
}
.amb-body{display:none;}
.amb-year{
    display:inline-block;
    font-size:10.5px;font-weight:800;
    letter-spacing:.24em;text-transform:uppercase;
    color:#fc0ec0;
    margin-bottom:10px;
}
.amb-body h3{
    font-size:clamp(1.5rem,2.6vw,1.9rem);
    line-height:1.15;
    color:#1a1a2e;
    margin:0 0 8px;
    letter-spacing:-.005em;
}
.amb-role{
    font-size:12px;font-weight:800;
    color:#ff9a07;
    margin:0 0 16px;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.amb-quote{
    font-size:15px;line-height:1.7;
    color:#5a5a6a;
    font-style:italic;
    margin:0;
    padding:0 4px;
}
@media (max-width:820px){
    .ambassadors-section{padding:40px 20px;}
    .amb-heading{margin-bottom:36px;}
    .amb-grid{grid-template-columns:1fr;gap:24px;max-width:420px;margin:0 auto;}
    .amb-body{padding:22px 22px 24px;}
    .amb-crown{width:38px;height:38px;font-size:14px;}
}

/* ── Steps to Apply — CTA button ── */
.steps-cta-wrap{display:flex;justify-content:center;margin-top:36px;}
.steps-cta-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:999px;background:linear-gradient(135deg,#fc0ec0,#ff9a07);color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 12px 32px rgba(252,14,192,.32);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1);}
.steps-cta-btn:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(252,14,192,.45);color:#fff;}
.steps-cta-btn i{font-size:13px;}
@media (max-width:520px){
    .steps-cta-btn{padding:13px 26px;font-size:13px;}
}