/* =========================================================
   ECHOCALL AI — LANDING PAGE
   landing.css

   PART 1 — RESET, GLOBAL VARIABLES & FOUNDATION
========================================================= */


/* =========================================================
   1. ROOT VARIABLES
========================================================= */

:root {

    /* ---------- Core Colors ---------- */

    --ec-black:
        #02030a;

    --ec-deep:
        #050816;

    --ec-deep-blue:
        #07112b;

    --ec-blue:
        #1e3a8a;

    --ec-electric-blue:
        #2563eb;

    --ec-bright-blue:
        #3b82f6;

    --ec-cyan:
        #22d3ee;

    --ec-purple:
        #7c3aed;

    --ec-violet:
        #8b5cf6;

    --ec-pink:
        #ec4899;


    /* ---------- Text ---------- */

    --ec-text:
        #f8fafc;

    --ec-text-soft:
        #cbd5e1;

    --ec-text-muted:
        #94a3b8;

    --ec-text-dim:
        #64748b;


    /* ---------- Glass ---------- */

    --ec-glass:
        rgba(255, 255, 255, 0.055);

    --ec-glass-light:
        rgba(255, 255, 255, 0.085);

    --ec-glass-border:
        rgba(255, 255, 255, 0.11);

    --ec-glass-border-bright:
        rgba(255, 255, 255, 0.18);


    /* ---------- Shadows ---------- */

    --ec-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45);

    --ec-shadow-blue:
        0 20px 70px rgba(37, 99, 235, 0.18);

    --ec-shadow-purple:
        0 20px 70px rgba(124, 58, 237, 0.18);


    /* ---------- Radius ---------- */

    --ec-radius-small:
        14px;

    --ec-radius-medium:
        22px;

    --ec-radius-large:
        32px;

    --ec-radius-xl:
        44px;

    --ec-radius-pill:
        999px;


    /* ---------- Layout ---------- */

    --ec-container:
        1240px;

    --ec-page-padding:
        32px;


    /* ---------- Transitions ---------- */

    --ec-transition-fast:
        180ms ease;

    --ec-transition:
        300ms ease;

    --ec-transition-slow:
        600ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   2. UNIVERSAL RESET
========================================================= */

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

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


/* =========================================================
   3. HTML FOUNDATION
========================================================= */

html {

    width:
        100%;

    min-height:
        100%;

    scroll-behavior:
        smooth;

    background:
        var(--ec-black);

}


/* =========================================================
   4. BODY FOUNDATION
========================================================= */

body {

    width:
        100%;

    min-height:
        100vh;

    overflow-x:
        hidden;

    background:
        var(--ec-deep);

    color:
        var(--ec-text);

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        16px;

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


/* =========================================================
   5. BODY — INTRO STATE
========================================================= */

body.intro-active {

    overflow:
        hidden;

}


/* =========================================================
   6. LINKS
========================================================= */

a {

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   7. BUTTONS
========================================================= */

button,
input,
textarea,
select {

    font:
        inherit;

}


button {

    border:
        0;

    outline:
        0;

    cursor:
        pointer;

}


/* =========================================================
   8. IMAGES
========================================================= */

img {

    display:
        block;

    max-width:
        100%;

}


/* =========================================================
   9. SELECTION
========================================================= */

::selection {

    background:
        rgba(59, 130, 246, 0.35);

    color:
        #ffffff;

}


/* =========================================================
   10. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width:
        8px;

}


::-webkit-scrollbar-track {

    background:
        #02030a;

}


::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            180deg,
            var(--ec-electric-blue),
            var(--ec-purple)
        );

    border-radius:
        var(--ec-radius-pill);

}


::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(
            180deg,
            var(--ec-bright-blue),
            var(--ec-violet)
        );

}


/* =========================================================
   11. MAIN PAGE BACKGROUND
========================================================= */

.page-background {

    position:
        fixed;

    inset:
        0;

    z-index:
        -10;

    overflow:
        hidden;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(37, 99, 235, 0.13),
            transparent 42%
        ),

        radial-gradient(
            circle at 0% 50%,
            rgba(124, 58, 237, 0.08),
            transparent 38%
        ),

        radial-gradient(
            circle at 100% 75%,
            rgba(34, 211, 238, 0.06),
            transparent 35%
        ),

        var(--ec-deep);

}


/* =========================================================
   12. BACKGROUND GRID
========================================================= */

.background-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        0.23;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0, 0, 0, 0.6) 55%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0, 0, 0, 0.6) 55%,
            transparent 100%
        );

}


/* =========================================================
   13. BACKGROUND GLOW BASE
========================================================= */

.background-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(90px);

    opacity:
        0.32;

    pointer-events:
        none;

}


/* =========================================================
   14. BACKGROUND GLOW — ONE
========================================================= */

.glow-one {

    width:
        420px;

    height:
        420px;

    top:
        -180px;

    left:
        8%;

    background:
        rgba(37, 99, 235, 0.24);

}


/* =========================================================
   15. BACKGROUND GLOW — TWO
========================================================= */

.glow-two {

    width:
        360px;

    height:
        360px;

    top:
        28%;

    right:
        -160px;

    background:
        rgba(124, 58, 237, 0.2);

}


/* =========================================================
   16. BACKGROUND GLOW — THREE
========================================================= */

.glow-three {

    width:
        300px;

    height:
        300px;

    bottom:
        4%;

    left:
        20%;

    background:
        rgba(34, 211, 238, 0.12);

}


/* =========================================================
   17. MAIN LANDING PAGE
========================================================= */

.landing-page {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    isolation:
        isolate;

}


/* =========================================================
   18. SHARED SECTION CONTAINER
========================================================= */

.section-container {

    width:
        min(
            calc(100% - (var(--ec-page-padding) * 2)),
            var(--ec-container)
        );

    margin:
        0 auto;

}


/* =========================================================
   19. SHARED SECTION LABEL
========================================================= */

.section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    color:
        var(--ec-text-muted);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


/* =========================================================
   20. SECTION LABEL DOT
========================================================= */

.section-label > span {

    display:
        block;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--ec-electric-blue);

    box-shadow:
        0 0 14px
        rgba(37, 99, 235, 0.9);

}


/* =========================================================
   21. SHARED SECTION HEADING
========================================================= */

.section-heading {

    max-width:
        760px;

}


.section-heading.centered {

    margin:
        0 auto;

    text-align:
        center;

}


/* =========================================================
   22. SHARED HEADINGS
========================================================= */

.section-heading h2 {

    color:
        var(--ec-text);

    font-size:
        clamp(38px, 5vw, 68px);

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -0.045em;

}


.section-heading h2 span {

    background:
        linear-gradient(
            100deg,
            #60a5fa 0%,
            #818cf8 45%,
            #c084fc 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   23. SHARED SECTION PARAGRAPH
========================================================= */

.section-heading p {

    max-width:
        680px;

    margin-top:
        24px;

    color:
        var(--ec-text-muted);

    font-size:
        17px;

    line-height:
        1.8;

}


/* =========================================================
   24. CENTERED SECTION PARAGRAPH
========================================================= */

.section-heading.centered p {

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   25. FOCUS ACCESSIBILITY
========================================================= */

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

    outline:
        2px solid var(--ec-bright-blue);

    outline-offset:
        4px;

}


/* =========================================================
   END OF PART 1

   NEXT:
   PART 2 — 3D INTRO / LOADING EXPERIENCE
========================================================= */
/* =========================================================
   ECHOCALL AI — LANDING PAGE
   landing.css

   PART 2 — 3D INTRO / LOADING EXPERIENCE
========================================================= */


/* =========================================================
   26. INTRO SCREEN — BASE
========================================================= */

.intro-screen {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(30, 58, 138, 0.25),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 50%,
            rgba(124, 58, 237, 0.12),
            transparent 55%
        ),

        #02030a;

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);

    transition:
        opacity 900ms ease,
        visibility 900ms ease,
        transform 1200ms
        cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   27. INTRO SCREEN — EXIT STATE
========================================================= */

.intro-screen.intro-hidden {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        scale(1.08);

}


/* =========================================================
   28. INTRO SCREEN — AMBIENT LIGHT
========================================================= */

.intro-screen::before {

    content:
        "";

    position:
        absolute;

    width:
        70vw;

    height:
        70vw;

    max-width:
        900px;

    max-height:
        900px;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.12),
            rgba(124, 58, 237, 0.05) 35%,
            transparent 70%
        );

    filter:
        blur(20px);

    animation:
        introAmbientPulse 4s ease-in-out infinite;

}


/* =========================================================
   29. INTRO SCREEN — SECOND AMBIENT LIGHT
========================================================= */

.intro-screen::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, 0.55) 100%
        );

}


/* =========================================================
   30. INTRO PARTICLE CONTAINER
========================================================= */

.intro-particles {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

}


/* =========================================================
   31. INTRO PARTICLES — BASE
========================================================= */

.intro-particles span {

    position:
        absolute;

    display:
        block;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        rgba(96, 165, 250, 0.8);

    box-shadow:
        0 0 12px
        rgba(59, 130, 246, 0.9);

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

}


/* =========================================================
   32. PARTICLE POSITIONS
========================================================= */

.intro-particles span:nth-child(1) {

    top:
        18%;

    left:
        17%;

    animation-delay:
        -1s;

    animation-duration:
        5.5s;

}


.intro-particles span:nth-child(2) {

    top:
        27%;

    left:
        79%;

    width:
        2px;

    height:
        2px;

    animation-delay:
        -2.5s;

    animation-duration:
        6.5s;

}


.intro-particles span:nth-child(3) {

    top:
        72%;

    left:
        13%;

    animation-delay:
        -3s;

    animation-duration:
        5.8s;

}


.intro-particles span:nth-child(4) {

    top:
        80%;

    left:
        82%;

    width:
        2px;

    height:
        2px;

    animation-delay:
        -1.8s;

    animation-duration:
        7s;

}


.intro-particles span:nth-child(5) {

    top:
        12%;

    left:
        55%;

    width:
        2px;

    height:
        2px;

    animation-delay:
        -4s;

    animation-duration:
        6s;

}


.intro-particles span:nth-child(6) {

    top:
        63%;

    left:
        90%;

    animation-delay:
        -2s;

    animation-duration:
        5s;

}


.intro-particles span:nth-child(7) {

    top:
        88%;

    left:
        38%;

    width:
        2px;

    height:
        2px;

    animation-delay:
        -3.5s;

    animation-duration:
        6.8s;

}


.intro-particles span:nth-child(8) {

    top:
        38%;

    left:
        7%;

    width:
        2px;

    height:
        2px;

    animation-delay:
        -4.5s;

    animation-duration:
        5.3s;

}


/* =========================================================
   33. INTRO ORBIT — BASE
========================================================= */

.intro-orbit {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

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

    border-radius:
        50%;

    transform:
        translate(-50%, -50%);

    pointer-events:
        none;

}


/* =========================================================
   34. INTRO ORBIT — ONE
========================================================= */

