/* ============================================================
   BENEVOLENT ART GALLERY
   MULTI THEME GLASS / FLUENT DESIGN SYSTEM
   ============================================================ */

/* ============================================================
   BASE DESIGN TOKENS
   ============================================================ */
*::selection{
    background-color:#ffdcf9;
    color: #fff;
}
:root {
    --bg-main: #fff9fc;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.72);
    --bg-card-solid: #ffffff;
    --bg-input: rgba(255, 255, 255, 0.78);

    --accent: #e987ad;
    --accent-2: #b993ed;
    --accent-glow: rgba(233, 135, 173, 0.22);

    --accent-gradient:
        linear-gradient(
            135deg,
            #f2a7c4 0%,
            #d99ce9 50%,
            #9ebcf5 100%
        );

    --accent-gradient-2:
        linear-gradient(
            135deg,
            #f7c1d7 0%,
            #cdb5f4 100%
        );

    --text-main: #303342;
    --text-secondary: #56596a;
    --text-muted: #777b8d;

    --border: rgba(255, 255, 255, 0.82);
    --border-strong: rgba(220, 170, 196, 0.42);

    --shadow:
        0 18px 55px rgba(99, 75, 100, 0.10);

    --shadow-hover:
        0 25px 70px rgba(99, 75, 100, 0.16);

    --glass-blur: 22px;

    --overlay: rgba(30, 28, 40, 0.78);

    --grid-line: rgba(150, 130, 150, 0.07);
    --mouse-glow: rgba(236, 144, 190, 0.10);

    --radius-lg: 24px;
    --radius-md: 16px;

    --font:
        'Plus Jakarta Sans',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color-scheme: light;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: var(--font);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


html {
    scroll-behavior: smooth;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(255,255,255,.90),
            transparent 32%
        ),
        var(--bg-main);

    color: var(--text-main);

    overflow-x: hidden;
}


body {
    position: relative;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.72),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(255,255,255,.60),
            transparent 30%
        );

    color: var(--text-main);

    transition:
        background .45s ease,
        color .35s ease;
}


/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */

.ambient-glows {
    position: fixed;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;
}


.glow-1,
.glow-2 {
    position: absolute;

    border-radius: 50%;

    background: var(--accent-gradient);

    filter: blur(120px);

    opacity: .20;

    will-change: transform;

    transition:
        background .6s ease,
        opacity .6s ease;
}


.glow-1 {
    width: 520px;
    height: 520px;

    top: -15%;
    left: -12%;
}


.glow-2 {
    width: 620px;
    height: 620px;

    bottom: -18%;
    right: -15%;

    opacity: .14;
}


/* ============================================================
   CANVAS
   ============================================================ */

canvas#grid-canvas {
    position: fixed;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    opacity: .85;

    mix-blend-mode: multiply;
}


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

header {
    position: fixed;

    top: 14px;
    left: 50%;

    transform: translateX(-50%);

    width: calc(100% - 32px);

    max-width: 1400px;

    z-index: 100;

    padding: 15px 22px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.50)
        );

    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);

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

    border-radius: 20px;

    box-shadow:
        0 12px 40px rgba(50, 50, 80, .08);

    transition:
        background .5s ease,
        border .4s ease,
        box-shadow .4s ease;
}


/* ============================================================
   LOGO
   ============================================================ */

