/* ============================================================
   FINVILLAHUB P18.1 — ULTRA LUXURY VISUAL SYSTEM
   Visual-only layer.
   No market calculation / entitlement / payment logic.
   ============================================================ */

:root {

    /* ---------------------------------------------------------
       FOUNDATION
       --------------------------------------------------------- */

    --fv18-obsidian: #03070B;
    --fv18-midnight: #071019;
    --fv18-navy: #0A1420;
    --fv18-charcoal: #101923;

    /* ---------------------------------------------------------
       PRECIOUS METALS
       --------------------------------------------------------- */

    --fv18-champagne: #E8D39A;
    --fv18-champagne-soft: #F2E6BD;
    --fv18-gold: #CBAE63;

    --fv18-platinum: #EEF3F5;
    --fv18-silver: #B8C5CC;
    --fv18-ivory: #F5F1E7;

    /* ---------------------------------------------------------
       POSITIVE / EDUCATIONAL JEWEL TONES
       --------------------------------------------------------- */

    --fv18-emerald: #20D6A3;
    --fv18-emerald-soft: #69E6BF;

    --fv18-teal: #28C7D8;
    --fv18-teal-soft: #73E2EA;

    --fv18-sapphire: #4C8DFF;
    --fv18-sapphire-soft: #8CB5FF;

    --fv18-violet: #9B78E8;
    --fv18-violet-soft: #C0A9FF;

    /* ---------------------------------------------------------
       SURFACES
       --------------------------------------------------------- */

    --fv18-glass:
        rgba(255,255,255,.045);

    --fv18-glass-strong:
        rgba(255,255,255,.075);

    --fv18-border:
        rgba(220,235,240,.13);

    --fv18-border-bright:
        rgba(232,211,154,.28);

    /* ---------------------------------------------------------
       LIGHTING
       --------------------------------------------------------- */

    --fv18-shadow-deep:
        0 24px 70px rgba(0,0,0,.42);

    --fv18-shadow-soft:
        0 12px 35px rgba(0,0,0,.26);

    --fv18-glow-gold:
        0 0 34px rgba(232,211,154,.12);

    --fv18-glow-emerald:
        0 0 34px rgba(32,214,163,.10);

    --fv18-glow-teal:
        0 0 34px rgba(40,199,216,.10);

    /* ---------------------------------------------------------
       MOTION
       --------------------------------------------------------- */

    --fv18-ease:
        cubic-bezier(.2,.75,.2,1);

    --fv18-motion-fast:
        180ms var(--fv18-ease);

    --fv18-motion:
        420ms var(--fv18-ease);

    --fv18-motion-slow:
        900ms var(--fv18-ease);
}


/* ============================================================
   GLOBAL SPATIAL FOUNDATION
   ============================================================ */

.fv18-luxury-surface {
    position: relative;
    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

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

    box-shadow:
        var(--fv18-shadow-soft);

    backdrop-filter:
        blur(18px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(125%);

    transition:
        transform var(--fv18-motion),
        border-color var(--fv18-motion),
        box-shadow var(--fv18-motion);
}


/* ============================================================
   PREMIUM METALLIC EDGE
   ============================================================ */

.fv18-metal-edge {
    position: relative;
}

.fv18-metal-edge::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    border: 1px solid transparent;

    background:
        linear-gradient(
            135deg,
            rgba(232,211,154,.42),
            transparent 32%,
            rgba(40,199,216,.18),
            transparent 70%,
            rgba(232,211,154,.22)
        ) border-box;

    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    opacity: .65;
}


/* ============================================================
   POSITIVE LEARNING ACCENT
   ============================================================ */

.fv18-learning {
    border-color:
        rgba(32,214,163,.20);

    box-shadow:
        var(--fv18-glow-emerald);
}


/* ============================================================
   INTELLIGENCE ACCENT
   ============================================================ */

.fv18-intelligence {
    border-color:
        rgba(40,199,216,.20);

    box-shadow:
        var(--fv18-glow-teal);
}


/* ============================================================
   PREMIUM ACCENT
   ============================================================ */

.fv18-premium {
    border-color:
        var(--fv18-border-bright);

    box-shadow:
        var(--fv18-glow-gold);
}


/* ============================================================
   3D DEPTH
   ============================================================ */

.fv18-depth {
    transform:
        translateZ(0);

    transform-style:
        preserve-3d;

    will-change:
        transform;
}

.fv18-depth:hover {
    transform:
        translateY(-3px)
        translateZ(8px);
}


/* ============================================================
   AMBIENT INTELLIGENCE FIELD
   ============================================================ */

.fv18-intelligence-field {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fv18-intelligence-field::before {
    content: "";
    position: absolute;
    inset: -30%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 25% 35%,
            rgba(32,214,163,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 30%,
            rgba(40,199,216,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 80%,
            rgba(232,211,154,.07),
            transparent 30%
        );

    animation:
        fv18Ambient 16s ease-in-out infinite alternate;

    z-index: -1;
}

@keyframes fv18Ambient {

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

    50% {
        transform:
            translate3d(1%, 1%, 0)
            scale(1.035);
    }

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


/* ============================================================
   MICRO LIGHT
   ============================================================ */

.fv18-live-light {
    position: relative;
}

.fv18-live-light::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;

    background:
        var(--fv18-emerald);

    box-shadow:
        0 0 16px rgba(32,214,163,.55);

    animation:
        fv18Pulse 2.6s ease-in-out infinite;

    pointer-events: none;
}

@keyframes fv18Pulse {

    0%,
    100% {
        opacity: .35;
        transform: scale(.82);
    }

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


/* ============================================================
   EDUCATION GRADIENT
   ============================================================ */

.fv18-learning-gradient {
    background:
        linear-gradient(
            120deg,
            rgba(32,214,163,.14),
            rgba(40,199,216,.10),
            rgba(76,141,255,.08)
        );
}


/* ============================================================
   ELITE GRADIENT
   ============================================================ */

.fv18-elite-gradient {
    background:
        linear-gradient(
            120deg,
            rgba(76,141,255,.11),
            rgba(155,120,232,.10),
            rgba(232,211,154,.06)
        );
}


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

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


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

@media (max-width: 768px) {

    .fv18-luxury-surface {
        backdrop-filter:
            blur(10px)
            saturate(115%);

        -webkit-backdrop-filter:
            blur(10px)
            saturate(115%);
    }

    .fv18-depth:hover {
        transform:
            none;
    }

    .fv18-intelligence-field::before {
        animation-duration:
            24s;
    }
}