@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@600&display=swap');

/* ====================== ROOT VARIABLES ====================== */
:root {
    --bg-primary: #f9f9f9;
    --bg-secondary: #ffffff;
    --bg-gradient-light: linear-gradient(135deg, #f8fbf8 70%, #edf5ef 100%);
    --footer-bg: linear-gradient(135deg, #f7faf7 0%, #eaf2ec 52%, #e4ede6 100%);
    --text-primary: #333;
    --text-secondary: #555;
    --text-muted: #666;
    --card-bg: rgba(255, 255, 255, 0.97);
    --border-light: #e7eee5;
    --shadow-light: rgba(0, 0, 0, 0.06);
    --shadow-card: rgba(73, 209, 125, 0.10);
    --accent-primary: #49d17d;
    --accent-secondary: #93df70;
    --danger: #ff0000;
}

.dark {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-gradient-light: linear-gradient(135deg, #0d120f 70%, #141a15 100%);
    --footer-bg: linear-gradient(135deg, #080d09 0%, #0d130f 52%, #111913 100%);
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #a0a0a0;
    --card-bg: rgba(30, 30, 30, 0.97);
    --border-light: #2a2a2a;
    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-card: rgba(73, 209, 125, 0.20);
    --accent-primary: #49d17d;
    --accent-secondary: #93df70;
    --danger: #ff4757;
}

/* ====================== GLOBAL STYLES ====================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    background-color: var(--bg-primary);
}

.dark #loader-wrapper {
    background:
        radial-gradient(circle at 15% 20%, rgba(139, 207, 103, 0.12) 0%, transparent 32%),
        radial-gradient(circle at 85% 18%, rgba(73, 209, 125, 0.10) 0%, transparent 28%),
        linear-gradient(135deg, #080b0a 0%, #101713 52%, #090d0b 100%);
}

.dark #loader-subtitle { color: rgba(241, 245, 242, 0.84); }

a {
    color: var(--accent-primary);
    text-decoration: none;
}

::selection {
    background-color: var(--accent-primary);
    color: white;
}

/* ====================== CONTAINER ====================== */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
}

/* ====================== LOADER ====================== */
#loader-wrapper {
    --loader-progress: 0%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 20%, rgba(147, 223, 112, 0.15) 0%, transparent 32%),
        radial-gradient(circle at 85% 18%, rgba(73, 209, 125, 0.20) 0%, transparent 28%),
        linear-gradient(135deg, #090e0a 0%, #101711 52%, #0b100c 100%);
    background-size: 140% 140%;
    animation: loaderAurora 8s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.7s ease, visibility 0.7s ease, filter 0.7s ease;
    z-index: 2000;
}

#loader-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.07) 45%, transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
    animation: loaderSweep 4.8s linear infinite;
    pointer-events: none;
}

#loader-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: var(--loader-progress);
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 0 24px rgba(147, 223, 112, 0.55);
    transition: width 0.18s linear;
}

#loader-wrapper.is-loaded {
    opacity: 0;
    visibility: hidden;
    filter: blur(4px);
}

#loader-wrapper.is-finale #loader-text {
    animation: gradientShift 2.8s infinite, loaderPulse 1.8s ease-in-out infinite, loaderFinalFlicker 0.3s linear 1;
}

@media (prefers-color-scheme: light) {
    #loader-wrapper {
        background:
            radial-gradient(circle at 12% 20%, rgba(147, 223, 112, 0.12) 0%, transparent 35%),
            radial-gradient(circle at 88% 15%, rgba(73, 209, 125, 0.14) 0%, transparent 32%),
            linear-gradient(135deg, #f6f8f4 0%, #f0f4ee 52%, #eaf2ec 100%);
    }

    #loader-wrapper::before {
        background:
            linear-gradient(120deg, transparent 0%, rgba(73, 209, 125, 0.10) 45%, transparent 60%),
            repeating-linear-gradient(0deg, rgba(73, 209, 125, 0.02) 0 1px, transparent 1px 4px);
    }
}

#loader-text {
    font-size: clamp(2.2rem, 8vw, 4.4rem);
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    background-size: 220% 220%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 2.8s infinite, loaderPulse 1.8s ease-in-out infinite;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    text-shadow: 0 0 28px rgba(147, 223, 112, 0.32);
    position: relative;
    z-index: 1;
}

.dark #loader-text {
    text-shadow: 0 0 28px rgba(147, 223, 112, 0.42);
}

#loader-text::before,
#loader-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    text-align: center;
    opacity: 0.55;
    pointer-events: none;
}

#loader-text::before {
    color: rgba(147, 223, 112, 0.45);
    transform: translateX(-1px);
    animation: glitchLeft 2.4s infinite steps(2, end);
}

#loader-text::after {
    color: rgba(73, 209, 125, 0.45);
    transform: translateX(1px);
    animation: glitchRight 2.7s infinite steps(2, end);
}

#loader-subtitle {
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.84);
    opacity: 0.95;
    text-align: center;
    min-height: 1.2em;
    z-index: 1;
    position: relative;
}

#loader-subtitle::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 140px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(147, 223, 112, 0.8), transparent);
    animation: subtitleBeam 1.8s ease-in-out infinite;
    pointer-events: none;
}

@media (prefers-color-scheme: light) {
    #loader-subtitle {
        color: rgba(64, 82, 50, 0.78);
    }
}

@keyframes loaderAurora {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes loaderPulse {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 0 rgba(147, 223, 112, 0));
    }
    50% {
        transform: translateY(-2px);
        filter: drop-shadow(0 6px 20px rgba(147, 223, 112, 0.26));
    }
}

@keyframes loaderSweep {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}

@keyframes glitchLeft {
    0% {
        clip-path: inset(0 0 0 0);
        transform: translateX(-1px);
        opacity: 0.5;
    }
    12% {
        clip-path: inset(12% 0 76% 0);
        transform: translateX(-3px);
    }
    14% {
        clip-path: inset(0 0 0 0);
        transform: translateX(-1px);
    }
    60% {
        clip-path: inset(0 0 0 0);
    }
    62% {
        clip-path: inset(68% 0 8% 0);
        transform: translateX(-4px);
    }
    64%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translateX(-1px);
        opacity: 0.5;
    }
}

@keyframes glitchRight {
    0% {
        clip-path: inset(0 0 0 0);
        transform: translateX(1px);
        opacity: 0.45;
    }
    10% {
        clip-path: inset(40% 0 44% 0);
        transform: translateX(4px);
    }
    12% {
        clip-path: inset(0 0 0 0);
        transform: translateX(1px);
    }
    72% {
        clip-path: inset(0 0 0 0);
    }
    74% {
        clip-path: inset(10% 0 74% 0);
        transform: translateX(3px);
    }
    76%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translateX(1px);
        opacity: 0.45;
    }
}

@keyframes subtitleBeam {
    0%, 100% {
        opacity: 0.4;
        width: 110px;
    }
    50% {
        opacity: 1;
        width: 180px;
    }
}

@keyframes loaderFinalFlicker {
    0% { opacity: 1; }
    18% { opacity: 0.45; }
    34% { opacity: 1; }
    58% { opacity: 0.3; }
    100% { opacity: 1; }
}

#loader-wrapper.is-finale #loader-subtitle {
    animation: subtitleExit 0.32s ease forwards;
}

@keyframes subtitleExit {
    to {
        opacity: 0;
        transform: translateY(4px);
    }
}

@media (max-width: 576px) {
    #loader-wrapper::after {
        height: 3px;
    }

    #loader-subtitle {
        font-size: 0.76rem;
        letter-spacing: 0.14em;
        margin-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #loader-wrapper,
    #loader-wrapper::before,
    #loader-wrapper::after,
    #loader-text,
    #loader-subtitle,
    #loader-text::before,
    #loader-text::after,
    #loader-subtitle::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ====================== NAVBAR ====================== */
.navbar {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    position: fixed;
    width: 100%;
    z-index: 1100;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgba(73, 209, 125, 0.08);
}

.dark .navbar {
    background: rgba(13, 19, 15, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.logo a {
    text-decoration: none;
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo a:hover {
    color: var(--accent-primary);
    transform: translateY(-1px);
    text-shadow: 0 8px 22px rgba(73, 209, 125, 0.16);
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.08rem;
    padding: 11px 16px;
    border-radius: 999px;
    background: transparent;
    transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    z-index: 1;
}

.nav-link::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 7px;
    z-index: 2;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-primary);
    background: rgba(73, 209, 125, 0.08);
    box-shadow: 0 10px 22px rgba(73, 209, 125, 0.10);
    transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    opacity: 1;
}

/* ====================== THEME TOGGLE ====================== */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    z-index: 1200;
    color: var(--accent-primary);
    transition: background 0.3s ease, transform 0.3s ease;
}

.theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.08);
}

.theme-toggle svg {
    position: absolute;
    width: 24px;
    height: 24px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.theme-toggle .icon-sun { 
    opacity: 1; 
    transform: rotate(0deg) scale(1); 
}

.theme-toggle .icon-moon { 
    opacity: 0; 
    transform: rotate(-90deg) scale(0.5); 
}

.dark .theme-toggle .icon-sun { 
    opacity: 0; 
    transform: rotate(90deg) scale(0.5); 
}

.dark .theme-toggle .icon-moon { 
    opacity: 1; 
    transform: rotate(0deg) scale(1); 
}

.mobile-theme-toggle {
    display: none;
    text-align: center;
    padding: 10px 0;
}

.mobile-theme-toggle .theme-toggle {
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    border: none;
    z-index: auto;
}

@media (max-width: 992px) {
    .mobile-theme-toggle {
        display: list-item;
    }

    #themeToggle {
        display: none;
    }

    .theme-toggle svg {
        width: 22px;
        height: 22px;
    }
}

/* ====================== HAMBURGER MENU ====================== */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid rgba(73, 209, 125, 0.14);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    z-index: 1200;
}

.dark .hamburger {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.hamburger span {
    height: 3px;
    width: 22px;
    background: var(--text-primary);
    margin-bottom: 4px;
    border-radius: 5px;
    transition: transform 0.3s ease, opacity 0.2s ease, width 0.25s ease, background 0.25s ease;
}

.hamburger span:last-child {
    margin-bottom: 0;
}

.hamburger:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(73, 209, 125, 0.14);
}

.hamburger.toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
}

.hamburger.toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 992px) {
    .nav-links {
        position: fixed;
        right: 14px;
        top: 74px;
        width: min(320px, calc(100vw - 28px));
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        padding: 24px 18px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(73, 209, 125, 0.12);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        transform: translateX(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease, visibility 0.26s ease;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
        z-index: 1180;
        align-items: stretch;
    }

    .dark .nav-links {
        background: rgba(13, 19, 15, 0.98);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .nav-links li {
        width: 100%;
        margin: 0;
        opacity: 0;
        transform: translateX(12px);
        transition: transform 0.28s ease, opacity 0.28s ease;
    }

    .nav-links.open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .hamburger {
        display: flex;
    }

    .nav-links.open li {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-links.open li:nth-child(1) { transition-delay: 0.05s; }
    .nav-links.open li:nth-child(2) { transition-delay: 0.10s; }
    .nav-links.open li:nth-child(3) { transition-delay: 0.15s; }
    .nav-links.open li:nth-child(4) { transition-delay: 0.20s; }
    .nav-links.open li:nth-child(5) { transition-delay: 0.25s; }
    .nav-links.open li:nth-child(6) { transition-delay: 0.30s; }

    .nav-links .nav-link {
        width: 100%;
        justify-content: center;
        display: inline-flex;
        padding: 14px 18px;
        border-radius: 18px;
    }

    .nav-links .nav-link::after {
        display: none;
    }

    .mobile-theme-toggle {
        width: 100%;
        padding: 16px 0 0;
        margin-top: 6px;
        border-top: 1px solid rgba(73, 209, 125, 0.10);
    }

    body.nav-open {
        overflow: hidden;
    }

    body.nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(8, 13, 9, 0.16);
        pointer-events: none;
        z-index: 1170;
    }
}

/* ====================== COOKIE BANNER ====================== */
.cookie-banner {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border-radius: 18px;
    box-shadow: 0 8px 30px var(--shadow-light);
    padding: 25px 30px;
    width: 90%;
    max-width: 520px;
    display: none;
    z-index: 9999;
    font-family: 'Segoe UI', sans-serif;
    animation: fadeIn 0.6s ease;
    overflow: hidden;
    color: var(--text-primary);
}

#closeBanner {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(73, 209, 125, 0.3);
    transition: all 0.3s ease;
}

#closeBanner:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 4px 12px rgba(73, 209, 125, 0.4);
}

.cookie-content h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: var(--text-primary);
}

.cookie-content p {
    color: var(--text-secondary);
    font-size: 14px;
}

.cookie-buttons {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.cookie-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.cookie-buttons button.outline {
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

.cookie-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(73, 209, 125, 0.3);
}

.cookie-manage {
    margin-top: 15px;
    display: none;
    text-align: left;
    animation: fadeIn 0.5s ease;
    color: var(--text-primary);
}

.cookie-manage h4 {
    margin-bottom: 8px;
    color: var(--text-primary);
}

.cookie-manage label {
    display: block;
    margin: 5px 0;
    color: var(--text-secondary);
}

#savePreferences {
    margin-top: 10px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

#reopenButton {
    position: fixed;
    bottom: 25px;
    left: 25px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: none;
    z-index: 9999;
    transition: all 0.3s;
}

#reopenButton:hover {
    transform: scale(1.05);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====================== HERO SECTION ====================== */
.home-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(8, 13, 9, 0.50), rgba(73, 209, 125, 0.18)),
        url('../img/optimized/hero-bg.webp') center center/cover no-repeat;
    background-blend-mode: multiply;
}

.home-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(147, 223, 112, 0.20) 0%, transparent 24%),
        radial-gradient(circle at 85% 18%, rgba(73, 209, 125, 0.22) 0%, transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.10) 0%, transparent 32%);
    pointer-events: none;
}

.home-section::after {
    content: "";
    position: absolute;
    inset: auto 8% 8% 8%;
    height: 180px;
    background: radial-gradient(circle, rgba(147, 223, 112, 0.12) 0%, transparent 72%);
    filter: blur(18px);
    pointer-events: none;
}

.hero {
    text-align: center;
    color: var(--text-primary);
    max-width: 860px;
    margin: 0 auto;
    padding: 38px 28px 34px 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16), 0 8px 26px rgba(73, 209, 125, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.dark .hero {
    background: rgba(10, 15, 11, 0.84);
    border-color: rgba(255, 255, 255, 0.10);
}

.hero::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(circle at top left, rgba(147, 223, 112, 0.14) 0%, transparent 28%),
        radial-gradient(circle at bottom right, rgba(73, 209, 125, 0.14) 0%, transparent 30%);
    pointer-events: none;
}

.hero > * {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(73, 209, 125, 0.10);
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 10px 24px rgba(73, 209, 125, 0.10);
}

.hero-badge i {
    color: var(--accent-secondary);
}

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.hero-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    border: 1px solid rgba(73, 209, 125, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.dark .hero-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}

.hero-secondary:hover {
    color: #fff;
}

.hero-pill-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.dark .hero-pill {
    background: rgba(255, 255, 255, 0.06);
}

.hero-pill i {
    color: var(--accent-secondary);
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--accent-primary);
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: 1.18rem;
    margin: 0 auto 26px;
    color: var(--text-secondary);
    line-height: 1.7;
    font-family: 'Roboto', sans-serif;
    max-width: 760px;
}

.btn-primary {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 36px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.08rem;
    box-shadow: 0 4px 15px rgba(73, 209, 125, 0.22);
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    background: linear-gradient(90deg, #49d17d, #8bcf67);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(73, 209, 125, 0.18);
}

@media (max-width: 768px) {
    .hero {
        padding: 26px 14px 28px 14px;
        border-radius: 18px;
    }

    .hero-badge {
        margin-bottom: 14px;
        padding: 8px 12px;
        font-size: 0.86rem;
    }

    .hero h1 {
        font-size: 2.1rem;
        margin-bottom: 12px;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .hero-actions {
        gap: 10px;
        margin-bottom: 18px;
    }

    .btn-primary {
        padding: 12px 22px;
        font-size: 1rem;
    }

    .hero-secondary {
        padding: 12px 20px;
    }

    .hero-pill-row {
        gap: 8px;
    }

    .hero-pill {
        padding: 9px 12px;
        font-size: 0.86rem;
    }

    .home-section {
        padding-top: 60px;
    }
}

/* ====================== SECTION TITLES ====================== */
.home-section .hero h1,
.about-section h2,
.founder-section h2,
.projects-section h2,
.services-section h2,
.events-section h2,
.social-section h1,
.contact-section h2,
.clients-section h2,
.section-title {
    margin-top: 90px;
}

.home-section .hero h1 {
    margin-top: 0;
}

.section-title {
    font-size: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    margin: 14px auto 0;
    background: var(--accent-primary);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 60px;
    opacity: 0.9;
}

@media (max-width: 576px) {
    .home-section,
    .about-section,
    .founder-section,
    .projects-section,
    .services-section,
    .events-section,
    .contact-section,
    .code-section,
    .social-section,
    .gallery-section,
    .privacy-section {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

/* ====================== ABOUT SECTION ====================== */
.about-section {
    padding: 100px 0 90px 0;
    background: var(--bg-gradient-light);
    position: relative;
    overflow: hidden;
}

.about-section h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 2px;
    position: relative;
    text-transform: uppercase;
}

.about-section h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background-color: var(--accent-primary);
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-radius: 2px;
}

.about-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.about-image {
    flex: 1 1 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image img {
    width: 100%;
    max-width: 370px;
    border-radius: 22px;
    box-shadow: 0 12px 32px var(--shadow-card), 0 2px 8px var(--shadow-light);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
    background: var(--bg-secondary);
}

.about-image img:hover {
    transform: translateY(-10px) scale(1.04) rotate(-2deg);
    box-shadow: 0 20px 48px rgba(73, 209, 125, 0.18), 0 4px 16px var(--shadow-light);
}

.about-text {
    flex: 2 1 400px;
    max-width: 600px;
    text-align: left;
    font-size: 1.22rem;
    color: var(--text-secondary);
    background: var(--card-bg);
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 6px 24px var(--shadow-card);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1;
}

.about-text.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.about-text strong,
.about-text .highlight {
    color: var(--accent-primary);
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.animated-text {
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary) 80%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glowing-text 3s infinite linear;
    font-weight: 700;
    letter-spacing: 0.5px;
}

@keyframes glowing-text {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (max-width: 992px) {
    .about-content {
        flex-direction: column;
        gap: 32px;
        padding: 0 10px;
    }

    .about-image img {
        max-width: 320px;
    }

    .about-text {
        padding: 28px 14px;
        font-size: 1.08rem;
    }

    .about-section h2 {
        font-size: 2.1rem;
        margin-bottom: 28px;
    }
}

@media (max-width: 576px) {
    .about-section {
        padding: 48px 0 32px 0;
    }

    .about-content {
        gap: 18px;
        padding: 0 4px;
    }

    .about-image img {
        max-width: 220px;
        border-radius: 12px;
    }

    .about-text {
        padding: 16px 6px;
        font-size: 0.98rem;
        border-radius: 10px;
    }

    .about-section h2 {
        font-size: 1.5rem;
        margin-bottom: 18px;
    }
}

/* ====================== FOUNDER SECTION ====================== */
.founder-section {
    padding: 100px 0;
    background: var(--bg-gradient-light);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
}

.founder-header {
    text-align: center;
    margin-bottom: 60px;
}

.founder-header .icon {
    font-size: 48px;
    color: var(--accent-primary);
    margin-bottom: 15px;
}

.founder-header h2 {
    font-size: 2.8rem;
    margin: 0;
    font-weight: 700;
    color: var(--text-primary);
}

.tagline {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-top: 10px;
}

.founder-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 24px var(--shadow-card);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.founder-image img {
    width: 250px;
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px var(--shadow-card);
    transition: transform 0.3s ease;
    background: var(--bg-primary);
}

.founder-image img:hover {
    transform: scale(1.05);
}

.founder-info {
    max-width: 550px;
}

.founder-info p {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--text-secondary);
}

.founder-info .quote {
    font-style: italic;
    color: var(--accent-primary);
    border-left: 3px solid var(--accent-secondary);
    padding-left: 15px;
    margin-top: 20px;
}

.gradient-text {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.highlight {
    background-color: rgba(230, 240, 255, 0.1);
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--accent-primary);
    font-weight: 600;
}

.founder-btn {
    display: inline-block;
    margin-top: auto;
    padding: 13px 32px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(73, 209, 125, 0.18);
    position: relative;
    overflow: hidden;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
    z-index: 1;
}

.founder-btn:hover {
    background: linear-gradient(90deg, #49d17d, #8bcf67);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(73, 209, 125, 0.22);
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================== PROJECTS SECTION ====================== */
.projects-section {
    padding: 120px 0 100px 0;
    background: var(--bg-gradient-light);
    position: relative;
    overflow: hidden;
}

.staff-experience-section {
    padding-top: 108px;
}

.staff-hero {
    max-width: 1120px;
    margin: 0 auto 36px;
    padding: 34px 28px 30px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(73, 209, 125, 0.10);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(73, 209, 125, 0.10);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dark .staff-hero {
    background: rgba(10, 15, 11, 0.84);
    border-color: rgba(255, 255, 255, 0.08);
}

.staff-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(147, 223, 112, 0.12) 0%, transparent 26%),
        radial-gradient(circle at 88% 14%, rgba(73, 209, 125, 0.12) 0%, transparent 24%);
    pointer-events: none;
}

.staff-hero > * {
    position: relative;
    z-index: 1;
}

.staff-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(73, 209, 125, 0.10);
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 18px;
    box-shadow: 0 10px 24px rgba(73, 209, 125, 0.10);
}

.staff-badge i {
    color: var(--accent-secondary);
}

.staff-hero h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    position: relative;
}

.staff-hero h2::after {
    content: "";
    width: 92px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    border-radius: 999px;
}

.staff-hero p {
    max-width: 760px;
    margin: 26px auto 22px;
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

.staff-hero-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.staff-link-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(73, 209, 125, 0.16);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.dark .staff-link-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.staff-link-secondary:hover {
    transform: translateY(-2px);
    color: var(--accent-primary);
    box-shadow: 0 14px 28px rgba(73, 209, 125, 0.14);
}

.staff-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
}

.staff-stat {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(73, 209, 125, 0.06);
    border: 1px solid rgba(73, 209, 125, 0.10);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.staff-stat strong {
    font-size: 1.8rem;
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
}

.staff-stat span {
    color: var(--text-secondary);
    font-weight: 600;
}

.projects-section h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.projects-section h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background-color: var(--accent-primary);
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-radius: 2px;
}

.projects-grid,
.hidden-projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 36px;
    justify-content: center;
    padding: 0 20px;
    opacity: 0;
    animation: fadeInUp 1.2s 0.2s forwards;
}

.staff-experience-section .projects-grid,
.staff-experience-section .hidden-projects {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}

.project-card {
    background: var(--card-bg);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow-card), 0 1.5px 6px var(--shadow-light);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.staff-card {
    min-height: 440px;
}

.staff-card .project-info {
    padding: 26px 20px 22px;
}

.staff-card .project-info h3 {
    margin-bottom: 8px;
}

.staff-card .project-info p {
    min-height: 72px;
    font-size: 1.02rem;
    line-height: 1.55;
}

.staff-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0.9;
}