.logo {
    font-size: 20px;

    font-weight: 800;

    letter-spacing: -.7px;

    background: var(--accent-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    white-space: nowrap;

    display: flex;

    align-items: center; 

    gap: 12px;       

}

/* ============================================================
   NAVIGATION
   ============================================================ */

nav ul {
    display: flex;

    gap: 8px;

    list-style: none;
}


nav ul li a {
    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 9px 13px;

    color: var(--text-muted);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    border-radius: 11px;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}


nav ul li a:hover {
    color: var(--accent);

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

    transform: translateY(-1px);
}


nav ul li a.active {
    color: var(--accent);

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

    box-shadow:
        0 4px 15px rgba(80,80,120,.05);
}


/* ============================================================
   THEME SWITCHER
   ============================================================ */

.theme-switcher {
    position: relative;

    z-index: 150;
}


.theme-toggle {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 9px 14px;

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

    border-radius: 13px;

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

    color: transparent;

    font-size: 13px;

    font-weight: 700;

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

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.theme-toggle:hover {
    transform: translateY(-2px);

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

    box-shadow:
        0 8px 25px rgba(60,60,90,.10);
}


.theme-toggle span:first-child {
    font-size: 16px;
}


/* ============================================================
   THEME PANEL
   ============================================================ */

.theme-panel {
    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    width: 220px;

    padding: 12px;

    display: none;

    flex-direction: column;

    gap: 5px;

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

    backdrop-filter:
        blur(28px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(170%);

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

    border-radius: 18px;

    box-shadow:
        0 22px 60px rgba(40,40,70,.13);

    animation:
        themePanelIn .22s ease;
}


.theme-panel.active {
    display: flex;
}


.theme-panel-title {
    padding: 8px 10px 10px;

    color: var(--text-main);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .4px;

    text-transform: uppercase;
}


.theme-option {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px;

    border: 1px solid transparent;

    border-radius: 12px;

    background: transparent;

    color: var(--text-secondary);

    font-size: 13px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition:
        background .22s ease,
        border .22s ease,
        transform .22s ease;
}


.theme-option:hover {
    background:
        rgba(255,255,255,.70);

    border-color:
        var(--border-strong);

    transform: translateX(2px);
}


.theme-option.active {
    background:
        rgba(255,255,255,.82);

    border-color:
        var(--border-strong);

    color: var(--accent);

    box-shadow:
        0 4px 15px rgba(60,60,90,.05);
}


.theme-preview {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    border-radius: 9px;

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

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,.8),
        0 3px 8px rgba(60,60,80,.08);
}


.soft-pink-preview {
    background:
        linear-gradient(
            135deg,
            #ffe1eb,
            #f5bdd7,
            #d7c5f5
        );
}


.sky-blue-preview {
    background:
        linear-gradient(
            135deg,
            #dff6ff,
            #9fdbf8,
            #c5ddff
        );
}


.pure-glass-preview {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(200,220,240,.55)
        );
}


.crystal-preview {
    background:
        linear-gradient(
            135deg,
            #bdeaff,
            #bbb9ff,
            #f3c4e4
        );
}


.fluent-preview {
    background:
        linear-gradient(
            135deg,
            #f5f6f8,
            #dfe8ff,
            #bfcff5
        );
}


@keyframes themePanelIn {
    from {
        opacity: 0;
        transform:
            translateY(-7px)
            scale(.97);
    }

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


/* ============================================================
   SECTIONS
   ============================================================ */

/* =========================================================
   SOFT FLOATING PINK LIGHTS
   ========================================================= */

.ambient-glows {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.ambient-glows::before,
.ambient-glows::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 220, 238, 0.75) 0%,
            rgba(255, 235, 246, 0.48) 28%,
            rgba(255, 245, 250, 0.20) 52%,
            transparent 72%
        );
    filter: blur(35px);
    opacity: 0.75;
    animation: softOrbFloat 18s ease-in-out infinite alternate;
}

.ambient-glows::before {
    top: 8%;
    left: 5%;
}

.ambient-glows::after {
    right: 3%;
    bottom: 5%;
    width: 380px;
    height: 380px;
    animation-duration: 23s;
    animation-delay: -7s;
}

/* Existing ambient blobs */
#amb-1,
#amb-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(55px);
    opacity: 0.55;
    will-change: transform;
}

#amb-1 {
    width: 260px;
    height: 260px;
    top: 30%;
    left: 35%;
    background: rgba(255, 205, 232, 0.55);
    animation: pinkOrbOne 21s ease-in-out infinite alternate;
}

