/* ============================================================
   PINTURERIA DEL SOL
   PINTURERIA HUD 2030
   Futuristic AI Sales Interface
   ============================================================ */

:root {

    --bg: #02060b;
    --bg-2: #04101a;

    --cyan: #00eaff;
    --cyan-light: #a5f9ff;
    --blue: #0077ff;
    --violet: #7957ff;

    --green: #00f5a0;
    --orange: #ffb347;

    --white: #f3fbff;
    --text: #d7edf5;
    --muted: #718b9b;

    --line:
        rgba(0, 234, 255, .18);

    --line-soft:
        rgba(0, 234, 255, .08);

    --panel:
        rgba(3, 17, 28, .76);

    --panel-2:
        rgba(7, 28, 43, .60);

    --glow:
        0 0 20px rgba(0,234,255,.35),
        0 0 70px rgba(0,234,255,.12);

    --transition:
        cubic-bezier(.16, 1, .3, 1);
}


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

* {
    box-sizing: border-box;

    margin: 0;
    padding: 0;
}


html,
body {

    width: 100%;
    height: 100%;

}


body {

    font-family:
        "Segoe UI",
        Inter,
        Roboto,
        Arial,
        sans-serif;

    color:
        var(--text);

    background:
        var(--bg);

    overflow:
        hidden;

    -webkit-font-smoothing:
        antialiased;

}


/* ============================================================
   GLOBAL BACKGROUND
   ============================================================ */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(0,234,255,.075),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 10%,
            rgba(0,119,255,.11),
            transparent 25%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(121,87,255,.10),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #010409,
            #03101a 55%,
            #02070e
        );

    z-index:
        -10;
}


/* ============================================================
   TECH GRID
   ============================================================ */

body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events:
        none;

    background-image:

        linear-gradient(
            rgba(0,234,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,234,255,.035) 1px,
            transparent 1px
        );

    background-size:
        65px 65px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 10%,
            transparent 85%
        );

    opacity:
        .75;

    z-index:
        -9;
}


/* ============================================================
   APP
   ============================================================ */

#app {

    position:
        relative;

    width:
        100vw;

    height:
        100vh;

    overflow:
        hidden;

}


/* ============================================================
   HUD CORNERS
   ============================================================ */

.hud-corner {

    position:
        absolute;

    width:
        85px;

    height:
        85px;

    z-index:
        100;

    pointer-events:
        none;

    opacity:
        .55;

}


.hud-corner::before,
.hud-corner::after {

    content: "";

    position:
        absolute;

    background:
        var(--cyan);

    box-shadow:
        0 0 10px rgba(0,234,255,.4);

}


.hud-corner::before {

    width:
        45px;

    height:
        1px;

}


.hud-corner::after {

    width:
        1px;

    height:
        45px;

}


.hud-corner-tl {

    top:
        28px;

    left:
        28px;

}


.hud-corner-tl::before {
    top: 0;
    left: 0;
}


.hud-corner-tl::after {
    top: 0;
    left: 0;
}


.hud-corner-tr {

    top:
        28px;

    right:
        28px;

}


.hud-corner-tr::before {

    top:
        0;

    right:
        0;

}


.hud-corner-tr::after {

    top:
        0;

    right:
        0;

}


.hud-corner-bl {

    bottom:
        28px;

    left:
        28px;

}


.hud-corner-bl::before {

    bottom:
        0;

    left:
        0;

}


.hud-corner-bl::after {

    bottom:
        0;

    left:
        0;

}


.hud-corner-br {

    bottom:
        28px;

    right:
        28px;

}


.hud-corner-br::before {

    bottom:
        0;

    right:
        0;

}


.hud-corner-br::after {

    bottom:
        0;

    right:
        0;

}


/* ============================================================
   HUD HEADER
   ============================================================ */

.hud-header {

    position:
        absolute;

    top:
        38px;

    left:
        65px;

    right:
        65px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    z-index:
        100;

}


.brand-block {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.brand-mark {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

}


.brand-line {

    width:
        18px;

    height:
        2px;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);

}


.brand-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 12px var(--cyan);

}


.brand-name {

    font-size:
        23px;

    font-weight:
        900;

    letter-spacing:
        -.055em;

    color:
        var(--white);

}


.brand-name span {

    color:
        var(--cyan);

}