.orbit-one {

    width:
        270px;

    height:
        270px;

    transform:
        translate(-50%, -50%)
        rotateX(68deg)
        rotateY(8deg);

    animation:
        orbitRotateOne
        8s
        linear
        infinite;

}


/* =========================================================
   35. INTRO ORBIT — TWO
========================================================= */

.orbit-two {

    width:
        350px;

    height:
        350px;

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

    transform:
        translate(-50%, -50%)
        rotateX(68deg)
        rotateY(-25deg);

    animation:
        orbitRotateTwo
        11s
        linear
        infinite reverse;

}


/* =========================================================
   36. INTRO ORBIT — THREE
========================================================= */

.orbit-three {

    width:
        430px;

    height:
        430px;

    border-color:
        rgba(34, 211, 238, 0.08);

    transform:
        translate(-50%, -50%)
        rotateX(68deg)
        rotateY(45deg);

    animation:
        orbitRotateThree
        15s
        linear
        infinite;

}


/* =========================================================
   37. INTRO CORE
========================================================= */

.intro-core {

    position:
        relative;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        190px;

    height:
        190px;

    perspective:
        900px;

    transform-style:
        preserve-3d;

    animation:
        introCoreFloat
        4s
        ease-in-out
        infinite;

}


/* =========================================================
   38. INTRO CORE — OUTER GLOW
========================================================= */

.intro-core::before {

    content:
        "";

    position:
        absolute;

    inset:
        18px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.32),
            rgba(124, 58, 237, 0.15) 45%,
            transparent 72%
        );

    filter:
        blur(18px);

    animation:
        coreGlowPulse
        2.8s
        ease-in-out
        infinite;

}


/* =========================================================
   39. INTRO CORE — INNER GLOW
========================================================= */

.intro-core::after {

    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    border-radius:
        50%;

    background:
        rgba(59, 130, 246, 0.28);

    filter:
        blur(35px);

    animation:
        coreInnerGlow
        2s
        ease-in-out
        infinite alternate;

}


/* =========================================================
   40. INTRO CORE RINGS — BASE
========================================================= */

.intro-core-ring {

    position:
        absolute;

    border-radius:
        50%;

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

    pointer-events:
        none;

}


/* =========================================================
   41. INTRO CORE RING — ONE
========================================================= */

.ring-one {

    inset:
        5px;

    border-top-color:
        rgba(96, 165, 250, 0.9);

    border-right-color:
        transparent;

    animation:
        coreRingRotate
        5s
        linear
        infinite;

}


/* =========================================================
   42. INTRO CORE RING — TWO
========================================================= */

.ring-two {

    inset:
        18px;

    border-left-color:
        rgba(139, 92, 246, 0.85);

    border-bottom-color:
        transparent;

    animation:
        coreRingRotate
        4s
        linear
        infinite reverse;

}


/* =========================================================
   43. INTRO CORE RING — THREE
========================================================= */

.ring-three {

    inset:
        34px;

    border-right-color:
        rgba(34, 211, 238, 0.8);

    border-top-color:
        transparent;

    animation:
        coreRingRotate
        3s
        linear
        infinite;

}


/* =========================================================
   44. INTRO LOGO CONTAINER
========================================================= */

.intro-logo-container {

    position:
        relative;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        92px;

    height:
        92px;

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

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:

        inset
        0 1px 0
        rgba(255, 255, 255, 0.18),

        0 20px 60px
        rgba(37, 99, 235, 0.28),

        0 0 50px
        rgba(124, 58, 237, 0.16);

    backdrop-filter:
        blur(18px);

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

    transform:
        translateZ(30px)
        rotateX(5deg);

}


/* =========================================================
   45. INTRO LOGO
========================================================= */

.intro-logo {

    width:
        62px;

    height:
        62px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 0 18px
            rgba(59, 130, 246, 0.55)
        );

    animation:
        logoPulse
        2.4s
        ease-in-out
        infinite;

}


/* =========================================================
   46. INTRO BRAND
========================================================= */

.intro-brand {

    position:
        relative;

    z-index:
        10;

    margin-top:
        42px;

    text-align:
        center;

    animation:
        introBrandReveal
        1.2s
        0.3s
        both
        cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   47. INTRO NAME
========================================================= */

.intro-name {

    color:
        #ffffff;

    font-size:
        clamp(28px, 5vw, 44px);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.055em;

    text-shadow:
        0 0 35px
        rgba(59, 130, 246, 0.35);

}


/* =========================================================
   48. INTRO NAME — AI
========================================================= */

.intro-name span {

    margin-left:
        4px;

    background:
        linear-gradient(
            100deg,
            #60a5fa,
            #818cf8,
            #c084fc
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   49. INTRO STATUS
========================================================= */

.intro-status {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        14px;

    color:
        rgba(203, 213, 225, 0.65);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


/* =========================================================
   50. INTRO STATUS DOT
========================================================= */

.status-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #22d3ee;

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

    animation:
        statusPulse
        1.4s
        ease-in-out
        infinite;

}


/* =========================================================
   51. INTRO LOADER
========================================================= */

.intro-loader {

    position:
        relative;

    z-index:
        10;

    width:
        min(260px, 55vw);

    margin-top:
        34px;

    animation:
        introBrandReveal
        1s
        0.6s
        both
        cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   52. INTRO LOADER TRACK
========================================================= */

.intro-loader-track {

    width:
        100%;

    height:
        2px;

    overflow:
        hidden;

    border-radius:
        99px;

    background:
        rgba(255, 255, 255, 0.08);

}


/* =========================================================
   53. INTRO LOADER PROGRESS
========================================================= */

.intro-loader-progress {

    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

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

    box-shadow:
        0 0 14px
        rgba(59, 130, 246, 0.8);

    animation:
        introLoadingProgress
        3s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

}


/* =========================================================
   54. INTRO KEYFRAME — AMBIENT
========================================================= */

@keyframes introAmbientPulse {

    0%,
    100% {

        opacity:
            0.55;

        transform:
            translate(-50%, -50%)
            scale(0.9);

    }

    50% {

        opacity:
            1;

        transform:
            translate(-50%, -50%)
            scale(1.08);

    }

}


/* =========================================================
   55. INTRO KEYFRAME — PARTICLES
========================================================= */

@keyframes introParticleFloat {

    0%,
    100% {

        opacity:
            0.2;

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

    }

    50% {

        opacity:
            1;

        transform:
            translate3d(
                0,
                -25px,
                0
            )
            scale(1.4);

    }

}


/* =========================================================
   56. INTRO KEYFRAME — CORE FLOAT
========================================================= */

@keyframes introCoreFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotateX(0deg)
            rotateY(0deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotateX(4deg)
            rotateY(-4deg);

    }

}


/* =========================================================
   57. INTRO KEYFRAME — CORE GLOW
========================================================= */

@keyframes coreGlowPulse {

    0%,
    100% {

        opacity:
            0.55;

        transform:
            scale(0.92);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.12);

    }

}


/* =========================================================
   58. INTRO KEYFRAME — INNER GLOW
========================================================= */

@keyframes coreInnerGlow {

    from {

        opacity:
            0.45;

        transform:
            scale(0.8);

    }

    to {

        opacity:
            0.9;

        transform:
            scale(1.15);

    }

}


/* =========================================================
   59. INTRO KEYFRAME — RINGS
========================================================= */

@keyframes coreRingRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   60. INTRO KEYFRAME — ORBIT ONE
========================================================= */

@keyframes orbitRotateOne {

    from {

        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateY(8deg)
            rotateZ(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateY(8deg)
            rotateZ(360deg);

    }

}


/* =========================================================
   61. INTRO KEYFRAME — ORBIT TWO
========================================================= */

@keyframes orbitRotateTwo {

    from {

        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateY(-25deg)
            rotateZ(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateY(-25deg)
            rotateZ(360deg);

    }

}


/* =========================================================
   62. INTRO KEYFRAME — ORBIT THREE
========================================================= */

@keyframes orbitRotateThree {

    from {

        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateY(45deg)
            rotateZ(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateY(45deg)
            rotateZ(360deg);

    }

}


/* =========================================================
   63. INTRO KEYFRAME — LOGO
========================================================= */

@keyframes logoPulse {

    0%,
    100% {

        transform:
            scale(1);

        filter:
            drop-shadow(
                0 0 16px
                rgba(59, 130, 246, 0.45)
            );

    }

    50% {

        transform:
            scale(1.06);

        filter:
            drop-shadow(
                0 0 28px
                rgba(59, 130, 246, 0.8)
            );

    }

}


/* =========================================================
   64. INTRO KEYFRAME — STATUS
========================================================= */

@keyframes statusPulse {

    0%,
    100% {

        opacity:
            0.4;

        transform:
            scale(0.8);

    }

    50% {

        opacity:
            1;

     transform:
            scale(1.2);

    }

}


/* =========================================================
   65. INTRO KEYFRAME — BRAND REVEAL
========================================================= */

@keyframes introBrandReveal {

    from {

        opacity:
            0;

        transform:
            translateY(18px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   66. INTRO KEYFRAME — LOADING
========================================================= */

@keyframes introLoadingProgress
{

    0% {

        width:
            0%;

    }

    20% {

        width:
            24%;

    }

    45% {

        width:
            51%;

    }

    70% {

        width:
            72%;

    }

    88% {

        width:
            91%;

    }

    100% {

        width:
            100%;

    }

}

/* =========================================================
   67. REDUCED MOTION SUPPORT
========================================================= */

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

    .intro-screen *,
    .intro-screen::before,
    .intro-screen::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}


/* =========================================================
   END OF PART 2

   NEXT:
   PART 3 — NAVIGATION
========================================================= */
/* =========================================================
   ECHOCALL AI — LANDING PAGE
   landing.css

   PART 3 — NAVIGATION
========================================================= */


/* =========================================================
   68. HEADER
========================================================= */

.landing-header {

    position:
        relative;

    z-index:
        100;

    width:
        100%;

    padding:
        22px 0;

}


/* =========================================================
   69. NAVBAR
========================================================= */

.navbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        min(
            calc(100% - (var(--ec-page-padding) * 2)),
            var(--ec-container)
        );

    min-height:
        64px;

    margin:
        0 auto;

    padding:
        8px 10px 8px 16px;

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

    border-radius:
        var(--ec-radius-pill);

    background:
        rgba(5, 8, 22, 0.62);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.2);

    backdrop-filter:
        blur(24px);

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

    transition:
        background var(--ec-transition),
        border-color var(--ec-transition),
        box-shadow var(--ec-transition);

}


/* =========================================================
   70. NAVBAR HOVER
========================================================= */

.navbar:hover {

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

    background:
        rgba(7, 13, 34, 0.74);

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.28);

}


/* =========================================================
   71. BRAND
========================================================= */

.brand {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

    gap:
        11px;

    transition:
        transform var(--ec-transition);

}


.brand:hover {

    transform:
        translateY(-1px);

}


/* =========================================================
   72. BRAND LOGO WRAPPER
========================================================= */

.brand-logo-wrap {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    overflow:
        hidden;

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

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.14),

        0 8px 24px
        rgba(37, 99, 235, 0.18);

}


/* =========================================================
   73. BRAND LOGO WRAPPER LIGHT
========================================================= */

.brand-logo-wrap::after {

    content:
        "";

    position:
        absolute;

    width:
        25px;

    height:
        25px;

    top:
        -15px;

    right:
        -10px;

    border-radius:
        50%;

    background:
        rgba(96, 165, 250, 0.28);

    filter:
        blur(10px);

}


/* =========================================================
   74. BRAND LOGO
========================================================= */

.brand-logo {

    position:
        relative;

    z-index:
        2;

    width:
        29px;

    height:
        29px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 0 10px
            rgba(59, 130, 246, 0.4)
        );

}


/* =========================================================
   75. BRAND TEXT
========================================================= */

.brand-text {

    display:
        flex;

    align-items:
        baseline;

    gap:
        3px;

    line-height:
        1;

}


/* =========================================================
   76. BRAND NAME
========================================================= */

.brand-name {

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;

    letter-spacing:
        -0.045em;

}


/* =========================================================
   77. BRAND AI
========================================================= */

.brand-ai {

    background:
        linear-gradient(
            100deg,
            #60a5fa,
            #818cf8,
            #c084fc
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    font-size:
        17px;

    font-weight:
        800;

    letter-spacing:
        -0.04em;

}


/* =========================================================
   78. NAVIGATION LINKS CONTAINER
========================================================= */

.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin-left:
        auto;

    margin-right:
        28px;

}


/* =========================================================
   79. NAVIGATION LINK
========================================================= */

.nav-link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        0 16px;

    border-radius:
        var(--ec-radius-pill);

    color:
        var(--ec-text-muted);

    font-size:
        13px;

    font-weight:
        500;

    transition:
        color var(--ec-transition),
        background var(--ec-transition),
        transform var(--ec-transition);

}


/* =========================================================
   80. NAVIGATION LINK HOVER
========================================================= */

.nav-link:hover {

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.055);

    transform:
        translateY(-1px);

}


