:root {
    --bg: #111111;
    --panel: #18181A;
    --panel-alt: #1F1F22;
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, .72);
    --text-dimmer: rgba(255, 255, 255, .66);
    --border: rgba(255, 255, 255, .14);
    --max: 1560px;
}
@font-face {
    font-family: "Brittany Signature";
    src: url("/fonts/BrittanySignature.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
p {
    color: white;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    overflow-x: clip;
    font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a:hover {
    color: #ffffff;
}

button {
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

::selection {
    background: var(--color-brand);
    color: #ffffff;
}

:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 4px;
    border-radius: 2px;
}


/* ===================== PULSE ===================== */

@keyframes fv-pulse {
    0% {
        opacity: .35;
        transform: scale(1);
    }

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

    100% {
        opacity: .35;
        transform: scale(1);
    }
}


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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation: none !important;
        transition: none !important;
    }
}


/* ===================== SKIP LINK ===================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 12px 18px;
    border-radius: 8px;
    background: var(--color-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    z-index: 200;
}

    .skip-link:focus {
        left: 16px;
        top: 16px;
    }


/* ===================== DOT ===================== */

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-brand);
    flex: none;
    display: inline-block;
}

.dot--pulse {
    width: 6px;
    height: 6px;
    animation: fv-pulse 2.6s ease-in-out infinite;
}


/* ===================== REVEAL ANIMATION ===================== */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
}

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }


/* ===================== HERO / THEMELUESJA =====================
   Frame, photo, scrims and type scale come from hero.css. */

.about-founder {
    --fa-hero-title-ramp: 3.8vw - 0.2px;
    background: #2A0F19;
}

/* ===================== EYEBROW ===================== */

.eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: clamp(11px, 10.55px + .05vw, 11.5px);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

h2.eyebrow {
    border: 0;
    padding: 0;
    border-radius: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    letter-spacing: .2em;
    display: block;
}


/* ===================== FOUNDER CONTENT ===================== */

.about-founder__row {
    margin-top: var(--fa-hero-gap-title);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 84px);
    align-items: center;
}

