/* =========================================================
   PassportAI — Premium Neon Landing Page
   style.css
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --bg:
        #03050f;

    --bg-soft:
        #070b19;

    --surface:
        rgba(13, 18, 38, .72);

    --surface-strong:
        rgba(16, 22, 46, .92);

    --border:
        rgba(255,255,255,.09);

    --border-blue:
        rgba(59,130,246,.28);

    --text:
        #f8fafc;

    --muted:
        #94a3b8;

    --muted-light:
        #cbd5e1;

    --blue:
        #3b82f6;

    --blue-light:
        #60a5fa;

    --cyan:
        #22d3ee;

    --purple:
        #8b5cf6;

    --pink:
        #ec4899;

    --green:
        #22c55e;

    --orange:
        #f97316;

    --radius:
        24px;

    --container:
        1240px;

    --shadow:
        0 25px 70px rgba(0,0,0,.38);

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    background:
        var(--bg);

}


body {

    min-height: 100vh;

    overflow-x: hidden;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        "Inter",
        "Poppins",
        sans-serif;

    line-height: 1.6;

}


body::selection {

    background:
        rgba(59,130,246,.35);

    color:
        #fff;

}


img {

    max-width: 100%;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


button {

    font-family:
        inherit;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width:
        min(
            calc(100% - 40px),
            var(--container)
        );

    margin:
        0 auto;

}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.ambient-background {

    position:
        fixed;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        0;

}


.ambient-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(120px);

    opacity:
        .25;

}


.glow-blue {

    width:
        520px;

    height:
        520px;

    top:
        -220px;

    left:
        -150px;

    background:
        #2563eb;

    animation:
        ambientBlue 15s ease-in-out infinite alternate;

}


.glow-purple {

    width:
        560px;

    height:
        560px;

    top:
        25%;

    right:
        -260px;

    background:
        #7c3aed;

    animation:
        ambientPurple 18s ease-in-out infinite alternate;

}


.glow-cyan {

    width:
        420px;

    height:
        420px;

    bottom:
        -220px;

    left:
        35%;

    background:
        #0891b2;

    opacity:
        .12;

    animation:
        ambientCyan 20s ease-in-out infinite alternate;

}


@keyframes ambientBlue {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(140px,90px,0)
            scale(1.15);

    }

}


@keyframes ambientPurple {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(-120px,-70px,0)
            scale(1.12);

    }

}


@keyframes ambientCyan {

    from {

        transform:
            translate3d(0,0,0);

    }

    to {

        transform:
            translate3d(80px,-70px,0);

    }

}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.grid-background {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        0;

    opacity:
        .24;

    background-image:

        linear-gradient(
            rgba(96,165,250,.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(96,165,250,.055) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 90%
        );

}


/* =========================================================
   PARTICLES
========================================================= */

.particles {

    position:
        fixed;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        1;

}


.particles span {

    position:
        absolute;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        rgba(96,165,250,.7);

    box-shadow:
        0 0 14px rgba(96,165,250,.8);

    animation:
        particleFloat
        linear
        infinite;

}


.particles span:nth-child(1) {

    left: 8%;
    top: 70%;
    animation-duration: 11s;

}


.particles span:nth-child(2) {

    left: 17%;
    top: 35%;
    animation-duration: 14s;

}


.particles span:nth-child(3) {

    left: 28%;
    top: 80%;
    animation-duration: 12s;

}


.particles span:nth-child(4) {

    left: 38%;
    top: 20%;
    animation-duration: 16s;

}


.particles span:nth-child(5) {

    left: 48%;
    top: 65%;
    animation-duration: 13s;

}


.particles span:nth-child(6) {

    left: 58%;
    top: 30%;
    animation-duration: 17s;

}


.particles span:nth-child(7) {

    left: 67%;
    top: 75%;
    animation-duration: 12s;

}


.particles span:nth-child(8) {

    left: 75%;
    top: 18%;
    animation-duration: 15s;

}


.particles span:nth-child(9) {

    left: 83%;
    top: 55%;
    animation-duration: 18s;

}


.particles span:nth-child(10) {

    left: 91%;
    top: 25%;
    animation-duration: 13s;

}


.particles span:nth-child(11) {

    left: 44%;
    top: 90%;
    animation-duration: 16s;

}


.particles span:nth-child(12) {

    left: 72%;
    top: 92%;
    animation-duration: 14s;

}


@keyframes particleFloat {

    0% {

        transform:
            translate3d(0,40px,0);

        opacity:
            0;

    }

    15% {

        opacity:
            .8;

    }

    70% {

        opacity:
            .5;

    }

    100% {

        transform:
            translate3d(25px,-180px,0);

        opacity:
            0;

    }

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    position:
        fixed;

    top:
        18px;

    left:
        0;

    width:
        100%;

    z-index:
        100;

    padding:
        0 20px;

}


.navbar-inner {

    min-height:
        72px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        rgba(6,10,25,.66);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 18px 55px rgba(0,0,0,.25);

    transition:
        .3s ease;

}


.navbar.scrolled .navbar-inner {

    background:
        rgba(5,8,22,.94);

    border-color:
        rgba(96,165,250,.18);

    box-shadow:
        0 20px 65px rgba(0,0,0,.45);

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    flex-shrink:
        0;

}


.brand-icon {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(96,165,250,.35);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.28),
            rgba(124,58,237,.25)
        );

    color:
        var(--blue-light);

    box-shadow:
        0 0 25px rgba(59,130,246,.18);

}


.brand-text {

    font-size:
        22px;

    font-weight:
        800;

    letter-spacing:
        -.7px;

}