#amb-2 {
    width: 220px;
    height: 220px;
    top: 55%;
    right: 25%;
    background: rgba(255, 225, 242, 0.65);
    animation: pinkOrbTwo 26s ease-in-out infinite alternate;
}


/* Very slow natural movement */
@keyframes softOrbFloat {
    0% {
        transform: translate3d(-30px, -20px, 0) scale(0.9);
    }

    35% {
        transform: translate3d(80px, 45px, 0) scale(1.08);
    }

    70% {
        transform: translate3d(20px, 120px, 0) scale(0.96);
    }

    100% {
        transform: translate3d(-60px, 60px, 0) scale(1.12);
    }
}

@keyframes pinkOrbOne {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    30% {
        transform: translate3d(120px, -70px, 0) scale(1.12);
    }

    65% {
        transform: translate3d(200px, 80px, 0) scale(0.88);
    }

    100% {
        transform: translate3d(80px, 150px, 0) scale(1.05);
    }
}

@keyframes pinkOrbTwo {
    0% {
        transform: translate3d(0, 0, 0) scale(0.9);
    }

    35% {
        transform: translate3d(-100px, 80px, 0) scale(1.12);
    }

    70% {
        transform: translate3d(-180px, -40px, 0) scale(0.95);
    }

    100% {
        transform: translate3d(-40px, -120px, 0) scale(1.08);
    }
}


/* Make it softer on small screens */
@media (max-width: 768px) {
    .ambient-glows::before,
    .ambient-glows::after {
        width: 220px;
        height: 220px;
        filter: blur(30px);
    }

    #amb-1,
    #amb-2 {
        filter: blur(45px);
    }
}


/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .ambient-glows::before,
    .ambient-glows::after,
    #amb-1,
    #amb-2 {
        animation: none;
    }
}

section {
    position: relative;

    z-index: 10;

    padding:
        140px
        40px
        80px;

    max-width: 1300px;

    margin: 0 auto;
}


/* ============================================================
   TAG
   ============================================================ */

.tag {
    display: inline-flex;

    align-items: center;

    padding: 7px 14px;

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

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

    border-radius: 100px;

    font-size: 11px;

    font-weight: 800;

    color: var(--accent);

    text-transform: uppercase;

    letter-spacing: .6px;

    margin-bottom: 20px;

    box-shadow:
        0 5px 20px rgba(80,80,100,.04);

    backdrop-filter: blur(10px);
}


/* ============================================================
   TITLES
   ============================================================ */

h2.section-title {
    font-size: 42px;

    font-weight: 800;

    letter-spacing: -1.5px;

    margin-bottom: 16px;

    color: var(--text-main);
}


p.section-desc {
    color: var(--text-muted);

    font-size: 16px;

    max-width: 600px;

    margin-bottom: 48px;

    line-height: 1.7;
}


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

.hero {
    min-height: 92vh;

    display: flex;

    align-items: center;

    gap: 80px;

    padding-top: 180px;
}


.hero-content {
    flex: 1.1;
}


.hero h1 {
    font-size: 64px;

    font-weight: 850;

    line-height: 1.08;

    letter-spacing: -2.7px;

    margin-bottom: 24px;
}


.hero h1 span {
    display: block;

    background:
        var(--accent-gradient);

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

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


.hero p {
    font-size: 18px;

    color: var(--text-muted);

    line-height: 1.7;

    margin-bottom: 40px;

    max-width: 540px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.cta-group {
    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}


.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        14px
        25px;

    min-height: 48px;

    border-radius: 15px;

    font-size: 14px;

    font-weight: 750;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .3s ease;
}


.btn-primary {
    background:
        var(--accent-gradient);

    color: #ffffff;

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

    box-shadow:
        0 10px 30px var(--accent-glow);
}


.btn-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px var(--accent-glow);
}


.btn-secondary {
    background:
        rgba(255,255,255,.68);

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

    color: var(--accent);

    box-shadow:
        0 8px 25px rgba(70,70,100,.06);

    backdrop-filter:
        blur(15px);
}