.project-card::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, #49d17d22 0%, transparent 80%);
    z-index: 0;
    pointer-events: none;
}

.project-card:hover {
    transform: translateY(-12px) scale(1.045);
    box-shadow: 0 16px 36px var(--shadow-card), 0 2px 8px var(--shadow-light);
    filter: brightness(1.04);
}

.project-card:hover img {
    filter: brightness(1.08) saturate(1.1);
    transform: scale(1.04);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    transition: filter 0.3s, transform 0.3s;
    background: var(--bg-secondary);
}

.project-info {
    padding: 28px 22px 24px 22px;
    text-align: center;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 1;
}

.project-info h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.project-info p {
    font-size: 1.08rem;
    color: var(--text-secondary);
    margin-bottom: 18px;
    min-height: 60px;
}

.project-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

.btn-secondary {
    display: inline-block;
    margin-top: auto;
    padding: 13px 32px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(73, 209, 125, 0.18);
    position: relative;
    overflow: hidden;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
    z-index: 1;
}

.btn-secondary:hover {
    background: linear-gradient(90deg, #49d17d, #8bcf67);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(73, 209, 125, 0.22);
}

#proofs {
    scroll-margin-top: 90px;
}

.toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 36px;
}

.btn-toggle {
    background: linear-gradient(90deg, #49d17d, #8bcf67);
    color: white;
    padding: 13px 32px;
    font-size: 1.08rem;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 15px rgba(73, 209, 125, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    outline: none;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    overflow: hidden;
}

.btn-toggle:hover {
    background: linear-gradient(135deg, var(--accent-primary), #176b43);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(71, 125, 29, 0.22);
}

.btn-toggle:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 5px rgba(71, 125, 29, 0.18);
}

.btn-icon {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-toggle.active .btn-icon {
    transform: rotate(180deg);
}

@media (max-width: 992px) {
    .staff-hero {
        padding: 28px 18px 24px;
        border-radius: 24px;
    }

    .staff-hero h2 {
        font-size: 2.2rem;
    }

    .staff-hero p {
        font-size: 1rem;
        margin: 22px auto 18px;
    }

    .staff-stats {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .projects-grid,
    .hidden-projects {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 22px;
    }

    .project-card {
        min-height: 320px;
        border-radius: 14px;
    }

    .project-card img {
        height: 160px;
        border-radius: 14px 14px 0 0;
    }

    .project-info {
        padding: 18px 8px 14px 8px;
    }

    .project-info h3 {
        font-size: 1.15rem;
    }

    .project-info p {
        font-size: 0.98rem;
        min-height: 0;
    }

    .staff-card {
        min-height: 0;
    }

    .btn-secondary,
    .btn-toggle {
        padding: 10px 18px;
        font-size: 0.98rem;
    }

    .project-buttons {
        gap: 10px;
        margin-top: 12px;
    }
}

@media (max-width: 576px) {
    .projects-section {
        padding: 38px 0 18px 0;
    }

    .staff-experience-section {
        padding-top: 96px;
    }

    .staff-hero {
        padding: 22px 14px 18px;
        border-radius: 18px;
        margin-bottom: 22px;
    }

    .staff-badge {
        margin-bottom: 14px;
        padding: 8px 12px;
        font-size: 0.84rem;
    }

    .staff-hero h2 {
        margin-top: 0;
        font-size: 1.55rem;
        margin-bottom: 8px;
    }

    .staff-hero h2::after {
        width: 70px;
        bottom: -8px;
    }

    .staff-hero p {
        margin: 18px auto 14px;
        font-size: 0.96rem;
    }

    .staff-hero-actions {
        gap: 10px;
        margin-bottom: 16px;
    }

    .staff-link-secondary,
    .staff-hero .btn-secondary {
        width: 100%;
    }

    .staff-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .staff-stat {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .staff-stat strong {
        font-size: 1.5rem;
    }

    .projects-section h2 {
        font-size: 1.5rem;
        margin-bottom: 18px;
    }

    .projects-grid,
    .hidden-projects {
        gap: 10px;
        padding: 0 2px;
        grid-template-columns: 1fr;
    }

    .project-card {
        min-height: 0;
        border-radius: 10px;
        box-shadow: 0 2px 8px var(--shadow-card);
    }

    .project-card img {
        height: 180px;
        min-height: 180px;
        max-height: 220px;
        border-radius: 10px 10px 0 0;
        object-fit: cover;
        background: var(--bg-secondary);
        box-shadow: 0 2px 8px var(--shadow-light);
    }

    .project-info {
        padding: 10px 2px 8px 2px;
    }

    .project-info h3 {
        font-size: 1.05rem;
        margin-bottom: 6px;
    }

    .project-info p {
        font-size: 0.95rem;
        min-height: 0;
        margin-bottom: 10px;
    }

    .staff-card .project-info {
        padding: 12px 6px 10px;
    }

    .btn-secondary,
    .btn-toggle {
        padding: 9px 12px;
        font-size: 0.95rem;
        border-radius: 20px;
    }

    .project-buttons {
        gap: 6px;
        margin-top: 6px;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ====================== VIDEO SECTION ====================== */
.video-section {
    padding: 80px 0;
    background-color: var(--bg-secondary);
}

.video-section h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.video-section h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background-color: var(--accent-primary);
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-radius: 2px;
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container iframe {
    width: 100%;
    max-width: 800px;
    height: 450px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--shadow-light);
    transition: transform 0.3s ease;
}

.video-container iframe:hover {
    transform: scale(1.05);
}

/* ====================== SOCIAL SECTION ====================== */
.social-section {
    text-align: center;
    padding: 110px 0 90px;
    background:
        linear-gradient(135deg, rgba(8, 13, 9, 0.05), rgba(73, 209, 125, 0.03)),
        var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.social-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(147, 223, 112, 0.10) 0%, transparent 26%),
        radial-gradient(circle at 88% 12%, rgba(73, 209, 125, 0.12) 0%, transparent 24%);
    pointer-events: none;
}

.social-section .container {
    position: relative;
    z-index: 1;
}

.social-hero {
    max-width: 980px;
    margin: 0 auto 42px;
    padding: 36px 28px 30px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(73, 209, 125, 0.10);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(73, 209, 125, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark .social-hero {
    background: rgba(10, 15, 11, 0.82);
    border-color: rgba(255, 255, 255, 0.08);
}

.social-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(73, 209, 125, 0.10);
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 18px;
    box-shadow: 0 10px 24px rgba(73, 209, 125, 0.10);
}

.social-badge i {
    color: var(--accent-secondary);
}

.social-section h1 {
    text-align: center;
    margin: 0 0 14px;
    font-size: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    position: relative;
}

.social-section h1::after {
    content: "";
    width: 80px;
    height: 4px;
    background-color: var(--accent-primary);
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-radius: 2px;
}

.social-section p {
    font-size: 1.16rem;
    color: var(--text-muted);
    margin: 0 auto 22px;
    max-width: 720px;
    line-height: 1.7;
}

.social-pills {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.dark .social-pill {
    background: rgba(255, 255, 255, 0.06);
}

.social-pill i {
    color: var(--accent-secondary);
}

.social-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.social-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.social-link-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(73, 209, 125, 0.16);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.dark .social-link-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.social-link-secondary:hover {
    transform: translateY(-2px);
    color: var(--accent-primary);
    box-shadow: 0 14px 28px rgba(73, 209, 125, 0.14);
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
    max-width: 980px;
}

.social-card {
    border: none;
    border-radius: 22px;
    box-shadow: 0 12px 30px var(--shadow-card), 0 2px 8px var(--shadow-light);
    text-decoration: none;
    padding: 34px 22px 28px 22px;
    text-align: center;
    color: white;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, background 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 184px;
    will-change: transform, box-shadow, filter;
}

.social-card::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, #fff3 0%, transparent 80%);
    z-index: 0;
    pointer-events: none;
}

.social-card i {
    font-size: 2.7rem;
    margin-bottom: 12px;
    z-index: 1;
    filter: drop-shadow(0 2px 8px #93df7033);
    transition: transform 0.3s, filter 0.3s;
    will-change: transform, filter;
    color: white;
}

.social-card span {
    font-size: 1.13rem;
    font-weight: 700;
    z-index: 1;
    letter-spacing: 0.5px;
    margin-top: 6px;
    color: white;
}

.social-card.youtube { background: linear-gradient(120deg, #ff1a1a 0%, #c20000 100%); }
.social-card.twitch { background: linear-gradient(120deg, #49d17d 0%, #497536 100%); }
.social-card.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 40%, #d6249f 62%, #55dfff 90%); }
.social-card.tiktok { background: radial-gradient(circle at 30% 107%, #ff0050 6%, #101010 58%, #6589ff 92%); }
.social-card.telegram { background: linear-gradient(120deg, #93df70 0%, #32845c 100%); }
.social-card.linkedin { background: linear-gradient(120deg, #93df70 0%, #27714f 100%); }
.social-card.github { background: linear-gradient(120deg, #161616 0%, #000000 100%); }
.social-card.facebook { background: linear-gradient(135deg, #8fda4b 0%, #497536 100%); }

.social-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 18px 42px var(--shadow-card), 0 2px 8px var(--shadow-light);
    filter: brightness(1.05);
}

.social-card:hover i {
    transform: scale(1.18) rotate(-6deg);
    filter: drop-shadow(0 4px 16px #93df7055);
}

@media (max-width: 768px) {
    .social-section {
        padding: 80px 0 60px;
    }

    .social-hero {
        padding: 26px 16px 22px;
        border-radius: 20px;
        margin-bottom: 28px;
    }

    .social-badge {
        margin-bottom: 14px;
        padding: 8px 12px;
        font-size: 0.86rem;
    }

    .social-section h1 {
        font-size: 2.15rem;
        margin-bottom: 10px;
    }

    .social-section p {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    .social-pills {
        gap: 8px;
        margin-bottom: 16px;
    }

    .social-pill {
        padding: 9px 12px;
        font-size: 0.84rem;
    }

    .social-actions {
        gap: 10px;
    }

    .social-link-secondary,
    .social-cta {
        width: 100%;
        justify-content: center;
    }

    .social-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        max-width: 100%;
    }

    .social-card {
        min-height: 122px;
        padding: 22px 10px 18px 10px;
        border-radius: 14px;
        will-change: transform, box-shadow, filter;
    }

    .social-card i {
        font-size: 2rem;
        margin-bottom: 8px;
        will-change: transform, filter;
    }

    .social-card span {
        font-size: 1rem;
    }
}

/* ====================== INSTAGRAM SHOWCASE ====================== */
.instagram-showcase {
    padding: 100px 0 80px;
    background:
        linear-gradient(135deg, rgba(73, 209, 125, 0.04), rgba(147, 223, 112, 0.02)),
        var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.instagram-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 18%, rgba(147, 223, 112, 0.08) 0%, transparent 24%);
    pointer-events: none;
}

.instagram-showcase .container {
    position: relative;
    z-index: 1;
}

.insta-feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto 50px;
}

.insta-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 18px var(--shadow-card);
    cursor: pointer;
}

.insta-item img {
    width: 100%;
    display: block;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.insta-item::after {
    content: "\f16d";
    font-family: "Font Awesome 6 Brands";
    font-size: 2.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    color: #fff;
    opacity: 0;
    transition: all 0.35s ease;
}

.insta-item:hover img { 
    transform: scale(1.08); 
    filter: brightness(0.8); 
}

.insta-item:hover::after { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
}

/* ====================== YOUTUBE SHOWCASE ====================== */
.youtube-showcase {
    background:
        linear-gradient(135deg, rgba(8, 13, 9, 0.03), rgba(73, 209, 125, 0.03)),
        var(--bg-secondary);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.youtube-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 14%, rgba(255, 0, 0, 0.08) 0%, transparent 24%);
    pointer-events: none;
}

.youtube-showcase .container {
    position: relative;
    z-index: 1;
}

.youtube-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 60px;
}

.yt-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(73, 209, 125, 0.10);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 10px 28px var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark .yt-card {
    background: rgba(20, 26, 21, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

.yt-card iframe {
    width: 100%;
    height: 220px;
    border-radius: 16px;
    margin-bottom: 18px;
    border: none;
}

.yt-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.yt-card p { 
    font-size: 1rem; 
    color: var(--text-muted); 
    line-height: 1.65;
}

.yt-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 14px 32px var(--shadow-card); 
}

.event-btn {
    display: inline-block;
    padding: 13px 36px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    text-decoration: none;
    border-radius: 35px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 5px 18px rgba(73, 209, 125, 0.25);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}

.event-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.event-btn:hover::before { 
    left: 130%; 
}

.event-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(73, 209, 125, 0.32);
}

.btn-wrapper {
    text-align: center;
}

.insta-btn i,
.yt-btn i { 
    margin-right: 8px; 
}

@media (max-width: 768px) {
    .instagram-showcase,
    .youtube-showcase { 
        padding: 70px 0; 
    }

    .insta-feed {
        gap: 14px;
        margin-bottom: 34px;
    }

    .yt-card iframe { 
        height: 170px; 
    }

    .yt-card {
        padding: 16px;
        border-radius: 16px;
    }
}

/* ====================== SERVICES SECTION ====================== */
.services-section {
    padding: 80px 0 60px 0;
    background: var(--bg-gradient-light);
    position: relative;
    overflow: hidden;
}

.services-section h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.services-section h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background-color: var(--accent-primary);
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-radius: 2px;
}

.services-section .section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-bottom: 40px;
    font-family: 'Roboto', sans-serif;
    opacity: 0.85;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 32px;
    opacity: 0;
    animation: fadeInUp 1.2s 0.2s forwards;
    padding: 0 20px;
}

.service-card {
    background: var(--card-bg);
    padding: 44px 32px 36px 32px;
    border-radius: 22px;
    box-shadow: 0 8px 32px var(--shadow-card), 0 1.5px 6px var(--shadow-light);
    text-align: center;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 370px;
    opacity: 0;
    animation: fadeInUp 1s forwards;
    border: 1px solid var(--border-light);
}

.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }

.service-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #49d17d22 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.service-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(147, 223, 112, 0.14) 0%,
        rgba(73, 209, 125, 0.10) 18%,
        transparent 55%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}

.service-card:hover::after {
    opacity: 1;
}

.service-card > * {
    position: relative;
    z-index: 1;
}

.service-icon {
    font-size: 56px;
    color: var(--accent-primary);
    margin-bottom: 18px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform 0.35s, filter 0.3s;
    filter: drop-shadow(0 2px 8px #93df7033);
    z-index: 1;
}

.service-card h3 {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}

.service-card p {
    font-size: 1.08rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
    z-index: 1;
    min-height: 60px;
}

.btn-fancy {
    display: inline-block;
    margin-top: auto;
    padding: 13px 32px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(73, 209, 125, 0.18);
    position: relative;
    overflow: hidden;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
    z-index: 1;
}

.btn-fancy::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s;
    opacity: 1;
    z-index: 0;
}

.btn-fancy:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
}

.btn-fancy:hover {
    background: linear-gradient(90deg, #49d17d, #8bcf67);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(73, 209, 125, 0.22);
}

.service-card:hover {
    transform: translateY(-12px) scale(1.045);
    box-shadow: 0 16px 36px var(--shadow-card), 0 2px 8px var(--shadow-light);
}

.service-card:hover .service-icon {
    transform: scale(1.18) rotate(-6deg);
    filter: drop-shadow(0 4px 16px #93df7055);
}

@media (prefers-reduced-motion: reduce) {
    .service-card::after {
        transition: none !important;
    }
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 22px;
    }

    .service-card {
        min-height: 320px;
        padding: 36px 18px 28px 18px;
    }
}

@media (max-width: 576px) {
    .services-section {
        padding: 48px 0 30px 0;
    }

    .services-section h2 {
        font-size: 2.1rem;
        margin-bottom: 28px;
    }

    .services-grid {
        gap: 14px;
        padding: 0 6px;
    }

    .service-card {
        min-height: 0;
        padding: 22px 8px 18px 8px;
    }

    .service-icon {
        font-size: 38px;
        margin-bottom: 10px;
    }

    .btn-fancy {
        padding: 10px 18px;
        font-size: 0.98rem;
    }
}

@keyframes fadeInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ====================== CLIENTS SECTION ====================== */
.clients-section {
    padding: 90px 0 70px 0;
    background: var(--bg-gradient-light);
    position: relative;
    overflow: hidden;
}

.clients-section h2 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.9rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    position: relative;
}

.clients-section h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    border-radius: 2px;
}

.clients-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 28px;
    opacity: 0.85;
}

.clients-wrapper {
    position: relative;
}

.clients-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 60px 10px 20px;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.clients-track:active {
    cursor: grabbing;
}

.clients-track::-webkit-scrollbar {
    display: none;
}

.client-card {
    position: relative;
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 240px;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) border-box;
    border: 3px solid transparent;
    backdrop-filter: blur(12px);
    border-radius: 22px;
    padding: 60px 24px 24px;
    text-align: center;
    scroll-snap-align: start;
    transition: transform 0.35s, box-shadow 0.35s;
    box-shadow: 0 6px 24px var(--shadow-card);
    user-select: none;
}

.client-card img {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
                linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) border-box;
    border: 3px solid transparent;
    border-radius: 50%;
    padding: 10px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
    pointer-events: none;
}

.client-card p {
    font-size: 1.08rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary);
}

.client-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 14px 34px var(--shadow-card);
}

.scroll-hint {
    text-align: center;
    font-size: 1rem;
    color: var(--accent-primary);
    margin-top: 16px;
    opacity: 0.7;
    animation: fadeInOut 2.5s infinite;
    user-select: none;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

@media (max-width: 576px) {
    .client-card {
        min-width: 160px;
        padding: 50px 18px 18px;
    }

    .client-card img {
        width: 70px;
        height: 70px;
        top: -35px;
        padding: 8px;
    }

    .clients-track {
        padding: 50px 10px 20px;
    }

    .clients-section h2 {
        font-size: 2.2rem;
    }
}

/* ====================== EVENTS SECTION [MIGLIORATA] ====================== */
.events-section {
    padding: 108px 0 86px 0;
    background: var(--bg-gradient-light);
    position: relative;
    overflow: hidden;
}

.events-hero-panel {
    max-width: 1120px;
    margin: 0 auto 34px;
    padding: 34px 28px 30px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(73, 209, 125, 0.10);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(73, 209, 125, 0.12);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dark .events-hero-panel {
    background: rgba(10, 15, 11, 0.84);
    border-color: rgba(255, 255, 255, 0.08);
}

.events-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 18%, rgba(147, 223, 112, 0.12) 0%, transparent 24%),
        radial-gradient(circle at 88% 16%, rgba(73, 209, 125, 0.13) 0%, transparent 24%);
    pointer-events: none;
}

.events-hero-panel > * {
    position: relative;
    z-index: 1;
}

.events-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(73, 209, 125, 0.10);
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 18px;
    box-shadow: 0 10px 24px rgba(73, 209, 125, 0.10);
}

.events-badge i {
    color: var(--accent-secondary);
}

.events-hero-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.events-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    max-width: 980px;
    margin: 0 auto 34px;
}

.events-kpi-card {
    padding: 16px 14px;
    border-radius: 18px;
    background: rgba(73, 209, 125, 0.06);
    border: 1px solid rgba(73, 209, 125, 0.10);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.events-kpi-card strong {
    font-size: 1.65rem;
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
}

.events-kpi-card span {
    color: var(--text-secondary);
    font-weight: 600;
}

.events-section h2 {
    text-align: center;
    margin-bottom: 60px;
    font-size: 3.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.events-section h2::after {
    content: "";
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    border-radius: 3px;
    box-shadow: 0 4px 15px rgba(73, 209, 125, 0.25);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    justify-content: center;
    align-items: stretch;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeInUp 1.2s 0.2s forwards;
}

.event-card {
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 10px 40px var(--shadow-card), 0 2px 8px var(--shadow-light);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), 
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.4s;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    position: relative;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.event-card::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(73, 209, 125, 0.25) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.event-card:hover {
    transform: translateY(-16px) scale(1.05);
    box-shadow: 0 20px 50px var(--shadow-card), 0 8px 20px var(--shadow-light);
    filter: brightness(1.05);
}

.event-card:hover::before {
    transform: translate(50%, 50%) scale(1.2);
}

.event-image {
    position: relative;
    height: 240px;
    overflow: hidden;
    width: 100%;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s;
    filter: brightness(1);
}

.event-card:hover .event-image img {
    transform: scale(1.12) rotate(2deg);
    filter: brightness(1.1) saturate(1.15);
}

.event-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 800;
    border-radius: 50px;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(10px);
    z-index: 2;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.event-tag.fiera { 
    background: linear-gradient(135deg, #ff7f50, #ff4500);
    box-shadow: 0 8px 24px rgba(255, 79, 0, 0.35);
}

.event-tag.gdr { 
    background: linear-gradient(135deg, #7ba94b, #93df70);
    box-shadow: 0 8px 24px rgba(109, 145, 47, 0.35);
}

.event-tag.coralmc { 
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 8px 24px rgba(73, 209, 125, 0.35);
}

.event-info {
    padding: 32px 28px 28px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 1;
}

.event-date {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 16px;
    width: fit-content;
    box-shadow: 0 4px 15px rgba(73, 209, 125, 0.25);
    letter-spacing: 0.3px;
}

.event-info h3 {
    margin: 0 0 12px;
    font-size: 1.55rem;
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.event-card:hover .event-info h3 {
    color: var(--accent-secondary);
}

.event-info p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    min-height: 65px;
    line-height: 1.65;
}

.events-section .event-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px 38px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    border-radius: 35px;
    text-decoration: none;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    box-shadow: 0 6px 20px rgba(73, 209, 125, 0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.events-section .event-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 0;
}

.events-section .event-btn:hover::before {
    left: 100%;
}

.events-section .event-btn:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 14px 35px rgba(73, 209, 125, 0.38);
    background: linear-gradient(90deg, #176b43, #8bcf67);
}

.events-section .event-btn:active {
    transform: translateY(-2px) scale(1.03);
}

.events-section .event-btn.event-btn-outline {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border: 1px solid rgba(73, 209, 125, 0.16);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.dark .events-section .event-btn.event-btn-outline {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.events-section .event-btn.event-btn-outline:hover {
    color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.18);
}

.events-bottom-note {
    margin: 26px auto 0;
    max-width: 960px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(73, 209, 125, 0.10);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.events-bottom-note i {
    color: var(--accent-primary);
    font-size: 1.2rem;
}

.events-bottom-note p {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 600;
}

@media (max-width: 1024px) {
    .events-hero-panel {
        padding: 28px 18px 24px;
        border-radius: 24px;
    }

    .events-kpis {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .events-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 32px;
    }

    .event-card {
        min-height: 450px;
    }

    .event-image {
        height: 200px;
    }

    .event-info {
        padding: 24px 20px;
    }
}

@media (max-width: 768px) {
    .events-section {
        padding: 86px 0 56px 0;
    }

    .events-hero-panel {
        padding: 24px 14px 20px;
        border-radius: 20px;
        margin-bottom: 24px;
    }

    .events-badge {
        margin-bottom: 14px;
        padding: 8px 12px;
        font-size: 0.86rem;
    }

    .events-section h2 {
        font-size: 2.2rem;
        margin-bottom: 24px;
    }

    .events-hero-actions {
        margin-top: 14px;
        gap: 10px;
    }

    .events-kpis {
        margin-bottom: 24px;
    }

    .events-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 12px;
    }

    .event-card {
        min-height: 400px;
    }

    .event-image {
        height: 180px;
    }

    .event-info {
        padding: 20px 16px;
    }

    .event-info h3 {
        font-size: 1.3rem;
    }

    .event-info p {
        font-size: 1rem;
        min-height: 50px;
    }

    .events-section .event-btn {
        padding: 12px 32px;
        font-size: 1rem;
    }

    .events-bottom-note {
        margin-top: 18px;
        padding: 14px 12px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .events-section {
        padding: 76px 0 34px 0;
    }

    .events-section h2 {
        font-size: 1.8rem;
        margin-bottom: 18px;
    }

    .events-hero-panel .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .events-kpis {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .events-kpi-card {
        border-radius: 14px;
        padding: 12px;
    }

    .events-kpi-card strong {
        font-size: 1.4rem;
    }

    .events-grid {
        gap: 16px;
        padding: 0 8px;
    }

    .event-card {
        min-height: 0;
        border-radius: 16px;
    }

    .event-image {
        height: 180px;
    }

    .event-info {
        padding: 16px 12px;
    }

    .event-info h3 {
        font-size: 1.15rem;
        margin-bottom: 8px;
    }

    .event-info p {
        font-size: 0.95rem;
        margin-bottom: 12px;
        min-height: 0;
    }

    .event-tag {
        top: 12px;
        left: 12px;
        padding: 6px 14px;
        font-size: 0.75rem;
    }

    .event-date {
        font-size: 0.85rem;
        padding: 6px 16px;
        margin-bottom: 10px;
    }

    .events-section .event-btn {
        padding: 10px 24px;
        font-size: 0.95rem;
        width: 100%;
    }
}

/* ====================== TIMELINE (FUTURE EVENTS) ====================== */
.future-events {
    background: var(--bg-gradient-light);
    padding: 80px 20px;
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: auto;
    padding: 20px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 3px;
    transform: translateX(-50%);
    box-shadow: 0 0 24px var(--accent-secondary), 0 0 8px var(--accent-primary);
}

.timeline-item {
    position: relative;
    width: 50%;
    align-self: flex-start;
    padding: 0 40px;
    box-sizing: border-box;
    z-index: 2;
}

.timeline-item:nth-child(even) {
    align-self: flex-end;
}

.timeline-marker {
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-50%, -10px);
    width: 32px;
    height: 32px;
    background: radial-gradient(circle at center, var(--accent-secondary) 0%, var(--accent-primary) 80%);
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 16px rgba(73, 209, 125, 0.6), 0 0 32px rgba(147, 223, 112, 0.5);
    border: 3px solid #fff;
    animation: pulse 2s infinite;
}

.timeline-item:nth-child(even) .timeline-marker {
    left: 0;
    transform: translate(-50%, -10px);
}

.timeline-content {
    background: var(--bg-secondary);
    padding: 28px 22px;
    border-radius: 18px;
    box-shadow: 0 8px 25px var(--shadow-light), 0 2px 8px var(--accent-secondary);
    transition: transform 0.3s, box-shadow 0.3s;
    color: var(--text-primary);
    position: relative;
    border-left: 6px solid var(--accent-primary);
    border-right: 6px solid var(--accent-secondary);
}

.timeline-item:nth-child(even) .timeline-content {
    border-left: none;
    border-right: 6px solid var(--accent-primary);
}

.timeline-content:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 16px 40px var(--shadow-light), 0 4px 16px var(--accent-secondary);
}

.timeline-date {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent-primary);
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline-content h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 1.3rem;
    font-family: 'Montserrat', sans-serif;
}

.timeline-content p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1.05rem;
}

@keyframes pulse {
    0% { box-shadow: 0 0 16px var(--accent-secondary), 0 0 32px var(--accent-primary); }
    50% { box-shadow: 0 0 32px var(--accent-secondary), 0 0 48px var(--accent-primary); }
    100% { box-shadow: 0 0 16px var(--accent-secondary), 0 0 32px var(--accent-primary); }
}

.timeline-content:hover ~ .timeline-marker,
.timeline-marker:hover {
    box-shadow: 0 0 32px var(--accent-secondary), 0 0 64px var(--accent-primary);
    filter: brightness(1.2);
}

@media (max-width: 992px) {
    .timeline {
        gap: 36px;
        max-width: 98vw;
        padding: 10px 0;
    }

    .timeline-content {
        padding: 18px 10px;
        font-size: 0.98rem;
        border-radius: 12px;
    }

    .timeline-marker {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 576px) {
    .timeline {
        max-width: 100vw;
        padding: 0;
        gap: 28px;
    }

    .timeline::before {
        left: 18px;
        width: 4px;
        border-radius: 2px;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
        width: 100%;
        align-self: stretch;
        padding: 0 0 0 40px;
    }

    .timeline-marker {
        left: 0;
        top: 0;
        transform: translate(-50%, -10px);
        width: 22px;
        height: 22px;
    }

    .timeline-content {
        margin-left: 0;
        margin-right: 0;
        border-radius: 10px;
        padding: 14px 8px;
        font-size: 0.95rem;
        border-left: 4px solid var(--accent-primary);
        border-right: none;
    }
}

/* ====================== MINI DISCOUNT (INSTANT GAMING) ====================== */
.mini-discount {
    padding: 40px 0 10px;
    background: transparent;
}

.mini-discount-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(73, 209, 125, 0.06) 100%);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    box-shadow: 0 8px 28px var(--shadow-card);
    overflow: hidden;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s;
}

.mini-discount-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(147, 223, 112, 0.18) 0%,
        rgba(73, 209, 125, 0.10) 18%,
        transparent 55%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.mini-discount-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 45px var(--shadow-card), 0 10px 30px var(--shadow-light);
    border-color: rgba(73, 209, 125, 0.35);
}

.mini-discount-card:hover::before {
    opacity: 1;
}

.mini-discount-left {
    flex: 1 1 auto;
    padding: 20px 20px 18px;
    position: relative;
    z-index: 2;
}

.mini-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 6px 18px rgba(73, 209, 125, 0.18);
    margin-bottom: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.mini-discount-card:hover .mini-discount-badge {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 24px rgba(73, 209, 125, 0.25);
    filter: saturate(1.1);
}

.mini-discount-left h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary);
    transition: transform 0.3s ease, letter-spacing 0.3s ease;
}

.mini-discount-card:hover .mini-discount-left h3 {
    transform: translateY(-1px);
    letter-spacing: 0.3px;
}

.mini-discount-left p {
    margin: 0 0 14px;
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 560px;
}

.mini-discount-code-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.mini-discount-code {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    padding: 8px 14px;
    border-radius: 12px;
    box-shadow: 0 6px 18px var(--shadow-light);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mini-discount-card:hover .mini-discount-code {
    transform: translateY(-1px);
    border-color: rgba(147, 223, 112, 0.35);
    box-shadow: 0 14px 28px rgba(73, 209, 125, 0.18);
}

.mini-discount-copy {
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 9px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, border-color 0.22s ease;
}

.mini-discount-copy:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 22px var(--shadow-card);
    border-color: rgba(73, 209, 125, 0.35);
    filter: brightness(1.03);
}

.mini-discount-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mini-discount-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 8px 20px rgba(73, 209, 125, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mini-discount-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 28px rgba(73, 209, 125, 0.22);
}

.mini-discount-note {
    display: block;
    margin-top: 10px;
    color: var(--text-muted);
    opacity: 0.9;
    font-size: 0.85rem;
}

.mini-discount-right {
    width: 160px;
    position: relative;
    background: radial-gradient(circle at 30% 30%, rgba(147, 223, 112, 0.18) 0%, transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(73, 209, 125, 0.18) 0%, transparent 55%);
    border-left: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease;
    z-index: 1;
}

.mini-discount-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 34px rgba(73, 209, 125, 0.25);
    transform: rotate(8deg);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}

.mini-discount-icon i {
    font-size: 30px;
    color: #fff;
}

.mini-discount-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, rgba(147, 223, 112, 0.20) 0%, transparent 55%);
    filter: blur(6px);
    pointer-events: none;
}