.brand-text span {

    color:
        var(--blue-light);

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


.nav-link {

    position:
        relative;

    padding:
        10px 14px;

    color:
        #a8b5ce;

    font-size:
        14px;

    font-weight:
        500;

    transition:
        .25s ease;

}


.nav-link:hover,
.nav-link.active {

    color:
        #fff;

}


.nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        14px;

    right:
        14px;

    bottom:
        2px;

    height:
        2px;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        .25s ease;

}


.nav-link:hover::after,
.nav-link.active::after {

    transform:
        scaleX(1);

}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.nav-login {

    padding:
        10px 14px;

    color:
        #dbeafe;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        .25s ease;

}


.nav-login:hover {

    color:
        #fff;

}


.nav-cta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        11px 17px;

    border:
        1px solid rgba(96,165,250,.25);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:
        #fff;

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        0 10px 28px rgba(37,99,235,.25);

    transition:
        .3s ease;

}


.nav-cta:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px rgba(37,99,235,.4);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {

    display:
        none;

    width:
        44px;

    height:
        44px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.05);

    cursor:
        pointer;

}


.mobile-menu-btn span {

    display:
        block;

    width:
        20px;

    height:
        2px;

    margin:
        4px auto;

    border-radius:
        10px;

    background:
        #fff;

    transition:
        .25s ease;

}


.mobile-menu-btn.open span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);

}


.mobile-menu-btn.open span:nth-child(2) {

    opacity:
        0;

}


.mobile-menu-btn.open span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);

}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {

    display:
        none;

    width:
        min(
            calc(100% - 40px),
            1240px
        );

    margin:
        8px auto 0;

    padding:
        14px;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        rgba(6,10,25,.96);

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);

}


.mobile-menu.active {

    display:
        block;

    animation:
        mobileMenuIn
        .25s ease;

}


@keyframes mobileMenuIn {

    from {

        opacity:
            0;

        transform:
            translateY(-8px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.mobile-menu > a {

    display:
        block;

    padding:
        13px 14px;

    border-radius:
        10px;

    color:
        #cbd5e1;

    font-size:
        15px;

}


.mobile-menu > a:hover {

    background:
        rgba(59,130,246,.1);

    color:
        #fff;

}


.mobile-menu-divider {

    height:
        1px;

    margin:
        8px 0;

    background:
        rgba(255,255,255,.08);

}


.mobile-menu-cta {

    margin-top:
        5px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:
        #fff !important;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position:
        relative;

    min-height:
        850px;

    padding:
        165px 0 100px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    z-index:
        2;

}


.hero-container {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        65px;

}


/* =========================================================
   HERO ORBITS
========================================================= */

.hero-orbit {

    position:
        absolute;

    border:
        1px solid rgba(96,165,250,.07);

    border-radius:
        50%;

    pointer-events:
        none;

}


.orbit-one {

    width:
        800px;

    height:
        800px;

    right:
        -300px;

    top:
        30px;

}


.orbit-two {

    width:
        1100px;

    height:
        1100px;

    right:
        -450px;

    top:
        -120px;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

    position:
        relative;

    z-index:
        4;

}


.hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 13px;

    border:
        1px solid rgba(96,165,250,.2);

    border-radius:
        999px;

    background:
        rgba(59,130,246,.07);

    color:
        #b9d8ff;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .3px;

    box-shadow:
        0 0 30px rgba(59,130,246,.08);

}


.badge-pulse {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 12px rgba(34,197,94,.8);

    animation:
        badgePulse
        1.8s ease-in-out infinite;

}


@keyframes badgePulse {

    0%,
    100% {

        opacity:
            1;

        transform:
            scale(1);

    }

    50% {

        opacity:
            .45;

        transform:
            scale(.7);

    }

}


.hero h1 {

    margin-top:
        24px;

    max-width:
        720px;

    font-size:
        clamp(
            48px,
            6vw,
            78px
        );

    line-height:
        1.02;

    letter-spacing:
        -4px;

    font-weight:
        800;

}


.gradient-text {

    background:
        linear-gradient(
            100deg,
            #60a5fa 0%,
            #22d3ee 38%,
            #a78bfa 75%,
            #c084fc 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;

}


.heading-light {

    color:
        #e2e8f0;

}


.hero-description {

    max-width:
        620px;

    margin-top:
        25px;

    color:
        #94a3b8;

    font-size:
        17px;

    line-height:
        1.85;

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        32px;

}


.primary-button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    min-height:
        54px;

    padding:
        0 21px;

    border:
        1px solid rgba(147,197,253,.2);

    border-radius:
        14px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:
        #fff;

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        0 15px 40px rgba(37,99,235,.3);

    transition:
        .3s ease;

}


.primary-button::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.2),
            transparent
        );

    transform:
        translateX(-120%);

    transition:
        .55s ease;

}


.primary-button:hover::before {

    transform:
        translateX(120%);

}


.primary-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 50px rgba(37,99,235,.42);

}


.secondary-button {

    min-height:
        54px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 19px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.035);

    color:
        #dbeafe;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        .3s ease;

}


.secondary-button:hover {

    border-color:
        rgba(96,165,250,.28);

    background:
        rgba(59,130,246,.08);

    transform:
        translateY(-3px);

}


.play-icon {

    width:
        27px;

    height:
        27px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(96,165,250,.15);

    color:
        #60a5fa;

    font-size:
        9px;

}


/* =========================================================
   HERO TRUST
========================================================= */

