:root{--red:#e31e24;--blue:#004c8f;--gold:#eec979;--navy:#061426}*{box-sizing:border-box}html{background:#020813}body{margin:0;color:#fff;font-family:Arial,sans-serif;background:radial-gradient(circle at 78% 20%,#173b60,transparent 32%),linear-gradient(135deg,#020813,#08213a 58%,#030914);min-height:100vh}button,input{font:inherit}button{cursor:pointer}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #ffffff18}.brand{display:flex;align-items:center;gap:10px;letter-spacing:.1em}.brand i{color:var(--red);font-size:30px}.brand span{font-size:10px;color:#b9c8d9;border-left:1px solid #ffffff55;padding-left:12px}.demo-pill{border:1px solid #ffffff22;border-radius:30px;padding:8px 12px;font-size:9px;letter-spacing:.15em;color:#9fe1b8}#steps{display:flex;max-width:600px;margin:20px auto 0;position:relative}#steps:before{content:"";height:1px;position:absolute;left:10%;right:10%;top:15px;background:#ffffff22}#steps span{flex:1;text-align:center;color:#617489;font-size:11px;z-index:1}#steps span:not(small){display:grid;place-items:center}#steps span:before{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:#0b1b2d;border:1px solid #45566a;z-index:-1}#steps span.active{color:#fff}#steps span.active:before{background:var(--red)}#steps small{display:block;margin-top:20px;text-transform:uppercase;font-size:7px;letter-spacing:.14em}.screen{display:none;min-height:calc(100vh - 170px);padding:55px 6vw 90px}.screen.active{display:grid}.eyebrow{font-size:9px;letter-spacing:.3em;color:var(--gold);font-weight:bold}.primary{border:0;background:linear-gradient(135deg,#f12f35,#ac0710);color:#fff;padding:16px 22px;font-size:10px;font-weight:bold;letter-spacing:.13em;box-shadow:0 15px 35px #e31e2430}.hero-copy h1{font:400 clamp(54px,7vw,100px)/.9 Georgia,serif;letter-spacing:-.06em;margin:24px 0}.hero-copy h1 em,.capture-copy em{color:var(--gold)}.hero-copy>p:not(.eyebrow){max-width:590px;color:#b8c5d1;line-height:1.7}.screen[data-screen=welcome]{grid-template-columns:1.2fr .8fr;align-items:center}.hero-art{display:grid;place-items:center}.poster{width:270px;height:380px;border:1px solid #eec97966;box-shadow:0 40px 100px #000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#365a75,#07101b);animation:float 4s ease-in-out infinite}.poster strong{font:50px Georgia;color:var(--gold);margin:10px}.poster small,.poster i{font-size:9px;letter-spacing:.3em}@keyframes float{50%{transform:translateY(-12px) rotate(2deg)}}.screen-title{text-align:center}.screen-title h2,.capture-copy h2,.studio-screen h2,.result h1{font:400 clamp(38px,5vw,65px)/1 Georgia,serif;margin:15px}.screen-title>p:last-child{color:#95a8ba}.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:min(1100px,100%);margin:30px auto}.world{padding:0 0 24px;text-align:left;background:#ffffff08;border:1px solid #ffffff1e;color:#fff;overflow:hidden;transition:.25s}.world.selected{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 20px 60px #0008}.world>small,.world>h3,.world>p,.world>b{display:block;margin-left:22px;margin-right:22px}.world>small{color:var(--gold);font-size:7px;letter-spacing:.2em;margin-top:20px}.world h3{font:25px Georgia;margin-top:8px;margin-bottom:9px}.world p{color:#9eafbf;font-size:11px;line-height:1.5}.world>b{font-size:8px;letter-spacing:.12em}.motion{height:210px;position:relative;overflow:hidden}.kingdom .motion{background:linear-gradient(#f4b85c,#9c4a32 55%,#1d1b24)}.sun{position:absolute;width:90px;height:90px;border-radius:50%;background:#ffd67a;right:40px;top:25px;box-shadow:0 0 60px #ffe4a3;animation:pulse 3s infinite}.palace{position:absolute;bottom:0;left:8%;right:8%;height:120px;background:linear-gradient(110deg,#2d2630,#6d4b3c);clip-path:polygon(0 100%,0 55%,12% 55%,12% 25%,25% 25%,25% 45%,43% 45%,43% 0,58% 0,58% 40%,76% 40%,76% 18%,89% 18%,89% 54%,100% 54%,100% 100%);animation:zoom 7s infinite alternate}.leader .motion{background:linear-gradient(#17202a,#4d321f 70%,#07090c)}.city{position:absolute;inset:45px 8% 0;background:repeating-linear-gradient(90deg,#111 0 28px,#2d3031 29px 43px);clip-path:polygon(0 100%,0 40%,20% 40%,20% 10%,42% 10%,42% 55%,57% 55%,57% 0,76% 0,76% 33%,100% 33%,100% 100%);animation:zoom 7s infinite alternate}.lights{position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,#ffb14a 0 2px,transparent 4px),radial-gradient(circle at 70% 30%,#ffb14a 0 3px,transparent 5px);animation:pulse 2s infinite}.guardian .motion{background:linear-gradient(#071c23,#174237 65%,#06110e)}.moon{position:absolute;width:70px;height:70px;border-radius:50%;background:#dff8eb;right:30px;top:25px;box-shadow:0 0 40px #aeeed0;animation:pulse 3s infinite}.forest{position:absolute;inset:0;background:repeating-linear-gradient(78deg,transparent 0 18px,#08130f 20px 27px,transparent 29px 45px);transform-origin:bottom;animation:sway 4s ease-in-out infinite}.fireflies{position:absolute;inset:0;background:radial-gradient(circle at 20% 60%,#ebff70 0 2px,transparent 3px),radial-gradient(circle at 55% 45%,#ebff70 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,#ebff70 0 2px,transparent 3px);animation:drift 3s infinite alternate}@keyframes pulse{50%{opacity:.55;transform:scale(1.12)}}@keyframes zoom{to{transform:scale(1.08)}}@keyframes sway{50%{transform:skewX(2deg)}}@keyframes drift{to{transform:translate(12px,-18px)}}.center{display:block;margin:auto}.capture-screen{grid-template-columns:1fr 440px;gap:60px;align-items:center;max-width:1100px;margin:auto}.capture-copy>p:not(.eyebrow){color:#a3b3c2;line-height:1.6}.capture-copy label{display:block;margin-top:18px;font-size:8px;letter-spacing:.15em;color:#9faebd}.capture-copy input:not([type=checkbox]){width:100%;max-width:480px;display:block;background:#ffffff08;border:0;border-bottom:1px solid #ffffff44;padding:12px 3px;color:#fff;outline:0}.consent{display:flex!important;gap:11px;align-items:start;letter-spacing:normal!important}.consent input{accent-color:var(--red);width:17px;height:17px}.consent span{display:flex;flex-direction:column}.consent small{color:#8293a4;margin-top:4px;line-height:1.4}.camera-card{padding:15px;background:#f3f0e8;color:#11202f}.camera-wrap{height:390px;background:#182532;position:relative;overflow:hidden}.camera-wrap video,.camera-wrap img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.face-guide{position:absolute;inset:15% 24%;border:1px dashed #fff;border-radius:45%;display:grid;place-items:end center;color:#fff;font-size:8px;padding:15px}.scan{position:absolute;left:0;right:0;height:1px;background:#79f5e4;box-shadow:0 0 12px #79f5e4;animation:scanner 3s infinite}@keyframes scanner{0%,100%{top:10%}50%{top:90%}}#cameraHelp{font-size:9px;color:#68737f;text-align:center}.camera-actions{display:flex;gap:7px}.camera-actions button{flex:1;border:1px solid #c3c9cf;background:#fff;padding:11px;font-size:8px;font-weight:bold}.generate{width:100%;margin-top:10px}#error{color:#c5151c;font-size:11px;margin-top:9px}.studio-screen{text-align:center;place-items:center;align-content:center}.studio-orb{width:210px;height:210px;position:relative}.studio-orb img{width:165px;height:165px;object-fit:cover;border-radius:50%;position:absolute;inset:22px;transform:scaleX(-1)}.studio-orb i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);border-top-color:var(--gold);animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.studio-screen>p:not(.eyebrow){color:#9aaabd}.progress{width:min(560px,80vw);height:3px;background:#ffffff1c}.progress i{display:block;width:5%;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));transition:.5s}.progress-meta{width:min(560px,80vw);display:flex;justify-content:space-between;font-size:10px;margin-top:10px}.queue-note{max-width:580px;margin-top:30px;padding:14px;border:1px solid #ffffff1c;color:#8293a4;font-size:10px;line-height:1.5}.result-page{display:grid;place-items:center;padding:30px}.result{text-align:center}.result video{width:min(420px,90vw);max-height:68vh;border:1px solid var(--gold);box-shadow:0 30px 100px #000}.result h1 em{color:var(--gold)}.ai-note{font-size:9px;color:#8ea0b1}.result-actions{display:flex;justify-content:center;gap:10px}.result-actions a,.result-actions button{padding:13px 18px;text-decoration:none;border:1px solid #ffffff44;background:transparent;color:#fff;font-size:9px;letter-spacing:.12em}footer{text-align:center;padding:16px;color:#526579;font-size:8px;border-top:1px solid #ffffff10}
@media(max-width:850px){.screen[data-screen=welcome],.capture-screen{grid-template-columns:1fr}.hero-art{display:none}.worlds{grid-template-columns:1fr}.motion{height:170px}.capture-copy{text-align:center}.camera-card{width:min(440px,100%);margin:auto}}@media(max-width:520px){header{height:62px}.brand span{display:none}.screen{padding:35px 16px 70px}.hero-copy h1{font-size:55px}#steps small{display:none}.world h3{font-size:22px}.camera-wrap{height:340px}.result-actions{flex-direction:column}}
.camera-actions button.primary {
    background: linear-gradient(135deg, #f12f35, #ac0710);
    color: #ffffff;
    border: 0;
}

.qr-section {
    max-width: 520px;
    margin: 25px auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    text-align: left;
    background: #ffffff;
    color: #061426;
    border-radius: 6px;
}

.qr-section h3 {
    margin: 0 0 7px;
    font-family: Georgia, serif;
}

.qr-section p {
    margin: 0 0 15px;
    color: #647180;
    font-size: 12px;
}

#videoQR {
    padding: 8px;
    background: #ffffff;
}

@media (max-width: 520px) {
    .qr-section {
        flex-direction: column;
        text-align: center;
    }
}

/* Four-experience Movieverse update */
.worlds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1320px, 100%);
}