.mini-discount-card:hover .mini-discount-right {
    transform: translateY(-2px);
}

.mini-discount-card:hover .mini-discount-icon {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 18px 42px rgba(73, 209, 125, 0.28);
}

@media (max-width: 768px) {
    .mini-discount-card {
        flex-direction: column;
    }

    .mini-discount-right {
        width: 100%;
        height: 110px;
        border-left: none;
        border-top: 1px solid var(--border-light);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mini-discount-card,
    .mini-discount-card::before,
    .mini-discount-badge,
    .mini-discount-icon,
    .mini-discount-code,
    .mini-discount-right,
    .mini-discount-copy,
    .mini-discount-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* ====================== CONTACT SECTION ====================== */
.contact-section {
    padding: 104px 0 86px 0;
    background: var(--bg-gradient-light);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.contact-page-shell {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
}

.contact-intro-panel {
    text-align: left;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(73, 209, 125, 0.10);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 8px 22px rgba(73, 209, 125, 0.10);
    position: sticky;
    top: 110px;
}

.dark .contact-intro-panel {
    background: rgba(10, 15, 11, 0.82);
    border-color: rgba(255, 255, 255, 0.08);
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(73, 209, 125, 0.10);
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 14px;
}

.contact-badge i {
    color: var(--accent-secondary);
}

.contact-section h2 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    margin-bottom: 24px;
    font-size: 3rem;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    position: relative;
    text-transform: uppercase;
}

.contact-section h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background-color: var(--accent-primary);
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-radius: 2px;
}

.contact-intro-panel h2 {
    text-align: left;
}

.contact-intro-panel h2::after {
    left: 0;
    transform: none;
}

.contact-section > h2,
.contact-section > p,
.contact-section > .contact-info,
.contact-section > .contact-btn {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.contact-section > p {
    font-size: 1.08rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.7;
}

.contact-section > .contact-info {
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(73, 209, 125, 0.10);
    border-radius: 16px;
    width: fit-content;
    padding: 10px 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}

.dark .contact-section > .contact-info {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.contact-intro-panel > p {
    font-size: 1.06rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.75;
}

.contact-highlight-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.contact-highlight-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(73, 209, 125, 0.06);
    border: 1px solid rgba(73, 209, 125, 0.10);
}

.contact-highlight-card i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    flex: 0 0 auto;
}

.contact-highlight-card strong {
    display: block;
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    margin-bottom: 1px;
}

.contact-highlight-card span {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.contact-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.contact-info p {
    font-size: 18px;
    color: var(--text-primary);
    margin: 0;
}

.contact-icon {
    font-size: 24px;
    color: var(--accent-primary);
}

.contact-btn {
    display: inline-block;
    margin-top: auto;
    padding: 13px 32px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(73, 209, 125, 0.18);
    position: relative;
    overflow: hidden;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
    z-index: 1;
}

.contact-intro-panel .contact-btn {
    width: 100%;
    text-align: center;
}

.contact-btn:hover {
    background: linear-gradient(90deg, #49d17d, #8bcf67);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(73, 209, 125, 0.22);
}

.contact-form {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--card-bg);
    padding: 48px 38px 38px 38px;
    border-radius: 22px;
    border: 1.5px solid var(--border-light);
    box-shadow: 0 8px 32px var(--shadow-card), 0 1.5px 6px var(--shadow-light);
    display: flex;
    flex-direction: column;
    gap: 28px;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    z-index: 1;
    animation: fadeInUp 1s 0.2s both;
    color: var(--text-primary);
}

.contact-page-shell .contact-form {
    min-height: 100%;
}

.form-header {
    text-align: left;
    margin-bottom: -2px;
}

.form-header h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary);
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.form-header p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.98rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-group-half {
    min-width: 0;
}

.contact-form::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, #49d17d22 0%, transparent 80%);
    z-index: 0;
    pointer-events: none;
}

.contact-form:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 16px 36px var(--shadow-card), 0 2px 8px var(--shadow-light);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-family: 'Roboto', sans-serif;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
    transition: color 0.2s;
}

.form-group input,
.form-group textarea {
    font-family: 'Roboto', sans-serif;
    padding: 15px 20px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-secondary);
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    font-size: 1.08rem;
    color: var(--text-primary);
    resize: none;
}