.brand-subtitle {

    margin-top:
        2px;

    font-size:
        8px;

    letter-spacing:
        .22em;

    color:
        var(--muted);

}


.system-status {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    color:
        var(--cyan-light);

}


.status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px var(--green);

    animation:
        statusPulse 1.8s infinite;

}


.status-divider {

    width:
        1px;

    height:
        15px;

    background:
        var(--line);

}


.status-small {

    color:
        var(--muted);

}


@keyframes statusPulse {

    0%,
    100% {
        opacity:
            .45;
    }

    50% {
        opacity:
            1;
    }

}


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

.hud-footer {

    position:
        absolute;

    left:
        65px;

    right:
        65px;

    bottom:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    z-index:
        100;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.footer-left,
.footer-center,
.footer-right {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.footer-indicator {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 9px var(--cyan);

}


.footer-separator {

    color:
        rgba(0,234,255,.3);

}


/* ============================================================
   SCREENS
   ============================================================ */

.screen {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        110px 100px;

    text-align:
        center;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(.98)
        translateY(15px);

    filter:
        blur(3px);

    transition:
        opacity .4s ease,
        transform .55s var(--transition),
        filter .4s ease,
        visibility .4s;

}


.screen.active,
.screen.visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1)
        translateY(0);

    filter:
        blur(0);

}


/* ============================================================
   HUD LABEL
   ============================================================ */

.hud-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--cyan);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .27em;

}


.hud-label-line {

    width:
        35px;

    height:
        1px;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);

}


/* ============================================================
   STATE CODE
   ============================================================ */

.state-code {

    position:
        absolute;

    top:
        112px;

    left:
        110px;

    color:
        rgba(0,234,255,.35);

    font-family:
        monospace;

    font-size:
        9px;

    letter-spacing:
        .2em;

}


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

.hero-core {

    position:
        relative;

    width:
        270px;

    height:
        270px;

    margin-bottom:
        15px;

}


.ai-core {

    position:
        absolute;

    inset:
        55px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        radial-gradient(
            circle at 30% 25%,
            #ffffff,
            #82f7ff 10%,
            #00bde0 32%,
            #0060a0 63%,
            #021522 100%
        );

    box-shadow:

        0 0 20px rgba(0,234,255,.8),

        0 0 55px rgba(0,234,255,.45),

        0 0 120px rgba(0,234,255,.15),

        inset -18px -18px 35px rgba(0,0,0,.45);

    animation:
        coreBreath 3s ease-in-out infinite;

}


.core-inner {

    position:
        relative;

    width:
        75%;

    height:
        75%;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

}


.core-symbol {

    position:
        relative;

    z-index:
        3;

    font-size:
        30px;

    font-weight:
        900;

    letter-spacing:
        -.08em;

    color:
        white;

    text-shadow:
        0 0 15px rgba(255,255,255,.9);

}


.core-energy {

    position:
        absolute;

    inset:
        0;

    background:
        conic-gradient(
            transparent,
            rgba(255,255,255,.5),
            transparent 35%
        );

    animation:
        energyRotate 3s linear infinite;

}


@keyframes coreBreath {

    0%,
    100% {
        transform:
            scale(.94);
    }

    50% {
        transform:
            scale(1.04);
    }

}


@keyframes energyRotate {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   CORE RINGS
   ============================================================ */

.core-ring {

    position:
        absolute;

    border-radius:
        50%;

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

}


.ring-outer {

    inset:
        15px;

    border-left-color:
        transparent;

    border-right-color:
        rgba(0,234,255,.6);

    animation:
        ringRotate 8s linear infinite;

}


.ring-middle {

    inset:
        33px;

    border-top-color:
        transparent;

    border-bottom-color:
        rgba(0,234,255,.6);

    animation:
        ringRotate 5s linear infinite reverse;

}


@keyframes ringRotate {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   ORBIT
   ============================================================ */

.core-orbit {

    position:
        absolute;

    inset:
        0;

    border-radius:
        50%;

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

}


.orbit-1 {

    transform:
        rotateX(67deg);

    animation:
        orbitSpin 7s linear infinite;

}


.orbit-2 {

    transform:
        rotateY(67deg);

    animation:
        orbitSpin 9s linear infinite reverse;

}


.orbit-3 {

    transform:
        rotate(45deg)
        scale(.82);

    border-color:
        rgba(121,87,255,.18);

    animation:
        orbitSpin 11s linear infinite;

}


@keyframes orbitSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   CORE MARKERS
   ============================================================ */

.core-marker {

    position:
        absolute;

    width:
        20px;

    height:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.core-marker span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 10px var(--cyan);

}


.marker-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}


.marker-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


.marker-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


.marker-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}


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