/* =========================================================
   81. NAVIGATION LINK ACTIVE LINE
========================================================= */

.nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        5px;

    width:
        0;

    height:
        2px;

    border-radius:
        99px;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );

    transform:
        translateX(-50%);

    transition:
        width var(--ec-transition);

}


.nav-link:hover::after {

    width:
        18px;

}


/* =========================================================
   82. NAV START BUTTON
========================================================= */

.nav-start-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        46px;

    padding:
        0 19px;

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

    border-radius:
        var(--ec-radius-pill);

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.95),
            rgba(79, 70, 229, 0.95)
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        -0.01em;

    box-shadow:
        0 10px 30px
        rgba(37, 99, 235, 0.24),

        inset 0 1px 0
        rgba(255, 255, 255, 0.2);

    transition:
        transform var(--ec-transition),
        box-shadow var(--ec-transition),
        filter var(--ec-transition);

}


/* =========================================================
   83. NAV START BUTTON HOVER
========================================================= */

.nav-start-button:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:
        0 16px 40px
        rgba(37, 99, 235, 0.34),

        inset 0 1px 0
        rgba(255, 255, 255, 0.25);

}


/* =========================================================
   84. NAV START BUTTON ICON
========================================================= */

.nav-start-button
.material-symbols-rounded {

    font-size:
        17px;

    transition:
        transform var(--ec-transition);

}


.nav-start-button:hover
.material-symbols-rounded {

    transform:
        translateX(3px);

}


/* =========================================================
   85. MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

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

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        #ffffff;

    transition:
        background var(--ec-transition),
        border-color var(--ec-transition),
        transform var(--ec-transition);

}


.mobile-menu-button:hover {

    background:
        rgba(255, 255, 255, 0.09);

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

    transform:
        translateY(-1px);

}


/* =========================================================
   86. MOBILE MENU
========================================================= */

.mobile-menu {

    display:
        none;

    width:
        min(
            calc(100% - (var(--ec-page-padding) * 2)),
            var(--ec-container)
        );

    margin:
        8px auto 0;

    padding:
        10px;

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

    border-radius:
        24px;

    background:
        rgba(5, 8, 22, 0.82);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(24px);

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

}


/* =========================================================
   87. MOBILE MENU OPEN
========================================================= */

.mobile-menu.mobile-menu-open {

    display:
        flex;

    flex-direction:
        column;

    animation:
        mobileMenuReveal
        300ms
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

}


/* =========================================================
   88. MOBILE MENU LINKS
========================================================= */

.mobile-menu > a {

    display:
        flex;

    align-items:
        center;

    min-height:
        50px;

    padding:
        0 16px;

    border-radius:
        15px;

    color:
        var(--ec-text-muted);

    font-size:
        14px;

    font-weight:
        600;

    transition:
        background var(--ec-transition),
        color var(--ec-transition);

}


.mobile-menu > a:hover {

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.055);

}


/* =========================================================
   89. MOBILE START BUTTON
========================================================= */

.mobile-menu > a.mobile-start-button {

    justify-content:
        center;

    margin-top:
        6px;

    color:
        #ffffff;

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

    box-shadow:
        0 10px 30px
        rgba(37, 99, 235, 0.2);

}


/* =========================================================
   90. MOBILE MENU ANIMATION
========================================================= */

@keyframes mobileMenuReveal {

    from {

        opacity:
            0;

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

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   91. NAVIGATION RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .nav-links {

        gap:
            0;

        margin-right:
            14px;

    }


    .nav-link {

        padding:
            0 11px;

    }


    .nav-start-button {

        padding:
            0 15px;

    }

}


/* =========================================================
   92. NAVIGATION RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 720px) {

    .landing-header {

        padding:
            14px 0;

    }


    .navbar {

        min-height:
            58px;

        padding:
            7px 8px 7px 11px;

    }


    .nav-links,
    .nav-start-button {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            flex;

    }


    .brand-logo-wrap {

        width:
            38px;

        height:
            38px;

        border-radius:
            11px;

    }


    .brand-logo {

        width:
            26px;

        height:
            26px;

    }


    .brand-name {

        font-size:
            17px;

    }


    .brand-ai {

        font-size:
            16px;

    }

}


/* =========================================================
   93. NAVIGATION RESPONSIVE — SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .navbar {

        width:
            calc(100% - 20px);

    }


    .brand {

        gap:
            8px;

    }


    .brand-logo-wrap {

        width:
            36px;

        height:
            36px;

    }


    .brand-name {

        font-size:
            16px;

    }


    .brand-ai {

        font-size:
            15px;

    }

}


/* =========================================================
   END OF PART 3

   NEXT:
   PART 4 — HERO / MAIN INTRODUCTION
========================================================= */
/* =========================================================
   PART 4 — HERO / MAIN INTRODUCTION
   ========================================================= */


/* ---------------------------------------------------------
   HERO SECTION
--------------------------------------------------------- */

.hero-section {
    position: relative;
    min-height: calc(100vh - 82px);
    padding: 80px 6vw 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 2;
}

.hero-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    align-items: center;
    gap: 70px;
}


/* ---------------------------------------------------------
   HERO CONTENT
--------------------------------------------------------- */

.hero-content {
    position: relative;
    z-index: 5;

    max-width: 720px;

    animation:
        heroContentReveal 1s ease 3.25s both;
}

@keyframes heroContentReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ---------------------------------------------------------
   HERO EYEBROW
--------------------------------------------------------- */

.hero-eyebrow {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;
    padding: 9px 15px;

    border: 1px solid rgba(120, 150, 255, 0.18);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(30, 58, 138, 0.18),
            rgba(124, 58, 237, 0.08)
        );

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    color: rgba(220, 228, 255, 0.75);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.eyebrow-dot {
    position: relative;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #7c9cff;

    box-shadow:
        0 0 8px rgba(124, 156, 255, 0.9),
        0 0 18px rgba(124, 156, 255, 0.45);

    animation: eyebrowPulse 2s ease-in-out infinite;
}

@keyframes eyebrowPulse {

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

    50% {
        transform: scale(0.65);
        opacity: 0.55;
    }

}


/* ---------------------------------------------------------
   HERO TITLE
--------------------------------------------------------- */

.hero-title {
    margin: 0;

    max-width: 760px;

    font-size: clamp(54px, 7vw, 104px);
    line-height: 0.98;
    letter-spacing: -0.065em;
    font-weight: 900;

    color: #f7f9ff;

    text-wrap: balance;
}

.hero-title-gradient {
    display: inline-block;

    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #9db5ff 30%,
            #7188ff 52%,
            #b27cff 78%,
            #e4c8ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 35px rgba(105, 125, 255, 0.12);

    animation: titleGlow 5s ease-in-out infinite;
}

@keyframes titleGlow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.12);
    }

}


/* ---------------------------------------------------------
   HERO DESCRIPTION
--------------------------------------------------------- */

.hero-description {
    max-width: 650px;

    margin: 30px 0 0;

    color: rgba(205, 213, 238, 0.68);

    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;

    letter-spacing: -0.01em;
}


/* ---------------------------------------------------------
   HERO ACTIONS
--------------------------------------------------------- */

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 38px;
}


/* ---------------------------------------------------------
   PRIMARY HERO BUTTON
--------------------------------------------------------- */