.bharath .motion {
    background: linear-gradient(
        #f4a43a 0%,
        #f7f3e8 48%,
        #15763b 100%
    );
}

.bharath-sun {
    position: absolute;
    width: 88px;
    height: 88px;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #fff4c6;
    box-shadow: 0 0 45px #ffffff;
}

.india-gate {
    position: absolute;
    left: 29%;
    right: 29%;
    bottom: 0;
    height: 135px;
    background: #8c6849;
    clip-path: polygon(
        0 100%, 0 30%, 15% 30%, 15% 10%,
        85% 10%, 85% 30%, 100% 30%, 100% 100%,
        68% 100%, 68% 48%, 32% 48%, 32% 100%
    );
}

.tricolour {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        #ff993355 35%,
        #ffffff55 50%,
        #13880855 65%,
        transparent 80%
    );
    animation: drift 4s infinite alternate;
}

@media (max-width: 1100px) {
    .worlds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .worlds {
        grid-template-columns: 1fr;
    }
}

/* 2026-07-27 responsive desktop and step-navigation hotfix */
html,
body,
#app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#steps {
    width: min(600px, calc(100% - 32px));
    align-items: flex-start;
}

#steps::before {
    top: 18px;
}

#steps span,
#steps span:not(small) {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    text-align: center;
    z-index: 1;
}