.hero-overline {

    margin-bottom:
        8px;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .3em;

}


#screen-home h1 {

    font-size:
        clamp(55px, 8vw, 105px);

    line-height:
        .85;

    letter-spacing:
        -.08em;

    background:
        linear-gradient(
            110deg,
            white,
            #b7faff,
            var(--cyan),
            white
        );

    background-size:
        250% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    animation:
        titleFlow 7s linear infinite;

}


#screen-home h1 span {

    color:
        var(--cyan);

}


#screen-home p {

    max-width:
        650px;

    margin-top:
        16px;

    font-size:
        18px;

    color:
        var(--muted);

}


@keyframes titleFlow {

    to {
        background-position:
            250% center;
    }

}


/* ============================================================
   BUTTON
   ============================================================ */

.hud-button {

    position:
        relative;

    min-height:
        62px;

    padding:
        0 28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    color:
        var(--text);

    background:
        rgba(3,20,32,.8);

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

    clip-path:
        polygon(
            0 10px,
            10px 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            10px 100%,
            0 calc(100% - 10px)
        );

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    cursor:
        pointer;

    transition:
        all .3s var(--transition);

}


.hud-button::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(0,234,255,.12),
            transparent
        );

    transform:
        translateX(-100%);

    transition:
        transform .5s ease;

}


.hud-button:hover {

    color:
        var(--cyan-light);

    border-color:
        var(--cyan);

    box-shadow:
        var(--glow);

    transform:
        translateY(-3px);

}


.hud-button:hover::before {

    transform:
        translateX(100%);

}


.hud-button.primary {

    min-width:
        310px;

    color:
        #001015;

    background:
        linear-gradient(
            110deg,
            #d9fdff,
            var(--cyan)
        );

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

    box-shadow:
        0 0 25px rgba(0,234,255,.12);

}


.hud-button.primary:hover {

    color:
        #001015;

    box-shadow:
        0 0 30px rgba(0,234,255,.45),
        0 0 80px rgba(0,234,255,.16);

}


.hud-button.success {

    color:
        #00150e;

    background:
        linear-gradient(
            110deg,
            #a7ffdf,
            var(--green)
        );

    border-color:
        var(--green);

}


.button-icon {

    font-size:
        18px;

}


.button-arrow {

    font-size:
        22px;

    line-height:
        1;

}


/* ============================================================
   HOME ACTIONS
   ============================================================ */

.home-actions {

    display:
        flex;

    gap:
        14px;

    margin-top:
        28px;

}


.system-data {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    margin-top:
        28px;

    color:
        rgba(0,234,255,.32);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .18em;

}


/* ============================================================
   LISTENING
   ============================================================ */

.ai-interface {

    position:
        relative;

    width:
        330px;

    height:
        330px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.scan-circle {

    position:
        absolute;

    border-radius:
        50%;

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

}


.scan-1 {

    inset:
        15px;

    animation:
        ringRotate 8s linear infinite;

}


.scan-2 {

    inset:
        45px;

    border-style:
        dashed;

    animation:
        ringRotate 5s linear infinite reverse;

}


.scan-3 {

    inset:
        75px;

    border-color:
        rgba(0,245,160,.25);

    animation:
        ringRotate 3s linear infinite;

}


.listening-core {

    position:
        relative;

    inset:
        auto;

    width:
        150px;

    height:
        150px;

}


.voice-bars {

    position:
        absolute;

    bottom:
        0;

    left:
        50%;

    transform:
        translateX(-50%);

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

}


.voice-bars span {

    width:
        3px;

    height:
        10px;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);

    animation:
        voiceAnimation .9s ease-in-out infinite;

}


.voice-bars span:nth-child(2) {
    animation-delay: .05s;
}

.voice-bars span:nth-child(3) {
    animation-delay: .10s;
}

.voice-bars span:nth-child(4) {
    animation-delay: .15s;
}

.voice-bars span:nth-child(5) {
    animation-delay: .20s;
}