.kicker {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.about-founder__heading {
    max-width: 20ch;
    line-height: .96;
}

.about-founder__body {
    margin-top: var(--fa-hero-gap-lede);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 56ch;
}

    .about-founder__body p {
        margin: 0;
        font-size: clamp(14px, 10.12px + .36vw, 17px);
        line-height: 1.66;
        color: var(--text-dim);
    }

.about-founder__signature {
    margin-top: clamp(22px, 3.4vh, 34px);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items:center;
}
.about-founder__name-photo{
    height:50px;
}
.about-founder__name {
    margin: 0;
    font-family: "Brittany Signature", cursive;
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: normal;
    line-height: 1;
}
.about-founder__title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* Mobile only: text link that expands the collapsed hero to the full message. */
.about-founder__toggle {
    display: none;
    margin-top: 14px;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-underline-offset: 4px;
    cursor: pointer;
    transition: text-decoration-color .3s;
}

    .about-founder__toggle:hover { text-decoration-color: #ffffff; }

    .about-founder__toggle[hidden] { display: none !important; }


/* ===================== MISIONI DHE VIZIONI ===================== */

.about-mission {
    padding: clamp(56px, 9vh, 110px) clamp(20px, 4.5vw, 72px);
}

.about-mission__inner {
    max-width: var(--max);
    margin: 0 auto;
}

.about-mission__grid {
    margin-top: clamp(24px, 4vh, 44px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(18px, 2.4vw, 32px);
}

.mv-card {
    border-radius: 26px;
    border: 1px solid var(--border);
    background: var(--panel);
    padding: clamp(26px, 3.2vw, 48px);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.4vh, 26px);
    color: #fff;
    transition: background .9s cubic-bezier(.4, 0, .2, 1), color .9s cubic-bezier(.4, 0, .2, 1), border-color .9s cubic-bezier(.4, 0, .2, 1), box-shadow .9s cubic-bezier(.4, 0, .2, 1);
}

.mv-card--alt {
    background: var(--panel-alt);
}

.mv-card:hover {
    background: #edeeef;
    color: #1A1A1C;
    border-color: rgba(17, 17, 17, .14);
    box-shadow: 0 34px 60px -52px rgba(17, 17, 17, .4);
}

/* Ensure paragraphs inside mv-card inherit the card color on hover
   and do not keep the global white color */
.mv-card .mv-card__text,
.mv-card .mv-card__text p {
    margin: 0;
    display: block;
    width: 100%;
    color: inherit; /* inherit from .mv-card so hover color applies */
}



.mv-card__label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .72;
}
.mv-card__text p,
.mv-card__text {
    margin: 0;
    font-size: clamp(19px, 2.1vw, 29px);
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: -.025em;
}


/* =========================================================
   FINARCH / FINMARKET
   ========================================================= */

.about-choice {
    --choice-scroll-progress: 0;
    padding: clamp(56px, 9vh, 110px) clamp(20px, 4.5vw, 72px) clamp(72px, 11vh, 140px);
    background: #ffffff;
    color: #111111;
    position: relative;
    overflow-x: clip;
}

.about-choice__inner {
    max-width: var(--max);
    margin: 0 auto;
}


/* ===================== CHOICE EYEBROW ===================== */

.about-choice .eyebrow {
    color: #111111;
    margin-left: -16px;
}


/* ===================== CHOICE HEADING ===================== */

.about-choice__heading {
    margin: clamp(14px, 2vh, 22px) 0 0;
    font-size: clamp(30px, 4.4vw, 64px);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.042em;
    max-width: 26ch;
    color: #111111;
}
.about-founder__body p {
    margin: 0;
}

    .about-founder__body p + p {
        margin-top: 12px;
    }

/* ===================== TABS ===================== */

.about-choice .tabs {
    margin-top: clamp(24px, 3.6vh, 38px);
    display: inline-flex;
    gap: 4px;
    border: 1px solid rgba(17, 17, 17, .16);
    border-radius: 999px;
    padding: 4px;
}

.about-choice .tab {
    background: transparent;
    color: rgba(17, 17, 17, .68);
    border: 0;
    border-radius: 999px;
    padding: 11px 22px;
    min-height: 44px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .4s ease, color .4s ease;
}

.about-choice .tab--active {
    background: #111111;
    color: #ffffff;
}


/* =========================================================
   CHOICE GRID
   ========================================================= */

.about-choice .choice-grid {
    margin-top: clamp(20px, 3vh, 32px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
    align-items: stretch;
    overflow: visible;
}


/* =========================================================
   CHOICE CARDS
   ========================================================= */

.about-choice .choice-card__desc p {
    margin: 4px 0;
}

.about-choice .choice-card {
    --card-x: 0px;
    position: relative;
    border-radius: 26px;
    border: 1px solid rgba(17, 17, 17, .14);
    background: #ffffff;
    color: #111111;
    padding: clamp(26px, 3.2vw, 48px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, .6vh, 26px);
    opacity: .82;
    transform: translate3d(var(--card-x), 0, 0);
    will-change: transform;
    transition: border-color .5s ease, background .5s ease, transform .35s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, box-shadow .35s ease;
}


    /* ===================== CARD POSITIONS ===================== */

    .about-choice .choice-card[data-col="0"] {
        --card-x: calc(-400px * (1 - var(--choice-scroll-progress)));
    }

    .about-choice .choice-card[data-col="1"] {
        --card-x: calc(400px * (1 - var(--choice-scroll-progress)));
    }


/* ===================== ACTIVE CARD ===================== */

.about-choice .choice-card--active {
    border-color: var(--color-brand);
    opacity: 1;
}


/* ===================== CARD HOVER ===================== */

.about-choice .choice-card:hover {
    transform: translate3d(var(--card-x), -10px, 0);
    border-color: var(--color-brand);
    background: #ffffff;
    box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .25);
    opacity: 1;
}


/* ===================== CARD HEADER ===================== */

.about-choice .choice-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}


/* ===================== CARD TITLE ===================== */

.about-choice .choice-card__name {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: -.035em;
    color: #111111;
}


/* ===================== BADGE ===================== */

.about-choice .badge {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--color-brand);
    border-radius: 999px;
    padding: 7px 13px;
}


/* ===================== SUBTITLE ===================== */

.about-choice .choice-card__subtitle {
    margin: 0;
    font-size: clamp(17px, 1.8vw, 23px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: #111111;
}


/* ===================== DESCRIPTION ===================== */

.about-choice .choice-card__desc {
    margin: 0;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.64;
    color: rgba(17, 17, 17, .68);
    max-width: 54ch;
}

    .about-choice .choice-card__desc p {
        color: rgba(17, 17, 17, .68);
    }


/* ===================== BULLETS HEADING ===================== */

.about-choice .choice-card__bullets-heading {
    margin: clamp(6px, 1vh, 10px) 0 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, .5);
}


/* ===================== BULLETS ===================== */