.form-group select {
    font-family: 'Roboto', sans-serif;
    padding: 15px 20px;
    padding-right: 54px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(73, 209, 125, 0.08), rgba(147, 223, 112, 0.04)),
        var(--bg-secondary);
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s, transform 0.2s;
    font-size: 1.02rem;
    color: var(--text-primary);
    appearance: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
    background-image:
        radial-gradient(circle at calc(100% - 17px) 50%, rgba(73, 209, 125, 0.12) 0 11px, transparent 12px),
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%),
        linear-gradient(to right, rgba(73, 209, 125, 0.22), rgba(147, 223, 112, 0.12));
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px),
        calc(100% - 40px) 50%;
    background-size: 22px 22px, 6px 6px, 6px 6px, 1px 62%;
    background-repeat: no-repeat;
}

.form-group input:hover,
.form-group textarea:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
}

.form-group select:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(73, 209, 125, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #49d17d;
    box-shadow: 0 0 0 4px rgba(73, 209, 125, 0.13);
    background: rgba(20, 26, 21, 0.1);
}

.form-group select:focus {
    outline: none;
    border-color: #49d17d;
    box-shadow: 0 0 0 4px rgba(73, 209, 125, 0.13);
    background-color: var(--bg-secondary);
}

.form-group select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.dark .form-group select {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
    font-size: 0.98rem;
}

.form-help {
    color: var(--text-muted);
    font-size: 0.86rem;
    margin-top: 2px;
}

.btn.submit-btn {
    align-self: center;
    padding: 16px 44px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.13rem;
    letter-spacing: 0.8px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(73, 209, 125, 0.15);
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.btn.submit-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s;
    opacity: 1;
    z-index: 0;
}

.btn.submit-btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
}

.btn.submit-btn:hover {
    background: linear-gradient(90deg, #176b43, #93df70);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 30px rgba(73, 209, 125, 0.25);
}

.form-footnote {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: -10px;
}

.form-message {
    text-align: center;
    font-size: 1.05rem;
    margin-top: 10px;
    color: var(--accent-primary);
    font-weight: 600;
    min-height: 24px;
}

@media (max-width: 768px) {
    .contact-section {
        padding: 88px 0 60px 0;
    }

    .contact-page-shell {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-intro-panel {
        position: static;
        border-radius: 18px;
        padding: 20px 14px;
    }

    .contact-section h2 {
        text-align: center;
        margin-bottom: 20px;
    }

    .contact-section h2::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-intro-panel > p {
        text-align: center;
        font-size: 0.98rem;
        margin-bottom: 14px;
    }

    .form-header {
        text-align: center;
    }

    .form-header h3 {
        font-size: 1.2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .contact-highlight-list {
        margin-bottom: 14px;
    }

    .contact-form {
        padding: 28px 8px 18px 8px;
        border-radius: 14px;
        box-shadow: 0 4px 12px var(--shadow-card);
        max-width: 98vw;
    }

    .contact-section h2 {
        font-size: 2.1rem;
        margin-bottom: 22px;
    }

    .contact-section > p {
        font-size: 0.98rem;
        margin-bottom: 16px;
        padding: 0 10px;
    }

    .contact-section > .contact-info {
        width: calc(100% - 20px);
        justify-content: center;
        margin-bottom: 18px;
        padding: 10px 12px;
    }
}

@media (max-width: 576px) {
    .contact-section {
        padding: 74px 0 34px 0;
    }

    .contact-intro-panel {
        padding: 16px 12px;
        border-radius: 14px;
    }

    .contact-badge {
        width: 100%;
        justify-content: center;
        font-size: 0.84rem;
    }

    .contact-section h2 {
        font-size: 1.7rem;
    }

    .contact-section > .contact-info {
        border-radius: 12px;
    }

    .contact-highlight-card {
        padding: 10px;
        border-radius: 12px;
    }

    .contact-form {
        padding: 16px 2px 10px 2px;
        border-radius: 10px;
        box-shadow: none;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 11px 10px;
        font-size: 0.97rem;
    }

    .form-footnote {
        margin-top: -2px;
    }

    .btn.submit-btn {
        width: 100%;
        padding: 13px;
        font-size: 1rem;
    }
}

/* ====================== TESTIMONIALS ====================== */
.testimonials-section {
    margin: 40px 0;
}

.testimonials-section h3 {
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.testimonials {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px var(--shadow-light);
}

.testimonial p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.testimonial span {
    display: block;
    text-align: right;
    font-size: 14px;
    color: var(--text-primary);
}

/* ====================== GALLERY ====================== */
.gallery-section {
    margin: 40px 0;
}

.gallery-section h3 {
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--shadow-light);
    transition: transform 0.3s;
}

.gallery img:hover {
    transform: scale(1.05);
}

/* ====================== PRIVACY SECTION ====================== */
.privacy-section {
    background:
        linear-gradient(135deg, rgba(73, 209, 125, 0.04), rgba(147, 223, 112, 0.02)),
        var(--bg-primary);
    padding: 102px 0 70px;
    position: relative;
    overflow: hidden;
}

.privacy-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 16%, rgba(147, 223, 112, 0.12) 0%, transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(73, 209, 125, 0.12) 0%, transparent 24%);
    pointer-events: none;
}

.privacy-container {
    max-width: 980px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.86);
    padding: 28px;
    border-radius: 24px;
    box-shadow: 0 20px 50px var(--shadow-light), 0 10px 30px rgba(73, 209, 125, 0.10);
    border: 1px solid rgba(73, 209, 125, 0.10);
    color: var(--text-primary);
    position: relative;
    z-index: 1;
}

.dark .privacy-container {
    background: rgba(10, 15, 11, 0.84);
    border-color: rgba(255, 255, 255, 0.08);
}

.privacy-title {
    font-size: 2.35rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.8px;
}

.privacy-hero {
    text-align: center;
    padding: 14px 8px 18px;
}

.privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(73, 209, 125, 0.10);
    color: var(--accent-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 16px;
}

.privacy-badge i {
    color: var(--accent-secondary);
}

.privacy-summary {
    max-width: 720px;
    margin: 0 auto 10px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.privacy-date {
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-muted);
    margin: 0;
}

.privacy-toc {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0 24px;
}

.privacy-toc a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(73, 209, 125, 0.10);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.privacy-toc a:hover {
    transform: translateY(-2px);
    color: var(--accent-primary);
}

.privacy-content {
    display: grid;
    gap: 12px;
}

.privacy-block {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(73, 209, 125, 0.08);
    border-radius: 16px;
    padding: 16px 16px 14px;
}

.dark .privacy-block {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.privacy-content h3 {
    font-size: 1.16rem;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
}

.privacy-content h3 span {
    color: var(--accent-primary);
}

.privacy-content p,
.privacy-content ul {
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.privacy-content ul {
    list-style-type: disc;
    padding-left: 20px;
    display: grid;
    gap: 4px;
}

.privacy-content a {
    color: var(--accent-primary);
    text-decoration: none;
}

.privacy-content a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .privacy-section {
        padding: 86px 0 54px;
    }

    .privacy-container {
        padding: 18px 14px;
        border-radius: 18px;
    }

    .privacy-title {
        font-size: 1.8rem;
    }

    .privacy-summary {
        font-size: 0.96rem;
    }

    .privacy-toc {
        gap: 8px;
    }

    .privacy-toc a {
        font-size: 0.8rem;
        padding: 7px 10px;
    }

    .privacy-block {
        padding: 12px 12px 10px;
        border-radius: 12px;
    }
}

@media (max-width: 576px) {
    .privacy-section {
        padding: 74px 0 40px;
    }

    .privacy-badge {
        width: 100%;
        justify-content: center;
        font-size: 0.84rem;
    }

    .privacy-title {
        font-size: 1.5rem;
    }

    .privacy-content h3 {
        font-size: 1.02rem;
    }

    .privacy-content p,
    .privacy-content ul {
        font-size: 0.92rem;
    }
}

/* ====================== FOOTER ====================== */
.footer {
    background: var(--footer-bg);
    padding: 68px 0 42px;
    color: var(--text-primary);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(73, 209, 125, 0.14);
    box-shadow: 0 -18px 50px var(--shadow-light);
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(147, 223, 112, 0.16) 0%, transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(73, 209, 125, 0.18) 0%, transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 28%);
    pointer-events: none;
}

.footer .container {
    position: relative;
    overflow: visible;
}

.footer .footer-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 34px 28px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 28px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    z-index: 1;
}

.dark .footer .footer-content {
    background: rgba(9, 14, 10, 0.58);
    border-color: rgba(255, 255, 255, 0.10);
}