.voice-bars span:nth-child(6) {
    animation-delay: .25s;
}

.voice-bars span:nth-child(7) {
    animation-delay: .30s;
}

.voice-bars span:nth-child(8) {
    animation-delay: .35s;
}

.voice-bars span:nth-child(9) {
    animation-delay: .40s;
}

.voice-bars span:nth-child(10) {
    animation-delay: .45s;
}

.voice-bars span:nth-child(11) {
    animation-delay: .50s;
}

.voice-bars span:nth-child(12) {
    animation-delay: .55s;
}


@keyframes voiceAnimation {

    0%,
    100% {
        height:
            7px;
    }

    50% {
        height:
            32px;
    }

}


/* ============================================================
   STATE TITLE
   ============================================================ */

.state-title {

    margin-top:
        20px;

}


.state-title h2 {

    margin-top:
        12px;

    font-size:
        clamp(36px, 5vw, 66px);

    letter-spacing:
        -.065em;

    background:
        linear-gradient(
            100deg,
            white,
            var(--cyan)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.state-title p {

    margin-top:
        12px;

}


.voice-status {

    margin-top:
        25px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .18em;

}


.pulse-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px var(--green);

    animation:
        statusPulse 1s infinite;

}


/* ============================================================
   SEARCH
   ============================================================ */

.search-interface {

    position:
        relative;

    width:
        270px;

    height:
        270px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.search-ring {

    position:
        absolute;

    border-radius:
        50%;

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

}


.ring-a {

    inset:
        0;

    border-left-color:
        transparent;

    animation:
        ringRotate 4s linear infinite;

}


.ring-b {

    inset:
        35px;

    border-right-color:
        transparent;

    border-style:
        dashed;

    animation:
        ringRotate 3s linear infinite reverse;

}


.ring-c {

    inset:
        70px;

    border-top-color:
        var(--cyan);

    animation:
        ringRotate 2s linear infinite;

}


.search-core {

    width:
        90px;

    height:
        90px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.search-cross {

    position:
        absolute;

    background:
        rgba(0,234,255,.4);

}


.search-cross.horizontal {

    width:
        100%;

    height:
        1px;

}


.search-cross.vertical {

    height:
        100%;

    width:
        1px;

}


.search-target {

    width:
        32px;

    height:
        32px;

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

    border-radius:
        50%;

    color:
        var(--cyan);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0 0 20px rgba(0,234,255,.3);

    animation:
        targetPulse 1.5s infinite;

}


@keyframes targetPulse {

    0%,
    100% {
        transform:
            scale(.8);

        opacity:
            .5;
    }

    50% {
        transform:
            scale(1.1);

        opacity:
            1;
    }

}


/* ============================================================
   SEARCH PROGRESS
   ============================================================ */

.search-progress {

    width:
        300px;

    margin-top:
        28px;

}


.progress-label {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .15em;

}


.progress-track {

    width:
        100%;

    height:
        2px;

    margin-top:
        9px;

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

}


.progress-value {

    width:
        87%;

    height:
        100%;

    background:
        var(--cyan);

    box-shadow:
        0 0 10px var(--cyan);

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

}


@keyframes progressMove {

    from {
        width:
            40%;
    }

    to {
        width:
            95%;
    }

}


/* ============================================================
   PREFERENCE
   ============================================================ */

.preference-title {

    margin-bottom:
        30px;

}


.preference-grid {

    width:
        min(100%, 1000px);

    display:
        grid;

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

    gap:
        16px;

}


.preference-card {

    position:
        relative;

    min-height:
        230px;

    padding:
        28px;

    text-align:
        left;

    color:
        var(--text);

    background:
        linear-gradient(
            145deg,
            rgba(7,30,45,.8),
            rgba(2,12,20,.72)
        );

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

    clip-path:
        polygon(
            0 18px,
            18px 0,
            calc(100% - 18px) 0,
            100% 18px,
            100% calc(100% - 18px),
            calc(100% - 18px) 100%,
            18px 100%,
            0 calc(100% - 18px)
        );

    cursor:
        pointer;

    transition:
        all .35s var(--transition);

}


.preference-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--cyan);

    background:
        rgba(0,234,255,.065);

    box-shadow:
        var(--glow);

}


.card-number {

    color:
        rgba(0,234,255,.3);

    font-family:
        monospace;

    font-size:
        10px;

}


.preference-icon {

    margin-top:
        28px;

    color:
        var(--cyan);

    font-family:
        monospace;

    font-size:
        25px;

    font-weight:
        900;

}


.preference-info {

    margin-top:
        15px;

}


.preference-info h3 {

    font-size:
        20px;

}


.preference-info p {

    margin-top:
        8px;

    font-size:
        13px;

    color:
        var(--muted);

}


.card-corner {

    position:
        absolute;

    right:
        16px;

    bottom:
        16px;

    width:
        22px;

    height:
        22px;

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

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

    opacity:
        .35;

}


/* ============================================================
   PRODUCT
   ============================================================ */

.product-layout {

    width:
        min(100%, 1150px);

    display:
        grid;

    grid-template-columns:
        250px 1fr;

    gap:
        30px;

    align-items:
        center;

}


.product-scanner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.scanner-frame {

    position:
        relative;

    width:
        220px;

    height:
        260px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

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

}


.scanner-corner {

    position:
        absolute;

    width:
        25px;

    height:
        25px;

    border-color:
        var(--cyan);

}


.scanner-corner.top-left {

    top:
        -1px;

    left:
        -1px;

    border-top:
        2px solid;

    border-left:
        2px solid;

}


.scanner-corner.top-right {

    top:
        -1px;

    right:
        -1px;

    border-top:
        2px solid;

    border-right:
        2px solid;

}


.scanner-corner.bottom-left {

    bottom:
        -1px;

    left:
        -1px;

    border-bottom:
        2px solid;

    border-left:
        2px solid;

}


.scanner-corner.bottom-right {

    bottom:
        -1px;

    right:
        -1px;

    border-bottom:
        2px solid;

    border-right:
        2px solid;

}


.scanner-circle {

    width:
        120px;

    height:
        120px;

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

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0 0 35px rgba(0,234,255,.15);

}


.scanner-core {

    width:
        65px;

    height:
        65px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--green);

    font-size:
        28px;

    background:
        rgba(0,245,160,.06);

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

    box-shadow:
        0 0 30px rgba(0,245,160,.15);

}