.hero-primary-button {
    position: relative;

    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 0 21px;

    border: 1px solid rgba(160, 175, 255, 0.28);
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #3155d8 0%,
            #4b3cc9 48%,
            #713ed4 100%
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;

    box-shadow:
        0 15px 40px rgba(53, 76, 205, 0.28),
        0 0 35px rgba(106, 72, 214, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.hero-primary-button::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.7s ease;
}

.hero-primary-button:hover::before {
    left: 140%;
}

.hero-primary-button:hover {
    transform: translateY(-4px);

    border-color: rgba(190, 200, 255, 0.45);

    box-shadow:
        0 22px 50px rgba(53, 76, 205, 0.35),
        0 0 45px rgba(106, 72, 214, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.hero-primary-button:active {
    transform: translateY(-1px) scale(0.98);
}

.hero-primary-button .material-symbols-rounded {
    font-size: 19px;
}

.hero-primary-button .button-arrow {
    margin-left: 4px;

    transition:
        transform 0.3s ease;
}

.hero-primary-button:hover .button-arrow {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   SECONDARY HERO BUTTON
--------------------------------------------------------- */

.hero-secondary-button {
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 20px;

    border: 1px solid rgba(150, 165, 210, 0.15);
    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.025);

    color: rgba(235, 239, 255, 0.78);

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

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

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.hero-secondary-button:hover {
    transform: translateY(-4px);

    background:
        rgba(255, 255, 255, 0.055);

    border-color:
        rgba(160, 175, 255, 0.28);

    color: #ffffff;
}

.hero-secondary-button .material-symbols-rounded {
    font-size: 20px;
}


/* ---------------------------------------------------------
   HERO TRUST ROW
--------------------------------------------------------- */

.hero-trust-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 32px;

    color: rgba(190, 201, 230, 0.48);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    white-space: nowrap;
}

.trust-item .material-symbols-rounded {
    font-size: 17px;

    color: rgba(137, 157, 255, 0.72);
}

.trust-separator {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        rgba(155, 168, 210, 0.28);
}


/* ---------------------------------------------------------
   HERO VISUAL
--------------------------------------------------------- */

.hero-visual {
    position: relative;

    min-height: 620px;

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

    perspective: 1200px;

    animation:
        heroVisualReveal 1.2s ease 3.3s both;
}

@keyframes heroVisualReveal {

    from {
        opacity: 0;
        transform:
            scale(0.88)
            translateY(30px);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            translateY(0);
    }

}


/* ---------------------------------------------------------
   VISUAL SHADOW
--------------------------------------------------------- */

.visual-shadow {
    position: absolute;

    width: 380px;
    height: 150px;

    left: 50%;
    bottom: 105px;

    transform:
        translateX(-50%)
        rotateX(65deg);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(83, 104, 255, 0.25),
            rgba(102, 63, 211, 0.08) 45%,
            transparent 72%
        );

    filter: blur(25px);

    animation:
        shadowFloat 5s ease-in-out infinite;
}

@keyframes shadowFloat {

    0%,
    100% {
        transform:
            translateX(-50%)
            rotateX(65deg)
            scale(1);
        opacity: 0.75;
    }

    50% {
        transform:
            translateX(-50%)
            rotateX(65deg)
            scale(1.12);
        opacity: 1;
    }

}


/* ---------------------------------------------------------
   HERO ORBITS
--------------------------------------------------------- */

.hero-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(116, 137, 255, 0.15);

    border-radius: 50%;

    pointer-events: none;
}

.hero-orbit-one {
    width: 480px;
    height: 480px;

    transform:
        translate(-50%, -50%)
        rotateX(67deg)
        rotateY(-18deg);

    animation:
        orbitRotateOne 18s linear infinite;
}

.hero-orbit-two {
    width: 400px;
    height: 400px;

    transform:
        translate(-50%, -50%)
        rotateX(67deg)
        rotateY(35deg);

    border-color:
        rgba(156, 102, 255, 0.12);

    animation:
        orbitRotateTwo 14s linear infinite reverse;
}

.hero-orbit-three {
    width: 540px;
    height: 540px;

    transform:
        translate(-50%, -50%)
        rotateX(72deg)
        rotateY(10deg);

    border-color:
        rgba(86, 113, 255, 0.07);

    animation:
        orbitRotateThree 22s linear infinite;
}

@keyframes orbitRotateOne {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateY(-18deg)
            rotateZ(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateY(-18deg)
            rotateZ(360deg);
    }

}

@keyframes orbitRotateTwo {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateY(35deg)
            rotateZ(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateY(35deg)
            rotateZ(0deg);
    }

}

@keyframes orbitRotateThree {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(72deg)
            rotateY(10deg)
            rotateZ(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(72deg)
            rotateY(10deg)
            rotateZ(360deg);
    }

}


/* ---------------------------------------------------------
   AI SPHERE
--------------------------------------------------------- */

.ai-sphere {
    position: relative;

    width: 330px;
    height: 330px;

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

    transform-style: preserve-3d;

    animation:
        sphereFloat 6s ease-in-out infinite;
}

@keyframes sphereFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotateX(0deg)
            rotateY(0deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotateX(4deg)
            rotateY(5deg);
    }

}


/* ---------------------------------------------------------
   SPHERE GLOW
--------------------------------------------------------- */

.sphere-glow {
    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(98, 119, 255, 0.34) 0%,
            rgba(107, 74, 224, 0.22) 32%,
            rgba(71, 79, 205, 0.09) 55%,
            transparent 75%
        );

    filter: blur(30px);

    animation:
        sphereGlowPulse 4s ease-in-out infinite;
}

@keyframes sphereGlowPulse {

    0%,
    100% {
        transform: scale(0.94);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

}


/* ---------------------------------------------------------
   SPHERE INNER BODY
--------------------------------------------------------- */

.sphere-inner {
    position: relative;

    width: 250px;
    height: 250px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(112, 139, 255, 0.35),
            transparent 32%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(133, 71, 229, 0.28),
            transparent 38%
        ),
        radial-gradient(
            circle,
            rgba(15, 23, 62, 0.96),
            rgba(4, 8, 26, 0.99)
        );

    border:
        1px solid rgba(159, 175, 255, 0.28);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.4),
        0 0 45px rgba(82, 104, 255, 0.16),
        inset 12px 12px 30px rgba(255, 255, 255, 0.035),
        inset -15px -15px 35px rgba(0, 0, 0, 0.4);

    overflow: hidden;

    transform-style: preserve-3d;
}

.sphere-inner::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 75px;

    top: 22px;
    left: 42px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    filter: blur(12px);

    transform:
        rotate(-25deg);

    pointer-events: none;
}


/* ---------------------------------------------------------
   SPHERE RINGS
--------------------------------------------------------- */

.sphere-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px solid;

    pointer-events: none;
}

.sphere-ring-one {
    width: 210px;
    height: 210px;

    border-color:
        rgba(113, 143, 255, 0.2);

    transform:
        rotateX(70deg)
        rotateY(15deg);

    animation:
        sphereRingOne 8s linear infinite;
}

.sphere-ring-two {
    width: 180px;
    height: 180px;

    border-color:
        rgba(172, 105, 255, 0.19);

    transform:
        rotateY(70deg)
        rotateX(12deg);

    animation:
        sphereRingTwo 6s linear infinite reverse;
}

.sphere-ring-three {
    width: 225px;
    height: 225px;

    border-color:
        rgba(86, 119, 255, 0.1);

    transform:
        rotateX(15deg)
        rotateY(55deg);

    animation:
        sphereRingThree 10s linear infinite;
}

@keyframes sphereRingOne {

    from {
        transform:
            rotateX(70deg)
            rotateY(15deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(70deg)
            rotateY(15deg)
            rotateZ(360deg);
    }

}

@keyframes sphereRingTwo {

    from {
        transform:
            rotateY(70deg)
            rotateX(12deg)
            rotateZ(360deg);
    }

    to {
        transform:
            rotateY(70deg)
            rotateX(12deg)
            rotateZ(0deg);
    }

}

@keyframes sphereRingThree {

    from {
        transform:
            rotateX(15deg)
            rotateY(55deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(15deg)
            rotateY(55deg)
            rotateZ(360deg);
    }

}


/* ---------------------------------------------------------
   SPHERE CENTER
--------------------------------------------------------- */

.sphere-center {
    position: relative;

    width: 94px;
    height: 94px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(65, 86, 207, 0.35),
            rgba(24, 31, 86, 0.15) 60%,
            transparent 72%
        );

    box-shadow:
        0 0 35px rgba(88, 111, 255, 0.22);

    z-index: 5;
}

.sphere-center::before {
    content: "";

    position: absolute;
    inset: -14px;

    border-radius: 50%;

    border:
        1px solid rgba(132, 151, 255, 0.14);

    animation:
        centerPulse 3s ease-in-out infinite;
}

@keyframes centerPulse {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.35;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.85;
    }

}

.sphere-logo {
    position: relative;

    width: 66px;
    height: 66px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 18px rgba(108, 132, 255, 0.45));

    z-index: 6;
}


/* ---------------------------------------------------------
   FLOATING INFORMATION CARDS
--------------------------------------------------------- */

.floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 205px;

    padding: 13px 15px;

    border:
        1px solid rgba(150, 165, 220, 0.14);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(16, 24, 55, 0.78),
            rgba(8, 13, 35, 0.7)
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);

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

    z-index: 10;

    animation:
        cardFloat 5s ease-in-out infinite;
}

.floating-card strong {
    display: block;

    margin-bottom: 3px;

    color: rgba(244, 247, 255, 0.9);

    font-size: 12px;
    font-weight: 800;
}

.floating-card > div > span {
    display: block;

    color: rgba(184, 196, 228, 0.48);

    font-size: 10px;
    font-weight: 500;
}

.floating-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 auto;

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

    border:
        1px solid rgba(133, 153, 255, 0.18);

    border-radius: 12px;

    background:
        rgba(93, 111, 236, 0.1);

    color:
        rgba(157, 175, 255, 0.9);
}

.floating-icon .material-symbols-rounded {
    font-size: 19px;
}

.floating-card-top {
    top: 105px;
    right: 8px;
}

.floating-card-bottom {
    left: 8px;
    bottom: 105px;

    animation-delay: -2.5s;
}

.online-dot {
    width: 7px;
    height: 7px;

    margin-left: auto;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #6dffb2;

    box-shadow:
        0 0 9px rgba(109, 255, 178, 0.75);

    animation:
        onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {

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

    50% {
        opacity: 0.45;
        transform: scale(0.7);
    }

}

@keyframes cardFloat {

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

    50% {
        transform: translateY(-10px);
    }

}


/* ---------------------------------------------------------
   VISUAL PARTICLES
--------------------------------------------------------- */

.visual-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(146, 164, 255, 0.75);

    box-shadow:
        0 0 12px rgba(118, 141, 255, 0.75);

    animation:
        particleFloat 5s ease-in-out infinite;
}

.particle-one {
    top: 17%;
    left: 20%;
}

.particle-two {
    top: 25%;
    right: 17%;

    width: 4px;
    height: 4px;

    animation-delay: -1.5s;
}

.particle-three {
    bottom: 20%;
    right: 23%;

    width: 6px;
    height: 6px;

    animation-delay: -3s;
}

.particle-four {
    bottom: 31%;
    left: 17%;

    width: 3px;
    height: 3px;

    animation-delay: -4s;
}

@keyframes particleFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: 0.4;
    }

    50% {
        transform:
            translate3d(0, -22px, 0)
            scale(1.4);

        opacity: 1;
    }

}

/* ---------------------------------------------------------
   HERO SCROLL INDICATOR
--------------------------------------------------------- */

.hero-scroll-indicator {
    position: absolute;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    color: rgba(180, 192, 225, 0.32);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.2em;

    animation:
        scrollIndicatorFloat 3s ease-in-out infinite;
}

.hero-scroll-indicator .material-symbols-rounded {
    font-size: 17px;

    color:
        rgba(140, 157, 235, 0.45);
}

@keyframes scrollIndicatorFloat {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);

        opacity: 0.65;
    }

    50% {
        transform:
            translateX(-50%)
            translateY(7px);

        opacity: 1;
    }

}


/* ---------------------------------------------------------
   HERO ACCESSIBILITY
--------------------------------------------------------- */
.hero-primary-button:focus-visible,
.hero-secondary-button:focus-visible {
    outline: 2px solid rgba(143, 163, 255, 0.8);
    outline-offset: 4px;
}


/* ---------------------------------------------------------
   HERO REDUCED MOTION
--------------------------------------------------------- */

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

    .hero-content,
    .hero-visual,
    .ai-sphere,
    .sphere-glow,
    .sphere-ring,
    .hero-orbit,
    .floating-card,
    .visual-particle,
    .hero-scroll-indicator,
    .eyebrow-dot,
    .hero-title-gradient {
        animation: none !important;
    }

}

/* ---------------------------------------------------------
   HERO TABLET
--------------------------------------------------------- */