.btn-secondary:hover {
    transform: translateY(-3px);

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

    box-shadow:
        0 14px 30px rgba(70,70,100,.10);
}


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

.hero-visual {
    flex: .9;

    position: relative;

    display: flex;

    justify-content: center;
}


.main-art-wrapper {
    position: relative;

    width: 100%;

    max-width: 440px;

    aspect-ratio: 4 / 5;

    padding: 20px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.66),
            rgba(255,255,255,.30)
        );

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

    backdrop-filter:
        blur(25px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(25px)
        saturate(150%);

    box-shadow:
        var(--shadow);

    transition:
        transform .18s ease-out,
        box-shadow .4s ease,
        background .5s ease;

    transform-style: preserve-3d;
}


.main-art-wrapper::before {
    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.55),
            transparent 55%
        );

    pointer-events: none;

    z-index: 1;
}


.main-art-wrapper::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -35px;
    top: -35px;

    border-radius: 50%;

    background:
        var(--accent-gradient);

    filter:
        blur(30px);

    opacity: .25;

    pointer-events: none;
}

.main-art-wrapper::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: 35px;
    top: 35px;

    border-radius: 50%;

    background:
        var(--accent-gradient);

    filter:
        blur(30px);

    opacity: .25;

    pointer-events: none;
}


.main-art-placeholder {
    position: relative;

    width: 100%;
    height: 100%;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    backdrop-filter:
        blur(10.5px)
        saturate(150%);

    border:
        1px solid rgba(255, 202, 243, 0.349);
}


.main-win {
    max-width: 800px;

    width: 100%;

    height: auto;

    display: block;

    position: relative;

    z-index: 2;

    border-radius: 16px;
}


/* ============================================================
   STATS
   ============================================================ */

.stats-strip {
    display: grid;

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

    gap: 20px;

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

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

    padding: 35px;

    border-radius: 24px;

    margin: 60px 0;

    backdrop-filter:
        blur(25px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(25px)
        saturate(150%);

    box-shadow:
        var(--shadow);
}


.stat-item {
    position: relative;

    padding: 12px 18px;

    border-radius: 17px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.stat-item:hover {
    transform: translateY(-3px);

    background:
        rgba(255,255,255,.45);
}


.stat-item h3 {
    font-size: 36px;

    font-weight: 800;

    background:
        var(--accent-gradient);

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

    -webkit-text-fill-color: transparent;

    margin-bottom: 4px;
}


.stat-item p {
    color: var(--text-muted);

    font-size: 13px;

    font-weight: 600;
}


/* ============================================================
   GALLERY
   ============================================================ */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(300px, 1fr)
        );

    gap: 26px;
}


.art-card {
    position: relative;

    background:
        var(--bg-card);

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

    border-radius: 24px;

    padding: 14px;

    overflow: hidden;

    transition:
        border-color .3s ease,
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        background .4s ease;

    display: flex;

    flex-direction: column;

    gap: 15px;

    will-change: transform;

    backdrop-filter:
        blur(var(--glass-blur))
        saturate(145%);

    -webkit-backdrop-filter:
        blur(var(--glass-blur))
        saturate(145%);

    box-shadow:
        var(--shadow);
}


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

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.40),
            transparent 45%
        );

    pointer-events: none;
}


.art-card:hover {
    border-color:
        var(--border-strong);

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-hover);
}