.scanner-status {

    position:
        absolute;

    bottom:
        12px;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        9px;

    letter-spacing:
        .15em;

}


/* ============================================================
   PRODUCT CARD
   ============================================================ */

.product-card {

    position:
        relative;

    padding:
        35px;

    text-align:
        left;

    background:
        linear-gradient(
            145deg,
            rgba(6,28,43,.88),
            rgba(2,10,17,.85)
        );

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

    box-shadow:
        0 30px 90px rgba(0,0,0,.5);

    clip-path:
        polygon(
            0 20px,
            20px 0,
            calc(100% - 20px) 0,
            100% 20px,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            20px 100%,
            0 calc(100% - 20px)
        );

}


.product-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        1px;

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

    box-shadow:
        0 0 15px var(--cyan);

}


.product-card-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .17em;

    margin-bottom:
        25px;

}


.match-indicator {

    color:
        var(--green);

}


.product-brand {

    color:
        var(--cyan);

    font-family:
        monospace;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .2em;

    margin-bottom:
        8px;

}


#product-name {

    max-width:
        800px;

    font-size:
        clamp(30px, 4vw, 53px);

    line-height:
        .98;

    letter-spacing:
        -.06em;

    color:
        var(--white);

}


.product-specs {

    display:
        flex;

    gap:
        10px;

    margin-top:
        24px;

}


.spec-box {

    min-width:
        140px;

    padding:
        11px 15px;

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

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

}


.spec-label {

    display:
        block;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        7px;

    letter-spacing:
        .16em;

}


.spec-box strong {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--cyan-light);

    font-size:
        14px;

}


.product-description {

    max-width:
        760px;

    margin-top:
        22px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.55;

}


.product-price {

    margin-top:
        22px;

    color:
        var(--white);

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

    font-weight:
        900;

    letter-spacing:
        -.06em;

    text-shadow:
        0 0 25px rgba(0,234,255,.15);

}


.product-actions {

    display:
        flex;

    gap:
        12px;

    margin-top:
        25px;

}


/* ============================================================
   CART
   ============================================================ */

.cart-panel {

    width:
        min(100%, 900px);

    margin-top:
        30px;

    background:
        rgba(3,17,28,.72);

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

}