.hero-trust {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        30px;

    color:
        #7182a2;

    font-size:
        11px;

    font-weight:
        600;

}


.trust-item {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.trust-item i {

    color:
        #60a5fa;

}


.trust-divider {

    width:
        1px;

    height:
        14px;

    background:
        rgba(255,255,255,.12);

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    position:
        relative;

    min-height:
        570px;

    display:
        grid;

    place-items:
        center;

}


.visual-glow {

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.35),
            rgba(124,58,237,.14) 42%,
            transparent 70%
        );

    filter:
        blur(18px);

    animation:
        visualGlow 5s ease-in-out infinite alternate;

}


@keyframes visualGlow {

    from {

        transform:
            scale(.9);

        opacity:
            .65;

    }

    to {

        transform:
            scale(1.08);

        opacity:
            1;

    }

}


/* =========================================================
   VISUAL RINGS
========================================================= */

.visual-ring {

    position:
        absolute;

    border:
        1px solid rgba(96,165,250,.13);

    border-radius:
        50%;

}


.ring-large {

    width:
        530px;

    height:
        530px;

    animation:
        ringRotate
        22s
        linear
        infinite;

}


.ring-small {

    width:
        410px;

    height:
        410px;

    border-color:
        rgba(167,139,250,.12);

    animation:
        ringRotateReverse
        18s
        linear
        infinite;

}


@keyframes ringRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes ringRotateReverse {

    from {

        transform:
            rotate(360deg);

    }

    to {

        transform:
            rotate(0deg);

    }

}


/* =========================================================
   PASSPORT SHOWCASE
========================================================= */

.passport-showcase {

    position:
        relative;

    width:
        335px;

    min-height:
        455px;

    overflow:
        hidden;

    border:
        1px solid rgba(148,163,184,.17);

    border-radius:
        26px;

    background:
        linear-gradient(
            145deg,
            rgba(21,31,62,.95),
            rgba(8,13,29,.96)
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,.55),
        0 0 80px rgba(59,130,246,.12);

    transform:
        rotate(4deg);

    animation:
        showcaseFloat
        6s
        ease-in-out
        infinite;

    z-index:
        5;

}


@keyframes showcaseFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(4deg);

    }

    50% {

        transform:
            translateY(-13px)
            rotate(2.5deg);

    }

}


/* =========================================================
   PASSPORT TOPBAR
========================================================= */

.passport-topbar {

    height:
        52px;

    padding:
        0 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(255,255,255,.025);

}


.window-dots {

    display:
        flex;

    gap:
        6px;

}


.window-dots span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #334155;

}


.window-dots span:nth-child(1) {

    background:
        #ef4444;

}


.window-dots span:nth-child(2) {

    background:
        #f59e0b;

}


.window-dots span:nth-child(3) {

    background:
        #22c55e;

}


.preview-label {

    color:
        #64748b;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.6px;

}


.live-indicator {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #22c55e;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.live-indicator span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 10px rgba(34,197,94,.9);

}


/* =========================================================
   PHOTO AREA
========================================================= */

.passport-photo-area {

    position:
        relative;

    height:
        320px;

    display:
        grid;

    place-items:
        center;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(96,165,250,.09),
            transparent 55%
        );

}


.photo-frame {

    position:
        relative;

    width:
        174px;

    height:
        225px;

    overflow:
        hidden;

    border:
        1px solid rgba(96,165,250,.4);

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            #b8d7c6,
            #9fc2b0
        );

    box-shadow:
        0 0 40px rgba(34,211,238,.12);

}


.portrait-placeholder {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    padding-top:
        42px;

}


.portrait-head {

    width:
        68px;

    height:
        80px;

    border-radius:
        50% 50% 47% 47%;

    background:
        linear-gradient(
            145deg,
            #b97957,
            #7d4b38
        );

    box-shadow:
        inset -9px -10px 18px rgba(0,0,0,.15);

}


.portrait-head::before {

    content:
        "";

    position:
        absolute;

    width:
        58px;

    height:
        30px;

    margin:
        -5px 0 0 5px;

    border-radius:
        50% 50% 30% 30%;

    background:
        #2c1b17;

}


.portrait-body {

    width:
        120px;

    height:
        100px;

    margin-top:
        9px;

    border-radius:
        55px 55px 0 0;

    background:
        linear-gradient(
            135deg,
            #263d66,
            #15233e
        );

}


/* =========================================================
   SCAN LINE
========================================================= */

.scan-line {

    position:
        absolute;

    left:
        32px;

    right:
        32px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(34,211,238,.8),
            transparent
        );

    box-shadow:
        0 0 15px rgba(34,211,238,.8);

    animation:
        scanLine
        3.5s
        ease-in-out
        infinite;

    z-index:
        3;

}


@keyframes scanLine {

    0% {

        top:
            18%;

        opacity:
            0;

    }

    20% {

        opacity:
            1;

    }

    80% {

        opacity:
            1;

    }

    100% {

        top:
            82%;

        opacity:
            0;

    }

}


/* =========================================================
   AI CORNERS
========================================================= */

.corner {

    position:
        absolute;

    width:
        19px;

    height:
        19px;

    border-color:
        #67e8f9;

    border-style:
        solid;

    opacity:
        .9;

}


.corner.top-left {

    top:
        12px;

    left:
        12px;

    border-width:
        2px 0 0 2px;

}


.corner.top-right {

    top:
        12px;

    right:
        12px;

    border-width:
        2px 2px 0 0;

}


.corner.bottom-left {

    bottom:
        12px;

    left:
        12px;

    border-width:
        0 0 2px 2px;

}