.card-img-holder {
    width: 100%;

    aspect-ratio: 4 / 3;

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

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: var(--text-muted);

    font-size: 13px;

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


.card-img-holder img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 17px;

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


.art-card:hover .card-img-holder img {
    transform: scale(1.035);
}


.card-details {
    position: relative;

    z-index: 2;

    padding: 2px 4px 4px;
}


.card-details h3 {
    font-size: 18px;

    font-weight: 750;

    margin-bottom: 6px;

    color: var(--text-main);
}


.card-details p {
    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.55;
}


/* ============================================================
   LEGACY IMAGE CARD
   ============================================================ */

.image-card {
    width: 300px;

    background:
        var(--bg-card-solid);

    border-radius: 18px;

    overflow: hidden;

    margin: 20px;

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

    box-shadow:
        var(--shadow);
}


.image-card img {
    width: 100%;

    height: 200px;

    object-fit: cover;

    display: block;
}


/* ============================================================
   ART VIEW BUTTON
   ============================================================ */

.btnv {
    width: 100%;

    padding: 12px 14px;

    background:
        var(--accent-gradient);

    color: white;

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

    cursor: pointer;

    font-weight: 750;

    font-size: 14px;

    border-radius: 13px;

    box-shadow:
        0 8px 22px var(--accent-glow);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}


.btnv:hover {
    opacity: .95;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px var(--accent-glow);
}


/* ============================================================
   ABOUT
   ============================================================ */

.about-wrapper {
    display: flex;

    gap: 80px;

    align-items: center;
}


.about-text {
    flex: 1.2;
}


.about-text p {
    color: var(--text-muted);

    font-size: 16px;

    line-height: 1.75;

    margin-bottom: 24px;
}


.about-visual {
    flex: .8;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.65),
            rgba(255,255,255,.25)
        );

    aspect-ratio: 1;

    border-radius: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-muted);

    font-size: 14px;

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

    backdrop-filter:
        blur(25px);

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

    box-shadow:
        var(--shadow);

    overflow: hidden;
}


.about-visual img {
    width: 100%;

    height: 100%;

    object-fit: contain;
}


/* ============================================================
   CONTACT
   ============================================================ */

.contact-container {
    max-width: 680px;

    margin: 0 auto;

    background:
        var(--bg-card);

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

    padding: 48px;

    border-radius: 26px;

    backdrop-filter:
        blur(28px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(150%);

    box-shadow:
        var(--shadow);
}


.form-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 24px;

    margin-bottom: 24px;
}


.form-group {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 24px;
}


.form-group.full-width {
    margin-bottom: 0;
}


.form-group label {
    font-size: 12px;

    font-weight: 750;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: .5px;
}


.form-group input,
.form-group textarea {
    background:
        var(--bg-input);

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

    padding:
        14px
        18px;

    border-radius: 14px;

    color: var(--text-main);

    font-size: 15px;

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    backdrop-filter:
        blur(12px);
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color:
        var(--text-muted);

    opacity: .65;
}


.form-group input:focus,
.form-group textarea:focus {
    border-color:
        var(--accent);

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

    box-shadow:
        0 0 0 4px var(--accent-glow);
}


.form-group textarea {
    height: 140px;

    resize: vertical;

    min-height: 120px;
}


.submit-btn {
    width: 100%;

    background:
        var(--accent-gradient);

    color: #fff;

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

    padding: 16px;

    border-radius: 14px;

    font-size: 15px;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 10px 28px var(--accent-glow);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;

    margin-top: 32px;
}


.submit-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px var(--accent-glow);

    opacity: .96;
}


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

footer {
    position: relative;

    z-index: 10;

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

    padding:
        60px
        40px
        40px;

    backdrop-filter:
        blur(22px);

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

    margin-top: 100px;

    background:
        rgba(255,255,255,.34);
}


.footer-grid {
    max-width: 1300px;

    margin:
        0 auto
        40px;

    display: grid;

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

    gap: 48px;
}


.footer-brand p {
    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.7;

    margin-top: 12px;

    max-width: 280px;
}


.footer-col h4 {
    font-size: 13px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .6px;

    margin-bottom: 20px;

    color: var(--text-main);
}