.cart-panel-header {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    padding:
        12px 20px;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .16em;

    border-bottom:
        1px solid rgba(0,234,255,.08);

}


.cart-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        22px;

    border-bottom:
        1px solid rgba(0,234,255,.08);

}


.cart-product-info {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    text-align:
        left;

}


.cart-product-indicator {

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    color:
        var(--cyan);

    font-family:
        monospace;

    font-size:
        9px;

}


.cart-product-name {

    color:
        var(--white);

    font-size:
        17px;

    font-weight:
        750;

}


.cart-product-status {

    margin-top:
        4px;

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        7px;

    letter-spacing:
        .12em;

}


.cart-product-price {

    color:
        var(--cyan);

    font-size:
        20px;

    font-weight:
        850;

}


.cart-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        20px 22px;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        9px;

    letter-spacing:
        .12em;

}


.cart-total strong {

    color:
        var(--white);

    font-size:
        22px;

}


.cart-actions {

    display:
        flex;

    gap:
        12px;

    margin-top:
        22px;

}


/* ============================================================
   SUCCESS
   ============================================================ */

.success-interface {

    position:
        relative;

    width:
        170px;

    height:
        170px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

}


.success-core {

    width:
        90px;

    height:
        90px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--green);

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

    background:
        rgba(0,245,160,.06);

    box-shadow:
        0 0 45px rgba(0,245,160,.2);

    font-size:
        40px;

    animation:
        successPulse 2s infinite;

}


.success-ring {

    position:
        absolute;

    inset:
        0;

    border:
        1px solid rgba(0,245,160,.2);

    border-radius:
        50%;

}


.ring-1 {

    animation:
        successRing 2.5s infinite;

}


.ring-2 {

    inset:
        20px;

    animation:
        successRing 2.5s .5s infinite;

}


@keyframes successPulse {

    0%,
    100% {
        transform:
            scale(.96);
    }

    50% {
        transform:
            scale(1.05);
    }

}


@keyframes successRing {

    0% {
        transform:
            scale(.7);

        opacity:
            1;
    }

    100% {
        transform:
            scale(1.35);

        opacity:
            0;
    }

}


.success-label {

    color:
        var(--green);

}


/* ============================================================
   TRANSACTION
   ============================================================ */

.transaction-code {

    display:
        flex;

    gap:
        10px;

    margin:
        25px 0;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .15em;

}


.transaction-code strong {

    color:
        var(--green);

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .hud-header {

        left:
            35px;

        right:
            35px;

    }

    .hud-footer {

        left:
            35px;

        right:
            35px;

    }

    .state-code {

        left:
            45px;

    }

    .product-layout {

        grid-template-columns:
            1fr;

    }

    .product-scanner {

        display:
            none;

    }

}


@media (max-width: 700px) {

    .screen {

        padding:
            95px 20px 80px;

    }

    .hud-header {

        top:
            25px;

        left:
            25px;

        right:
            25px;

    }

    .system-status {

        display:
            none;

    }

    .hud-footer {

        left:
            25px;

        right:
            25px;

    }

    .footer-center {

        display:
            none;

    }

    .state-code {

        top:
            90px;

        left:
            25px;

    }

    .hero-core {

        width:
            220px;

        height:
            220px;

    }

    .ai-core {

        inset:
            45px;

    }

    .preference-grid {

        grid-template-columns:
            1fr;

        width:
            100%;

        max-height:
            55vh;

        overflow-y:
            auto;

    }

    .preference-card {

        min-height:
            130px;

    }

    .product-card {

        max-height:
            72vh;

        overflow-y:
            auto;

    }

    .product-actions,
    .cart-actions,
    .home-actions {

        width:
            100%;

        flex-direction:
            column;

    }

    .hud-button {

        width:
            100%;

    }

    .product-specs {

        flex-wrap:
            wrap;

    }

}


@media (max-width: 450px) {

    .brand-subtitle {

        display:
            none;

    }

    .brand-name {

        font-size:
            18px;

    }

    .hero-core {

        width:
            190px;

        height:
            190px;

    }

    .ai-interface {

        transform:
            scale(.8);

    }

    .search-interface {

        transform:
            scale(.8);

    }

    #screen-home h1 {

        font-size:
            52px;

    }

    .state-title h2 {

        font-size:
            34px;

    }

}


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

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

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}