@media (max-width: 1100px) {

    .hero-section {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.8fr);

        gap: 35px;
    }

    .hero-title {
        font-size: clamp(52px, 7vw, 78px);
    }

    .hero-visual {
        min-height: 540px;
    }

    .ai-sphere {
        width: 290px;
        height: 290px;
    }

    .sphere-inner {
        width: 220px;
        height: 220px;
    }

    .hero-orbit-one {
        width: 410px;
        height: 410px;
    }

    .hero-orbit-two {
        width: 350px;
        height: 350px;
    }

    .hero-orbit-three {
        width: 460px;
        height: 460px;
    }

    .floating-card-top {
        right: -5px;
    }

    .floating-card-bottom {
        left: -5px;
    }

}


/* ---------------------------------------------------------
   HERO MOBILE
--------------------------------------------------------- */
@media (max-width: 820px) {

    .hero-section {
        min-height: auto;

        padding:
            75px 22px
            95px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .hero-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-title {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;

        font-size:
            clamp(46px, 12vw, 70px);
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;

        font-size: 15px;
        line-height: 1.7;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-trust-row {
        justify-content: center;
    }

    .hero-visual {
        min-height: 500px;
    }

    .hero-scroll-indicator {
        display: none;
    }

}


/* ---------------------------------------------------------
   HERO SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 520px) {
.hero-section {
        padding:
            55px 17px
            75px;
    }

    .hero-title {
        font-size:
            clamp(42px, 13vw, 58px);

        letter-spacing: -0.055em;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .hero-primary-button,
    .hero-secondary-button {
        width: 100%;
    }

    .hero-trust-row {
        gap: 10px;

        font-size: 9px;
    }

    .trust-separator {
        width: 3px;
        height: 3px;
    }

    .hero-visual {
        min-height: 430px;
    }

    .ai-sphere {
        width: 250px;
        height: 250px;
    }

    .sphere-inner {
        width: 190px;
        height: 190px;
    }

    .sphere-ring-one {
        width: 160px;
        height: 160px;
    }

    .sphere-ring-two {
        width: 145px;
        height: 145px;
    }

    .sphere-ring-three {
        width: 175px;
        height: 175px;
    }

    .sphere-center {
        width: 75px;
        height: 75px;
    }

    .sphere-logo {
        width: 52px;
        height: 52px;
    }

    .hero-orbit-one {
        width: 330px;
        height: 330px;
    }

    .hero-orbit-two {
        width: 285px;
        height: 285px;
    }

    .hero-orbit-three {
        width: 370px;
        height: 370px;
    }

    .floating-card {
        min-width: 170px;
        padding: 10px 11px;
        gap: 9px;
    }

    .floating-card-top {
        top: 70px;
        right: -2px;
    }

    .floating-card-bottom {
        left: -2px;
        bottom: 70px;
    }

    .floating-card strong {
        font-size: 10px;
    }

    .floating-card > div > span {
        font-size: 8px;
    }

    .floating-icon {
        width: 33px;
        height: 33px;
    }

    .floating-icon .material-symbols-rounded {
        font-size: 16px;
    }

}

/* =========================================================
   PART 5 — ABOUT ECHOCALL AI
   ========================================================= */


/* ---------------------------------------------------------
   ABOUT SECTION
--------------------------------------------------------- */

.about-section {
    position: relative;

    padding: 150px 6vw;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(20, 31, 78, 0.08),
            transparent
        );

    z-index: 2;
}

.about-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: 10%;
    left: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(72, 91, 210, 0.1),
            transparent 70%
        );

    filter: blur(50px);

    pointer-events: none;
}

.about-section::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -250px;
    bottom: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(121, 68, 214, 0.09),
            transparent 70%
        );

    filter: blur(50px);

    pointer-events: none;
}


/* ---------------------------------------------------------
   SECTION CONTAINER
--------------------------------------------------------- */

.section-container {
    position: relative;

    width: 100%;
    max-width: 1350px;

    margin: 0 auto;

    z-index: 3;
}


/* ---------------------------------------------------------
   SECTION HEADING
--------------------------------------------------------- */

.section-heading {
    max-width: 780px;

    margin-bottom: 65px;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color:
        rgba(153, 169, 255, 0.68);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.section-label > span {
    width: 24px;
    height: 1px;

    display: block;

    background:
        linear-gradient(
            90deg,
            rgba(108, 130, 255, 0.9),
            transparent
        );
}

.section-heading h2 {
    max-width: 760px;

    margin: 0;

    color: #f3f6ff;

    font-size:
        clamp(40px, 5vw, 70px);

    line-height: 1.04;

    letter-spacing: -0.055em;

    font-weight: 850;
}

.section-heading h2 span {
    background:
        linear-gradient(
            110deg,
            #a9baff,
            #7c8dff,
            #b784ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

.section-heading p {
    max-width: 650px;

    margin: 25px 0 0;

    color:
        rgba(198, 207, 232, 0.57);

    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   ABOUT GRID
--------------------------------------------------------- */

.about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);

    gap: 22px;

    align-items: stretch;
}


/* ---------------------------------------------------------
   MAIN ABOUT CARD
--------------------------------------------------------- */

.about-main-card {
    position: relative;

    min-height: 470px;

    display: flex;
    flex-direction: column;

    padding: 42px;

    border:
        1px solid rgba(145, 161, 225, 0.13);

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(87, 108, 239, 0.13),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(20, 30, 68, 0.8),
            rgba(8, 13, 35, 0.82)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.about-main-card::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -130px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(101, 123, 255, 0.18),
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;
}

.about-main-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(139, 155, 255, 0.25);

    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.3),
        0 0 45px rgba(75, 91, 210, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
}


/* ---------------------------------------------------------
   ABOUT CARD NUMBER
--------------------------------------------------------- */

.about-card-number {
    position: absolute;

    top: 32px;
    right: 35px;

    color:
        rgba(150, 164, 220, 0.22);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.12em;
}


/* ---------------------------------------------------------
   ABOUT LARGE ICON
--------------------------------------------------------- */

.about-large-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom: 55px;

    border:
        1px solid rgba(132, 151, 255, 0.17);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(82, 104, 220, 0.17),
            rgba(105, 64, 194, 0.08)
        );

    color:
        rgba(161, 177, 255, 0.95);

    font-size: 30px;

    box-shadow:
        0 15px 35px rgba(55, 72, 170, 0.12);
}


/* ---------------------------------------------------------
   ABOUT MAIN CARD TEXT
--------------------------------------------------------- */

.about-main-card h3 {
    margin: 0;

    color: #f2f5ff;

    font-size:
        clamp(28px, 3vw, 40px);

    line-height: 1.08;

    letter-spacing: -0.04em;

    font-weight: 800;
}

.about-main-card p {
    max-width: 570px;

    margin: 18px 0 0;

    color:
        rgba(195, 204, 230, 0.58);

    font-size: 15px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   ABOUT CARD LINE
--------------------------------------------------------- */

.about-card-line {
    width: 100%;
    height: 1px;

    margin-top: auto;
    margin-bottom: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(132, 150, 255, 0.2),
            transparent
        );
}


/* ---------------------------------------------------------
   ABOUT CARD FOOTER
--------------------------------------------------------- */

.about-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color:
        rgba(151, 165, 215, 0.42);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.2em;
}

.about-card-footer .material-symbols-rounded {
    font-size: 18px;

    color:
        rgba(145, 161, 255, 0.65);

    transition:
        transform 0.3s ease;
}

.about-main-card:hover
.about-card-footer
.material-symbols-rounded {
    transform:
        translate(4px, -4px);
}


/* ---------------------------------------------------------
   ABOUT SIDE STACK
--------------------------------------------------------- */

.about-side-stack {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* ---------------------------------------------------------
   ABOUT SMALL CARD
--------------------------------------------------------- */

.about-small-card {
    position: relative;

    flex: 1;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 25px;

    border:
        1px solid rgba(145, 161, 225, 0.11);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 27, 59, 0.7),
            rgba(8, 13, 32, 0.72)
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.about-small-card::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    top: -60px;
    right: -40px;

    border-radius: 50%;

    background:
        rgba(93, 111, 240, 0.08);

    filter: blur(20px);
}

.about-small-card:hover {
    transform:
        translateX(6px);

    border-color:
        rgba(140, 156, 255, 0.23);

    background:
        linear-gradient(
            145deg,
            rgba(25, 36, 77, 0.76),
            rgba(10, 15, 38, 0.76)
        );
}


/* ---------------------------------------------------------
   SMALL CARD ICON
--------------------------------------------------------- */

.small-card-icon {
    position: relative;

    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border:
        1px solid rgba(133, 153, 255, 0.14);

    border-radius: 15px;

    background:
        rgba(90, 109, 230, 0.09);

    color:
        rgba(153, 171, 255, 0.82);

    z-index: 2;
}

.small-card-icon .material-symbols-rounded {
    font-size: 22px;
}


/* ---------------------------------------------------------
   SMALL CARD CONTENT
--------------------------------------------------------- */

.about-small-card h3 {
    position: relative;

    margin: 0 0 6px;

    color:
        rgba(239, 243, 255, 0.9);

    font-size: 15px;
    font-weight: 800;

    letter-spacing: -0.015em;

    z-index: 2;
}

.about-small-card p {
    position: relative;

    margin: 0;

    color:
        rgba(184, 195, 224, 0.48);

    font-size: 12px;
    line-height: 1.5;

    z-index: 2;
}


/* ---------------------------------------------------------
   ABOUT MOBILE / TABLET
--------------------------------------------------------- */

@media (max-width: 950px) {

    .about-section {
        padding:
            120px 5vw;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-main-card {
        min-height: 420px;
    }

    .about-side-stack {
        display: grid;

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

        gap: 14px;
    }

    .about-small-card {
        flex-direction: column;

        align-items: flex-start;

        min-height: 175px;

        padding: 22px;
    }

}


@media (max-width: 700px) {

    .about-section {
        padding:
            95px 22px;
    }

    .section-heading {
        margin-bottom: 45px;
    }

    .section-heading h2 {
        font-size:
            clamp(36px, 10vw, 52px);
    }

    .section-heading p {
        font-size: 14px;
    }

    .about-main-card {
        min-height: 390px;

        padding: 30px;

        border-radius: 25px;
    }

    .about-card-number {
        top: 25px;
        right: 27px;
    }

    .about-large-icon {
        width: 55px;
        height: 55px;

        margin-bottom: 45px;

        border-radius: 16px;

        font-size: 26px;
    }

    .about-main-card h3 {
        font-size: 28px;
    }

    .about-main-card p {
        font-size: 14px;
    }

    .about-side-stack {
        display: flex;
        gap: 12px;
    }

    .about-small-card {
        min-height: auto;

        flex-direction: row;
        align-items: center;

        padding: 19px;

        border-radius: 20px;
    }

}


@media (max-width: 430px) {

    .about-section {
        padding:
            80px 17px;
    }

    .about-main-card {
        min-height: 370px;

        padding: 25px;

        border-radius: 22px;
    }

    .about-main-card h3 {
        font-size: 25px;
    }

    .about-main-card p {
        font-size: 13px;
        line-height: 1.7;
    }

    .about-small-card {
        gap: 13px;

        padding: 16px;
    }

    .small-card-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;

        border-radius: 12px;
    }

    .small-card-icon .material-symbols-rounded {
        font-size: 19px;
    }

    .about-small-card h3 {
        font-size: 13px;
    }

    .about-small-card p {
        font-size: 10px;
    }

}