.corner.bottom-right {

    right:
        12px;

    bottom:
        12px;

    border-width:
        0 2px 2px 0;

}


/* =========================================================
   AI LABEL
========================================================= */

.ai-label {

    position:
        absolute;

    bottom:
        18px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        6px 10px;

    border:
        1px solid rgba(34,211,238,.2);

    border-radius:
        999px;

    background:
        rgba(4,10,20,.7);

    backdrop-filter:
        blur(8px);

    color:
        #a5f3fc;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.ai-dot {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #22d3ee;

    box-shadow:
        0 0 9px #22d3ee;

}


/* =========================================================
   PASSPORT BOTTOM
========================================================= */

.passport-bottom {

    min-height:
        82px;

    padding:
        16px;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        10px;

    border-top:
        1px solid rgba(255,255,255,.07);

}


.passport-bottom div {

    padding:
        9px;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.025);

}


.passport-bottom small {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #64748b;

    font-size:
        7px;

    letter-spacing:
        .8px;

}


.passport-bottom strong {

    color:
        #dbeafe;

    font-size:
        10px;

}


.passport-bottom strong i {

    color:
        #22c55e;

}


/* =========================================================
   FLOATING ICONS
========================================================= */

.floating-icon {

    position:
        absolute;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(96,165,250,.18);

    border-radius:
        14px;

    background:
        rgba(8,14,30,.78);

    backdrop-filter:
        blur(14px);

    color:
        #60a5fa;

    box-shadow:
        0 15px 35px rgba(0,0,0,.3),
        0 0 30px rgba(59,130,246,.08);

    z-index:
        7;

}


.icon-ai {

    top:
        72px;

    right:
        28px;

    animation:
        floatingIcon1
        4.5s
        ease-in-out
        infinite;

}


.icon-photo {

    left:
        22px;

    top:
        190px;

    color:
        #c4b5fd;

    animation:
        floatingIcon2
        5.2s
        ease-in-out
        infinite;

}


.icon-check {

    right:
        38px;

    bottom:
        80px;

    color:
        #4ade80;

    animation:
        floatingIcon3
        4.8s
        ease-in-out
        infinite;

}


@keyframes floatingIcon1 {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(5deg);

    }

}


@keyframes floatingIcon2 {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(10px);

    }

}


@keyframes floatingIcon3 {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-8px)
            scale(1.05);

    }

}


/* =========================================================
   FLOATING STATUS CARDS
========================================================= */

.floating-status {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        210px;

    padding:
        12px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius:
        15px;

    background:
        rgba(7,12,28,.88);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);

    z-index:
        8;

}


.status-processing {

    left:
        -5px;

    top:
        78px;

    animation:
        statusOne
        5s
        ease-in-out
        infinite;

}


.status-print {

    right:
        -20px;

    bottom:
        82px;

    animation:
        statusTwo
        5.5s
        ease-in-out
        infinite;

}


.status-icon,
.status-print-icon {

    width:
        37px;

    height:
        37px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        rgba(59,130,246,.12);

    color:
        #60a5fa;

}


.status-print-icon {

    color:
        #c4b5fd;

    background:
        rgba(139,92,246,.12);

}


.floating-status strong {

    display:
        block;

    color:
        #e2e8f0;

    font-size:
        11px;

}


.floating-status span {

    display:
        block;

    margin-top:
        2px;

    color:
        #64748b;

    font-size:
        9px;

}


.status-check {

    margin-left:
        auto;

    color:
        #22c55e;

    font-size:
        12px;

}


@keyframes statusOne {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(-8px,-8px);

    }

}


@keyframes statusTwo {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(8px,7px);

    }

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position:
        absolute;

    bottom:
        30px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        6px;

    color:
        #64748b;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.4px;

    z-index:
        5;

}


.scroll-indicator i {

    color:
        #60a5fa;

    animation:
        scrollBounce
        1.7s
        ease-in-out
        infinite;

}


@keyframes scrollBounce {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(6px);

    }

}


/* =========================================================
   FEATURE STRIP
========================================================= */

.feature-strip {

    position:
        relative;

    z-index:
        5;

    border-top:
        1px solid rgba(255,255,255,.06);

    border-bottom:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(255,255,255,.018);

}


.feature-strip-inner {

    min-height:
        112px;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items:
        center;

    gap:
        24px;

}


.strip-item {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.strip-icon {

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(96,165,250,.12);

    border-radius:
        12px;

    background:
        rgba(59,130,246,.06);

    color:
        #60a5fa;

}


.strip-item strong {

    display:
        block;

    color:
        #dbeafe;

    font-size:
        12px;

}


.strip-item span {

    display:
        block;

    margin-top:
        2px;

    color:
        #64748b;

    font-size:
        10px;

}


.strip-line {

    width:
        1px;

    height:
        35px;

    background:
        rgba(255,255,255,.08);

}


/* =========================================================
   GENERAL SECTION
========================================================= */

.section {

    position:
        relative;

    z-index:
        3;

    padding:
        120px 0;

}


.section-heading {

    max-width:
        720px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.section-kicker {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #60a5fa;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2.4px;

}


.section-kicker > span {

    width:
        25px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #60a5fa
        );

}


.section-kicker > span:last-child {

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            transparent
        );

}


.section-heading h2 {

    margin-top:
        15px;

    color:
        #f8fafc;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1.12;

    letter-spacing:
        -2px;

}


.section-heading p {

    max-width:
        600px;

    margin:
        18px auto 0;

    color:
        #7f8eaa;

    font-size:
        15px;

    line-height:
        1.8;

}


