:root {
    --bg:
        #030610;

    --bg-soft:
        #07101c;

    --panel:
        rgba(8, 15, 27, 0.72);

    --panel-strong:
        rgba(8, 14, 24, 0.92);

    --gold:
        #d9b35d;

    --gold-light:
        #f2d58e;

    --gold-dark:
        #8a682b;

    --blue:
        #19a9f7;

    --blue-soft:
        rgba(25, 169, 247, 0.15);

    --text:
        #f5f7fb;

    --muted:
        #929dad;

    --line:
        rgba(255, 255, 255, 0.08);

    --gold-line:
        rgba(217, 179, 93, 0.28);

    --radius:
        25px;
}


* {
    box-sizing:
        border-box;
}


html {
    min-height:
        100%;

    background:
        var(--bg);
}


body {
    min-height:
        100vh;

    margin:
        0;

    overflow-x:
        hidden;

    background:
        radial-gradient(
            circle at 50% -18%,
            rgba(16, 86, 136, 0.20),
            transparent 43%
        ),
        linear-gradient(
            180deg,
            #030610 0%,
            #040812 52%,
            #02040a 100%
        );

    color:
        var(--text);

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

    -webkit-font-smoothing:
        antialiased;
}


body::before {
    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.012) 45%,
            transparent 70%
        );

    z-index:
        -1;
}


.background {
    position:
        fixed;

    width:
        620px;

    height:
        620px;

    border-radius:
        50%;

    filter:
        blur(120px);

    opacity:
        0.19;

    pointer-events:
        none;

    z-index:
        -3;
}


.background-one {
    top:
        -280px;

    right:
        -180px;

    background:
        #176bad;
}


.background-two {
    left:
        -230px;

    bottom:
        -330px;

    background:
        #9b762a;
}


.grid-light {
    position:
        fixed;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

    opacity:
        0.10;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 26%,
            black 75%,
            transparent
        );
}


.topbar {
    width:
        min(1180px, calc(100% - 40px));

    height:
        82px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    border-bottom:
        1px solid var(--line);
}


.brand {
    display:
        inline-flex;

    align-items:
        center;

    text-decoration:
        none;
}


.brand-logo {
    display:
        block;

    width:
        142px;

    height:
        58px;

    object-fit:
        cover;

    object-position:
        center;

    border-radius:
        8px;

    mix-blend-mode:
        screen;

    opacity:
        0.98;
}


.brand-line {
    height:
        1px;

    flex:
        1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(217,179,93,.20),
            transparent
        );
}


.portal {
    width:
        min(1180px, calc(100% - 40px));

    margin:
        0 auto;

    padding:
        70px 0 50px;
}


.hero {
    position:
        relative;

    text-align:
        center;

    padding:
        18px 20px 66px;
}


.hero-brand {
    display:
        flex;

    justify-content:
        center;

    margin-bottom:
        8px;
}


.hero-logo {
    width:
        min(335px, 72vw);

    height:
        180px;

    object-fit:
        cover;

    object-position:
        center;

    mix-blend-mode:
        screen;

    filter:
        drop-shadow(
            0 0 22px
            rgba(20, 136, 222, 0.16)
        );

    border-radius:
        12px;
}


.eyebrow {
    margin-top:
        8px;

    color:
        var(--gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.34em;

    direction:
        ltr;
}


.hero h1 {
    margin:
        15px 0 8px;

    font-size:
        clamp(38px, 6vw, 72px);

    line-height:
        1.08;

    font-weight:
        300;

    letter-spacing:
        -0.035em;
}


.hero h1 span {
    font-weight:
        700;

    background:
        linear-gradient(
            135deg,
            #fff4cf,
            #c7953c 62%,
            #f2d58e
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        transparent;
}


.hero-subtitle {
    margin:
        16px 0 0;

    color:
        var(--muted);

    font-size:
        15px;

    letter-spacing:
        0.03em;
}


.hero-divider {
    width:
        min(420px, 80%);

    margin:
        34px auto 0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        15px;
}


.hero-divider span {
    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(217,179,93,.38)
        );
}


.hero-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(217,179,93,.38),
            transparent
        );
}


.hero-divider i {
    width:
        5px;

    height:
        5px;

    transform:
        rotate(45deg);

    background:
        var(--gold);
}


