*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --blue: #3d5af1;
    --blue-dim: #eef2ff;
    --blue-mid: #c7d7fe;
    --dark: #111827;
    --mid: #374151;
    --gray: #6b7280;
    --light: #f3f4f6;
    --border: #e5e7eb;
    --green: #16a34a;
    --white: #ffffff;
    --phone-dark: #1b1f2a;
    --phone-darker: #0f141c;
}

body {
    font-family: 'DM Sans',sans-serif;
    background: #f7f9ff;
    color: var(--dark);
    min-height: 100vh;
}

/* ── Section ── */
.hiw {
    max-width: 1160px;
    margin: 0 auto;
    padding: 96px 32px 80px;
}

/* ── Header ── */
.hiw-head {
    text-align: center;
    margin-bottom: 72px;
}

.hiw-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue-dim);
    color: var(--blue);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 22px;
}

    .hiw-badge svg {
        width: 12px;
        height: 12px
    }

.hiw-head h2 {
    font-size: clamp(30px,4.5vw,52px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--dark);
    margin-bottom: 16px;
}

    .hiw-head h2 em {
        font-style: normal;
        color: var(--blue);
        position: relative;
    }

.hiw-head p {
    font-size: 17px;
    color: var(--gray);
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ── Layout ── */
.hiw-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 72px;
    align-items: center;
}

/* ── Steps ── */
.steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step {
    position: relative;
    padding: 20px 24px 20px 36px;
    border-radius: 18px;
    cursor: pointer;
    transition: background .25s,box-shadow .25s;
    border: 1.5px solid transparent;
    overflow: hidden;
}

    .step::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        background: linear-gradient(180deg,var(--blue) 0%,#7c9eff 100%);
        border-radius: 18px 0 0 18px;
        transition: width .2s;
    }

    .step:hover {
        background: rgba(255,255,255,.7);
    }

    .step.active {
        background: var(--white);
        border-color: var(--border);
        box-shadow: 0 4px 28px rgba(61,90,241,.10);
    }

        .step.active::before {
            width: 3px;
        }

/* Progress bar */
.step-prog {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    border-radius: 18px 0 0 18px;
    overflow: hidden;
    pointer-events: none;
}

.step-prog-fill {
    width: 100%;
    height: 0%;
    background: var(--blue);
    border-radius: 3px;
}

.step.active .step-prog-fill {
    animation: progFill 9s linear forwards;
}

@keyframes progFill {
    from {
        height: 0%
    }

    to {
        height: 100%
    }
}

.step-num {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue);
    opacity: .45;
    margin-bottom: 6px;
    transition: opacity .2s;
}

.step.active .step-num {
    opacity: 1;
}

.step-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
}

.step-desc {
    font-size: 13.5px;
    color: var(--gray);
    line-height: 1.65;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height .4s ease,opacity .35s ease,margin .3s ease;
}

.step.active .step-desc {
    max-height: 100px;
    opacity: 1;
    margin-top: 8px;
}

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--blue-dim);
    margin-bottom: 10px;
    transition: background .2s;
}

.step.active .step-icon {
    background: var(--blue);
}

    .step.active .step-icon svg path, .step.active .step-icon svg rect, .step.active .step-icon svg circle {
        stroke: white;
    }

.step-icon svg {
    width: 16px;
    height: 16px;
}

/* ── Phone ── */
.phone-wrap {
    position: sticky;
    top: 100px;
    display: flex;
    justify-content: center;
}

.phone-svg {
    width: 100%;
    max-width: 300px;
    filter: drop-shadow(0 32px 64px rgba(17,24,39,.2));
}

/* ── Responsive ── */
.hiw-cta {
    text-align: center;
    margin-top: 64px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue);
    color: white;
    font-family: 'DM Sans',sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(61,90,241,.32);
    transition: transform .2s,box-shadow .2s;
}

    .btn-p:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(61,90,241,.42);
    }

.btn-s {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: var(--mid);
    font-family: 'DM Sans',sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 13px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s,border-color .2s,color .2s;
}

    .btn-s:hover {
        transform: translateY(-2px);
        border-color: var(--blue);
        color: var(--blue);
    }

/* ── Responsive ── */
@media(max-width:860px) {
    .hiw-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .phone-wrap {
        order: -1;
        position: static;
    }

    .phone-svg {
        max-width: 230px;
    }
}

@media(max-width:500px) {
    .hiw {
        padding: 64px 20px 56px;
    }
}