/* =========================================================
   FEATURES
========================================================= */

.features-section {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(15,23,42,.22),
            transparent
        );

}


.features-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        18px;

}


.feature-card {

    position:
        relative;

    min-height:
        275px;

    padding:
        27px;

    overflow:
        hidden;

    border:
        1px solid rgba(255,255,255,.075);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(17,26,47,.75),
            rgba(8,13,29,.65)
        );

    box-shadow:
        0 18px 50px rgba(0,0,0,.18);

    transition:
        .35s ease;

}


.feature-card::before {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -100px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(59,130,246,.09);

    filter:
        blur(25px);

    transition:
        .4s ease;

}


.feature-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(96,165,250,.2);

    box-shadow:
        0 25px 65px rgba(0,0,0,.3);

}


.feature-card:hover::before {

    transform:
        scale(1.5);

}


.feature-card.featured {

    border-color:
        rgba(139,92,246,.2);

    background:
        linear-gradient(
            145deg,
            rgba(29,24,58,.78),
            rgba(10,14,31,.72)
        );

}


.feature-number {

    position:
        absolute;

    top:
        24px;

    right:
        25px;

    color:
        rgba(148,163,184,.22);

    font-size:
        12px;

    font-weight:
        800;

}


.feature-icon {

    width:
        53px;

    height:
        53px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    margin-bottom:
        25px;

    font-size:
        20px;

}


.feature-icon.blue {

    color:
        #60a5fa;

    background:
        rgba(59,130,246,.11);

}


.feature-icon.purple {

    color:
        #c4b5fd;

    background:
        rgba(139,92,246,.11);

}


.feature-icon.cyan {

    color:
        #67e8f9;

    background:
        rgba(34,211,238,.1);

}


.feature-icon.green {

    color:
        #86efac;

    background:
        rgba(34,197,94,.1);

}


.feature-icon.orange {

    color:
        #fdba74;

    background:
        rgba(249,115,22,.1);

}


.feature-icon.pink {

    color:
        #f9a8d4;

    background:
        rgba(236,72,153,.1);

}


.feature-card h3 {

    color:
        #e2e8f0;

    font-size:
        18px;

    margin-bottom:
        10px;

}


.feature-card p {

    color:
        #71809c;

    font-size:
        13px;

    line-height:
        1.8;

}


.feature-link {

    position:
        absolute;

    left:
        27px;

    bottom:
        25px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #60a5fa;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;

}


.feature-link i {

    transition:
        .25s ease;

}


.feature-card:hover .feature-link i {

    transform:
        translateX(4px);

}


/* =========================================================
   PROCESS
========================================================= */

.process-section {

    overflow:
        hidden;

}


.process-grid {

    display:
        grid;

    grid-template-columns:
        1fr 35px 1fr 35px 1fr;

    align-items:
        center;

    gap:
        15px;

}


.process-card {

    position:
        relative;

    min-height:
        310px;

    padding:
        28px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        22px;

    background:
        rgba(13,19,39,.72);

    transition:
        .35s ease;

}


.process-card:hover,
.process-card.active {

    border-color:
        rgba(96,165,250,.2);

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.25);

}


.process-card.active {

    background:
        linear-gradient(
            145deg,
            rgba(19,31,62,.9),
            rgba(12,17,36,.85)
        );

}


.process-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.process-number {

    color:
        rgba(148,163,184,.28);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.process-icon {

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(96,165,250,.15);

    border-radius:
        17px;

    background:
        rgba(59,130,246,.08);

    color:
        #60a5fa;

    font-size:
        21px;

}


.process-card h3 {

    margin-top:
        28px;

    color:
        #e2e8f0;

    font-size:
        19px;

}


.process-card p {

    margin-top:
        10px;

    color:
        #71809c;

    font-size:
        13px;

    line-height:
        1.8;

}


.process-line {

    width:
        45px;

    height:
        2px;

    margin-top:
        25px;

    border-radius:
        5px;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #22d3ee
        );

}


.process-label {

    display:
        block;

    margin-top:
        15px;

    color:
        #4f6284;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

}


.process-connector {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(96,165,250,.12);

    border-radius:
        50%;

    color:
        #60a5fa;

    font-size:
        10px;

}


.process-cta {

    margin-top:
        30px;

    padding:
        25px 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        1px solid rgba(96,165,250,.12);

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.08),
            rgba(139,92,246,.06)
        );

}


.process-cta > div span {

    color:
        #60a5fa;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.process-cta h3 {

    margin-top:
        4px;

    color:
        #dbeafe;

    font-size:
        17px;

}


/* =========================================================
   PRICING
========================================================= */

.pricing-section {

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(37,99,235,.045),
            transparent 50%
        );

}


.pricing-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        16px;

}


.pricing-card {

    position:
        relative;

    padding:
        27px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(17,25,48,.82),
            rgba(8,13,29,.78)
        );

    transition:
        .35s ease;

}


.pricing-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(96,165,250,.2);

    box-shadow:
        0 25px 65px rgba(0,0,0,.3);

}


.pricing-card.popular {

    border-color:
        rgba(96,165,250,.28);

    background:
        linear-gradient(
            145deg,
            rgba(22,37,72,.92),
            rgba(10,16,34,.9)
        );

    box-shadow:
        0 20px 70px rgba(37,99,235,.12);

}


.popular-ribbon {

    position:
        absolute;

    top:
        17px;

    right:
        17px;

    padding:
        5px 8px;

    border-radius:
        6px;

    background:
        rgba(59,130,246,.13);

    color:
        #60a5fa;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.pricing-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.pricing-badge {

    color:
        #7183a4;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

}