.projects {
    display:
        grid;

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

    gap:
        18px;
}


.project-card {
    position:
        relative;

    min-height:
        355px;

    padding:
        30px 25px 25px;

    overflow:
        hidden;

    isolation:
        isolate;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    color:
        inherit;

    text-decoration:
        none;

    background:
        linear-gradient(
            145deg,
            rgba(13, 22, 38, 0.91),
            rgba(5, 10, 18, 0.86)
        );

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

    border-radius:
        var(--radius);

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

    backdrop-filter:
        blur(16px);

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


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

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        .32;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.035),
            transparent 33%,
            transparent 70%,
            rgba(255,255,255,.025)
        );
}


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

    border-color:
        rgba(217,179,93,.33);

    box-shadow:
        0 34px 85px
        rgba(0,0,0,.42);
}


.card-aura {
    position:
        absolute;

    width:
        180px;

    height:
        180px;

    top:
        -100px;

    left:
        -80px;

    border-radius:
        50%;

    filter:
        blur(44px);

    opacity:
        .22;

    z-index:
        -1;
}


.options-card .card-aura {
    background:
        var(--gold);
}


.ai-card .card-aura {
    background:
        var(--blue);
}


.admin-card .card-aura {
    background:
        #7890a9;
}


.future-card .card-aura {
    background:
        #7659a9;
}


.project-icon {
    width:
        72px;

    height:
        72px;

    margin-bottom:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        20px;

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

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


.project-icon svg {
    width:
        38px;

    height:
        38px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.options-card .project-icon {
    color:
        var(--gold-light);

    box-shadow:
        inset 0 0 30px
        rgba(217,179,93,.08);
}


.ai-card .project-icon {
    color:
        #6dccff;

    box-shadow:
        inset 0 0 30px
        rgba(25,169,247,.08);
}


.admin-card .project-icon {
    color:
        #c8d2dd;
}


.project-label {
    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .20em;

    direction:
        ltr;
}


.project-card h2 {
    margin:
        9px 0 7px;

    font-size:
        34px;

    font-weight:
        600;

    letter-spacing:
        -.035em;
}


.project-card p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;
}


.enter {
    width:
        100%;

    margin-top:
        auto;

    padding-top:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #dfe5ed;

    font-size:
        12px;

    border-top:
        1px solid var(--line);
}


.enter b {
    font-size:
        20px;

    font-weight:
        300;

    transition:
        transform .25s ease;
}


.project-card:hover .enter b {
    transform:
        translateX(-5px);
}


.future-card {
    cursor:
        default;

    opacity:
        .63;
}


.future-plus {
    width:
        72px;

    height:
        72px;

    margin-bottom:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        20px;

    border:
        1px dashed
        rgba(255,255,255,.18);

    color:
        #aeb8c6;

    font-size:
        37px;

    font-weight:
        200;
}


.future-enter {
    color:
        #7f8996;
}


.footer {
    width:
        min(1180px, calc(100% - 40px));

    margin:
        18px auto 0;

    padding:
        0 0 34px;
}


.footer-line {
    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-line),
            transparent
        );
}


.footer-content {
    min-height:
        86px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #6f7886;

    font-size:
        9px;

    letter-spacing:
        .22em;

    direction:
        ltr;
}


.footer-logo {
    width:
        102px;

    height:
        46px;

    object-fit:
        cover;

    mix-blend-mode:
        screen;

    border-radius:
        8px;
}


@media (max-width: 980px) {

    .projects {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 620px) {

    .topbar {
        width:
            min(100% - 26px, 1180px);

        height:
            70px;
    }


    .brand-logo {
        width:
            115px;

        height:
            48px;
    }


    .portal {
        width:
            min(100% - 26px, 1180px);

        padding-top:
            40px;
    }


    .hero {
        padding-bottom:
            44px;
    }


    .hero-logo {
        height:
            145px;
    }


    .hero h1 {
        font-size:
            42px;
    }


    .projects {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .project-card {
        min-height:
            292px;
    }


    .footer {
        width:
            min(100% - 26px, 1180px);
    }


    .footer-content {
        flex-direction:
            column;

        justify-content:
            center;

        padding:
            24px 0;

        text-align:
            center;
    }

}


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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            .001ms !important;

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;
    }

}