/* =========================================================
   PART 6 — FEATURES SECTION
   ========================================================= */


/* ---------------------------------------------------------
   FEATURES SECTION
--------------------------------------------------------- */

.features-section {
    position: relative;

    padding: 150px 6vw;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 22, 0.15),
            rgba(17, 25, 61, 0.08),
            rgba(5, 8, 22, 0.2)
        );

    z-index: 2;
}

.features-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: 20%;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(71, 91, 211, 0.07),
            transparent 70%
        );

    filter: blur(60px);

    pointer-events: none;
}


/* ---------------------------------------------------------
   FEATURES HEADING ROW
--------------------------------------------------------- */

.features-heading-row {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.65fr);

    gap: 70px;

    align-items: end;

    margin-bottom: 65px;
}

.features-heading-row h2 {
    margin: 0;

    color: #f3f6ff;

    font-size:
        clamp(42px, 5vw, 70px);

    line-height: 1.02;

    letter-spacing: -0.06em;

    font-weight: 850;
}

.features-heading-row h2 span {
    background:
        linear-gradient(
            110deg,
            #a8baff,
            #7b8dff,
            #bd83ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

.features-heading-row > p {
    max-width: 460px;

    margin: 0 0 4px;

    color:
        rgba(194, 204, 230, 0.55);

    font-size: 15px;

    line-height: 1.8;
}


/* ---------------------------------------------------------
   FEATURES GRID
--------------------------------------------------------- */

.features-grid {
    position: relative;

    display: grid;

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

    gap: 18px;
}


/* ---------------------------------------------------------
   FEATURE CARD
--------------------------------------------------------- */

.feature-card {
    position: relative;

    min-height: 340px;

    display: flex;
    flex-direction: column;

    padding: 34px;

    border:
        1px solid rgba(145, 161, 225, 0.11);

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 27, 60, 0.74),
            rgba(7, 12, 31, 0.82)
        );

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.feature-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(93, 114, 243, 0.14),
            transparent 70%
        );

    filter: blur(18px);

    pointer-events: none;

    transition:
        transform 0.5s ease;
}

.feature-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(117, 138, 255, 0.25),
            transparent
        );

    opacity: 0;

    transition:
        opacity 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(139, 156, 255, 0.23);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.27),
        0 0 40px rgba(71, 91, 211, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.feature-card:hover::before {
    transform: scale(1.25);
}

.feature-card:hover::after {
    opacity: 1;
}


/* ---------------------------------------------------------
   LARGE FEATURE CARD
--------------------------------------------------------- */

.feature-card-large {
    min-height: 390px;

    grid-row: span 1;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(70, 93, 220, 0.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(22, 32, 72, 0.82),
            rgba(7, 12, 32, 0.85)
        );
}


/* ---------------------------------------------------------
   FEATURE NUMBER
--------------------------------------------------------- */

.feature-number {
    position: absolute;

    top: 30px;
    right: 32px;

    color:
        rgba(153, 166, 220, 0.2);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.16em;
}


/* ---------------------------------------------------------
   FEATURE ICON
--------------------------------------------------------- */

.feature-icon {
    width: 57px;
    height: 57px;

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

    margin-bottom: 50px;

    border:
        1px solid rgba(133, 153, 255, 0.16);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(76, 99, 219, 0.16),
            rgba(117, 65, 204, 0.08)
        );

    color:
        rgba(157, 176, 255, 0.9);

    box-shadow:
        0 14px 35px rgba(54, 70, 167, 0.1);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.feature-card:hover .feature-icon {
    transform:
        translateY(-3px)
        rotate(-3deg);

    border-color:
        rgba(155, 172, 255, 0.3);

    box-shadow:
        0 17px 40px rgba(61, 78, 190, 0.17);
}

.feature-icon .material-symbols-rounded {
    font-size: 27px;
}


/* ---------------------------------------------------------
   FEATURE CONTENT
--------------------------------------------------------- */

.feature-card h3 {
    margin: 0;

    color:
        rgba(241, 245, 255, 0.94);

    font-size: 25px;

    line-height: 1.1;

    letter-spacing: -0.035em;

    font-weight: 800;
}

.feature-card p {
    max-width: 520px;

    margin: 14px 0 0;

    color:
        rgba(190, 201, 227, 0.52);

    font-size: 13px;

    line-height: 1.75;
}


/* ---------------------------------------------------------
   FEATURE BOTTOM
--------------------------------------------------------- */

.feature-bottom {
    margin-top: auto;

    padding-top: 25px;

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

    border-top:
        1px solid rgba(143, 158, 215, 0.08);

    color:
        rgba(150, 164, 214, 0.42);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.2em;
}

.feature-bottom .material-symbols-rounded {
    font-size: 18px;

    color:
        rgba(143, 160, 248, 0.62);

    transition:
        transform 0.3s ease;
}

.feature-card:hover
.feature-bottom
.material-symbols-rounded {
    transform:
        translate(4px, -4px);
}


/* ---------------------------------------------------------
   FEATURE CARD ACCENTS
--------------------------------------------------------- */

.feature-card:nth-child(1) .feature-icon {
    color:
        rgba(134, 158, 255, 0.95);
}

.feature-card:nth-child(2) .feature-icon {
    color:
        rgba(174, 139, 255, 0.92);
}

.feature-card:nth-child(3) .feature-icon {
    color:
        rgba(117, 184, 255, 0.92);
}

.feature-card:nth-child(4) .feature-icon {
    color:
        rgba(141, 224, 255, 0.86);
}


/* ---------------------------------------------------------
   FEATURE CARD HOVER LIGHT
--------------------------------------------------------- */

.feature-card:hover h3 {
    color: #ffffff;
}

.feature-card:hover p {
    color:
        rgba(203, 212, 237, 0.62);
}


/* ---------------------------------------------------------
   FEATURES TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

    .features-section {
        padding:
            120px 5vw;
    }

    .features-heading-row {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 50px;
    }

    .features-heading-row > p {
        max-width: 600px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card,
    .feature-card-large {
        min-height: 330px;
    }

}


/* ---------------------------------------------------------
   FEATURES MOBILE
--------------------------------------------------------- */

@media (max-width: 650px) {

    .features-section {
        padding:
            95px 22px;
    }

    .features-heading-row {
        gap: 20px;
    }

    .features-heading-row h2 {
        font-size:
            clamp(38px, 10vw, 54px);
    }

    .features-heading-row > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .feature-card,
    .feature-card-large {
        min-height: 320px;

        padding: 27px;

        border-radius: 23px;
    }

    .feature-icon {
        width: 53px;
        height: 53px;

        margin-bottom: 42px;

        border-radius: 15px;
    }

    .feature-icon .material-symbols-rounded {
        font-size: 24px;
    }

    .feature-card h3 {
        font-size: 22px;
    }

    .feature-card p {
        font-size: 12px;
    }

}


/* ---------------------------------------------------------
   FEATURES SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 430px) {

    .features-section {
        padding:
            80px 17px;
    }

    .feature-card,
    .feature-card-large {
        min-height: 300px;

        padding: 23px;

        border-radius: 20px;
    }

    .feature-number {
        top: 23px;
        right: 24px;
    }

    .feature-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 38px;

        border-radius: 14px;
    }

    .feature-icon .material-symbols-rounded {
        font-size: 22px;
    }

    .feature-card h3 {
        font-size: 20px;
    }

    .feature-card p {
        font-size: 11px;
        line-height: 1.7;
    }

}

/* =========================================================
   PART 7 — HOW IT WORKS
   ========================================================= */


/* ---------------------------------------------------------
   HOW SECTION
--------------------------------------------------------- */

.how-section {
    position: relative;

    padding: 150px 6vw;

    overflow: hidden;

    z-index: 2;
}

.how-section::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(72, 91, 214, 0.075),
            transparent 68%
        );

    filter: blur(65px);

    pointer-events: none;
}


/* ---------------------------------------------------------
   CENTERED SECTION HEADING
--------------------------------------------------------- */

.section-heading.centered {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.section-heading.centered .section-label {
    justify-content: center;
}

.section-heading.centered .section-label > span {
    width: 20px;
}

.section-heading.centered p {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   STEPS CONTAINER
--------------------------------------------------------- */

.steps-container {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        55px
        minmax(0, 1fr)
        55px
        minmax(0, 1fr);

    align-items: center;

    margin-top: 75px;
}


/* ---------------------------------------------------------
   STEP CARD
--------------------------------------------------------- */

.step-card {
    position: relative;

    min-height: 285px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    border:
        1px solid rgba(145, 161, 225, 0.11);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(19, 28, 62, 0.72),
            rgba(7, 12, 31, 0.8)
        );

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.step-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(91, 112, 242, 0.13),
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;

    transition:
        transform 0.5s ease;
}

.step-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(118, 139, 255, 0.28),
            transparent
        );

    opacity: 0;

    transition:
        opacity 0.4s ease;
}

.step-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(140, 157, 255, 0.24);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.27),
        0 0 45px rgba(69, 89, 209, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.step-card:hover::before {
    transform: scale(1.25);
}

.step-card:hover::after {
    opacity: 1;
}


/* ---------------------------------------------------------
   STEP TOP
--------------------------------------------------------- */

.step-top {
    position: relative;

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

    margin-bottom: 58px;

    z-index: 2;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 43px;
    height: 30px;

    padding: 0 10px;

    border:
        1px solid rgba(134, 153, 247, 0.14);

    border-radius: 999px;

    background:
        rgba(85, 105, 222, 0.08);

    color:
        rgba(157, 174, 255, 0.66);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.step-top .material-symbols-rounded {
    color:
        rgba(143, 161, 248, 0.65);

    font-size: 22px;

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}

.step-card:hover
.step-top
.material-symbols-rounded {
    color:
        rgba(174, 189, 255, 0.95);

    transform:
        scale(1.1)
        rotate(-4deg);
}


/* ---------------------------------------------------------
   STEP CONTENT
--------------------------------------------------------- */

.step-card h3 {
    position: relative;

    margin: 0;

    color:
        rgba(242, 246, 255, 0.94);

    font-size: 23px;

    line-height: 1.1;

    letter-spacing: -0.035em;

    font-weight: 800;

    z-index: 2;
}

.step-card p {
    position: relative;

    max-width: 320px;

    margin: 14px 0 0;

    color:
        rgba(190, 201, 228, 0.52);

    font-size: 13px;

    line-height: 1.75;

    z-index: 2;
}


/* ---------------------------------------------------------
   STEP CONNECTORS
--------------------------------------------------------- */

.step-connector {
    position: relative;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(106, 128, 245, 0.08),
            rgba(122, 142, 255, 0.4),
            rgba(106, 128, 245, 0.08)
        );
}

.step-connector::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        #7187ff;

    box-shadow:
        0 0 12px rgba(113, 135, 255, 0.65),
        0 0 25px rgba(113, 135, 255, 0.25);

    animation:
        connectorPulse 2.5s ease-in-out infinite;
}