.pricing-icon {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(96,165,250,.12);

    border-radius:
        11px;

    background:
        rgba(59,130,246,.07);

    color:
        #60a5fa;

}


.pricing-card h3 {

    margin-top:
        22px;

    color:
        #e2e8f0;

    font-size:
        20px;

}


.pricing-description {

    min-height:
        42px;

    margin-top:
        6px;

    color:
        #64748b;

    font-size:
        11px;

}


.price {

    display:
        flex;

    align-items:
        baseline;

    gap:
        3px;

    margin-top:
        17px;

}


.currency {

    color:
        #60a5fa;

    font-size:
        16px;

    font-weight:
        700;

}


.price strong {

    color:
        #f8fafc;

    font-size:
        39px;

    line-height:
        1;

}


.period {

    color:
        #64748b;

    font-size:
        10px;

}


.pricing-divider {

    height:
        1px;

    margin:
        22px 0;

    background:
        rgba(255,255,255,.07);

}


.pricing-card ul {

    min-height:
        150px;

    list-style:
        none;

}


.pricing-card li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    margin-bottom:
        12px;

    color:
        #8c9ab3;

    font-size:
        11px;

}


.pricing-card li i {

    margin-top:
        3px;

    color:
        #22c55e;

    font-size:
        9px;

}


.pricing-button {

    width:
        100%;

    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius:
        11px;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        .3s ease;

}


.pricing-button.secondary {

    background:
        rgba(255,255,255,.035);

    color:
        #cbd5e1;

}


.pricing-button.primary {

    border-color:
        rgba(96,165,250,.22);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:
        #fff;

    box-shadow:
        0 12px 30px rgba(37,99,235,.2);

}


.pricing-button:hover {

    transform:
        translateY(-2px);

}


.pricing-button.secondary:hover {

    border-color:
        rgba(96,165,250,.2);

    background:
        rgba(59,130,246,.08);

}


/* =========================================================
   STATS
========================================================= */

.stats-section {

    position:
        relative;

    z-index:
        3;

    padding:
        70px 0;

    border-top:
        1px solid rgba(255,255,255,.05);

    border-bottom:
        1px solid rgba(255,255,255,.05);

    background:
        rgba(255,255,255,.015);

}


.stats-container {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        25px;

}


.stat-item {

    display:
        grid;

    grid-template-columns:
        46px 1fr;

    grid-template-rows:
        auto auto;

    column-gap:
        13px;

}


.stat-icon {

    grid-row:
        span 2;

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(96,165,250,.12);

    border-radius:
        13px;

    background:
        rgba(59,130,246,.06);

    color:
        #60a5fa;

}


.stat-item strong {

    align-self:
        end;

    color:
        #e2e8f0;

    font-size:
        16px;

}


.stat-item span {

    align-self:
        start;

    color:
        #64748b;

    font-size:
        10px;

}


/* =========================================================
   FAQ
========================================================= */

.faq-container {

    max-width:
        900px;

}


.faq-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.faq-item {

    overflow:
        hidden;

    border:
        1px solid rgba(255,255,255,.075);

    border-radius:
        16px;

    background:
        rgba(13,19,39,.68);

    transition:
        .3s ease;

}


.faq-item.open {

    border-color:
        rgba(96,165,250,.2);

    background:
        rgba(15,25,49,.8);

}


.faq-question {

    width:
        100%;

    min-height:
        66px;

    padding:
        0 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        none;

    background:
        transparent;

    color:
        #dbeafe;

    text-align:
        left;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

}


.faq-question i {

    flex-shrink:
        0;

    color:
        #60a5fa;

    transition:
        .3s ease;

}


.faq-item.open .faq-question i {

    transform:
        rotate(45deg);

}


.faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows
        .3s
        ease;

}


.faq-answer p {

    overflow:
        hidden;

    padding:
        0 20px;

    color:
        #71809c;

    font-size:
        13px;

    line-height:
        1.8;

}


.faq-item.open .faq-answer {

    grid-template-rows:
        1fr;

}


.faq-item.open .faq-answer p {

    padding:
        0 20px 20px;

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta-section {

    position:
        relative;

    padding:
        50px 0 120px;

    z-index:
        3;

}


.cta-glow {

    position:
        absolute;

    width:
        600px;

    height:
        250px;

    left:
        50%;

    bottom:
        40px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(59,130,246,.12);

    filter:
        blur(100px);

    pointer-events:
        none;

}


.final-cta {

    position:
        relative;

    min-height:
        330px;

    padding:
        55px 65px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border:
        1px solid rgba(96,165,250,.16);

    border-radius:
        28px;

    background:
        linear-gradient(
            110deg,
            rgba(19,31,61,.86),
            rgba(16,17,47,.82)
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.3);

}


.final-cta::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(96,165,250,.05),
            transparent
        );

    pointer-events:
        none;

}


.cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        700px;

}


.cta-content .section-kicker {

    margin-bottom:
        12px;

}


.cta-content h2 {

    max-width:
        680px;

    color:
        #f8fafc;

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );

    line-height:
        1.12;

    letter-spacing:
        -2px;

}


.cta-content p {

    max-width:
        560px;

    margin-top:
        15px;

    color:
        #8190aa;

    font-size:
        14px;

}


.cta-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        25px;

}


.cta-actions .secondary-button {

    min-height:
        54px;

}


.cta-actions .secondary-button strong {

    color:
        #60a5fa;

}