/* ── CTA ── */
.hiw-cta {
    text-align: center;
    margin-top: 64px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue);
    color: white;
    font-family: 'DM Sans',sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(61,90,241,.32);
    transition: transform .2s,box-shadow .2s;
}

    .btn-p:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(61,90,241,.42);
    }

.btn-s {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: var(--mid);
    font-family: 'DM Sans',sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 13px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s,border-color .2s,color .2s;
}

    .btn-s:hover {
        transform: translateY(-2px);
        border-color: var(--blue);
        color: var(--blue);
    }
/* ── SVG screen transitions ── */
.scr {
    opacity: 0;
    transition: opacity .55s ease;
}

    .scr.on {
        opacity: 1;
    }

/* ── Screen 1 ── */
.s1-t1 {
    opacity: 0;
    animation: s1t1 4.5s linear infinite
}

.s1-t2 {
    opacity: 0;
    animation: s1t2 4.5s linear infinite
}

.s1-t3 {
    opacity: 0;
    animation: s1t3 4.5s linear infinite
}

.s1-t4 {
    opacity: 0;
    animation: s1t4 4.5s linear infinite
}

.s1-t5 {
    opacity: 0;
    animation: s1t5 4.5s linear infinite
}

.s1-t6 {
    opacity: 0;
    animation: s1t6 4.5s linear infinite
}

@keyframes s1t1 {
    0%,18% {
        opacity: 0
    }

    20%,100% {
        opacity: 1
    }
}

@keyframes s1t2 {
    0%,24% {
        opacity: 0
    }

    26%,100% {
        opacity: 1
    }
}

@keyframes s1t3 {
    0%,30% {
        opacity: 0
    }

    32%,100% {
        opacity: 1
    }
}

@keyframes s1t4 {
    0%,36% {
        opacity: 0
    }

    38%,100% {
        opacity: 1
    }
}

@keyframes s1t5 {
    0%,42% {
        opacity: 0
    }

    44%,100% {
        opacity: 1
    }
}

@keyframes s1t6 {
    0%,48% {
        opacity: 0
    }

    50%,100% {
        opacity: 1
    }
}

.s1-cur {
    animation: s1blink .9s steps(1) infinite
}

@keyframes s1blink {
    0%,49% {
        opacity: 1
    }

    50%,100% {
        opacity: 0
    }
}

.s1-pulse1 {
    animation: s1pulse 1.8s ease-out infinite
}

.s1-pulse2 {
    animation: s1pulse 1.8s ease-out infinite .35s
}

.s1-pulse3 {
    animation: s1pulse 1.8s ease-out infinite .7s
}

@keyframes s1pulse {
    0% {
        opacity: 0;
        transform: scale(.7)
    }

    35% {
        opacity: .22
    }

    100% {
        opacity: 0;
        transform: scale(1.35)
    }
}

.s1-qrglow {
    animation: s1glow 2s ease-in-out infinite
}

@keyframes s1glow {
    0%,100% {
        opacity: .08
    }

    50% {
        opacity: .26
    }
}

.s1-ok {
    opacity: 0;
    animation: s1ok 4.5s linear infinite
}

@keyframes s1ok {
    0%,62% {
        opacity: 0;
        transform: translateY(10px)
    }

    70%,92% {
        opacity: 1;
        transform: translateY(0)
    }

    100% {
        opacity: 0
    }
}

/* ── Screen 2 ── */
.s2-qr {
    animation: s2qr 9s infinite
}

.s2-form {
    opacity: 0;
    animation: s2form 9s infinite
}

.s2-done {
    opacity: 0;
    animation: s2done 9s infinite
}

@keyframes s2qr {
    0%,34% {
        opacity: 1
    }

    40%,100% {
        opacity: 0
    }
}

@keyframes s2form {
    0%,36% {
        opacity: 0
    }

    40%,84% {
        opacity: 1
    }

    90%,100% {
        opacity: 0
    }
}

@keyframes s2done {
    0%,86% {
        opacity: 0
    }

    90%,100% {
        opacity: 1
    }
}

.s2-scan {
    animation: s2scan 1.8s ease-in-out infinite
}

@keyframes s2scan {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    50% {
        transform: translateY(110px);
        opacity: 1
    }

    100% {
        transform: translateY(110px);
        opacity: 0
    }
}

.s2-email {
    opacity: 0;
    animation: s2email 9s linear infinite
}

.s2-pass {
    opacity: 0;
    animation: s2pass 9s linear infinite
}