#steps span::before {
    display: none;
}

#steps span b {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #45566a;
    border-radius: 50%;
    background: #0b1b2d;
    color: #71849a;
    font-size: 11px;
    font-weight: 400;
}

#steps span.active b {
    border-color: var(--red);
    background: var(--red);
    color: #ffffff;
}

#steps small {
    margin-top: 8px;
}

.screen[data-screen="welcome"] {
    width: min(1500px, 100%);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    gap: clamp(35px, 6vw, 100px);
}

.hero-copy,
.hero-art {
    min-width: 0;
}

.hero-copy h1 {
    max-width: 100%;
    font-size: clamp(52px, 5.6vw, 92px);
    line-height: .92;
}

.poster {
    width: min(100%, 390px);
    max-height: calc(100vh - 240px);
}

.poster img {
    max-width: 100%;
}

.worlds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(1180px, 100%);
    gap: 24px;
}

.world {
    min-width: 0;
}

.motion {
    aspect-ratio: 3 / 2;
}

@media (max-width: 850px) {
    .screen[data-screen="welcome"] {
        grid-template-columns: 1fr;
    }

    .hero-copy h1 {
        font-size: clamp(48px, 15vw, 68px);
    }

    .poster {
        width: min(420px, 88vw);
        max-height: none;
    }

    .worlds {
        grid-template-columns: 1fr;
        width: min(620px, 100%);
    }
}