.footer .footer-content p {
    font-size: 15px;
    margin: 0;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.footer .footer-content > p:first-child {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.footer .social-icons {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer .social-icons a {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.footer .social-icons a:hover {
    color: #fff;
    transform: translateY(-4px) scale(1.05);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 16px 30px rgba(73, 209, 125, 0.24);
}

.footer .quick-contact {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.footer .quick-contact div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.footer .quick-contact div i {
    font-size: 18px;
    color: var(--accent-secondary);
}

.footer .quick-contact div a {
    color: var(--text-primary);
    font-weight: 700;
    transition: color 0.25s ease;
}

.footer .quick-contact div a:hover {
    color: var(--accent-secondary);
}

.footer .quick-contact div p {
    color: var(--text-primary);
}

.footer::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: min(420px, calc(100% - 40px));
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
    transform: translateX(-50%);
    border-radius: 999px;
    opacity: 0.9;
}

.footer .privacy-policy {
    margin-top: 8px;
}

.footer .privacy-policy .privacy-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.footer .privacy-policy .privacy-link:hover {
    color: #fff;
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 14px 28px rgba(73, 209, 125, 0.22);
}

.footer .footer-content > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .footer {
        padding: 56px 0 34px;
    }

    .footer .footer-content {
        padding: 28px 18px 26px;
        border-radius: 24px;
        gap: 16px;
    }

    .footer .social-icons {
        gap: 12px;
    }

    .footer .social-icons a {
        width: 44px;
        height: 44px;
        font-size: 20px;
        border-radius: 14px;
    }

    .footer .quick-contact div,
    .footer .privacy-policy .privacy-link {
        width: 100%;
        justify-content: center;
    }

    .footer::after {
        width: min(280px, calc(100% - 32px));
    }
}

/* ====================== BACK TO TOP BUTTON ====================== */
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    font-size: 1.2rem;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

#back-to-top:hover {
    background-color: #176b43;
}

/* ====================== FIREWORKS ====================== */
#fireworksCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Updated portfolio design */
:root {
    --ink: #070b08;
    --panel: #0b120d;
    --panel-raised: #111b14;
    --line: rgba(222, 240, 226, .11);
    --line-accent: rgba(73, 209, 125, .29);
    --lime: #49d17d;
    --mint: #93df70;
    --paper: #eff6f0;
    --muted: #a7b5aa;
    --quiet: #7f9182;
    --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --display: 'Space Grotesk', 'Roboto', sans-serif;
    --content-width: 1160px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
    min-width: 320px;
    color: var(--paper);
    background: var(--ink);
    font-family: var(--display);
    line-height: 1.65;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(147, 223, 112, .045), transparent 32%),
        linear-gradient(rgba(220, 245, 225, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 245, 225, .018) 1px, transparent 1px);
    background-size: auto, 52px 52px, 52px 52px;
    mask-image: linear-gradient(to bottom, black 0, transparent 78%);
}
body.dark { --text-primary: var(--paper); --text-secondary: var(--muted); --text-muted: var(--quiet); --bg-primary: var(--ink); --bg-secondary: var(--panel); --bg-gradient-light: transparent; --card-bg: var(--panel); --accent-primary: var(--lime); --accent-secondary: var(--mint); }
body:not(.dark) { --paper: #202c24; --muted: #536257; --quiet: #718174; --ink: #f4f7f3; --panel: #fff; --panel-raised: #f7faf7; --line: rgba(35, 70, 48, .13); --line-accent: rgba(25, 130, 72, .32); --lime: #176b43; --mint: #548949; --text-primary: var(--paper); --text-secondary: var(--muted); --text-muted: var(--quiet); --bg-primary: var(--ink); --bg-secondary: var(--panel); --bg-gradient-light: transparent; --card-bg: var(--panel); --accent-primary: var(--lime); --accent-secondary: var(--mint); color-scheme: light; color: var(--paper); background: #f4f7f3; }
body:not(.dark)::before { opacity: .35; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
::selection { color: var(--ink); background: var(--lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.container { width: min(var(--content-width), calc(100% - 48px)); max-width: var(--content-width); overflow: visible; }

/* Shared header */
.navbar, .dark .navbar {
    position: fixed; inset: 0 0 auto; z-index: 1100;
    background: rgba(7, 10, 8, .8); border: 0; border-bottom: 1px solid var(--line);
    box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.navbar .container { min-height: 78px; padding: 0; }
.logo a { color: var(--paper); font: 700 1.15rem/1 var(--display); letter-spacing: -.055em; gap: 0; }
.logo a::before { content: "GS"; width: 34px; height: 34px; display: inline-grid; place-items: center; margin-right: 11px; border: 1px solid var(--line-accent); border-radius: 10px; color: var(--lime); background: rgba(73,209,125,.07); font: 500 .72rem/1 var(--mono); letter-spacing: -.06em; }
.logo a:hover { color: var(--lime); transform: none; text-shadow: none; }
.nav-links { gap: 4px; }
.nav-link, .dark .nav-link { padding: 9px 13px; color: #aeb8b0; font: 500 .84rem/1.2 var(--display); border-radius: 8px; }
.nav-link::after { bottom: 3px; left: 13px; right: 13px; height: 1px; }
.nav-link:hover, .nav-link.active, .dark .nav-link:hover, .dark .nav-link.active { color: var(--paper); background: rgba(255,255,255,.045); box-shadow: none; transform: none; }
.nav-link.active { color: var(--lime); }
.theme-toggle { width: 38px; height: 38px; color: var(--lime); border: 1px solid var(--line); border-radius: 10px; }
.theme-toggle:hover { background: rgba(73,209,125,.08); transform: none; }
.hamburger { width: 40px; height: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.hamburger span { width: 18px; height: 2px; background: var(--paper); }

/* Home hero */
.home-section {
    min-height: 760px; min-height: min(860px, 100svh); padding: 128px 24px 96px;
    display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate;
    background: radial-gradient(ellipse at 74% 48%, rgba(73, 209, 125, .055), transparent 38%), transparent;
}
.home-section::before { position: absolute; inset: 78px 0 0; content: ""; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent 49.95%, rgba(73,209,125,.035) 50%, transparent 50.05%); }
.home-section::after { content: ""; position: absolute; width: min(70vw, 900px); height: 1px; inset: auto 0 0; margin: auto; background: linear-gradient(90deg, transparent, var(--line-accent), transparent); filter: none; }
.hero, .dark .hero {
    width: min(var(--content-width), 100%); max-width: var(--content-width); min-height: 470px; margin: 0; padding: 40px 435px 30px 12px;
    display: flex; align-items: flex-start; flex-direction: column; justify-content: center; text-align: left;
    color: var(--paper); overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; animation: rise-in .8s both;
}
.hero::before { content: none; }
.hero > * { z-index: 2; }
.hero-badge { display: inline-flex; width: fit-content; gap: 9px; padding: 7px 11px; margin: 0 0 22px; color: var(--lime); border: 1px solid var(--line-accent); border-radius: 6px; background: rgba(73,209,125,.045); box-shadow: none; font: 500 .69rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.hero-badge i { color: var(--lime); }
.hero h1 { max-width: 690px; margin: 0; color: var(--paper); background: none; -webkit-text-fill-color: currentColor; font: 600 clamp(3.5rem, 7.3vw, 6.4rem)/.98 var(--display); letter-spacing: -.075em; text-wrap: balance; }
.hero h1::after { content: none; }
.hero p { max-width: 580px; margin: 23px 0 26px; color: #aeb9b0; font: 400 clamp(1rem, 1.4vw, 1.16rem)/1.75 var(--display); }
.hero-actions { justify-content: flex-start; gap: 10px; margin: 0 0 26px; }
.btn-primary, .btn-secondary, .btn-fancy, .founder-btn, .contact-btn, .event-btn, .mini-discount-btn, .submit-btn {
    min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 17px;
    color: #10170c; border: 1px solid var(--lime); border-radius: 7px; background: var(--lime); box-shadow: none;
    font: 600 .88rem/1.2 var(--display); text-decoration: none; transition: .2s ease;
}
.btn-primary:hover, .btn-fancy:hover, .founder-btn:hover, .contact-btn:hover, .event-btn:hover, .mini-discount-btn:hover, .submit-btn:hover { color: #10170c; background: #b8efc8; border-color: #b8efc8; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(73,209,125,.13); }
.btn-secondary, .hero-secondary, .dark .hero-secondary, .staff-link-secondary, .social-link-secondary, .event-btn.event-btn-outline { color: var(--paper); border: 1px solid var(--line); background: rgba(255,255,255,.025); box-shadow: none; }
.btn-secondary:hover, .hero-secondary:hover, .staff-link-secondary:hover, .social-link-secondary:hover, .event-btn.event-btn-outline:hover { color: var(--lime); border-color: var(--line-accent); background: rgba(73,209,125,.05); transform: translateY(-2px); }
.hero-pill-row { justify-content: flex-start; gap: 7px; }
.hero-pill { padding: 6px 10px; color: #b3bdb5; background: transparent; border: 1px solid var(--line); border-radius: 5px; box-shadow: none; font: 400 .69rem/1.35 var(--mono); }
.hero-pill i { color: var(--mint); }

/* Hand-crafted terminal panel in the home hero */
.hero-terminal { position: absolute; top: 50%; right: 8px; width: 370px; transform: translateY(-48%); z-index: 1; border: 1px solid rgba(73,209,125,.2); border-radius: 12px; background: linear-gradient(145deg, rgba(16,25,18,.98), rgba(9,14,10,.98)); box-shadow: 0 30px 100px rgba(0,0,0,.45), 0 0 70px rgba(147,223,112,.06); overflow: hidden; font-family: var(--mono); }
.hero-terminal::before { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; bottom: -100px; border: 1px solid rgba(73,209,125,.14); border-radius: 50%; box-shadow: 0 0 0 18px rgba(73,209,125,.025), 0 0 0 38px rgba(73,209,125,.02); }
.terminal-topbar { height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--line); color: #a5b1a7; font-size: .62rem; }
.terminal-topbar b { color: var(--lime); font-weight: 400; }
.terminal-lights { display: flex; gap: 5px; }
.terminal-lights i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #344452; }
.terminal-lights i:first-child { background: #ee7164; }.terminal-lights i:nth-child(2) { background: #e4bd58; }.terminal-lights i:nth-child(3) { background: #49d17d; }
.terminal-lock { color: #78877b; font-size: .55rem; }
.terminal-body { position: relative; padding: 28px 24px 22px; }
.terminal-body p { display: flex; gap: 12px; margin: 0 0 13px; color: #d2ddd3; font-size: .7rem; }
.terminal-prompt { color: var(--lime); }
.terminal-body h2 { margin: 0 0 19px; color: #f2f7f1; font: 600 1.45rem/1.2 var(--display); letter-spacing: -.04em; }
.terminal-rule { height: 1px; margin-bottom: 20px; background: linear-gradient(90deg, var(--line-accent), transparent); }
.terminal-key { width: 88px; flex: none; color: #75847a; }
.terminal-body p:last-of-type span:last-child { color: #a9d991; font-size: .62rem; }
.terminal-status { display: flex; align-items: center; gap: 8px; margin-top: 21px; padding-top: 15px; border-top: 1px solid var(--line); color: #a0b0a2; font-size: .65rem; }
.terminal-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(73,209,125,.7); animation: status-pulse 2s infinite; }
.terminal-status span { margin-left: auto; color: #40556a; }

/* Sections and typography */
section:not(.home-section) { position: relative; }
.about-section, .services-section, .founder-section, .projects-section, .clients-section, .instagram-showcase, .youtube-showcase, .events-section, .future-events, .social-section, .contact-section, .privacy-section { padding: 100px 0; background: transparent; }
.about-section h2, .services-section h2, .projects-section h2, .events-section h2, .social-section h1, .contact-section h2, .section-title, .privacy-title {
    margin: 0 0 35px; color: var(--paper); font: 600 clamp(2rem, 4vw, 3.35rem)/1.1 var(--display); letter-spacing: -.06em; text-transform: none;
}
.about-section h2, .services-section h2, .projects-section h2, .events-section h2, .section-title { text-align: left; }
.about-section h2::after, .services-section h2::after, .projects-section h2::after, .events-section h2::after, .contact-section h2::after, .privacy-title::after, .social-section h1::after { content: none; }
.section-subtitle { max-width: 700px; margin: -19px 0 32px; color: var(--muted); font-size: 1rem; }
.about-section { padding-top: 96px; }
.about-content { gap: clamp(24px, 5vw, 64px); max-width: 1000px; padding: 0; align-items: stretch; }
.about-image { flex: 0 1 320px; width: min(320px, 100%); align-self: center; }
.about-photo-card { position: relative; padding: 10px; border: 1px solid var(--line-accent); border-radius: 15px; background: linear-gradient(145deg, rgba(73,209,125,.08), rgba(17,25,18,.94) 35%); box-shadow: 0 24px 65px rgba(0,0,0,.32); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.about-photo-card:hover { transform: translateY(-6px) rotate(-.5deg); border-color: rgba(73,209,125,.48); box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 42px rgba(73,209,125,.08); }
.about-photo-top, .about-photo-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.about-photo-top { min-height: 31px; padding: 0 5px 9px; color: var(--quiet); font: 400 .6rem/1.2 var(--mono); letter-spacing: .08em; }
.about-online { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); }
.about-online i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: status-pulse 2s infinite; }
.about-photo-visual { overflow: hidden; border-radius: 9px; background: var(--panel); aspect-ratio: 3 / 4; }
.about-photo-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.about-photo-card:hover .about-photo-visual img { transform: scale(1.035); }
.about-photo-caption { justify-content: flex-start; padding: 13px 5px 4px; }
.about-photo-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 1px solid var(--line-accent); border-radius: 9px; color: var(--lime); background: rgba(73,209,125,.06); font: 500 .72rem var(--mono); }
.about-photo-caption strong, .about-photo-caption small { display: block; }
.about-photo-caption strong { color: var(--paper); font: 600 .85rem/1.35 var(--display); }
.about-photo-caption small { margin-top: 3px; color: var(--muted); font: 400 .61rem/1.35 var(--mono); }
.about-text, .dark .about-text { position: relative; flex: 1 1 440px; max-width: 620px; align-self: center; padding: clamp(24px, 3.2vw, 40px); border: 1px solid var(--line); border-radius: 15px; background: radial-gradient(ellipse at 100% 0%, rgba(147,223,112,.075), transparent 42%), linear-gradient(145deg, rgba(17,25,18,.92), rgba(10,15,11,.92)); box-shadow: 0 22px 60px rgba(0,0,0,.2); color: var(--muted); font-size: 1.02rem; transition: transform .3s ease, border-color .3s ease; }
.about-text:hover { transform: translateY(-3px); border-color: var(--line-accent); }
.about-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--quiet); font: 400 .66rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.about-kicker span { color: var(--lime); }
.about-kicker i { width: 24px; height: 1px; background: var(--line-accent); }
.about-text h3 { margin: 0 0 20px; color: var(--paper); font: 600 clamp(1.65rem, 3vw, 2.25rem)/1.12 var(--display); letter-spacing: -.055em; }
.about-text h3 span { color: var(--lime); }
.about-text p { margin: 0 0 13px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.about-tags span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; color: #bdc8be; background: rgba(255,255,255,.025); font: 400 .62rem/1.2 var(--mono); }
.animated-text, .about-text .highlight, .about-text strong { color: var(--lime); background: none; -webkit-text-fill-color: currentColor; animation: none; }
.security-focus-section { padding: 92px 0 105px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(115deg, rgba(73,209,125,.035), transparent 44%); }
.section-kicker { display: flex; align-items: center; gap: 11px; margin-bottom: 19px; color: var(--muted); font: 400 .7rem/1.4 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.section-kicker span { color: var(--lime); }
.section-kicker i { width: 28px; height: 1px; background: var(--line-accent); }
.focus-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.focus-heading-row h2 { margin: 0; color: var(--paper); font: 600 clamp(2rem, 4.2vw, 3.3rem)/1.07 var(--display); letter-spacing: -.065em; }
.focus-heading-row h2 span { color: var(--lime); }
.focus-heading-row > p { max-width: 400px; margin: 0 0 4px; color: var(--muted); font-size: .95rem; }
.security-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.security-focus-card { min-height: 235px; position: relative; padding: 25px 23px 21px; border: 1px solid var(--line); border-radius: 9px; background: rgba(11,17,25,.68); transition: .25s ease; }
.security-focus-card:hover { transform: translateY(-4px); border-color: var(--line-accent); background: #0d1710; }
.security-focus-card > i { display: block; margin: 11px 0 19px; color: var(--lime); font-size: 1.15rem; }
.security-focus-card h3 { margin: 0 0 8px; color: var(--paper); font: 600 1.15rem/1.3 var(--display); letter-spacing: -.025em; }
.security-focus-card p { margin: 0 0 20px; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.focus-number { position: absolute; top: 22px; right: 22px; color: var(--quiet); font: 400 .68rem var(--mono); }
.focus-tag { display: inline-flex; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--mint); font: 400 .58rem/1.2 var(--mono); letter-spacing: .04em; }
.security-method-section { padding: 96px 0; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(73,209,125,.018), transparent 70%); }
.method-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 28px; }
.method-heading h2 { margin: 0; color: var(--paper); font: 600 clamp(2.2rem, 4.5vw, 3.5rem)/1.04 var(--display); letter-spacing: -.065em; }
.method-heading h2 span { color: var(--lime); }
.method-heading p { max-width: 410px; margin: 0 0 4px; color: var(--muted); font-size: .95rem; }
.method-layout { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); gap: 14px; align-items: stretch; }
.workflow-steps { display: grid; gap: 8px; }
.workflow-step { min-width: 0; min-height: 76px; display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; gap: 12px; padding: 12px 15px; text-align: left; color: var(--paper); border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); cursor: pointer; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.workflow-step:hover { transform: translateX(3px); border-color: var(--line-accent); background: rgba(73,209,125,.04); }
.workflow-step.is-active { border-color: var(--line-accent); background: linear-gradient(100deg, rgba(73,209,125,.09), rgba(73,209,125,.025)); box-shadow: inset 3px 0 var(--lime); }
.workflow-step-number { color: var(--lime); font: 400 .72rem var(--mono); }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step strong { color: var(--paper); font: 600 .91rem/1.3 var(--display); }
.workflow-step small { margin-top: 3px; color: var(--muted); font: 400 .66rem/1.35 var(--mono); }
.workflow-step > i { color: var(--quiet); font-size: .68rem; transition: transform .2s ease, color .2s ease; }
.workflow-step.is-active > i { color: var(--lime); transform: translateX(3px); }
.workflow-window { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-accent); border-radius: 11px; background: linear-gradient(145deg, #101b14, #080f0a); box-shadow: 0 22px 60px rgba(0,0,0,.22); }
.workflow-titlebar { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); color: #93a096; font: 400 .63rem var(--mono); }
.workflow-titlebar .terminal-lights { flex: none; }
.workflow-live { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font-size: .58rem; }
.workflow-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px rgba(73,209,125,.6); animation: status-pulse 2s infinite; }
.workflow-console { flex: 1; padding: 23px 24px; transition: opacity .16s ease, transform .16s ease; }
.workflow-window.is-updating .workflow-console { opacity: .35; transform: translateY(3px); }
.workflow-console > p { margin: 0 0 22px; color: #dbe6dc; font: 400 .7rem/1.5 var(--mono); }
.workflow-output { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 12px; margin: 12px 0; color: #d4dfd5; font: 400 .69rem/1.6 var(--mono); }
.workflow-output > span, .workflow-result > span { color: #718076; }
.workflow-output strong { color: #b9c9bd; font-weight: 400; overflow-wrap: anywhere; }
.workflow-output:first-of-type strong { color: var(--lime); }
.workflow-result { display: flex; justify-content: space-between; gap: 12px; margin-top: 21px; padding: 12px 13px; border: 1px solid rgba(73,209,125,.13); border-radius: 6px; background: rgba(73,209,125,.035); font: 400 .66rem/1.4 var(--mono); }
.workflow-result strong { color: var(--lime); font-weight: 400; text-align: right; }
.workflow-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; border-top: 1px solid var(--line); color: var(--quiet); font: 400 .58rem var(--mono); }
.workflow-footer span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #9caf9e; }
.workflow-footer i { color: var(--lime); }
.services-grid { gap: 14px; }
.service-card, .dark .service-card, .project-card, .dark .project-card, .staff-card, .dark .staff-card, .client-card, .dark .client-card, .event-card, .dark .event-card, .yt-card, .dark .yt-card, .contact-highlight-card, .dark .contact-highlight-card, .contact-form, .dark .contact-form, .mini-discount-card, .dark .mini-discount-card {
    color: var(--paper); background: linear-gradient(150deg, #111a13, #0b100c); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 15px 50px rgba(0,0,0,.18); transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.service-card { padding: 30px 25px; text-align: left; }
.service-card::before, .service-card::after { display: none; }
.client-card, .dark .client-card, .event-info, .dark .event-info { backdrop-filter: none; -webkit-backdrop-filter: none; }
.service-card:hover, .project-card:hover, .staff-card:hover, .client-card:hover, .event-card:hover { transform: translateY(-5px); border-color: var(--line-accent); box-shadow: 0 23px 55px rgba(0,0,0,.28); }
.service-icon { color: var(--lime); filter: none; }
.service-card h3, .project-info h3, .event-info h3, .yt-card h3, .founder-info h3 { color: var(--paper); font: 600 1.2rem/1.3 var(--display); letter-spacing: -.025em; }
.service-card p, .project-info p, .event-info p, .yt-card p { color: var(--muted); font-size: .92rem; }
.founder-card { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(130deg, #111a13, #0a100b); box-shadow: none; }
.founder-image { flex: 0 1 300px; width: min(300px, 100%); }
.founder-image img { display: block; width: 100%; height: auto; aspect-ratio: 2444 / 2624; object-fit: contain; }
.founder-info p, .founder-info .quote { color: var(--muted); }
.founder-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.founder-roles span { padding: 7px 10px; color: #9ce9b4; border: 1px solid rgba(73,209,125,.24); border-radius: 6px; background: rgba(73,209,125,.055); font: 500 .62rem/1.2 var(--mono); letter-spacing: .045em; }
.founder-btn i { margin-left: 7px; font-size: .75em; }
.gradient-text { color: var(--lime); background: none; -webkit-text-fill-color: currentColor; }

@media (min-width: 901px) {
    .services-section .services-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .services-section .service-card { grid-column: span 2; }
    .services-section .service-card:nth-child(4) { grid-column: 2 / span 2; }
    .services-section .service-card:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 900px) {
    .services-section .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-section .service-card { grid-column: auto; }
}
@media (max-width: 540px) {
    .services-section .services-grid { grid-template-columns: minmax(0, 1fr); }
    .founder-roles { gap: 6px; }
    .founder-roles span { font-size: .56rem; }
}

/* Project and experience grids */
.projects-section .container, .clients-section .container { overflow: visible; }
.projects-grid, .hidden-projects { gap: 15px; }
.project-card { overflow: hidden; }
.project-card::before, .staff-card::after { display: none; }
.project-card img { aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.76); }
.project-info { padding: 21px; }
.staff-hero, .dark .staff-hero, .events-hero-panel, .dark .events-hero-panel, .social-hero, .dark .social-hero, .privacy-hero, .dark .privacy-hero, .contact-intro-panel, .dark .contact-intro-panel {
    max-width: none; margin: 0 0 32px; padding: 34px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(ellipse at 90% 8%, rgba(147,223,112,.09), transparent 40%), linear-gradient(145deg, #111a13, #0a100b); box-shadow: none;
}
.staff-hero::before, .events-hero-panel::before, .social-section::before { display: none; }
.staff-hero h2, .staff-hero h2::after { text-align: left; position: static; width: auto; height: auto; transform: none; background: none; border-radius: 0; }
.staff-hero h2 { font-size: clamp(2.3rem, 4vw, 3.4rem); letter-spacing: -.06em; text-transform: none; margin: 0; }
.staff-hero p { margin: 14px 0 20px; color: var(--muted); }
.staff-badge, .events-badge, .social-badge, .contact-badge, .privacy-badge { margin-bottom: 15px; padding: 6px 9px; border: 1px solid var(--line-accent); border-radius: 5px; background: rgba(73,209,125,.04); color: var(--lime); box-shadow: none; font: 500 .69rem/1.4 var(--mono); text-transform: uppercase; }
.staff-badge i, .events-badge i, .social-badge i, .contact-badge i, .privacy-badge i { color: var(--lime); }
.staff-hero-actions, .events-hero-actions { justify-content: flex-start; }
.staff-stat, .events-kpi-card { padding: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.staff-stat strong, .events-kpi-card strong { color: var(--lime); }
.staff-stat span, .events-kpi-card span { color: var(--muted); }
.toggle-container { margin: 28px 0; }
.btn-toggle { padding: 12px 17px; color: var(--paper); background: var(--panel-raised); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.slider-dots button { background: #3c4a40; }
.slider-dots button.active { background: var(--lime); }

/* Social page */
.social-section { padding-top: 135px; }
.social-section .container { max-width: var(--content-width); }
.social-hero { padding: 40px; }
.social-section h1 { margin: 0 0 12px; font-size: clamp(2.5rem, 5vw, 4.4rem); }
.social-section p { max-width: 700px; color: var(--muted); }
.social-pills { gap: 8px; }
.social-pill { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #c6d0c7; }
.social-grid { gap: 11px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.social-card, .social-card.youtube, .social-card.twitch, .social-card.instagram, .social-card.tiktok, .social-card.telegram, .social-card.linkedin, .social-card.github, .social-card.facebook { min-height: 105px; padding: 17px; display: flex; align-items: center; justify-content: flex-start; gap: 14px; color: var(--paper); border: 1px solid var(--line); border-radius: 9px; background: #0c130e; box-shadow: none; }
.social-card i { color: var(--lime); font-size: 1.3rem; }
.social-card span { font: 500 .9rem var(--display); }
.social-card:hover { transform: translateY(-4px); border-color: var(--line-accent); box-shadow: 0 14px 35px rgba(0,0,0,.2); }
.instagram-showcase, .youtube-showcase { border-top: 1px solid var(--line); }
.insta-item { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.insta-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.yt-card { padding: 14px; }
.yt-card iframe { border-radius: 7px; }

/* Events */
.events-section { padding-top: 135px; }
.events-hero-panel { padding: 40px; }
.events-hero-panel .section-title { margin: 0 0 12px; font-size: clamp(2.5rem, 5vw, 4.2rem); }
.events-hero-panel .section-subtitle { margin: 0; }
.events-grid { gap: 15px; }
.event-card { overflow: hidden; }
.event-image { aspect-ratio: 16 / 9; overflow: hidden; }
.event-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.event-card:hover .event-image img { transform: scale(1.035); }
.event-info { padding: 22px; }
.event-date, .event-tag { font: 500 .7rem var(--mono); }
.event-date { color: var(--mint); }
.event-tag { color: #081008; border-radius: 4px; }
.events-bottom-note { margin-top: 30px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 8px; background: #0c130e; color: var(--muted); }

/* Contact */
.contact-section { padding-top: 135px; }
.contact-page-shell { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.contact-intro-panel, .dark .contact-intro-panel { position: static; margin: 0; padding: 30px; }
.contact-intro-panel h2 { margin: 0 0 12px; text-align: left; font-size: clamp(2.4rem, 4vw, 3.4rem); }
.contact-intro-panel > p { color: var(--muted); }
.contact-highlight-list { gap: 8px; }
.contact-highlight-card, .dark .contact-highlight-card { padding: 13px; border-radius: 8px; background: rgba(255,255,255,.025); box-shadow: none; }
.contact-highlight-card i { color: var(--lime); }
.contact-highlight-card strong { color: var(--paper); font-size: .8rem; }
.contact-highlight-card span { color: var(--muted); font-size: .8rem; }
.contact-form, .dark .contact-form { padding: 28px; }
.contact-form::before { display: none; }
.form-header h3 { color: var(--paper); font-size: 1.3rem; }
.form-header p, .form-help, .form-footnote { color: var(--muted); }
.form-group label { color: #dce5dd; font-size: .82rem; }
.form-group input, .form-group textarea, .form-group select, .contact-form input, .contact-form textarea, .contact-form select { min-height: 46px; padding: 11px 13px; color: var(--paper); background: #080f0a; border: 1px solid var(--line); border-radius: 6px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--lime); }
.submit-btn { cursor: pointer; }
.contact-section > h2, .contact-section > p, .contact-section > .contact-info, .contact-section > .contact-btn { text-align: center; }
.contact-section > h2 { margin: 0 auto 14px; }
.contact-section > p { color: var(--muted); }

/* Privacy and content cards */
.privacy-section { padding-top: 135px; }
.privacy-container { max-width: 940px; }
.privacy-hero { padding: 30px; }
.privacy-title { margin: 0 0 9px; font-size: clamp(2.3rem, 5vw, 3.7rem); }
.privacy-summary, .privacy-date { color: var(--muted); }
.privacy-toc { justify-content: flex-start; gap: 7px; margin: 20px 0; padding: 0; background: transparent; border: 0; }
.privacy-toc a { color: #c6d0c7; padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px; background: #0c130e; font: 400 .72rem var(--mono); }
.privacy-content { gap: 8px; }
.privacy-block, .dark .privacy-block { padding: 21px; border: 1px solid var(--line); border-radius: 8px; background: #0c130e; }
.privacy-content h3 { font: 600 1.05rem var(--display); }
.privacy-content h3 span { color: var(--lime); font: 400 .75rem var(--mono); }
.privacy-content p, .privacy-content ul { color: var(--muted); }

/* Footer, cookie controls and scroll affordances */
.footer, .dark .footer { padding: 40px 0; background: #080b09; border-top: 1px solid var(--line); }
.footer .footer-content, .dark .footer .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px 28px; padding: 18px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.footer .footer-content p { color: var(--quiet); font-size: .8rem; }
.footer .social-icons { gap: 7px; }
.footer .social-icons a { width: 37px; height: 37px; color: #aeb9b0; background: #10170f; border: 1px solid var(--line); border-radius: 7px; font-size: .9rem; }
.footer .social-icons a:hover { color: var(--lime); background: rgba(73,209,125,.06); border-color: var(--line-accent); transform: translateY(-2px); }
.footer .quick-contact div { color: var(--muted); background: none; border: 0; box-shadow: none; }
.footer .quick-contact div a, .footer .privacy-policy .privacy-link { color: var(--muted); }
.footer .privacy-policy .privacy-link { padding: 8px 12px; background: transparent; border: 1px solid var(--line); border-radius: 6px; font-size: .75rem; }
.footer::before, .footer::after { display: none; }
.cookie-banner, #reopenButton { color: var(--paper); background: #111a13; border: 1px solid var(--line-accent); border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,.45); }
.cookie-banner h3, .cookie-banner h4 { color: var(--paper); }
#reopenButton { padding: 10px 14px; cursor: pointer; }
#back-to-top { width: 43px; height: 43px; right: 25px; bottom: 25px; padding: 0; color: var(--lime); background: #111a13; border: 1px solid var(--line-accent); border-radius: 8px; box-shadow: none; }
#back-to-top:hover { color: var(--ink); background: var(--lime); }
#loader-wrapper, .dark #loader-wrapper { background: radial-gradient(ellipse at 50% 45%, #111b13, #070a08 68%); }
#loader-wrapper::after { width: 100%; transform: scaleX(var(--loader-scale, 0)); transform-origin: left center; transition: none; }
#loader-wrapper.is-loaded { filter: none; }
#loader-text, .dark #loader-text { background: none; -webkit-text-fill-color: var(--lime); color: var(--lime); font: 600 clamp(2rem, 7vw, 4rem)/1 var(--display); letter-spacing: -.06em; text-shadow: 0 0 30px rgba(73,209,125,.18); }
#loader-text::before, #loader-text::after { display: none; }

@keyframes rise-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes status-pulse { 50% { opacity: .45; box-shadow: 0 0 3px rgba(73,209,125,.35); } }

/* Responsive behavior */
@media (max-width: 1050px) {
    .hero { padding-right: 380px; }
    .hero-terminal { width: 330px; }
    .social-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .navbar .container { min-height: 70px; }
    .hero { min-height: 0; padding: 25px 0 0; justify-content: center; }
    .hero-terminal { position: relative; top: auto; bottom: auto; left: auto; right: auto; order: 4; width: min(390px, 100%); margin: 8px 0 20px; transform: none; }
    .home-section { min-height: 0; padding-top: 125px; }
    .contact-page-shell { grid-template-columns: 1fr; }
    .contact-highlight-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .method-layout { grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 768px) {
    .container { width: min(var(--content-width), calc(100% - 36px)); }
    .navbar .container { width: calc(100% - 32px); }
    .navbar, .dark .navbar { background: rgba(7,10,15,.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav-links, .dark .nav-links { top: 69px; right: 0; left: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9,13,20,.98); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
    .nav-links li { margin: 2px 0; }
    .nav-link { display: block; padding: 13px 14px; }
    .home-section { min-height: max(850px, 100svh); padding-inline: 20px; }
    .hero { min-height: 0; padding-top: 10px; }
    .hero h1 { max-width: 590px; font-size: clamp(3.3rem, 11vw, 5rem); }
    .hero p { max-width: 520px; }
    .hero-pill-row { max-width: 520px; }
    .about-section, .services-section, .founder-section, .projects-section, .clients-section, .instagram-showcase, .youtube-showcase, .events-section, .future-events, .social-section, .contact-section, .privacy-section { padding: 74px 0; }
    .social-section, .events-section, .contact-section, .privacy-section { padding-top: 110px; }
    .about-section h2, .services-section h2, .projects-section h2, .events-section h2, .section-title { margin-bottom: 25px; }
    .about-content { gap: 25px; }
    .about-image { width: min(280px, 100%); flex-basis: 280px; }
    .about-image img { max-width: 100%; }
    .about-text { padding: 24px; }
    .security-focus-section { padding: 72px 0; }
    .security-method-section { padding: 72px 0; }
    .method-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .method-layout { grid-template-columns: 1fr; }
    .workflow-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .workflow-step { min-height: 72px; padding: 10px 11px; grid-template-columns: 28px minmax(0,1fr); gap: 8px; }
    .workflow-step > i { display: none; }
    .focus-heading-row { align-items: flex-start; flex-direction: column; gap: 14px; }
    .security-focus-grid { grid-template-columns: 1fr; }
    .security-focus-card { min-height: 0; }
    .workflow-console { padding: 19px 17px; }
    .services-grid, .projects-grid, .hidden-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-hero, .events-hero-panel, .social-hero, .privacy-hero { padding: 25px; }
    .events-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .contact-highlight-list { grid-template-columns: 1fr; }
    .footer .footer-content { justify-content: center; text-align: center; }
}
@media (max-width: 540px) {
    .navbar .container { min-height: 64px; }
    .logo a { font-size: 1rem; }
    .logo a::before { width: 31px; height: 31px; margin-right: 9px; }
    .theme-toggle { width: 35px; height: 35px; }
    .home-section { min-height: max(900px, 100svh); padding: 90px 18px 58px; }
    .hero { min-height: 0; justify-content: flex-start; padding-top: 38px; }
    .hero-badge { margin-bottom: 20px; font-size: .62rem; }
    .hero h1 { font-size: clamp(3rem, 14vw, 4.2rem); }
    .hero p { font-size: .98rem; margin: 17px 0 21px; }
    .hero-actions { align-items: stretch; width: 100%; }
    .hero-actions a { flex: 1; padding-inline: 9px; font-size: .78rem; }
    .hero-pill { font-size: .62rem; }
    .hero-terminal { bottom: auto; width: 100%; }
    .section-kicker { font-size: .62rem; }
    .focus-heading-row h2 { font-size: 2.25rem; }
    .terminal-body { padding: 21px 18px 18px; }
    .terminal-body p { font-size: .62rem; gap: 7px; }
    .terminal-key { width: 76px; }
    .services-grid, .projects-grid, .hidden-projects, .events-grid, .youtube-cards { grid-template-columns: 1fr; }
    .services-section h2, .projects-section h2, .events-section h2, .section-title { font-size: 2.25rem; }
    .events-kpis { grid-template-columns: 1fr; }
    .social-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .social-card, .social-card.youtube, .social-card.twitch, .social-card.instagram, .social-card.tiktok, .social-card.telegram, .social-card.linkedin, .social-card.github, .social-card.facebook { min-height: 76px; padding: 12px; gap: 9px; }
    .social-card span { font-size: .8rem; }
    .contact-form, .dark .contact-form, .contact-intro-panel, .dark .contact-intro-panel { padding: 21px; }
    .form-row { grid-template-columns: 1fr; }
    .privacy-toc a { font-size: .65rem; }
    #back-to-top { right: 15px; bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body:not(.dark) .navbar { background: rgba(247,249,247,.92); }
body:not(.dark) .logo a, body:not(.dark) .nav-link { color: #28402f; }
body:not(.dark) .nav-links, body:not(.dark) .dark .nav-links { background: rgba(250,252,249,.98); border-color: var(--line); box-shadow: 0 20px 40px rgba(35,70,48,.14); }
body:not(.dark) .hero h1, body:not(.dark) .about-section h2, body:not(.dark) .services-section h2, body:not(.dark) .projects-section h2, body:not(.dark) .events-section h2, body:not(.dark) .section-title, body:not(.dark) .contact-section h2, body:not(.dark) .privacy-title { color: var(--paper); }
body:not(.dark) .hero p { color: var(--muted); }
body:not(.dark) .home-section { background: radial-gradient(ellipse at 75% 48%, rgba(25,130,72,.09), transparent 38%), transparent; }
body:not(.dark) .security-focus-section { background: linear-gradient(115deg, rgba(25,130,72,.055), transparent 44%); }
body:not(.dark) .security-focus-card { background: rgba(255,255,255,.72); }
body:not(.dark) .security-focus-card:hover { background: #fff; }
body:not(.dark) .security-method-section { background: linear-gradient(180deg, rgba(25,130,72,.035), transparent 70%); }
body:not(.dark) .workflow-step { color: var(--paper); background: rgba(255,255,255,.72); }
body:not(.dark) .workflow-step:hover { background: rgba(25,130,72,.055); }
body:not(.dark) .workflow-step.is-active { background: linear-gradient(100deg, rgba(25,130,72,.1), rgba(25,130,72,.025)); }
body:not(.dark) .about-photo-card { background: linear-gradient(145deg, rgba(25,130,72,.08), #fff 36%); box-shadow: 0 24px 65px rgba(35,70,48,.12); }
body:not(.dark) .about-photo-caption strong, body:not(.dark) .about-text h3 { color: #202c24; }
body:not(.dark) .about-text { background: radial-gradient(ellipse at 100% 0%, rgba(147,223,112,.1), transparent 42%), linear-gradient(145deg, #fff, #f7faf7); box-shadow: 0 22px 60px rgba(35,70,48,.08); }
body:not(.dark) .about-tags span { color: #475d4e; background: rgba(35,70,48,.025); }
body:not(.dark) .service-card, body:not(.dark) .project-card, body:not(.dark) .staff-card, body:not(.dark) .client-card, body:not(.dark) .event-card, body:not(.dark) .yt-card, body:not(.dark) .contact-highlight-card, body:not(.dark) .contact-form, body:not(.dark) .mini-discount-card, body:not(.dark) .founder-card, body:not(.dark) .events-bottom-note, body:not(.dark) .privacy-block { color: var(--paper); background: #fff; border-color: var(--line); }
body:not(.dark) .social-card, body:not(.dark) .social-card.youtube, body:not(.dark) .social-card.twitch, body:not(.dark) .social-card.instagram, body:not(.dark) .social-card.tiktok, body:not(.dark) .social-card.telegram, body:not(.dark) .social-card.linkedin, body:not(.dark) .social-card.github, body:not(.dark) .social-card.facebook { color: var(--paper); background: #fff; border-color: var(--line); }
body:not(.dark) .footer, body:not(.dark) .dark .footer { background: #f7faf7; }
body:not(.dark) .footer .social-icons a { color: #425b4b; background: #fff; }
body:not(.dark) .form-group input, body:not(.dark) .form-group textarea, body:not(.dark) .form-group select { color: var(--paper); background: #f8fbf8; }
body:not(.dark) .contact-intro-panel, body:not(.dark) .events-hero-panel, body:not(.dark) .social-hero, body:not(.dark) .privacy-hero, body:not(.dark) .staff-hero { background: radial-gradient(ellipse at 90% 8%, rgba(147,223,112,.12), transparent 40%), #fff; }
body:not(.dark) .btn-primary, body:not(.dark) .btn-fancy, body:not(.dark) .founder-btn, body:not(.dark) .contact-btn, body:not(.dark) .event-btn:not(.event-btn-outline), body:not(.dark) .mini-discount-btn, body:not(.dark) .submit-btn { color: #fff; background: #176b43; border-color: #176b43; }
body:not(.dark) .btn-primary:hover, body:not(.dark) .btn-fancy:hover, body:not(.dark) .founder-btn:hover, body:not(.dark) .contact-btn:hover, body:not(.dark) .event-btn:not(.event-btn-outline):hover, body:not(.dark) .mini-discount-btn:hover, body:not(.dark) .submit-btn:hover { color: #17220f; background: #b8efc8; border-color: #b8efc8; }
body:not(.dark) .privacy-toc a { color: #415848; background: #fff; }
body:not(.dark) .contact-form h3, body:not(.dark) .contact-form label, body:not(.dark) .form-header h3, body:not(.dark) .form-group label { color: #273d2e; }
body:not(.dark) .events-kpi-card, body:not(.dark) .staff-stat { background: rgba(255,255,255,.8); border-color: var(--line); }
body:not(.dark) .hero-terminal { color-scheme: dark; }
body:not(.dark) .hamburger span { background: #273d2e; }
body:not(.dark) .cookie-banner, body:not(.dark) #reopenButton { color: #263b2d; background: #fff; border-color: rgba(25,130,72,.28); box-shadow: 0 20px 70px rgba(35,70,48,.17); }
body:not(.dark) .cookie-banner h3, body:not(.dark) .cookie-banner h4 { color: #263b2d; }
body:not(.dark) #back-to-top { color: #176b43; background: #fff; border-color: rgba(25,130,72,.3); }
body:not(.dark) #back-to-top:hover { color: #fff; background: #176b43; }
body:not(.dark) #loader-wrapper { background: radial-gradient(ellipse at 50% 45%, #fff, #edf5ef 72%); }
body:not(.dark) #loader-text { color: #176b43; -webkit-text-fill-color: #176b43; text-shadow: none; }

/* Small-screen and touch-device refinements */
@media (max-width: 992px) {
    .navbar .container { padding-block: 10px; }
    .nav-links { gap: 5px; }
    .nav-links .nav-link { min-height: 44px; }
    .hamburger { width: 44px; height: 44px; border-radius: 10px; }
    .hero-terminal { max-width: 100%; }
    .service-card, .project-card, .staff-card, .client-card, .event-card, .yt-card,
    .contact-form, .contact-highlight-card, .mini-discount-card { min-width: 0; }
}

@media (max-width: 768px) {
    .container { width: min(var(--content-width), calc(100% - 36px)); }
    .navbar .container { width: calc(100% - 32px); }
    .nav-links { top: 74px; right: 0; left: auto; width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 82px); overflow-y: auto; overscroll-behavior: contain; }
    .nav-links .nav-link { min-height: 46px; }
    .home-section { min-height: 100svh; }
    .hero { width: 100%; }
    .hero-terminal { align-self: stretch; }
    .about-content { width: 100%; }
    .projects-grid, .hidden-projects, .services-grid { min-width: 0; }
    .events-grid { padding-inline: 0; }
    .event-card { min-height: 0; }
    .events-kpi-card, .staff-stat { min-width: 0; }
    .yt-card iframe { aspect-ratio: 16 / 9; height: auto; min-height: 180px; }
    .contact-page-shell, .contact-form, .contact-intro-panel { min-width: 0; }
    .footer .footer-content { padding-inline: 0; }
    .cookie-banner { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: 520px; max-height: calc(100dvh - 24px); overflow-y: auto; transform: none; margin-inline: auto; }
    #reopenButton { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }
    #back-to-top { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
}

@media (max-width: 540px) {
    .container { width: calc(100% - 32px); }
    .navbar .container { width: calc(100% - 28px); }
    .home-section { min-height: 100svh; padding: 88px 16px 42px; align-items: flex-start; }
    .hero { padding: 18px 0 0; }
    .hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); line-height: .98; }
    .hero-actions { flex-wrap: wrap; }
    .hero-actions a { min-width: min(100%, 140px); }
    .hero-terminal { width: 100%; margin-top: 12px; }
    .terminal-body { padding: 20px 16px 17px; }
    .terminal-body p { flex-wrap: wrap; }
    .terminal-status { flex-wrap: wrap; }
    .about-section, .services-section, .founder-section, .projects-section, .clients-section,
    .instagram-showcase, .youtube-showcase, .events-section, .future-events,
    .social-section, .contact-section, .privacy-section { padding-block: 58px; }
    .social-section, .events-section, .contact-section, .privacy-section { padding-top: 96px; }
    .about-content { gap: 18px; }
    .about-image { width: min(280px, 100%); flex-basis: 280px; }
    .about-text { width: 100%; padding: 22px 18px; }
    .about-text h3 { font-size: clamp(1.55rem, 7vw, 2rem); }
    .workflow-steps { grid-template-columns: 1fr; }
    .workflow-step { grid-template-columns: 34px minmax(0,1fr) 18px; min-height: 66px; }
    .workflow-step > i { display: block; }
    .about-tags span { font-size: .58rem; }
    .services-grid, .projects-grid, .hidden-projects, .events-grid, .youtube-cards { grid-template-columns: minmax(0, 1fr); }
    .projects-grid, .hidden-projects { gap: 13px; }
    .project-card img { height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 10; }
    .project-info { padding: 17px; }
    .events-grid { gap: 14px; }
    .events-kpis { grid-template-columns: minmax(0, 1fr); }
    .events-kpi-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
    .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .social-card, .social-card.youtube, .social-card.twitch, .social-card.instagram,
    .social-card.tiktok, .social-card.telegram, .social-card.linkedin, .social-card.github,
    .social-card.facebook { min-height: 78px; padding: 12px 10px; }
    .social-card i { font-size: 1.35rem; margin: 0; }
    .social-card span { overflow-wrap: anywhere; font-size: .75rem; }
    .insta-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .yt-card { padding: 14px; }
    .yt-card iframe { min-height: 0; }
    .contact-page-shell { gap: 12px; }
    .contact-form, .contact-intro-panel { padding: 20px 16px; }
    .form-group input, .form-group textarea, .form-group select { max-width: 100%; }
    .privacy-toc { display: flex; flex-wrap: wrap; }
    .cookie-banner { padding: 22px 18px; }
    .cookie-content h3 { padding-right: 28px; font-size: 1rem; }
    .cookie-buttons button { flex: 1 1 120px; min-height: 44px; }
}

@media (max-width: 380px) {
    .container { width: calc(100% - 26px); }
    .navbar .container { width: calc(100% - 24px); }
    .logo a { font-size: .94rem; }
    .hero-badge { max-width: 100%; font-size: .57rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions a { width: 100%; }
    .terminal-body p { font-size: .59rem; }
    .terminal-key { width: 68px; }
    .about-photo-caption small { font-size: .56rem; }
    .about-kicker { flex-wrap: wrap; font-size: .58rem; }
    .social-grid { grid-template-columns: minmax(0, 1fr); }
    .social-card, .social-card.youtube, .social-card.twitch, .social-card.instagram,
    .social-card.tiktok, .social-card.telegram, .social-card.linkedin, .social-card.github,
    .social-card.facebook { min-height: 68px; }
}

img, iframe, video { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.project-info, .event-info, .yt-card, .security-focus-card, .service-card { overflow-wrap: anywhere; }

.has-scroll-reveal .scroll-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.has-scroll-reveal .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .has-scroll-reveal .scroll-reveal { opacity: 1 !important; transform: none !important; }
}

/* Cyber green visual system: quieter surfaces, sharper controls, aligned rules. */
#content :is(.btn-primary, .btn-secondary, .btn-fancy, .founder-btn, .contact-btn, .event-btn,
    .mini-discount-btn, .mini-discount-copy, .submit-btn, .btn-toggle, .staff-link-secondary, .social-link-secondary,
    .privacy-policy .privacy-link, .privacy-toc a, .events-section .event-btn.event-btn-outline) {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 17px;
    color: #b8efc8;
    background: linear-gradient(145deg, #12251a, #0b1710);
    border: 1px solid rgba(73,209,125,.34);
    border-radius: 7px;
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 7px 20px rgba(0,0,0,.22);
    font: 600 .88rem/1.2 var(--display);
    letter-spacing: .005em;
    text-decoration: none;
    text-shadow: none;
    transform: none;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#content :is(.btn-primary, .btn-fancy, .founder-btn, .contact-btn, .event-btn:not(.event-btn-outline),
    .mini-discount-btn, .submit-btn) { border-color: rgba(73,209,125,.55); color: #dfffea; }
#content :is(.btn-primary, .btn-fancy, .founder-btn, .contact-btn, .event-btn, .mini-discount-btn, .submit-btn)::before { content: none; }
#content :is(.btn-primary, .btn-secondary, .btn-fancy, .founder-btn, .contact-btn, .event-btn,
    .mini-discount-btn, .mini-discount-copy, .submit-btn, .btn-toggle, .staff-link-secondary, .social-link-secondary,
    .privacy-policy .privacy-link, .privacy-toc a):hover,
#cookieBox .cookie-buttons button:hover, #reopenButton:hover {
    color: #edfff3;
    background: linear-gradient(145deg, #193d29, #0d2417);
    border-color: #49d17d;
    box-shadow: 0 0 0 1px rgba(73,209,125,.18), 0 0 24px rgba(73,209,125,.12), 0 9px 22px rgba(0,0,0,.2);
    transform: translateY(-2px);
}
#content :is(.btn-primary, .btn-secondary, .btn-fancy, .founder-btn, .contact-btn, .event-btn,
    .mini-discount-btn, .mini-discount-copy, .submit-btn, .btn-toggle, .staff-link-secondary, .social-link-secondary,
    .privacy-policy .privacy-link, .privacy-toc a):active,
#cookieBox .cookie-buttons button:active { transform: translateY(0); }
#content :is(.btn-primary, .btn-secondary, .btn-fancy, .founder-btn, .contact-btn, .event-btn,
    .mini-discount-btn, .submit-btn, .btn-toggle, .staff-link-secondary, .social-link-secondary,
    .privacy-policy .privacy-link, .privacy-toc a):focus-visible,
#cookieBox .cookie-buttons button:focus-visible, #reopenButton:focus-visible {
    outline: 2px solid #49d17d;
    outline-offset: 3px;
}
#cookieBox .cookie-buttons button, #reopenButton {
    min-height: 44px;
    padding: 10px 15px;
    color: #b8efc8;
    background: linear-gradient(145deg, #12251a, #0b1710);
    border: 1px solid rgba(73,209,125,.38);
    border-radius: 7px;
    box-shadow: 0 7px 20px rgba(0,0,0,.2);
    font: 600 .85rem/1.2 var(--display);
    transition: .2s ease;
}
#reopenButton { z-index: 9999; }

body:not(.dark) #content :is(.btn-primary, .btn-fancy, .founder-btn, .contact-btn,
    .event-btn:not(.event-btn-outline), .mini-discount-btn, .submit-btn) {
    color: #f4fff6;
    background: linear-gradient(145deg, #1c7548, #155b38);
    border-color: #287d50;
}
body:not(.dark) #content :is(.btn-secondary, .hero-secondary, .staff-link-secondary,
    .social-link-secondary, .event-btn.event-btn-outline) {
    color: #245b3b;
    background: #eef7ef;
    border-color: rgba(25,130,72,.25);
}
body:not(.dark) #content :is(.btn-primary, .btn-fancy, .founder-btn, .contact-btn,
    .event-btn, .mini-discount-btn, .submit-btn):hover {
    color: #fff;
    background: #236f48;
    border-color: #236f48;
}

.section-title::after, .video-section h2::after, .social-section h1::after,
.about-section h2::after, .founder-section h2::after, .projects-section h2::after,
.services-section h2::after, .events-section h2::after, .clients-section h2::after,
.contact-section h2::after {
    content: "";
    position: static;
    display: block;
    width: 46px;
    height: 2px;
    margin: 14px 0 0;
    background: linear-gradient(90deg, var(--lime), var(--mint));
    border: 0;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(73,209,125,.24);
    transform: none;
}
.section-title, .video-section h2, .social-section h1, .about-section h2,
.founder-section h2, .projects-section h2, .services-section h2,
.events-section h2, .clients-section h2, .contact-section h2 { text-align: left; }

@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: clip; }
    .home-section { width: 100%; max-width: 100%; padding-inline: clamp(16px, 4vw, 28px); overflow-x: clip; }
    .hero { width: 100%; max-width: var(--content-width); min-width: 0; margin: 0; padding-right: 0; padding-left: 0; align-items: flex-start; text-align: left; overflow: clip; }
    .hero > * { min-width: 0; max-width: 100%; }
    .hero h1 { width: 100%; max-width: 100%; font-size: clamp(2.5rem, 9.5vw, 4rem); line-height: 1.02; letter-spacing: -.07em; overflow-wrap: anywhere; text-wrap: balance; }
    .hero p { width: 100%; max-width: 100%; }
    .hero-badge { max-width: 100%; white-space: normal; }
    .hero-pill-row { justify-content: flex-start; }
    .hero-actions { max-width: 100%; }
}
@media (max-width: 540px) {
    .home-section { min-height: max(100svh, 620px); padding: 84px 16px 38px; align-items: flex-start; }
    .hero { padding-top: 12px; }
    .hero h1 { font-size: clamp(2.35rem, 10.8vw, 3.2rem); }
    .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
    .hero-actions a { width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 10px 9px; font-size: .8rem; }
    .service-card .btn-fancy, .project-buttons a, .staff-hero-actions a, .events-hero-actions a,
    .social-actions a, .contact-highlight-panel .contact-btn { min-height: 46px; }
    .project-buttons { display: flex; flex-wrap: wrap; }
}
@media (max-width: 380px) {
    .hero-actions { grid-template-columns: minmax(0,1fr); }
}

/* Compact cyber boot screen */
#loader-wrapper.loader-screen {
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: 28px 20px 62px;
    color: #eff6f0;
    background: #070b08;
    opacity: 1;
    filter: none;
    animation: none;
    transition: opacity .42s ease, visibility .42s ease;
}
#loader-wrapper.loader-screen::before {
    inset: -25% 0;
    z-index: -1;
    opacity: .24;
    background: linear-gradient(180deg, transparent 47%, rgba(73,209,125,.12) 50%, transparent 53%);
    animation: loader-screen-scan 6s linear infinite;
}
#loader-wrapper.loader-screen::after {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: rgba(73,209,125,.16);
    box-shadow: none;
    transform: none;
}
#loader-wrapper.loader-screen .loader-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .38;
    background-image: linear-gradient(rgba(216,240,222,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(216,240,222,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 77%);
}
#loader-wrapper.loader-screen .loader-orbit {
    position: absolute;
    z-index: -1;
    width: min(74vw, 520px);
    aspect-ratio: 1;
    border: 1px solid rgba(73,209,125,.08);
    border-radius: 50%;
    pointer-events: none;
    animation: loader-orbit 32s linear infinite;
}
#loader-wrapper.loader-screen .loader-orbit::before {
    content: "";
    position: absolute;
    top: 13%;
    left: 17%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #49d17d;
    box-shadow: 0 0 16px rgba(73,209,125,.5);
}
#loader-wrapper.loader-screen .loader-orbit-two {
    width: min(92vw, 680px);
    border-style: dashed;
    border-color: rgba(147,223,112,.055);
    animation-duration: 48s;
    animation-direction: reverse;
}
#loader-wrapper.loader-screen .loader-orbit-two::before {
    top: auto;
    bottom: 17%;
    left: 22%;
    width: 4px;
    height: 4px;
    background: #93df70;
    box-shadow: 0 0 12px rgba(147,223,112,.38);
}
.loader-panel {
    width: min(100%, 540px);
    overflow: hidden;
    border: 1px solid rgba(73,209,125,.22);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(13,21,15,.97), rgba(8,13,9,.97));
    box-shadow: 0 30px 100px rgba(0,0,0,.52), 0 0 55px rgba(73,209,125,.055);
    animation: loader-panel-arrive .55s cubic-bezier(.2,.7,.2,1) both;
}
.loader-brandbar, .loader-titlebar, .loader-progress-label, .loader-statusline, .loader-footnote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.loader-brandbar {
    min-height: 49px;
    padding: 0 19px;
    color: #d7e4d9;
    border-bottom: 1px solid rgba(223,240,226,.08);
    font: 500 .64rem/1 var(--mono);
    letter-spacing: .08em;
}
.loader-brand { display: inline-flex; align-items: center; gap: 9px; }
.loader-brand b { color: #7f9182; font-weight: 400; }
.loader-brand > i {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(73,209,125,.32);
    border-radius: 7px;
    color: #8ce8ad;
    background: rgba(73,209,125,.07);
    font: 500 .61rem var(--mono);
    font-style: normal;
    letter-spacing: -.04em;
}
.loader-session { display: inline-flex; align-items: center; gap: 7px; color: #8c9d8f; font-size: .57rem; }
.loader-session > i, .loader-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #49d17d;
    box-shadow: 0 0 10px rgba(73,209,125,.52);
    animation: loader-status-pulse 1.8s ease-in-out infinite;
}
.loader-titlebar {
    min-height: 35px;
    justify-content: flex-start;
    padding: 0 19px;
    color: #78877b;
    border-bottom: 1px solid rgba(223,240,226,.07);
    background: rgba(255,255,255,.018);
    font: 400 .57rem/1 var(--mono);
    letter-spacing: .06em;
}
.loader-titlebar > span:last-child { margin-left: auto; color: #58665b; }
.loader-dots { display: inline-flex; gap: 5px; }
.loader-dots i { width: 6px; height: 6px; border-radius: 50%; background: #344238; }
.loader-dots i:first-child { background: #d66a5f; }
.loader-dots i:nth-child(2) { background: #c6a957; }
.loader-dots i:last-child { background: #49d17d; }
.loader-content { padding: clamp(22px, 5vw, 34px); }
.loader-progress-label {
    color: #93a295;
    font: 400 .58rem/1.4 var(--mono);
    letter-spacing: .08em;
}
#loader-percent { color: #93df70; }
#loader-wrapper.loader-screen #loader-text {
    margin: 14px 0 20px;
    color: #f0f6f1;
    -webkit-text-fill-color: currentColor;
    background: none;
    font: 600 clamp(2.25rem, 8vw, 3.45rem)/1 var(--display);
    letter-spacing: -.075em;
    text-align: left;
    text-transform: none;
    text-shadow: 0 0 35px rgba(73,209,125,.12);
    animation: loader-title-breathe 3s ease-in-out infinite;
}
#loader-wrapper.loader-screen #loader-text::before,
#loader-wrapper.loader-screen #loader-text::after { display: none; }
.loader-command {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 28px;
    color: #a5b2a7;
    font: 400 .69rem/1.4 var(--mono);
}
.loader-prompt { color: #65d78f; }
.loader-cursor { width: 6px; height: 13px; background: #65d78f; animation: loader-cursor-blink .9s steps(2,end) infinite; }
#loader-wrapper.loader-screen #loader-subtitle {
    min-height: 1.4em;
    margin: 12px 0 17px;
    color: #b5c3b7;
    font: 400 .68rem/1.4 var(--mono);
    letter-spacing: .015em;
    text-align: left;
    text-transform: none;
    opacity: .94;
}
#loader-wrapper.loader-screen #loader-subtitle::before { display: none; }
.loader-progress {
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(190,218,195,.1);
}
.loader-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #318d59, #65d78f, #a6e77a);
    box-shadow: 0 0 15px rgba(73,209,125,.38);
    transition: width .12s linear;
}
.loader-statusline {
    margin-top: 14px;
    color: #6f8072;
    font: 400 .53rem/1.3 var(--mono);
    letter-spacing: .035em;
}
.loader-statusline > span:last-child { display: inline-flex; align-items: center; gap: 7px; color: #95a698; }
.loader-status-dot { width: 5px; height: 5px; }
.loader-footnote {
    position: absolute;
    right: max(22px, env(safe-area-inset-right));
    bottom: max(19px, env(safe-area-inset-bottom));
    left: max(22px, env(safe-area-inset-left));
    max-width: 540px;
    margin-inline: auto;
    color: #647367;
    font: 400 .53rem/1.4 var(--mono);
    letter-spacing: .08em;
}
#loader-wrapper.loader-screen.is-loaded { opacity: 0; visibility: hidden; }
#loader-wrapper.loader-screen.is-finale .loader-panel { border-color: rgba(73,209,125,.42); }
#loader-wrapper.loader-screen.is-finale .loader-progress > span { box-shadow: 0 0 20px rgba(73,209,125,.55); }
@keyframes loader-screen-scan { from { transform: translateY(-35%); } to { transform: translateY(35%); } }
@keyframes loader-orbit { to { transform: rotate(1turn); } }
@keyframes loader-panel-arrive { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes loader-title-breathe { 50% { text-shadow: 0 0 42px rgba(73,209,125,.2); } }
@keyframes loader-cursor-blink { 50% { opacity: 0; } }
@keyframes loader-status-pulse { 50% { opacity: .48; } }

body:not(.dark) #loader-wrapper.loader-screen { color: #202c24; background: #f3f8f3; }
body:not(.dark) #loader-wrapper.loader-screen .loader-grid { opacity: .52; background-image: linear-gradient(rgba(25,105,60,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(25,105,60,.055) 1px, transparent 1px); }
body:not(.dark) #loader-wrapper.loader-screen .loader-orbit { border-color: rgba(25,130,72,.12); }
body:not(.dark) #loader-wrapper.loader-screen .loader-panel { background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(246,251,246,.97)); border-color: rgba(25,130,72,.22); box-shadow: 0 28px 80px rgba(35,70,48,.12); }
body:not(.dark) #loader-wrapper.loader-screen .loader-brandbar { color: #263b2d; border-color: rgba(35,70,48,.1); }
body:not(.dark) #loader-wrapper.loader-screen .loader-brand b,
body:not(.dark) #loader-wrapper.loader-screen .loader-session,
body:not(.dark) #loader-wrapper.loader-screen .loader-titlebar,
body:not(.dark) #loader-wrapper.loader-screen .loader-statusline { color: #718174; }
body:not(.dark) #loader-wrapper.loader-screen .loader-titlebar { border-color: rgba(35,70,48,.08); background: rgba(25,105,60,.025); }
body:not(.dark) #loader-wrapper.loader-screen #loader-text { color: #202c24; -webkit-text-fill-color: currentColor; }
body:not(.dark) #loader-wrapper.loader-screen .loader-command { color: #536257; }
body:not(.dark) #loader-wrapper.loader-screen #loader-subtitle { color: #536257; }
body:not(.dark) #loader-wrapper.loader-screen .loader-progress { background: rgba(25,105,60,.1); }
body:not(.dark) #loader-wrapper.loader-screen .loader-footnote { color: #718174; }

@media (max-width: 540px) {
    #loader-wrapper.loader-screen { padding: 20px 16px 58px; }
    .loader-brandbar { min-height: 45px; padding-inline: 13px; }
    .loader-brand { gap: 7px; font-size: .57rem; }
    .loader-brand b { font-size: .52rem; }
    .loader-session { font-size: .5rem; }
    .loader-titlebar { padding-inline: 13px; }
    .loader-content { padding: 23px 19px; }
    .loader-statusline { align-items: flex-start; flex-direction: column; gap: 8px; }
    .loader-footnote { right: 16px; left: 16px; font-size: .48rem; }
    #loader-wrapper.loader-screen .loader-orbit { width: 82vw; }
    #loader-wrapper.loader-screen .loader-orbit-two { width: 105vw; }
}
@media (prefers-reduced-motion: reduce) {
    #loader-wrapper.loader-screen::before,
    #loader-wrapper.loader-screen .loader-orbit,
    #loader-wrapper.loader-screen .loader-panel,
    #loader-wrapper.loader-screen #loader-text,
    #loader-wrapper.loader-screen .loader-cursor,
    #loader-wrapper.loader-screen .loader-status-dot { animation: none !important; }
}

/* Mobile layout guardrails: keep the menu anchored and hero text horizontal. */
@media (max-width: 768px) {
    .nav-links, .dark .nav-links {
        top: calc(70px + 8px);
        right: max(12px, env(safe-area-inset-right));
        left: auto;
        width: min(420px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 94px);
        padding: 12px;
        border-color: rgba(73,209,125,.2);
        border-radius: 13px;
        background: #0b120d;
        box-shadow: 0 24px 65px rgba(0,0,0,.52), 0 0 30px rgba(73,209,125,.045);
    }
    .nav-links li { width: 100%; min-width: 0; margin: 2px 0; }
    .nav-links .nav-link {
        display: flex;
        width: 100%;
        min-height: 47px;
        align-items: center;
        justify-content: flex-start;
        padding: 12px 14px;
        border-radius: 8px;
        font-size: .9rem;
    }
    .nav-links .nav-link.active { color: #8ce8ad; background: rgba(73,209,125,.09); }
    body:not(.dark) .nav-links, body:not(.dark) .dark .nav-links {
        background: #fff;
        border-color: rgba(25,130,72,.2);
        box-shadow: 0 24px 65px rgba(35,70,48,.18);
    }
    body:not(.dark) .nav-links .nav-link.active { color: #176b43; background: rgba(25,130,72,.08); }

    #home.home-section {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 100svh;
        padding: 108px 22px 48px;
        overflow-x: clip;
    }
    #home > .hero {
        display: flex;
        width: min(100%, 800px);
        max-width: 800px;
        min-width: 0;
        flex: 0 1 auto;
        margin: 0 auto;
        padding: 16px 0 20px;
        overflow: visible;
        text-align: left;
    }
    #home > .hero > * { width: auto; min-width: 0; max-width: 100%; }
    #home > .hero h1 {
        display: block;
        width: 100%;
        max-width: 15ch;
        min-width: 0;
        font-size: clamp(2.5rem, 9vw, 4rem);
        line-height: 1.02;
        letter-spacing: -.07em;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
        white-space: normal;
        writing-mode: horizontal-tb;
        text-wrap: balance;
    }
    #home > .hero p { width: 100%; max-width: 580px; }
}
@media (max-width: 540px) {
    .nav-links, .dark .nav-links { top: calc(64px + 8px); }
    #home.home-section { padding: 94px 18px 42px; }
    #home > .hero h1 { max-width: 14ch; font-size: clamp(2.2rem, 10vw, 3.2rem); }
}
@media (max-width: 360px) {
    #home.home-section { padding-right: 16px; padding-left: 16px; }
    #home > .hero h1 { font-size: clamp(2rem, 9.5vw, 2.45rem); }
    .loader-brand b { display: none; }
}

/* Cookie preference center */
#cookieBox[hidden], #reopenButton[hidden], #cookieChoices[hidden], #cookieManage[hidden] { display: none !important; }
#cookieBox.cookie-banner:not([hidden]) {
    display: block;
    position: fixed;
    z-index: 1300;
    right: auto;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: max(24px, env(safe-area-inset-left));
    width: min(560px, calc(100vw - 48px));
    max-width: 560px;
    max-height: min(88dvh, 760px);
    overflow: auto;
    padding: 26px;
    color: #eff6f0;
    border: 1px solid rgba(73,209,125,.28);
    border-radius: 16px;
    background: linear-gradient(145deg, #0d1710, #090f0b 76%);
    box-shadow: 0 28px 90px rgba(0,0,0,.58), 0 0 36px rgba(73,209,125,.07);
    transform: none;
    transform-origin: 24px calc(100% - 12px);
    animation: cookie-panel-in .46s cubic-bezier(.18,.8,.2,1) both;
    overscroll-behavior: contain;
}
#cookieBox.cookie-banner:not([hidden])::after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 18px;
    width: 42%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, #8ce8ad, rgba(73,209,125,.08));
    box-shadow: 0 0 12px rgba(73,209,125,.75);
    content: "";
    pointer-events: none;
    transform-origin: left;
    animation: cookie-signal-in .52s .16s ease-out both;
}
#cookieBox .cookie-content { min-width: 0; }
#cookieBox .cookie-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #75d996;
    font: 500 .62rem/1.4 var(--mono);
    letter-spacing: .1em;
}
#cookieBox .cookie-content h3 {
    max-width: 440px;
    margin: 0 34px 9px 0;
    color: #eff6f0;
    font: 600 clamp(1.35rem, 3vw, 1.7rem)/1.13 var(--display);
    letter-spacing: -.045em;
}
#cookieBox .cookie-content > p {
    max-width: 470px;
    margin: 0;
    color: #a7b5aa;
    font: 400 .88rem/1.6 var(--display);
}
#cookieBox .cookie-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    color: #9eafa2;
    border: 1px solid rgba(222,240,226,.12);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    box-shadow: none;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
#cookieBox .cookie-close:hover { color: #eff6f0; border-color: var(--line-accent); background: rgba(73,209,125,.08); }
#cookieBox .cookie-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding: 11px 12px;
    color: #859789;
    border: 1px solid rgba(222,240,226,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.018);
    font: 400 .64rem/1.4 var(--mono);
}
#cookieBox .cookie-note > span { display: inline-flex; align-items: center; gap: 7px; }
#cookieBox .cookie-note i { color: #65d78f; }
#cookieBox .cookie-note a { flex: none; color: #8ce8ad; text-decoration: underline; text-underline-offset: 3px; }
#cookieBox .cookie-buttons, #cookieBox .cookie-manage-actions { display: flex; align-items: center; gap: 8px; }
#cookieBox .cookie-buttons { margin-top: 16px; justify-content: flex-end; }
#cookieBox .cookie-buttons button, #cookieBox .cookie-manage-actions button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 13px;
    color: #cad8cc;
    border: 1px solid rgba(222,240,226,.13);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    box-shadow: none;
    cursor: pointer;
    font: 500 .74rem/1.2 var(--display);
    transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
#cookieBox .cookie-buttons button:hover, #cookieBox .cookie-manage-actions button:hover { transform: translateY(-1px); border-color: rgba(73,209,125,.42); color: #eff6f0; background: rgba(73,209,125,.07); }
#cookieBox .cookie-buttons .cookie-button-primary, #cookieBox .cookie-manage-actions .cookie-button-primary {
    color: #eaffef;
    border-color: rgba(73,209,125,.42);
    background: linear-gradient(145deg, #1b5030, #123820);
}
#cookieBox .cookie-buttons .cookie-button-primary:hover, #cookieBox .cookie-manage-actions .cookie-button-primary:hover {
    border-color: #49d17d;
    background: linear-gradient(145deg, #22633b, #174529);
}
#cookieBox .cookie-buttons .cookie-button-tertiary { border-color: transparent; background: transparent; }
#cookieBox :is(button, a, input):focus-visible { outline: 2px solid #65d78f; outline-offset: 3px; }
#cookieBox .cookie-manage {
    display: grid;
    gap: 9px;
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid rgba(222,240,226,.1);
    animation: cookie-manage-in .2s ease both;
}
#cookieBox .cookie-manage h4 { margin: 0 0 2px; color: #eff6f0; font: 600 .9rem/1.3 var(--display); }
#cookieBox .cookie-preference {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 11px 12px;
    color: #d9e5db;
    border: 1px solid rgba(222,240,226,.09);
    border-radius: 8px;
    background: rgba(255,255,255,.02);
    cursor: pointer;
}
#cookieBox .cookie-preference > span:first-child { min-width: 0; }
#cookieBox .cookie-preference strong, #cookieBox .cookie-preference small { display: block; }
#cookieBox .cookie-preference strong { color: #e7f0e9; font: 500 .76rem/1.3 var(--display); }
#cookieBox .cookie-preference small { margin-top: 3px; color: #89998c; font: 400 .63rem/1.4 var(--display); }
#cookieBox .cookie-always-on { flex: none; color: #8ce8ad; font: 500 .58rem/1.3 var(--mono); text-transform: uppercase; }
#cookieBox .cookie-preference input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 38px;
    height: 22px;
    flex: none;
    margin: 0;
    border: 1px solid rgba(222,240,226,.2);
    border-radius: 99px;
    background: #151e17;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
#cookieBox .cookie-preference input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #a7b5aa;
    transition: transform .18s ease, background .18s ease;
}
#cookieBox .cookie-preference input[type="checkbox"]:checked { border-color: rgba(73,209,125,.7); background: #174529; }
#cookieBox .cookie-preference input[type="checkbox"]:checked::after { transform: translateX(16px); background: #8ce8ad; }
#cookieBox .cookie-manage-actions { justify-content: space-between; margin-top: 3px; }
#reopenButton.cookie-reopen:not([hidden]) {
    position: fixed;
    z-index: 1300;
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: max(18px, env(safe-area-inset-left));
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 15px 0 12px;
    color: #c7ecd1;
    border: 1px solid rgba(73,209,125,.38);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(13,27,18,.98), rgba(7,13,9,.98));
    box-shadow: 0 12px 36px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035), 0 0 20px rgba(73,209,125,.08);
    cursor: pointer;
    font: 600 .72rem/1 var(--mono);
    letter-spacing: .045em;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#reopenButton.cookie-reopen:hover { transform: translateY(-3px); border-color: #65d78f; background: linear-gradient(135deg, #102719, #09120c); box-shadow: 0 15px 40px rgba(0,0,0,.4), 0 0 24px rgba(73,209,125,.18); }
#reopenButton.cookie-reopen i { display: grid; width: 25px; height: 25px; place-items: center; color: #8ce8ad; border: 1px solid rgba(73,209,125,.25); border-radius: 7px; background: rgba(73,209,125,.08); font-size: .78rem; }
body:not(.dark) #cookieBox.cookie-banner:not([hidden]) { color: #202c24; border-color: rgba(25,130,72,.23); background: linear-gradient(145deg, #fff, #f4f9f4); box-shadow: 0 28px 90px rgba(35,70,48,.2); }
body:not(.dark) #cookieBox .cookie-content h3, body:not(.dark) #cookieBox .cookie-manage h4 { color: #202c24; }
body:not(.dark) #cookieBox .cookie-content > p { color: #536257; }
body:not(.dark) #cookieBox .cookie-note, body:not(.dark) #cookieBox .cookie-preference { color: #536257; border-color: rgba(35,70,48,.1); background: rgba(25,105,60,.025); }
body:not(.dark) #cookieBox .cookie-preference strong { color: #263b2d; }
body:not(.dark) #cookieBox .cookie-preference small, body:not(.dark) #cookieBox .cookie-note { color: #718174; }
body:not(.dark) #cookieBox .cookie-buttons button, body:not(.dark) #cookieBox .cookie-manage-actions button { color: #31563d; border-color: rgba(35,70,48,.16); background: #f4f8f4; }
body:not(.dark) #cookieBox .cookie-buttons .cookie-button-primary, body:not(.dark) #cookieBox .cookie-manage-actions .cookie-button-primary { color: #f4fff6; border-color: #176b43; background: linear-gradient(145deg, #1c7548, #155b38); }
body:not(.dark) #reopenButton.cookie-reopen:not([hidden]) { color: #245b3b; border-color: rgba(25,130,72,.3); background: rgba(255,255,255,.97); box-shadow: 0 12px 36px rgba(35,70,48,.17); }
@keyframes cookie-panel-in {
    0% { opacity: 0; clip-path: inset(88% 0 0 0 round 16px); transform: translate(-15px, 12px) scale(.96); }
    62% { opacity: 1; clip-path: inset(0 0 0 0 round 16px); transform: translate(2px, -2px) scale(1.005); }
    100% { opacity: 1; clip-path: inset(0 0 0 0 round 16px); transform: translate(0, 0) scale(1); }
}
@keyframes cookie-signal-in { from { opacity: 0; transform: scaleX(.05); } 55% { opacity: 1; } to { opacity: .75; transform: scaleX(1); } }
@keyframes cookie-manage-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
    #cookieBox.cookie-banner:not([hidden]) {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 12px;
        width: auto;
        max-width: none;
        max-height: min(86dvh, 680px);
        padding: 21px 17px 17px;
        border-radius: 14px;
        transform-origin: 18px calc(100% - 10px);
    }
    #cookieBox .cookie-content h3 { max-width: 310px; font-size: 1.35rem; }
    #cookieBox .cookie-content > p { font-size: .82rem; }
    #cookieBox .cookie-note { align-items: flex-start; font-size: .57rem; }
    #cookieBox .cookie-buttons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
    #cookieBox .cookie-buttons .cookie-button-primary { grid-column: 1 / -1; grid-row: 1; }
    #cookieBox .cookie-buttons button { min-width: 0; padding-inline: 8px; font-size: .69rem; }
    #cookieBox .cookie-preference { padding: 10px; }
    #cookieBox .cookie-preference small { max-width: 230px; }
    #reopenButton.cookie-reopen:not([hidden]) { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    #cookieBox.cookie-banner:not([hidden]), #cookieBox .cookie-manage, #cookieBox.cookie-banner:not([hidden])::after { animation: none; }
}

.yt-card .cookie-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid rgba(73,209,125,.16);
    border-radius: 8px;
    background: #080f0a;
}
.yt-card .cookie-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 0;
    border: 0;
    border-radius: inherit;
}
.cookie-embed-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    color: #9eafa2;
    background: radial-gradient(ellipse at 50% 0%, rgba(73,209,125,.07), transparent 62%), #080f0a;
    text-align: center;
}
.cookie-embed-placeholder[hidden] { display: none !important; }
.cookie-embed-placeholder > i { color: #65d78f; font-size: 1.45rem; }
.cookie-embed-placeholder > p { margin: 0; color: #b5c3b7; font-size: .76rem; }
.cookie-embed-enable {
    min-height: 36px;
    padding: 8px 11px;
    color: #b8efc8;
    border: 1px solid rgba(73,209,125,.3);
    border-radius: 7px;
    background: rgba(73,209,125,.055);
    cursor: pointer;
    font: 500 .68rem/1.2 var(--display);
}
.cookie-embed-enable:hover { border-color: #49d17d; background: rgba(73,209,125,.12); }
body:not(.dark) .yt-card .cookie-embed { border-color: rgba(25,130,72,.2); }
body:not(.dark) .cookie-embed-placeholder { color: #536257; background: radial-gradient(ellipse at 50% 0%, rgba(25,130,72,.08), transparent 62%), #f3f8f3; }
body:not(.dark) .cookie-embed-placeholder > p { color: #536257; }
body:not(.dark) .cookie-embed-enable { color: #245b3b; border-color: rgba(25,130,72,.28); background: rgba(25,130,72,.05); }
@media (max-width: 540px) {
    .yt-card .cookie-embed { margin-bottom: 14px; }
    .cookie-embed-placeholder { gap: 6px; padding: 10px; }
    .cookie-embed-placeholder > p { font-size: .68rem; }
    .cookie-embed-enable { min-height: 34px; padding: 7px 9px; font-size: .62rem; }
}


/* 404 terminal experience */
body.not-found-page { color-scheme: dark; --bg: #060a08; --panel: #0b120e; --line: rgba(83,205,125,.2); --green: #63e28c; --mint: #b7f7c9; --text: #edf5ef; --muted: #90a197; --mono: "DM Mono", monospace; --display: "Space Grotesk", sans-serif; }
.not-found-page * { box-sizing: border-box; }
html:has(body.not-found-page) { min-height: 100%; background: var(--bg); }
body.not-found-page { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text); background: radial-gradient(ellipse at 14% 22%, rgba(29,117,61,.16), transparent 37%), radial-gradient(ellipse at 86% 78%, rgba(43,116,65,.1), transparent 34%), var(--bg); font-family: var(--display); }
body.not-found-page::before { position: fixed; inset: 0; z-index: 0; background-image: linear-gradient(rgba(90,180,112,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(90,180,112,.045) 1px, transparent 1px); background-size: 52px 52px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 94%); pointer-events: none; }
body.not-found-page::after { position: fixed; inset: 0; z-index: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.12) 4px); content: ""; opacity: .23; pointer-events: none; }
.not-found-page a { color: inherit; text-decoration: none; }
.not-found-page button, .not-found-page input { font: inherit; }
.not-found-page .shell { position: relative; z-index: 1; display: flex; min-height: 100svh; flex-direction: column; width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.not-found-page .topbar { display: flex; min-height: 82px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(150,190,160,.12); }
.not-found-page .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.04em; }
.not-found-page .brand-mark { display: grid; width: 38px; height: 38px; place-items: center; color: var(--green); border: 1px solid rgba(99,226,140,.34); border-radius: 10px; background: rgba(99,226,140,.07); font: 500 .8rem var(--mono); letter-spacing: -.08em; }
.not-found-page .session { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.not-found-page .session i, .not-found-page .online i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px rgba(99,226,140,.75); }
.not-found-page main { display: grid; flex: 1; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: clamp(44px, 8vw, 120px); padding: 72px 0 86px; }
.not-found-page .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--green); font: 500 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.not-found-page .eyebrow::before { width: 22px; height: 1px; background: var(--green); box-shadow: 0 0 10px var(--green); content: ""; }
.not-found-page .error-code { position: relative; width: fit-content; margin: 22px 0 8px -9px; color: #eaf6ed; font: 700 clamp(8.5rem, 21vw, 17rem)/.78 var(--display); letter-spacing: -.105em; text-shadow: 0 0 70px rgba(99,226,140,.11); }
.not-found-page .error-code::before, .not-found-page .error-code::after { position: absolute; inset: 0; overflow: hidden; content: attr(data-code); pointer-events: none; }
.not-found-page .error-code::before { color: rgba(103,255,157,.68); animation: error-glitch-a 4s infinite steps(1,end); clip-path: inset(0 0 72% 0); }
.not-found-page .error-code::after { color: rgba(207,255,219,.48); animation: error-glitch-b 4s infinite steps(1,end); clip-path: inset(60% 0 0 0); }
.not-found-page .error-title { margin: 24px 0 12px; font-size: clamp(1.7rem, 3.6vw, 2.85rem); letter-spacing: -.06em; }
.not-found-page .error-copy { max-width: 490px; margin: 0; color: #a5b3a9; font-size: 1rem; line-height: 1.75; }
.not-found-page .error-path { display: inline-flex; max-width: 100%; align-items: center; gap: 8px; margin-top: 20px; padding: 9px 12px; overflow: hidden; color: #84978a; border: 1px solid rgba(125,153,133,.18); border-radius: 7px; background: rgba(4,9,6,.6); font: .68rem var(--mono); }
.not-found-page .error-path span { overflow: hidden; color: var(--mint); text-overflow: ellipsis; white-space: nowrap; }
.not-found-page .actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.not-found-page .action { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; border: 1px solid rgba(99,226,140,.3); border-radius: 8px; background: rgba(99,226,140,.07); font-size: .83rem; font-weight: 600; transition: .2s ease; }
.not-found-page .action:hover, .not-found-page .action:focus-visible { transform: translateY(-2px); border-color: var(--green); background: rgba(99,226,140,.14); box-shadow: 0 8px 28px rgba(42,166,82,.12); outline: none; }
.not-found-page .action-primary { color: #061009; border-color: var(--green); background: linear-gradient(135deg, #a3f7b8, #55d77d); }
.not-found-page .action-primary:hover, .not-found-page .action-primary:focus-visible { color: #061009; background: #bdffcd; }
.not-found-page .terminal { overflow: hidden; border: 1px solid rgba(99,226,140,.25); border-radius: 14px; background: linear-gradient(145deg, rgba(13,24,17,.97), rgba(7,12,9,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.42), 0 0 50px rgba(58,185,96,.055); animation: error-terminal-arrive .65s .1s both; }
.not-found-page .terminal-head { display: grid; min-height: 53px; align-items: center; grid-template-columns: 1fr auto 1fr; padding: 0 17px; border-bottom: 1px solid rgba(146,178,153,.13); color: #94a498; font: .65rem var(--mono); }
.not-found-page .dots { display: flex; gap: 6px; }
.not-found-page .dots i { width: 8px; height: 8px; border-radius: 50%; background: #ed665e; }
.not-found-page .dots i:nth-child(2) { background: #e6bb4f; }
.not-found-page .dots i:nth-child(3) { background: #58cb79; }
.not-found-page .terminal-head > span:last-child { justify-self: end; color: #63766a; }
.not-found-page .terminal-body { min-height: 310px; padding: 24px 24px 18px; font: .75rem/1.7 var(--mono); }
.not-found-page .command-line { display: flex; flex-wrap: wrap; gap: 9px; color: #d8e3da; }
.not-found-page .prompt { color: var(--green); }
.not-found-page .cursor { display: inline-block; width: 7px; height: 15px; margin: 1px 0 -3px 3px; background: var(--green); animation: error-cursor-blink .85s steps(2,end) infinite; }
.not-found-page .terminal-alert { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0 16px; padding: 14px; border: 1px solid rgba(99,226,140,.13); border-radius: 8px; background: rgba(99,226,140,.035); }
.not-found-page .alert-icon { color: var(--green); font-size: 1rem; }
.not-found-page .terminal-alert strong { display: block; margin-bottom: 4px; color: #dce9df; font-weight: 500; }
.not-found-page .terminal-alert p { margin: 0; color: #8fa095; font-size: .68rem; line-height: 1.65; }
.not-found-page .route-label { margin: 20px 0 10px; color: #728278; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.not-found-page .route-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.not-found-page .route { display: flex; min-height: 37px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: #a8b7ac; border: 1px solid rgba(131,164,140,.12); border-radius: 6px; background: rgba(255,255,255,.018); font: .65rem var(--mono); transition: .18s ease; }
.not-found-page .route:hover, .not-found-page .route:focus-visible { color: var(--mint); border-color: rgba(99,226,140,.42); background: rgba(99,226,140,.06); outline: none; }
.not-found-page .route b { color: #5b7662; font-weight: 400; }
.not-found-page .terminal-input { display: flex; align-items: center; gap: 8px; margin: 0 24px 21px; padding: 9px 11px; border: 1px solid rgba(99,226,140,.19); border-radius: 7px; background: rgba(0,0,0,.22); font: .68rem var(--mono); }
.not-found-page .terminal-input label { flex: none; color: var(--green); }
.not-found-page .terminal-input input { width: 100%; min-width: 0; padding: 0; color: var(--text); border: 0; outline: 0; background: transparent; font: inherit; }
.not-found-page .terminal-input input::placeholder { color: #637268; }
.not-found-page .terminal-output { min-height: 18px; margin: -12px 24px 16px; color: #e4c773; font: .64rem var(--mono); }
.not-found-page footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 23px; color: #68766d; border-top: 1px solid rgba(150,190,160,.1); font: .62rem var(--mono); }
.not-found-page footer span:last-child { color: #829289; }
@keyframes error-cursor-blink { to { visibility: hidden; } }
@keyframes error-terminal-arrive { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes error-glitch-a { 0%, 91%, 100% { transform: none; } 92% { transform: translate(4px,-1px); } 94% { transform: translate(-3px,1px); } 96% { transform: translate(2px,0); } }
@keyframes error-glitch-b { 0%, 93%, 100% { transform: none; } 94% { transform: translate(-4px,1px); } 96% { transform: translate(3px,-1px); } }
@media (max-width: 850px) {
  .not-found-page main { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 38px; }
  .not-found-page .terminal-body { padding-inline: 17px; }
  .not-found-page .terminal-input { margin-inline: 17px; }
  .not-found-page .terminal-output { margin-inline: 17px; }
}
@media (max-width: 700px) {
  .not-found-page .shell { width: min(100% - 36px, 520px); }
  .not-found-page .topbar { min-height: 68px; }
  .not-found-page .session { font-size: .55rem; }
  .not-found-page main { grid-template-columns: 1fr; gap: 34px; padding: 55px 0 45px; }
  .not-found-page .error-code { margin-top: 20px; font-size: clamp(8rem, 39vw, 13rem); }
  .not-found-page .error-title { margin-top: 19px; }
  .not-found-page .error-copy { font-size: .94rem; }
  .not-found-page .terminal { width: 100%; }
  .not-found-page .terminal-body { min-height: 0; }
}
@media (max-width: 390px) {
  .not-found-page .shell { width: calc(100% - 28px); }
  .not-found-page .session span { display: none; }
  .not-found-page .route-list { grid-template-columns: 1fr; }
  .not-found-page .actions { display: grid; grid-template-columns: 1fr; }
  .not-found-page .action { width: 100%; }
  .not-found-page .terminal-head { padding-inline: 12px; }
  .not-found-page .terminal-body { padding-inline: 13px; }
  .not-found-page .terminal-input { margin-inline: 13px; }
  .not-found-page .terminal-output { margin-inline: 13px; }
  .not-found-page footer { font-size: .53rem; }
}
@media (prefers-reduced-motion: reduce) {
  .not-found-page *, .not-found-page *::before, .not-found-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}