.step-connector::after {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 0;
    height: 1px;

    transform: translateY(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(150, 168, 255, 0.9)
        );

    animation:
        connectorFlow 3s ease-in-out infinite;
}

@keyframes connectorPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(0.8);

        opacity: 0.55;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.2);

        opacity: 1;
    }

}

@keyframes connectorFlow {

    0% {
        width: 0;
        opacity: 0;
    }

    30% {
        width: 80%;
        opacity: 1;
    }

    60% {
        width: 100%;
        opacity: 0.25;
    }

    100% {
        width: 0;
        opacity: 0;
    }

}


/* ---------------------------------------------------------
   STEP INDIVIDUAL ACCENTS
--------------------------------------------------------- */

.step-card:nth-child(1) .step-number {
    color:
        rgba(141, 165, 255, 0.78);
}

.step-card:nth-child(3) .step-number {
    color:
        rgba(174, 142, 255, 0.78);
}

.step-card:nth-child(5) .step-number {
    color:
        rgba(126, 190, 255, 0.78);
}


/* ---------------------------------------------------------
   HOW IT WORKS — TABLET
--------------------------------------------------------- */

@media (max-width: 950px) {

    .how-section {
        padding:
            120px 5vw;
    }

    .steps-container {
        grid-template-columns:
            1fr;

        gap: 14px;

        margin-top: 55px;
    }

    .step-card {
        min-height: 240px;
    }

    .step-connector {
        width: 1px;
        height: 35px;

        margin: 0 auto;

        background:
            linear-gradient(
                180deg,
                rgba(106, 128, 245, 0.08),
                rgba(122, 142, 255, 0.4),
                rgba(106, 128, 245, 0.08)
            );
    }

    .step-connector::before {
        left: 50%;
        top: 50%;
    }

    .step-connector::after {
        left: 50%;
        top: 0;

        width: 1px;
        height: 0;

        transform:
            translateX(-50%);

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(150, 168, 255, 0.9)
            );

        animation:
            connectorFlowVertical 3s ease-in-out infinite;
    }

    @keyframes connectorFlowVertical {

        0% {
            height: 0;
            opacity: 0;
        }

        30% {
            height: 80%;
            opacity: 1;
        }

        60% {
            height: 100%;
            opacity: 0.25;
        }

        100% {
            height: 0;
            opacity: 0;
        }

    }

}


/* ---------------------------------------------------------
   HOW IT WORKS — MOBILE
--------------------------------------------------------- */

@media (max-width: 650px) {

    .how-section {
        padding:
            95px 22px;
    }

    .section-heading.centered h2 {
        font-size:
            clamp(36px, 10vw, 52px);
    }

    .section-heading.centered p {
        font-size: 14px;
        line-height: 1.7;
    }

    .steps-container {
        margin-top: 45px;
    }

    .step-card {
        min-height: 220px;

        padding: 25px;

        border-radius: 22px;
    }

    .step-top {
        margin-bottom: 45px;
    }

    .step-card h3 {
        font-size: 21px;
    }

    .step-card p {
        font-size: 12px;
    }

}


/* ---------------------------------------------------------
   HOW IT WORKS — SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 430px) {

    .how-section {
        padding:
            80px 17px;
    }

    .step-card {
        min-height: 205px;

        padding: 22px;

        border-radius: 20px;
    }

    .step-top {
        margin-bottom: 38px;
    }

    .step-number {
        min-width: 39px;
        height: 27px;

        font-size: 9px;
    }

    .step-top .material-symbols-rounded {
        font-size: 20px;
    }

    .step-card h3 {
        font-size: 19px;
    }

    .step-card p {
        font-size: 11px;
        line-height: 1.7;
    }

}

/* =========================================================
   PART 8 — CEO / CREATOR SECTION
   ========================================================= */

.creator-section {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
}

.creator-card {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 70px 80px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 36px;
    background:
        linear-gradient(
            135deg,
            rgba(20, 30, 70, 0.72),
            rgba(8, 12, 30, 0.88)
        );
    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    isolation: isolate;
}

/* ---------------------------------------------------------
   Creator background glow
   --------------------------------------------------------- */

.creator-card::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -150px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, 0.22) 0%,
        rgba(99, 102, 241, 0.10) 35%,
        transparent 72%
    );
    filter: blur(20px);
    pointer-events: none;
    z-index: -2;
}

.creator-card::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -180px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.15) 0%,
        transparent 70%
    );
    filter: blur(30px);
    pointer-events: none;
    z-index: -2;
}

.creator-glow {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(37, 99, 235, 0.08),
        transparent 70%
    );
    filter: blur(25px);
    pointer-events: none;
}

/* ---------------------------------------------------------
   Creator content
   --------------------------------------------------------- */

.creator-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.creator-content .section-label {
    margin-bottom: 22px;
}

.creator-content h2 {
    margin: 0 0 24px;
    max-width: 650px;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 800;
    color: #ffffff;
}

.creator-content p {
    max-width: 600px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.8;
    font-weight: 400;
    color: rgba(226, 232, 240, 0.72);
}

.creator-content strong {
    color: #ffffff;
    font-weight: 700;
}

/* ---------------------------------------------------------
   Creator role badge
   --------------------------------------------------------- */

.creator-role {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 12px 18px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 30px rgba(0, 0, 0, 0.15);
    color: rgba(219, 234, 254, 0.9);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.creator-role .material-symbols-rounded {
    font-size: 20px;
    color: #60a5fa;
}

/* ---------------------------------------------------------
   Creator visual / initials
   --------------------------------------------------------- */

.creator-mark {
    position: relative;
    width: 330px;
    height: 330px;
    flex: 0 0 330px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer rotating orbit */

.creator-orbit {
    position: absolute;
    width: 290px;
    height: 290px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 50%;
    transform: rotate(-18deg);
    animation: creatorOrbitRotate 18s linear infinite;
}

.creator-orbit::before,
.creator-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.creator-orbit::before {
    width: 10px;
    height: 10px;
    top: 22px;
    left: 48px;
    background: #60a5fa;
    box-shadow:
        0 0 12px rgba(96, 165, 250, 0.9),
        0 0 30px rgba(96, 165, 250, 0.5);
}

.creator-orbit::after {
    width: 7px;
    height: 7px;
    right: 38px;
    bottom: 42px;
    background: #a78bfa;
    box-shadow:
        0 0 12px rgba(167, 139, 250, 0.9),
        0 0 25px rgba(167, 139, 250, 0.45);
}

/* Second orbit layer */

.creator-mark::before {
    content: "";
    position: absolute;
    width: 225px;
    height: 225px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    transform: rotate(30deg);
    animation: creatorOrbitReverse 14s linear infinite;
}

/* ---------------------------------------------------------
   Creator circle
   --------------------------------------------------------- */

.creator-circle {
    position: relative;
    z-index: 3;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(96, 165, 250, 0.95),
            rgba(37, 99, 235, 0.72) 38%,
            rgba(30, 41, 90, 0.95) 75%
        );
    border: 1px solid rgba(191, 219, 254, 0.25);
    box-shadow:
        0 0 0 12px rgba(59, 130, 246, 0.035),
        0 0 0 28px rgba(59, 130, 246, 0.025),
        0 25px 70px rgba(37, 99, 235, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: creatorFloat 5s ease-in-out infinite;
}

.creator-circle::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.creator-circle::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 35px;
    width: 70px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    filter: blur(12px);
    transform: rotate(-20deg);
}

.creator-circle span {
    position: relative;
    z-index: 2;
    font-size: 3.4rem;
    font-weight: 900;
    letter-spacing: -0.08em;
    color: #ffffff;
    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------------------
   Creator animations
   --------------------------------------------------------- */

@keyframes creatorFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.015);
    }
}

@keyframes creatorOrbitRotate {
    from {
        transform: rotate(-18deg);
    }

    to {
        transform: rotate(342deg);
    }
}

@keyframes creatorOrbitReverse {
    from {
        transform: rotate(30deg);
    }

    to {
        transform: rotate(-330deg);
    }
}

/* ---------------------------------------------------------
   Creator hover interaction
   --------------------------------------------------------- */

.creator-card {
    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}

.creator-card:hover {
    transform: translateY(-5px);
    border-color: rgba(96, 165, 250, 0.18);
    box-shadow:
        0 40px 110px rgba(0, 0, 0, 0.42),
        0 0 80px rgba(37, 99, 235, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.creator-card:hover .creator-circle {
    box-shadow:
        0 0 0 12px rgba(59, 130, 246, 0.045),
        0 0 0 28px rgba(59, 130, 246, 0.03),
        0 30px 90px rgba(37, 99, 235, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) {
    .creator-section {
        padding: 100px 0;
    }

    .creator-card {
        min-height: auto;
        padding: 60px 50px;
        gap: 40px;
    }

    .creator-mark {
        width: 260px;
        height: 260px;
        flex-basis: 260px;
    }

    .creator-orbit {
        width: 230px;
        height: 230px;
    }

    .creator-mark::before {
        width: 180px;
        height: 180px;
    }

    .creator-circle {
        width: 155px;
        height: 155px;
    }

    .creator-circle span {
        font-size: 2.8rem;
    }

    .creator-content h2 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .creator-content p {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {
    .creator-section {
        padding: 80px 0;
    }

    .creator-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 45px 28px;
        border-radius: 28px;
        gap: 45px;
    }

    .creator-content {
        max-width: 100%;
    }

    .creator-content h2 {
        font-size: 2.15rem;
        line-height: 1.08;
        letter-spacing: -0.04em;
    }

    .creator-content p {
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .creator-role {
        max-width: 100%;
        font-size: 0.74rem;
        line-height: 1.4;
    }

    .creator-mark {
        align-self: center;
        width: 250px;
        height: 250px;
        flex-basis: 250px;
    }

    .creator-orbit {
        width: 220px;
        height: 220px;
    }

    .creator-mark::before {
        width: 175px;
        height: 175px;
    }

    .creator-circle {
        width: 145px;
        height: 145px;
    }

    .creator-circle span {
        font-size: 2.6rem;
    }
}

/* ---------------------------------------------------------
   Small phones
   --------------------------------------------------------- */

@media (max-width: 400px) {
    .creator-card {
        padding: 38px 22px;
    }

    .creator-content h2 {
        font-size: 1.9rem;
    }

    .creator-role {
        padding: 10px 14px;
    }

    .creator-mark {
        width: 220px;
        height: 220px;
    }

    .creator-orbit {
        width: 195px;
        height: 195px;
    }

    .creator-mark::before {
        width: 155px;
        height: 155px;
    }

    .creator-circle {
        width: 125px;
        height: 125px;
    }

    .creator-circle span {
        font-size: 2.25rem;
    }
}

/* ---------------------------------------------------------
   Reduced motion accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .creator-circle,
    .creator-orbit,
    .creator-mark::before {
        animation: none;
    }

    .creator-card {
        transition: none;
    }
}

/* =========================================================
   PART 9 — FINAL CALL TO ACTION
   ========================================================= */

.cta-section {
    position: relative;
    padding: 140px 0 130px;
    overflow: hidden;
}

.cta-container {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(37, 99, 235, 0.16),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(15, 23, 55, 0.92),
            rgba(5, 8, 22, 0.96)
        );
    box-shadow:
        0 35px 120px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    isolation: isolate;
}

/* ---------------------------------------------------------
   CTA grid
   --------------------------------------------------------- */

.cta-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
    mask-image: radial-gradient(
        circle at center,
        black,
        transparent 75%
    );
    pointer-events: none;
    z-index: -3;
}

/* ---------------------------------------------------------
   CTA central glow
   --------------------------------------------------------- */

.cta-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 420px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, 0.12),
        rgba(99, 102, 241, 0.05) 40%,
        transparent 72%
    );
    filter: blur(25px);
    pointer-events: none;
    z-index: -2;
}