@keyframes s2email {
    0%,44% {
        opacity: 0
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

@keyframes s2pass {
    0%,64% {
        opacity: 0
    }

    78% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

.s2-c1 {
    animation: s2c1 9s steps(1) infinite
}

.s2-c2 {
    animation: s2c2 9s steps(1) infinite
}

@keyframes s2c1 {
    0%,44% {
        opacity: 0
    }

    45%,60% {
        opacity: 1
    }

    61%,100% {
        opacity: 0
    }
}

@keyframes s2c2 {
    0%,64% {
        opacity: 0
    }

    65%,78% {
        opacity: 1
    }

    79%,100% {
        opacity: 0
    }
}

.s2-btn {
    animation: s2btn 9s linear infinite;
    transform-origin: 210px 339px
}

.s2-ripple {
    opacity: 0;
    animation: s2rip 9s linear infinite;
    transform-origin: 210px 339px
}

@keyframes s2btn {
    0%,80% {
        transform: scale(1)
    }

    83% {
        transform: scale(.96)
    }

    86%,100% {
        transform: scale(1)
    }
}

@keyframes s2rip {
    0%,80% {
        opacity: 0;
        transform: scale(.2)
    }

    83% {
        opacity: .28;
        transform: scale(1)
    }

    88%,100% {
        opacity: 0;
        transform: scale(1.5)
    }
}

/* ── Screen 3 ── */
.s3-qr {
    animation: s3qr 9s infinite
}

.s3-search {
    opacity: 0;
    animation: s3search 9s infinite
}

.s3-detail {
    opacity: 0;
    animation: s3detail 9s infinite
}

@keyframes s3qr {
    0%,28% {
        opacity: 1
    }

    34%,100% {
        opacity: 0
    }
}

@keyframes s3search {
    0%,30% {
        opacity: 0
    }

    34%,78% {
        opacity: 1
    }

    84%,100% {
        opacity: 0
    }
}

@keyframes s3detail {
    0%,80% {
        opacity: 0
    }

    84%,100% {
        opacity: 1
    }
}

.s3-scan {
    animation: s3scan 1.8s ease-in-out infinite
}

@keyframes s3scan {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    10% {
        opacity: 1
    }

    50% {
        transform: translateY(74px);
        opacity: 1
    }

    100% {
        transform: translateY(74px);
        opacity: 0
    }
}

.s3-r1 {
    animation: s3r1 9s linear infinite
}

.s3-r2 {
    animation: s3r2 9s linear infinite
}

.s3-r3 {
    animation: s3r3 9s linear infinite
}

@keyframes s3r1 {
    0%,34% {
        opacity: 0;
        transform: translateY(6px)
    }

    40%,100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes s3r2 {
    0%,38% {
        opacity: 0;
        transform: translateY(6px)
    }

    44%,100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes s3r3 {
    0%,42% {
        opacity: 0;
        transform: translateY(6px)
    }

    48%,100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.s3-tap {
    opacity: 0;
    animation: s3tap 9s linear infinite;
    transform-origin: 328px 207px
}

@keyframes s3tap {
    0%,72% {
        opacity: 0;
        transform: scale(.3)
    }

    76% {
        opacity: .26;
        transform: scale(1)
    }

    82%,100% {
        opacity: 0;
        transform: scale(1.5)
    }
}

.s3-card {
    transform-origin: 210px 400px;
    animation: s3card 9s ease-in-out infinite
}

@keyframes s3card {
    0%,82% {
        transform: translateY(14px) scale(.95);
        opacity: 0
    }

    88%,100% {
        transform: translateY(0) scale(1);
        opacity: 1
    }
}

/* ── Screen 4 ── */
.s4-p1 {
    animation: s4p1 9s infinite
}

.s4-p2 {
    opacity: 0;
    animation: s4p2 9s infinite
}

.s4-p3 {
    opacity: 0;
    animation: s4p3 9s infinite
}

@keyframes s4p1 {
    0%,24% {
        opacity: 1
    }

    30%,100% {
        opacity: 0
    }
}

@keyframes s4p2 {
    0%,26% {
        opacity: 0
    }

    30%,74% {
        opacity: 1
    }

    80%,100% {
        opacity: 0
    }
}

@keyframes s4p3 {
    0%,76% {
        opacity: 0
    }

    82%,100% {
        opacity: 1
    }
}

.s4-cp {
    transform-origin: 210px 370px;
    animation: s4cp 9s ease-in-out infinite
}

@keyframes s4cp {
    0%,80% {
        transform: translateY(10px) scale(.97);
        opacity: 0
    }

    88%,100% {
        transform: translateY(0) scale(1);
        opacity: 1
    }
}