@media (max-width: 520px) {
    #steps {
        margin-top: 14px;
    }

    #steps small {
        display: block;
        font-size: 6px;
    }

    #steps span b {
        width: 30px;
        height: 30px;
    }

    #steps::before {
        top: 15px;
    }
}

/* Full, uncropped generated artwork */
.hero-art {
    display: grid;
    place-items: center;
}

.poster {
    width: min(390px, 34vw);
    height: auto;
    aspect-ratio: 2 / 3;
    padding: 0;
    overflow: hidden;
    background: #020813;
    animation: float 4s ease-in-out infinite;
}

.poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.motion {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #020813 !important;
    overflow: hidden;
}

.motion .world-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #020813;
}

@media (max-width: 850px) {
    .screen[data-screen="welcome"] {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .hero-art {
        display: grid !important;
    }

    .poster {
        width: min(420px, 88vw);
    }

    .motion {
        height: auto;
    }
}

/* Approved HDFC Bank logo and branded premiere experience */
.brand img,
.premiere-brand img {
    display: block;
    width: auto;
    height: 28px;
    object-fit: contain;
}

.brand i,
.brand > b {
    display: none;
}

.premiere-result {
    width: min(760px, 100%);
    margin: auto;
}

.premiere-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.premiere-brand span {
    padding-left: 16px;
    border-left: 1px solid #ffffff40;
    font-size: 11px;
    letter-spacing: .2em;
    color: #c4d2df;
}

.premiere-video-frame {
    width: min(460px, 92vw);
    margin: 22px auto;
    border: 1px solid #eec979;
    background: #061426;
    box-shadow: 0 35px 100px #000;
    overflow: hidden;
}

.premiere-video-header,
.premiere-video-footer {
    display: flex;
    align-items: center;
    padding: 16px 18px;
}

.premiere-video-header {
    justify-content: space-between;
    border-bottom: 1px solid #eec97988;
}

.premiere-video-header img {
    width: auto;
    height: 25px;
    object-fit: contain;
}

.premiere-video-header b {
    font-size: 10px;
    letter-spacing: .18em;
}

.premiere-video-frame video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 68vh;
    object-fit: contain;
    border: 0;
    background: #020813;
    box-shadow: none;
}

.premiere-video-footer {
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #eec97988;
    color: #eec979;
}

.premiere-video-footer b {
    font-size: 9px;
    letter-spacing: .13em;
}

.premiere-video-footer small {
    font-size: 7px;
    letter-spacing: .12em;
    color: #94a8ba;
}

.premiere-qr-card {
    width: min(580px, 92vw);
    margin: 28px auto 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    border: 1px solid #ffffff22;
    background: #ffffff08;
}

.premiere-qr-card h2 {
    font: 32px/1 Georgia, serif;
    margin: 8px 0;
}

.premiere-qr-card p:not(.eyebrow) {
    color: #9eb0c0;
    font-size: 11px;
    line-height: 1.5;
}

#videoQR {
    padding: 10px;
    background: #fff;
    flex: 0 0 auto;
}

#videoQR img,
#videoQR canvas {
    display: block;
}

@media (max-width: 520px) {
    .premiere-result h1 {
        font-size: 38px;
    }

    .premiere-brand img {
        height: 23px;
    }

    .premiere-video-header,
    .premiere-video-footer {
        padding: 13px;
    }

    .premiere-video-header img {
        height: 21px;
    }

    .premiere-qr-card {
        flex-direction: column;
        text-align: center;
    }
}