.footer-col ul {
    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.footer-col ul li a {
    color: var(--text-muted);

    font-size: 14px;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.footer-col ul li a:hover {
    color: var(--accent);

    transform:
        translateX(3px);
}


.footer-bottom {
    max-width: 1300px;

    margin: 0 auto;

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

    padding-top: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: var(--text-muted);

    font-size: 13px;
}


/* ============================================================
   SOCIAL LINKS
   ============================================================ */

.ull {
    color: var(--text-muted);
}


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

.reveal {
    opacity: 0;

    transform:
        translateY(30px);

    will-change:
        transform,
        opacity;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        opacity .8s cubic-bezier(.16,1,.3,1);
}


.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox {
    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        var(--overlay);

    z-index: 999;

    justify-content: center;

    align-items: center;

    padding: 30px;

    backdrop-filter:
        blur(15px);

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

    animation:
        fadeIn .3s ease;
}


.lightbox.active {
    display: flex;
}


.lightbox img {
    max-width: 90%;

    max-height: 90%;

    border-radius: 16px;

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

    box-shadow:
        0 30px 100px rgba(0,0,0,.35);
}


.close {
    position: absolute;

    top: 20px;
    right: 35px;

    color: white;

    font-size: 40px;

    font-weight: bold;

    cursor: pointer;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 50%;

    transition:
        background .25s ease,
        transform .25s ease,
        color .25s ease;
}


.close:hover {
    color: white;

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

    transform:
        rotate(5deg)
        scale(1.05);
}


/* ============================================================
   FOCUS ACCESSIBILITY
   ============================================================ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline:
        3px solid var(--accent-glow);

    outline-offset:
        3px;
}


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

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1024px) {

    header {
        width: calc(100% - 24px);

        padding:
            14px 18px;
    }


    .hero {
        flex-direction: column;

        text-align: center;

        gap: 60px;

        padding-top: 150px;
    }


    .hero p {
        margin-left: auto;

        margin-right: auto;
    }


    .cta-group {
        justify-content: center;
    }


    .about-wrapper {
        flex-direction: column;

        gap: 48px;
    }


    .about-visual {
        width: 100%;

        max-width: 600px;
    }


    .stats-strip {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }


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


    .main-win {
        max-width: 500px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {

    header {
        top: 8px;

        width:
            calc(100% - 16px);

        padding:
            12px 14px;

        border-radius: 17px;
    }


    header .logo {
        font-size: 16px;
    }


    nav {
        display: none;
    }


    .theme-toggle {
        padding:
            8px 11px;
    }


    .theme-toggle span:last-child {
        display: none;
    }


    .theme-panel {
        right: 0;

        width: 210px;
    }


    section {
        padding:
            100px
            20px
            60px;
    }


    .hero {
        min-height: auto;

        padding-top: 145px;
    }


    .hero h1 {
        font-size: 43px;

        letter-spacing: -1.8px;
    }


    .hero p {
        font-size: 16px;
    }


    h2.section-title {
        font-size: 32px;
    }


    p.section-desc {
        font-size: 15px;
    }


    .cta-group {
        flex-direction: column;

        align-items: stretch;
    }


    .btn {
        width: 100%;
    }


    .main-art-wrapper {
        max-width: 390px;
    }


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

        gap: 22px;
    }


    .stats-strip {
        grid-template-columns:
            1fr;

        text-align: center;

        padding:
            24px;
    }


    .contact-container {
        padding:
            30px
            20px;

        border-radius: 21px;
    }


    .form-row {
        grid-template-columns:
            1fr;

        gap: 0;
    }


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

        gap: 36px;
    }


    .footer-bottom {
        flex-direction: column;

        gap: 16px;

        text-align: center;
    }


    footer {
        padding:
            50px
            20px
            35px;
    }


    .main-win {
        max-width: 500px;
    }
}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 420px) {

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


    .logo {
        font-size: 15px !important;
    }


    .theme-panel {
        width: 195px;
    }


    .main-art-wrapper {
        padding: 12px;

        border-radius: 24px;
    }


    .contact-container {
        padding:
            25px
            16px;
    }
}


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

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

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

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}

.logo-img {
    width: 45px;    
    height: auto;
}