.cta-decoration {

    position:
        relative;

    width:
        230px;

    height:
        230px;

    flex-shrink:
        0;

}


.cta-orbit {

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        20px;

    top:
        50%;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(96,165,250,.1);

    border-radius:
        50%;

    animation:
        ringRotate
        15s
        linear
        infinite;

}


.mini-photo-card {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        105px;

    height:
        135px;

    display:
        grid;

    place-items:
        center;

    transform:
        translate(-50%,-50%)
        rotate(8deg);

    border:
        1px solid rgba(96,165,250,.3);

    border-radius:
        16px;

    background:
        linear-gradient(
            180deg,
            #bddac8,
            #8eb5a2
        );

    color:
        rgba(15,40,38,.55);

    font-size:
        30px;

    box-shadow:
        0 25px 55px rgba(0,0,0,.35),
        0 0 50px rgba(59,130,246,.15);

    animation:
        miniCardFloat
        5s
        ease-in-out
        infinite;

    z-index:
        2;

}


@keyframes miniCardFloat {

    0%,
    100% {

        transform:
            translate(-50%,-50%)
            rotate(8deg);

    }

    50% {

        transform:
            translate(-50%,-58%)
            rotate(4deg);

    }

}


.mini-glow {

    position:
        absolute;

    inset:
        20px;

    border-radius:
        50%;

    background:
        rgba(59,130,246,.18);

    filter:
        blur(45px);

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    position:
        relative;

    z-index:
        4;

    padding:
        70px 0 25px;

    border-top:
        1px solid rgba(255,255,255,.06);

    background:
        #02040c;

}


.footer-main {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:
        60px;

    padding-bottom:
        55px;

}


.footer-brand p {

    max-width:
        330px;

    margin-top:
        18px;

    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.8;

}


.footer-social {

    display:
        flex;

    gap:
        8px;

    margin-top:
        20px;

}


.footer-social a {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.025);

    color:
        #64748b;

    font-size:
        12px;

    transition:
        .25s ease;

}


.footer-social a:hover {

    border-color:
        rgba(96,165,250,.2);

    background:
        rgba(59,130,246,.08);

    color:
        #60a5fa;

    transform:
        translateY(-2px);

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        10px;

}


.footer-column h3 {

    margin-bottom:
        8px;

    color:
        #cbd5e1;

    font-size:
        12px;

    font-weight:
        700;

}


.footer-column a {

    color:
        #64748b;

    font-size:
        11px;

    transition:
        .25s ease;

}


.footer-column a:hover {

    color:
        #60a5fa;

    transform:
        translateX(3px);

}


.footer-bottom {

    padding-top:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color:
        #475569;

    font-size:
        10px;

}


.footer-bottom strong {

    color:
        #64748b;

}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.scroll-progress {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        0;

    height:
        2px;

    z-index:
        999;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #22d3ee,
            #8b5cf6
        );

    box-shadow:
        0 0 12px rgba(34,211,238,.65);

}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {

    outline:
        2px solid #60a5fa;

    outline-offset:
        3px;

}


/* =========================================================
   RESPONSIVE — 1200
========================================================= */

@media (max-width:1200px) {

    .hero-container {

        gap:
            35px;

    }


    .hero h1 {

        font-size:
            clamp(
                45px,
                5.5vw,
                68px
            );

    }


    .pricing-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .pricing-card ul {

        min-height:
            auto;

    }

}


/* =========================================================
   RESPONSIVE — 1050
========================================================= */