.about-choice .bullets {
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .about-choice .bullets li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 13px 0;
        border-top: 1px solid rgba(17, 17, 17, .12);
        font-size: clamp(13.5px, 1.15vw, 15.5px);
        line-height: 1.5;
        color: rgba(17, 17, 17, .82);
        transition: transform .5s cubic-bezier(.16, 1, .3, 1), color .4s ease;
    }

        .about-choice .bullets li:last-child {
            border-bottom: 1px solid rgba(17, 17, 17, .12);
        }

        .about-choice .bullets li .dot {
            margin-top: 7px;
        }


/* ===================== BULLET HOVER ===================== */

.about-choice .choice-card:hover .bullets li {
    transform: translateX(8px);
    color: #111111;
}


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

.mv-card__label {
    transition: color .3s ease, opacity .3s ease;
}

.mv-card:hover .mv-card__label {
    color: #111111;
    opacity: 1;
    transition-delay: .2s;
}

.about-choice .btn--white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 44px;
    padding: 11px 22px;
    background: #111111;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    margin-top: 10px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .4s ease, color .4s ease, transform .4s ease;
}

    .about-choice .btn--white:hover {
        color: #ffffff;
        transform: translateY(-4px);
    }


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

@media (min-width: 991px) {
    .about-founder__signature {
        max-width: 50%;
    }
}

@media (max-width: 1179px) {
    .nav-links {
        display: none;
    }

    .burger {
        display: flex;
    }
}


/* ===================== TABLET / DESKTOP ===================== */

@media (min-width: 900px) and (max-width: 1650px) {
    .about-founder { --fa-hero-photo-pos: 80% center; }
}
/* ===================== TABLET ===================== */

@media (min-width: 900px) and (max-width: 1179px) {
    .about-choice .choice-card[data-col="0"] {
        --card-x: calc(-250px * (1 - var(--choice-scroll-progress)));
    }

    .about-choice .choice-card[data-col="1"] {
        --card-x: calc(250px * (1 - var(--choice-scroll-progress)));
    }
}


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

@media (max-width: 899px) {

    .about-founder {
        --fa-hero-photo-pos-sm: 75% center;
        background: radial-gradient( 115% 105% at 74% 45%, rgb(74, 26, 40) 0%, rgb(44, 17, 28) 55%, rgb(29, 12, 20) 100% );
    }

    .about-mission {
        padding-top: 80px;
    }
}


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

@media (max-width: 767px) {
    .about-founder__toggle { display: inline-block; }

    /* Collapsed: eyebrow, kicker, title and the first paragraph, set
       smaller at the bottom; a step below hero.css --copy-bottom. */
    .about-founder.is-collapsed {
        --fa-hero-fs-title: 24px;
        --fa-hero-fs-lede: 12.5px;
        --fa-hero-gap-title: 10px;
        --fa-hero-gap-lede: 10px;
    }

    .about-founder.is-collapsed .kicker {
        font-size: 9.5px;
        letter-spacing: .16em;
    }

    .about-founder.is-collapsed .about-founder__body p {
        font-size: var(--fa-hero-fs-lede);
        line-height: 1.55;
    }

    .about-founder.is-collapsed .about-founder__body > :not(:first-child),
    .about-founder.is-collapsed .about-founder__signature { display: none; }

    .about-founder.is-collapsed .about-founder__toggle { margin-top: 10px; }

    /* Expanded, the full message makes the hero taller than the screen and
       cover would zoom the photo in. Keep it one screen tall, as when
       collapsed, and fade its bottom edge into the background. */
    .about-founder:not(.is-collapsed) .fa-hero-std__photo {
        bottom: auto;
        height: 100vh;
        height: 100svh;
        -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
    }

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

    .about-choice .choice-card[data-col="0"] {
        --card-x: calc(-120px * (1 - var(--choice-scroll-progress)));
    }

    .about-choice .choice-card[data-col="1"] {
        --card-x: calc(120px * (1 - var(--choice-scroll-progress)));
    }

    .about-choice .choice-card {
        padding: 26px;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .about-choice {
        padding-left: 20px;
        padding-right: 20px;
    }

        .about-choice .choice-card[data-col="0"] {
            --card-x: calc(-10px * (1 - var(--choice-scroll-progress)));
            transition: transform .2s ease-out;
        }

        .about-choice .choice-card[data-col="1"] {
            --card-x: calc(10px * (1 - var(--choice-scroll-progress)));
            transition: transform .2s ease-out;
        }

        .about-choice .tabs {
            width: 100%;
        }

        .about-choice .tab {
            flex: 1;
            padding-left: 12px;
            padding-right: 12px;
        }
}