/* =========================================================
   ALBARON APP A2.1 — VISUAL TUNING
   ========================================================= */

.hero {
    padding-top:
        10px;

    padding-bottom:
        62px;
}


.hero-brand {
    margin-bottom:
        16px;
}


.hero-logo {
    width:
        min(470px, 88vw);

    height:
        auto;

    max-height:
        none;

    object-fit:
        contain;

    object-position:
        center;

    padding:
        0;

    background:
        #02050b;

    border:
        1px solid rgba(217, 179, 93, 0.16);

    border-radius:
        16px;

    mix-blend-mode:
        normal;

    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.34),
        0 0 34px rgba(24, 153, 232, 0.09);

    filter:
        none;
}


.eyebrow {
    margin-top:
        18px;
}


.hero-subtitle {
    margin-top:
        11px;

    font-size:
        16px;
}


/* Project title colors */

.options-card h2 {
    color:
        #f0cc76;

    text-shadow:
        0 0 22px rgba(217, 179, 93, 0.16);
}


.ai-card h2 {
    color:
        #67c9ff;

    text-shadow:
        0 0 22px rgba(25, 169, 247, 0.18);
}


.admin-card h2 {
    color:
        #d9e2ec;

    text-shadow:
        0 0 20px rgba(185, 202, 219, 0.12);
}


.future-card h2 {
    color:
        #b59be7;
}


@media (max-width: 620px) {

    .hero-logo {
        width:
            min(390px, 92vw);

        height:
            auto;
    }

}


/* =========================================================
   ALBARON APP A2.2 BRAND TUNING
   ========================================================= */

/* Top-left / corner brand */

.brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    direction:
        ltr;
}


.brand-logo {
    width:
        112px;

    height:
        48px;

    object-fit:
        cover;

    object-position:
        center;

    border-radius:
        8px;

    mix-blend-mode:
        screen;
}


.brand-wordmark {
    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        5px;

    white-space:
        nowrap;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    letter-spacing:
        -0.035em;

    text-shadow:
        0 0 20px rgba(255,255,255,.04);
}


.brand-wordmark-main {
    font-size:
        25px;

    font-weight:
        500;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #dce2eb 42%,
            #929dab 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.brand-wordmark-ai {
    font-size:
        25px;

    font-weight:
        700;

    font-style:
        italic;

    background:
        linear-gradient(
            145deg,
            #fff0bc 0%,
            #e0b85b 45%,
            #9c722c 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    text-shadow:
        0 0 20px
        rgba(217,179,93,.10);
}


/* Larger central logo */

.hero {
    padding-top:
        10px;

    padding-bottom:
        62px;
}


.hero-brand {
    margin-bottom:
        16px;
}


.hero-logo {
    width:
        min(500px, 90vw);

    height:
        auto;

    max-height:
        none;

    object-fit:
        contain;

    object-position:
        center;

    padding:
        0;

    background:
        #02050b;

    border:
        1px solid
        rgba(217,179,93,.17);

    border-radius:
        16px;

    mix-blend-mode:
        normal;

    filter:
        none;

    box-shadow:
        0 28px 74px rgba(0,0,0,.37),
        0 0 38px rgba(25,169,247,.08);
}


.eyebrow {
    margin-top:
        19px;
}


.hero-subtitle {
    margin-top:
        11px;

    font-size:
        16px;
}


/* Project-name identities */

.options-card h2 {
    color:
        #f1cc70;

    text-shadow:
        0 0 24px
        rgba(217,179,93,.18);
}


.ai-card h2 {
    color:
        #63c9ff;

    text-shadow:
        0 0 24px
        rgba(25,169,247,.20);
}


.admin-card h2 {
    color:
        #dde7f0;

    text-shadow:
        0 0 21px
        rgba(190,205,220,.14);
}


.future-card h2 {
    color:
        #bfa5ee;

    text-shadow:
        0 0 20px
        rgba(170,130,230,.12);
}


@media (max-width: 620px) {

    .brand {
        gap:
            9px;
    }


    .brand-logo {
        width:
            88px;

        height:
            40px;
    }


    .brand-wordmark-main,
    .brand-wordmark-ai {
        font-size:
            20px;
    }


    .hero-logo {
        width:
            min(420px, 94vw);

        height:
            auto;
    }

}