/* ---------------------------------------------------------
   CTA floating orbs
   --------------------------------------------------------- */

.cta-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

.cta-orb-one {
    width: 220px;
    height: 220px;
    top: -90px;
    left: -70px;
    border: 1px solid rgba(96, 165, 250, 0.10);
    background: radial-gradient(
        circle,
        rgba(37, 99, 235, 0.12),
        transparent 70%
    );
    animation: ctaOrbFloatOne 8s ease-in-out infinite;
}

.cta-orb-two {
    width: 280px;
    height: 280px;
    right: -120px;
    bottom: -130px;
    border: 1px solid rgba(167, 139, 250, 0.10);
    background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.12),
        transparent 70%
    );
    animation: ctaOrbFloatTwo 10s ease-in-out infinite;
}

/* ---------------------------------------------------------
   CTA content
   --------------------------------------------------------- */

.cta-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    text-align: center;
}

.cta-content .section-label {
    justify-content: center;
    margin-bottom: 24px;
}

.cta-content h2 {
    margin: 0;
    font-size: clamp(2.7rem, 6vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 900;
    color: #ffffff;
}

.cta-content h2 span {
    display: inline-block;
    background: linear-gradient(
        100deg,
        #60a5fa 0%,
        #818cf8 45%,
        #a78bfa 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cta-content p {
    max-width: 600px;
    margin: 28px auto 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(226, 232, 240, 0.68);
}

/* ---------------------------------------------------------
   CTA button
   --------------------------------------------------------- */

.cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 220px;
    margin-top: 38px;
    padding: 17px 25px;
    border: 1px solid rgba(147, 197, 253, 0.30);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow:
        0 15px 45px rgba(37, 99, 235, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.cta-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}

.cta-button:hover {
    transform: translateY(-4px);
    border-color: rgba(191, 219, 254, 0.45);
    box-shadow:
        0 22px 60px rgba(37, 99, 235, 0.40),
        0 0 35px rgba(79, 70, 229, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cta-button:hover::before {
    left: 140%;
}

.cta-button:active {
    transform: translateY(-1px) scale(0.98);
}

.cta-button .material-symbols-rounded {
    font-size: 20px;
}

.cta-button .material-symbols-rounded:last-child {
    transition: transform 0.3s ease;
}

.cta-button:hover .material-symbols-rounded:last-child {
    transform: translateX(4px);
}

/* ---------------------------------------------------------
   CTA animations
   --------------------------------------------------------- */

@keyframes ctaOrbFloatOne {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(25px, 35px) scale(1.08);
    }
}

@keyframes ctaOrbFloatTwo {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, -25px) scale(1.06);
    }
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) {
    .cta-section {
        padding: 100px 0 90px;
    }

    .cta-container {
        min-height: 450px;
        padding: 70px 35px;
        border-radius: 32px;
    }

    .cta-content h2 {
        font-size: clamp(2.6rem, 7vw, 4.5rem);
    }

    .cta-content p {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {
    .cta-section {
        padding: 80px 0;
    }

    .cta-container {
        min-height: 430px;
        padding: 60px 25px;
        border-radius: 28px;
    }

    .cta-content h2 {
        font-size: 2.7rem;
        line-height: 1;
        letter-spacing: -0.05em;
    }

    .cta-content p {
        margin-top: 22px;
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .cta-button {
        width: 100%;
        max-width: 300px;
        margin-top: 30px;
        padding: 16px 20px;
    }

    .cta-orb-one {
        width: 160px;
        height: 160px;
    }

    .cta-orb-two {
        width: 200px;
        height: 200px;
    }
}

/* ---------------------------------------------------------
   Small phones
   --------------------------------------------------------- */

@media (max-width: 400px) {
    .cta-container {
        padding: 50px 20px;
    }

    .cta-content h2 {
        font-size: 2.3rem;
    }

    .cta-content p {
        font-size: 0.9rem;
    }

    .cta-button {
        font-size: 0.88rem;
    }
}

/* ---------------------------------------------------------
   Reduced motion accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cta-orb-one,
    .cta-orb-two {
        animation: none;
    }

    .cta-button {
        transition: none;
    }
}

/* =========================================================
   PART 10 — FOOTER
   ========================================================= */

.landing-footer {
    position: relative;
    padding: 55px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(3, 6, 18, 0.72);
    overflow: hidden;
}

.landing-footer::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    width: 600px;
    height: 300px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(37, 99, 235, 0.08),
        transparent 70%
    );
    filter: blur(25px);
    pointer-events: none;
}

/* ---------------------------------------------------------
   Footer container
   --------------------------------------------------------- */

.footer-container {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr auto;
    align-items: center;
    gap: 50px;
}

/* ---------------------------------------------------------
   Footer brand
   --------------------------------------------------------- */

.footer-brand {
    min-width: 0;
}

.footer-brand .brand {
    display: inline-flex;
}

.footer-brand p {
    max-width: 330px;
    margin: 16px 0 0;
    color: rgba(203, 213, 225, 0.55);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   Footer links
   --------------------------------------------------------- */

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.footer-links a {
    position: relative;
    color: rgba(226, 232, 240, 0.62);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1px;
    background: #60a5fa;
    transition: width 0.25s ease;
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.footer-links a:hover::after {
    width: 100%;
}

/* ---------------------------------------------------------
   Footer right
   --------------------------------------------------------- */

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    white-space: nowrap;
}

.footer-right span {
    color: rgba(148, 163, 184, 0.48);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.footer-right span:last-child {
    color: rgba(96, 165, 250, 0.55);
}

/* ---------------------------------------------------------
   Footer bottom line
   --------------------------------------------------------- */

.landing-footer::after {
    content: "";
    display: block;
    width: min(1180px, calc(100% - 48px));
    height: 1px;
    margin: 35px auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
}

/* ---------------------------------------------------------
   Footer brand logo sizing
   --------------------------------------------------------- */

.footer-brand .brand-logo-wrap {
    width: 38px;
    height: 38px;
}

.footer-brand .brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-brand .brand-name {
    font-size: 1rem;
}

.footer-brand .brand-ai {
    font-size: 1rem;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 950px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .footer-right {
        align-items: flex-end;
    }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 650px) {
    .landing-footer {
        padding: 45px 0 25px;
    }

    .footer-container {
        width: min(100% - 40px, 500px);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .footer-brand {
        width: 100%;
    }

    .footer-brand p {
        margin-top: 13px;
        font-size: 0.82rem;
    }

    .footer-links {
        width: 100%;
        justify-content: flex-start;
        gap: 18px 24px;
    }

    .footer-links a {
        font-size: 0.78rem;
    }

    .footer-right {
        width: 100%;
        align-items: flex-start;
        gap: 5px;
    }

    .landing-footer::after {
        width: calc(100% - 40px);
        margin-top: 30px;
    }
}

/* ---------------------------------------------------------
   Small phones
   --------------------------------------------------------- */

@media (max-width: 400px) {
    .footer-container {
        width: calc(100% - 32px);
    }

    .footer-links {
        gap: 16px 20px;
    }

    .footer-brand p {
        max-width: 280px;
    }

    .landing-footer::after {
        width: calc(100% - 32px);
    }
}

/* ---------------------------------------------------------
   Reduced motion accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .footer-links a {
        transition: none;
    }
}

/* =========================================================
   PART 11 — FINAL RESPONSIVE + GLOBAL POLISH
   ========================================================= */

/* ---------------------------------------------------------
   Global scroll behavior
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    overflow-x: hidden;
}

/* ---------------------------------------------------------
   Premium scrollbar
   --------------------------------------------------------- */

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.45) rgba(5, 8, 22, 0.8);
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track {
    background: rgba(5, 8, 22, 0.8);
}

html::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        #3b82f6,
        #6366f1
    );
    border: 2px solid rgba(5, 8, 22, 0.8);
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #60a5fa,
        #818cf8
    );
}

/* ---------------------------------------------------------
   Text selection
   --------------------------------------------------------- */

::selection {
    background: rgba(59, 130, 246, 0.35);
    color: #ffffff;
}

::-moz-selection {
    background: rgba(59, 130, 246, 0.35);
    color: #ffffff;
}

/* ---------------------------------------------------------
   Global image behavior
   --------------------------------------------------------- */

img {
    max-width: 100%;
    height: auto;
}

.brand-logo,
.intro-logo,
.sphere-logo {
    user-select: none;
    -webkit-user-drag: none;
}

/* ---------------------------------------------------------
   Keyboard accessibility
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 4px;
}

/* ---------------------------------------------------------
   Section spacing protection
   --------------------------------------------------------- */

.about-section,
.features-section,
.how-section,
.creator-section,
.cta-section {
    scroll-margin-top: 80px;
}

/* ---------------------------------------------------------
   Prevent accidental horizontal overflow
   --------------------------------------------------------- */

.landing-page,
.landing-header,
.hero-section,
.about-section,
.features-section,
.how-section,
.creator-section,
.cta-section,
.landing-footer {
    max-width: 100%;
}

/* ---------------------------------------------------------
   Tablet global adjustments
   --------------------------------------------------------- */

@media (max-width: 900px) {
    html {
        scroll-padding-top: 75px;
    }

    .about-section,
    .features-section,
    .how-section,
    .creator-section,
    .cta-section {
        scroll-margin-top: 70px;
    }
}

/* ---------------------------------------------------------
   Mobile global adjustments
   --------------------------------------------------------- */

@media (max-width: 700px) {
    html {
        scroll-padding-top: 65px;
    }

    .about-section,
    .features-section,
    .how-section,
    .creator-section,
    .cta-section {
        scroll-margin-top: 60px;
    }

    /* Prevent overly large desktop typography */
    h1,
    h2,
    h3 {
        overflow-wrap: break-word;
    }

    /* Keep buttons easy to tap */
    a,
    button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ---------------------------------------------------------
   Small phone protection
   --------------------------------------------------------- */

@media (max-width: 400px) {
    html {
        scroll-padding-top: 60px;
    }

    body {
        min-width: 0;
    }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}