@media (max-width:1050px) {

    .desktop-nav {

        display:
            none;

    }


    .nav-actions {

        margin-left:
            auto;

    }


    .mobile-menu-btn {

        display:
            block;

    }


    .hero {

        min-height:
            auto;

        padding-top:
            150px;

    }


    .hero-container {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .hero-content {

        max-width:
            800px;

        margin:
            0 auto;

    }


    .hero h1 {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-actions {

        justify-content:
            center;

    }


    .hero-trust {

        justify-content:
            center;

    }


    .hero-visual {

        min-height:
            600px;

        margin-top:
            15px;

    }


    .features-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .process-grid {

        grid-template-columns:
            1fr;

    }


    .process-connector {

        margin:
            -4px auto;

        transform:
            rotate(90deg);

    }


    .stats-container {

        grid-template-columns:
            repeat(2,1fr);

    }

}


/* =========================================================
   RESPONSIVE — 800
========================================================= */

@media (max-width:800px) {

    .container {

        width:
            min(
                calc(100% - 30px),
                var(--container)
            );

    }


    .navbar {

        top:
            10px;

        padding:
            0 12px;

    }


    .navbar-inner {

        min-height:
            64px;

    }


    .nav-actions {

        display:
            none;

    }


    .hero {

        padding:
            125px 0 80px;

    }


    .hero h1 {

        font-size:
            clamp(
                42px,
                11vw,
                62px
            );

        letter-spacing:
            -2.8px;

    }


    .hero-description {

        font-size:
            15px;

    }


    .feature-strip-inner {

        grid-template-columns:
            repeat(2,1fr);

        padding:
            25px 0;

    }


    .strip-line {

        display:
            none;

    }


    .features-grid {

        grid-template-columns:
            1fr;

    }


    .pricing-grid {

        grid-template-columns:
            1fr;

    }


    .final-cta {

        padding:
            45px 30px;

    }


    .cta-decoration {

        display:
            none;

    }


    .footer-main {

        grid-template-columns:
            repeat(2,1fr);

        gap:
            40px;

    }

}


/* =========================================================
   RESPONSIVE — 600
========================================================= */

@media (max-width:600px) {

    .section {

        padding:
            85px 0;

    }


    .section-heading {

        margin-bottom:
            40px;

    }


    .section-heading h2 {

        font-size:
            33px;

        letter-spacing:
            -1.4px;

    }


    .hero {

        padding-top:
            115px;

    }


    .hero-badge {

        font-size:
            10px;

    }


    .hero h1 {

        font-size:
            43px;

        line-height:
            1.04;

    }


    .hero-description {

        font-size:
            14px;

        line-height:
            1.75;

    }


    .hero-actions {

        flex-direction:
            column;

        width:
            100%;

    }


    .hero-actions a {

        width:
            100%;

    }


    .hero-trust {

        gap:
            9px;

        font-size:
            9px;

    }


    .trust-divider {

        display:
            none;

    }


    .hero-visual {

        min-height:
            500px;

        transform:
            scale(.86);

        margin-top:
            -15px;

        margin-bottom:
            -40px;

    }


    .passport-showcase {

        width:
            300px;

        min-height:
            420px;

    }


    .passport-photo-area {

        height:
            290px;

    }


    .photo-frame {

        width:
            160px;

        height:
            210px;

    }


    .floating-status {

        min-width:
            175px;

    }


    .status-processing {

        left:
            -18px;

        top:
            60px;

    }


    .status-print {

        right:
            -25px;

        bottom:
            70px;

    }


    .floating-icon {

        width:
            42px;

        height:
            42px;

    }


    .ring-large {

        width:
            440px;

        height:
            440px;

    }


    .ring-small {

        width:
            350px;

        height:
            350px;

    }


    .feature-strip-inner {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    .strip-item {

        justify-content:
            center;

    }


    .process-card {

        min-height:
            270px;

    }


    .process-cta {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .process-cta .primary-button {

        width:
            100%;

    }


    .stats-container {

        grid-template-columns:
            1fr;

    }


    .final-cta {

        padding:
            40px 23px;

        border-radius:
            22px;

    }


    .cta-content h2 {

        font-size:
            32px;

    }


    .cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .cta-actions a {

        width:
            100%;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .footer-bottom {

        flex-direction:
            column;

        text-align:
            center;

    }

}


/* =========================================================
   RESPONSIVE — 420
========================================================= */

@media (max-width:420px) {

    .container {

        width:
            calc(100% - 24px);

    }


    .brand-text {

        font-size:
            20px;

    }


    .brand-icon {

        width:
            36px;

        height:
            36px;

    }


    .hero h1 {

        font-size:
            39px;

    }


    .hero-visual {

        transform:
            scale(.73);

        margin-top:
            -60px;

        margin-bottom:
            -110px;

    }


    .feature-card {

        min-height:
            285px;

        padding:
            23px;

    }


    .pricing-card {

        padding:
            23px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}
/* =========================================================
   JAVASCRIPT EFFECTS
========================================================= */

.reveal-element {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal-element.visible {

    opacity: 1;

    transform:
        translateY(0);

}


.button-ripple {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        rgba(255,255,255,.22);

    transform:
        scale(0);

    animation:
        buttonRipple .65s ease-out;

}


@keyframes buttonRipple {

    to {

        transform:
            scale(2);

        opacity:
            0;

    }

}


.primary-button,
.nav-cta,
.pricing-button {

    position:
        relative;

    overflow:
        hidden;

}
/* =================================================
   WHATSAPP SUPPORT BUTTON
================================================= */

.whatsapp-support {
    position: fixed;
    right: 24px;
    bottom: 24px;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #25D366;
    color: #ffffff;

    text-decoration: none;

    z-index: 9999;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.12);

    transition:
        width .35s ease,
        border-radius .35s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

/* WhatsApp icon */

.whatsapp-icon {
    position: relative;
    z-index: 3;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 31px;
}

/* Pulsing ring */

.whatsapp-pulse {
    position: absolute;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    border: 2px solid rgba(37, 211, 102, 0.65);

    animation: whatsappPulse 2s infinite;
}

/* Tooltip */

.whatsapp-tooltip {
    position: absolute;

    right: 74px;

    white-space: nowrap;

    padding: 10px 15px;

    border-radius: 10px;

    background: rgba(10, 18, 35, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    opacity: 0;
    visibility: hidden;

    transform: translateX(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

/* Tooltip arrow */

.whatsapp-tooltip::after {
    content: "";

    position: absolute;

    right: -6px;
    top: 50%;

    width: 11px;
    height: 11px;

    background: rgba(10, 18, 35, 0.96);

    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);

    transform: translateY(-50%) rotate(45deg);
}

/* Hover */

.whatsapp-support:hover {
    width: 68px;

    transform: translateY(-5px);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(37, 211, 102, 0.35);
}

.whatsapp-support:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}

/* Pulse animation */

@keyframes whatsappPulse {

    0% {
        transform: scale(1);
        opacity: .75;
    }

    70% {
        transform: scale(1.55);
        opacity: 0;
    }

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

/* Mobile */

@media (max-width: 600px) {

    .whatsapp-support {
        right: 16px;
        bottom: 18px;

        width: 56px;
        height: 56px;
    }

    .whatsapp-icon {
        width: 56px;
        height: 56px;

        font-size: 28px;
    }

    .whatsapp-pulse {
        width: 56px;
        height: 56px;
    }

    .whatsapp-tooltip {
        display: none;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .whatsapp-pulse {
        animation: none;
    }

    .whatsapp-support,
    .whatsapp-tooltip {
        transition: none;
    }
}