:root {
            --color-bg: #0a1628;
            --color-bg-alt: #0f1e35;
            --color-surface: #132140;
            --color-surface-2: #1a2d52;
            --color-text: #f5ede0;
            --color-text-muted: #8fa0b8;
            --color-text-dim: #5a7090;
            --color-accent: #f59e0b;
            --color-accent-hover: #fbbf24;
            --color-accent-dim: rgba(245, 158, 11, 0.15);
            --color-border: rgba(255, 255, 255, 0.08);
            --color-border-strong: rgba(255, 255, 255, 0.16);
            --color-overlay: rgba(10, 22, 40, 0.7);
            --font-heading: 'Playfair Display', Georgia, serif;
            --font-body: 'DM Sans', system-ui, sans-serif;
            --radius-sm: 4px;
            --radius-md: 10px;
            --radius-lg: 18px;
            --radius-xl: 28px;
            --radius-full: 9999px;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
            --shadow-accent: 0 8px 32px rgba(245, 158, 11, 0.25);
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --spacing-3xl: 5rem;
        }

        body.light-mode {
            --color-bg: #faf7f2;
            --color-bg-alt: #f0ebe0;
            --color-surface: #ffffff;
            --color-surface-2: #f5f0e8;
            --color-text: #1a1208;
            --color-text-muted: #5c4b2e;
            --color-text-dim: #8c7a5a;
            --color-accent: #d97706;
            --color-accent-hover: #b45309;
            --color-accent-dim: rgba(217, 119, 6, 0.12);
            --color-border: rgba(0, 0, 0, 0.08);
            --color-border-strong: rgba(0, 0, 0, 0.16);
            --color-overlay: rgba(250, 247, 242, 0.7);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
            --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.12);
            --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
            --shadow-accent: 0 8px 32px rgba(217, 119, 6, 0.2);
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px
        }

        body {
            font-family: var(--font-body);
            background-color: var(--color-bg);
            color: var(--color-text);
            line-height: 1.6;
            transition: background-color var(--transition-slow), color var(--transition-slow);
            overflow-x: hidden
        }

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

        a {
            color: inherit;
            text-decoration: none
        }

        button {
            cursor: pointer;
            font-family: var(--font-body);
            border: none;
            background: none
        }

        ul,
        ol {
            list-style: none
        }

        :focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: 3px;
            border-radius: var(--radius-sm)
        }

        #loader {
            position: fixed;
            inset: 0;
            background: var(--color-bg);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-xl);
            transition: opacity 0.6s ease, visibility 0.6s ease
        }

        #loader.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none
        }

        .loader-logo {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-sm);
            animation: loaderReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both
        }

        .loader-logo-icon {
            font-size: 3rem;
            animation: quillBob 1.5s ease-in-out infinite
        }

        .loader-logo-text {
            font-family: var(--font-heading);
            font-size: 2.2rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--color-text)
        }

        .loader-logo-text span {
            color: var(--color-accent)
        }

        .loader-tagline {
            font-size: 0.8rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--color-text-muted)
        }

        .loader-progress {
            width: 200px;
            height: 2px;
            background: var(--color-surface-2);
            border-radius: var(--radius-full);
            overflow: hidden
        }

        .loader-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
            border-radius: var(--radius-full);
            animation: progressFill 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards
        }

        @keyframes loaderReveal {
            from {
                opacity: 0;
                transform: translateY(30px)
            }

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

        @keyframes quillBob {

            0%,
            100% {
                transform: rotate(-5deg) translateY(0)
            }

            50% {
                transform: rotate(5deg) translateY(-4px)
            }
        }

        @keyframes progressFill {
            from {
                width: 0%
            }

            to {
                width: 100%
            }
        }

        header {
            position: sticky;
            top: 0;
            z-index: 100;
            width: 100%;
            transition: background var(--transition-base), box-shadow var(--transition-base)
        }

        header.scrolled {
            background: rgba(10, 22, 40, 0.88);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 1px 0 var(--color-border), var(--shadow-md)
        }

        body.light-mode header.scrolled {
            background: rgba(250, 247, 242, 0.88)
        }

        nav {
            max-width: 1320px;
            margin: 0 auto;
            padding: var(--spacing-md) var(--spacing-xl);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-xl)
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            font-family: var(--font-heading);
            font-size: 1.35rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--color-text);
            flex-shrink: 0
        }

        .nav-logo span {
            color: var(--color-accent)
        }

        .nav-logo-icon {
            font-size: 1.4rem
        }

        .nav-links {
            display: none;
            align-items: center;
            gap: var(--spacing-xl)
        }

        .nav-links a {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--color-text-muted);
            letter-spacing: 0.02em;
            transition: color var(--transition-fast);
            position: relative
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1.5px;
            background: var(--color-accent);
            transition: width var(--transition-base)
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--color-text)
        }

        .nav-links a:hover::after,
        .nav-links a.active::after {
            width: 100%
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm)
        }

        .btn-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-muted);
            background: transparent;
            transition: color var(--transition-fast), background var(--transition-fast)
        }

        .btn-icon:hover {
            color: var(--color-text);
            background: var(--color-surface)
        }

        #theme-toggle.rotating svg {
            animation: spin360 0.5s ease forwards
        }

        @keyframes spin360 {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(360deg)
            }
        }

        .hamburger {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 8px
        }

        .hamburger span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--color-text);
            border-radius: 2px;
            transition: transform var(--transition-base), opacity var(--transition-base)
        }

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

        .hamburger.open span:nth-child(2) {
            opacity: 0
        }

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

        .mobile-menu {
            display: none;
            flex-direction: column;
            background: var(--color-bg-alt);
            border-top: 1px solid var(--color-border);
            padding: var(--spacing-lg) var(--spacing-xl);
            gap: var(--spacing-sm)
        }

        .mobile-menu.open {
            display: flex
        }

        .mobile-menu a {
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-text-muted);
            padding: var(--spacing-sm) 0;
            border-bottom: 1px solid var(--color-border);
            transition: color var(--transition-fast), padding-left var(--transition-fast)
        }

        .mobile-menu a:last-child {
            border-bottom: none
        }

        .mobile-menu a:hover {
            color: var(--color-accent);
            padding-left: var(--spacing-sm)
        }

        .page {
            display: none
        }

        .page.active {
            display: block
        }

        .hero {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden
        }

        #hero-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0
        }

        .hero-vignette {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(6, 15, 30, 0.95) 0%, transparent 70%), radial-gradient(ellipse 100% 40% at 50% 0%, rgba(6, 15, 30, 0.6) 0%, transparent 70%), radial-gradient(ellipse 50% 80% at 15% 50%, rgba(6, 15, 30, 0.5) 0%, transparent 60%), radial-gradient(ellipse 50% 80% at 85% 50%, rgba(6, 15, 30, 0.5) 0%, transparent 60%);
            pointer-events: none
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
            z-index: 1;
            animation: orbFloat var(--dur, 18s) ease-in-out infinite
        }

        .orb-1 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
            top: -10%;
            left: -5%;
            --dur: 20s
        }

        .orb-2 {
            width: 600px;
            height: 400px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
            bottom: -15%;
            right: -10%;
            --dur: 25s;
            animation-delay: -8s
        }

        .orb-3 {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(180, 90, 255, 0.05) 0%, transparent 70%);
            top: 30%;
            left: 60%;
            --dur: 30s;
            animation-delay: -14s
        }

        @keyframes orbFloat {

            0%,
            100% {
                transform: translate(0, 0) scale(1)
            }

            33% {
                transform: translate(30px, -20px) scale(1.06)
            }

            66% {
                transform: translate(-20px, 30px) scale(0.96)
            }
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            z-index: 1;
            background-image: linear-gradient(rgba(245, 158, 11, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 158, 11, 0.035) 1px, transparent 1px);
            background-size: 80px 80px;
            mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
            pointer-events: none
        }

        .hero-grain {
            position: absolute;
            inset: 0;
            z-index: 2;
            opacity: 0.028;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            background-size: 128px 128px;
            pointer-events: none
        }

        .hero-scanlines {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.025) 2px, rgba(0, 0, 0, 0.025) 4px);
            pointer-events: none
        }

        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 900px;
            width: 100%;
            padding: 2rem 2rem 8rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 18px;
            border-radius: 9999px;
            border: 1px solid rgba(245, 158, 11, 0.35);
            background: rgba(245, 158, 11, 0.08);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--color-accent);
            margin-bottom: 2rem;
            opacity: 0;
            animation: slideDown 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards
        }

        .eyebrow-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-accent);
            animation: pulseDot 2s ease-in-out infinite
        }

        @keyframes pulseDot {

            0%,
            100% {
                opacity: 1;
                transform: scale(1)
            }

            50% {
                opacity: 0.5;
                transform: scale(0.7)
            }
        }

        .hero-headline {
            font-family: var(--font-heading);
            font-size: clamp(2.8rem, 7vw, 6rem);
            font-weight: 900;
            line-height: 1.08;
            letter-spacing: -0.03em;
            color: var(--color-text);
            margin-bottom: 1.8rem;
            perspective: 800px
        }

        .hero-headline .line {
            display: block;
            overflow: hidden
        }

        .hero-headline .line-inner {
            display: block;
            opacity: 0;
            transform: translateY(100%) rotateX(-30deg);
            animation: lineReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            font-size: 58px;
        }

        .hero-headline .line:nth-child(1) .line-inner {
            animation-delay: 0.55s;
        }

        .hero-headline .line:nth-child(2) .line-inner {
            animation-delay: 0.72s;
            height: 67px;
        }

        .hero-headline .line:nth-child(3) .line-inner {
            animation-delay: 0.88s;
        }

        @keyframes lineReveal {
            from {
                opacity: 0;
                transform: translateY(100%) rotateX(-30deg)
            }

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

        .hero-headline em {
            font-style: italic;
            color: var(--color-accent);
            position: relative;
            display: inline-block
        }

        .hero-headline em::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--color-accent), transparent);
            transform: scaleX(0);
            transform-origin: left;
            animation: underlineGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards
        }

        @keyframes underlineGrow {
            to {
                transform: scaleX(1)
            }
        }

        .hero-excerpt {
            font-size: clamp(0.98rem, 1.8vw, 1.15rem);
            color: var(--color-text-muted);
            max-width: 580px;
            line-height: 1.75;
            margin-bottom: 2.5rem;
            opacity: 0;
            animation: fadeUp 0.8s ease 1.1s forwards
        }

        .hero-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
            margin-bottom: 2.8rem;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeUp 0.7s ease 1.3s forwards
        }

        .hero-author-wrap {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .author-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 2px solid var(--color-accent);
            overflow: hidden;
            position: relative
        }

        .author-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .author-avatar::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 1px solid rgba(245, 158, 11, 0.3);
            animation: avatarRing 2s ease-in-out infinite
        }

        @keyframes avatarRing {

            0%,
            100% {
                opacity: 1;
                transform: scale(1)
            }

            50% {
                opacity: 0.4;
                transform: scale(1.15)
            }
        }

        .author-name {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--color-text)
        }

        .author-role {
            font-size: 0.78rem;
            color: var(--color-text-muted)
        }

        .meta-sep {
            width: 1px;
            height: 18px;
            background: rgba(255, 255, 255, 0.15)
        }

        .meta-text {
            font-size: 0.82rem;
            color: var(--color-text-muted)
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
            opacity: 0;
            animation: fadeUp 0.7s ease 1.5s forwards;
            margin-bottom: 2.8rem
        }

        .btn-cta {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 32px;
            border-radius: 9999px;
            background: var(--color-accent);
            color: #06100e;
            font-family: var(--font-body);
            font-size: 0.92rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            border: none;
            cursor: pointer;
            overflow: hidden;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
            text-decoration: none
        }

        .btn-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent 60%);
            opacity: 0;
            transition: opacity 0.3s
        }

        .btn-cta::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.25);
            border-radius: 50%;
            transform: scale(0);
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            pointer-events: none
        }

        .btn-cta:hover {
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 8px 40px rgba(245, 158, 11, 0.5)
        }

        .btn-cta:hover::before {
            opacity: 1
        }

        .btn-cta .arrow {
            display: inline-flex;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)
        }

        .btn-cta:hover .arrow {
            transform: translateX(5px)
        }

        .btn-cta.ripple::after {
            animation: rippleOut 0.5s ease forwards
        }

        @keyframes rippleOut {
            from {
                transform: scale(0) translate(-50%, -50%);
                opacity: 1
            }

            to {
                transform: scale(3) translate(-50%, -50%);
                opacity: 0
            }
        }

        .btn-ghost {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 30px;
            border-radius: 9999px;
            background: transparent;
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: 0.92rem;
            font-weight: 500;
            border: 1.5px solid rgba(255, 255, 255, 0.18);
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s ease;
            backdrop-filter: blur(6px)
        }

        .btn-ghost:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
            background: rgba(245, 158, 11, 0.06);
            transform: translateY(-2px)
        }

        .hero-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
            opacity: 0;
            animation: fadeUp 0.7s ease 1.7s forwards
        }

        .stat-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.09);
            font-size: 0.8rem;
            color: var(--color-text-muted);
            backdrop-filter: blur(8px);
            transition: all 0.3s ease
        }

        .stat-chip:hover {
            border-color: rgba(245, 158, 11, 0.4);
            color: var(--color-accent)
        }

        .stat-chip-num {
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-text)
        }

        .hero-tags {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 2.2rem;
            opacity: 0;
            animation: fadeUp 0.7s ease 1.25s forwards
        }

        .htag {
            padding: 5px 14px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.72rem;
            letter-spacing: 0.08em;
            color: var(--color-text-muted);
            cursor: pointer;
            transition: all 0.25s
        }

        .htag:hover,
        .htag.active {
            background: rgba(245, 158, 11, 0.12);
            border-color: rgba(245, 158, 11, 0.4);
            color: var(--color-accent)
        }

        .hero-side-text {
            position: absolute;
            font-size: 0.65rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: rgba(143, 160, 184, 0.3);
            z-index: 10;
            white-space: nowrap
        }

        .hero-side-text.left {
            left: 2rem;
            top: 50%;
            transform: translateX(-50%) rotate(-90deg) translateX(-50%);
            transform-origin: center center;
            opacity: 0;
            animation: fadeIn 0.8s ease 2.2s forwards
        }

        .hero-side-text.right {
            right: 2rem;
            top: 50%;
            transform: translateX(50%) rotate(90deg) translateX(50%);
            transform-origin: center center;
            opacity: 0;
            animation: fadeIn 0.8s ease 2.2s forwards
        }

        .hero-scroll-hint {
            position: absolute;
            bottom: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            opacity: 0;
            animation: fadeIn 0.8s ease 2s forwards
        }

        .scroll-label {
            font-size: 0.65rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: rgba(143, 160, 184, 0.6)
        }

        .scroll-track {
            width: 1.5px;
            height: 50px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 9999px;
            overflow: hidden;
            position: relative
        }

        .scroll-thumb {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(180deg, var(--color-accent), transparent);
            border-radius: 9999px;
            animation: scrollThumb 2s ease-in-out infinite
        }

        @keyframes scrollThumb {
            0% {
                top: -50%;
                opacity: 0
            }

            30% {
                opacity: 1
            }

            70% {
                opacity: 1
            }

            100% {
                top: 100%;
                opacity: 0
            }
        }

        .corner-deco {
            position: absolute;
            width: 60px;
            height: 60px;
            z-index: 3;
            opacity: 0.4
        }

        .corner-deco svg {
            width: 100%;
            height: 100%
        }

        .corner-deco.tl {
            top: 2rem;
            left: 2rem
        }

        .corner-deco.tr {
            top: 2rem;
            right: 2rem;
            transform: scaleX(-1)
        }

        .corner-deco.bl {
            bottom: 2rem;
            left: 2rem;
            transform: scaleY(-1)
        }

        .corner-deco.br {
            bottom: 2rem;
            right: 2rem;
            transform: scale(-1)
        }

        #cursor-trail {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            top: 0;
            left: 0
        }

        .trail-dot {
            position: absolute;
            border-radius: 50%;
            background: var(--color-accent);
            pointer-events: none;
            animation: trailFade 0.6s ease forwards
        }

        @keyframes trailFade {
            0% {
                opacity: 0.6;
                transform: scale(1)
            }

            100% {
                opacity: 0;
                transform: scale(0)
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px)
            }

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

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(24px)
            }

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

        @keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        [data-parallax] {
            will-change: transform
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
            background: var(--color-accent);
            color: #0a1628;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 14px 28px;
            border-radius: var(--radius-full);
            transition: background var(--transition-fast), transform var(--transition-spring), box-shadow var(--transition-fast);
            box-shadow: var(--shadow-accent)
        }

        .btn-primary:hover {
            background: var(--color-accent-hover);
            transform: scale(1.03);
            box-shadow: 0 12px 40px rgba(245, 158, 11, 0.4)
        }

        .btn-primary svg {
            transition: transform var(--transition-base)
        }

        .btn-primary:hover svg {
            transform: translateX(4px)
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
            border: 1.5px solid var(--color-border-strong);
            color: var(--color-text);
            font-weight: 500;
            font-size: 0.9rem;
            padding: 13px 26px;
            border-radius: var(--radius-full);
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-spring)
        }

        .btn-secondary:hover {
            background: var(--color-surface);
            border-color: var(--color-accent);
            transform: scale(1.02)
        }

        .section {
            padding: var(--spacing-3xl) var(--spacing-xl);
            max-width: 1320px;
            margin: 0 auto
        }

        .section-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-2xl);
            flex-wrap: wrap
        }

        .section-label {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-accent);
            margin-bottom: var(--spacing-xs)
        }

        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(1.8rem, 3.5vw, 2.6rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--color-text);
            line-height: 1.2
        }

        .section-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--color-accent);
            transition: gap var(--transition-base);
            flex-shrink: 0
        }

        .section-link:hover {
            gap: 10px
        }

        .categories-filter {
            padding: var(--spacing-xl) var(--spacing-xl) 0;
            max-width: 1320px;
            margin: 0 auto
        }

        .filter-scroll {
            display: flex;
            gap: var(--spacing-sm);
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: var(--spacing-sm)
        }

        .filter-scroll::-webkit-scrollbar {
            display: none
        }

        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 18px;
            border-radius: var(--radius-full);
            border: 1.5px solid var(--color-border);
            background: var(--color-surface);
            color: var(--color-text-muted);
            font-size: 0.85rem;
            font-weight: 500;
            white-space: nowrap;
            cursor: pointer;
            transition: all var(--transition-base)
        }

        .filter-chip:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
            background: var(--color-accent-dim)
        }

        .filter-chip.active {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: #0a1628;
            font-weight: 600
        }

        .cards-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-xl)
        }

        .card {
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--color-border);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
            display: flex;
            flex-direction: column
        }

        .card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg)
        }

        .card-thumb {
            overflow: hidden;
            aspect-ratio: 16/10;
            position: relative
        }

        .card-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow)
        }

        .card:hover .card-thumb img {
            transform: scale(1.07)
        }

        .card-body {
            padding: var(--spacing-lg);
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: var(--spacing-sm)
        }

        .card-tag {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: var(--radius-full);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            background: var(--color-accent-dim);
            color: var(--color-accent);
            width: fit-content
        }

        .card-title {
            font-family: var(--font-heading);
            font-size: clamp(1rem, 2vw, 1.25rem);
            font-weight: 700;
            color: var(--color-text);
            line-height: 1.35;
            transition: color var(--transition-fast)
        }

        .card:hover .card-title {
            color: var(--color-accent)
        }

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

        .card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: var(--spacing-sm);
            padding-top: var(--spacing-sm);
            border-top: 1px solid var(--color-border)
        }

        .card-author-mini {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            font-size: 0.8rem;
            color: var(--color-text-muted)
        }

        .avatar-xs {
            width: 26px;
            height: 26px;
            border-radius: var(--radius-full);
            overflow: hidden;
            border: 1.5px solid var(--color-border-strong)
        }

        .avatar-xs img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .card-read-time {
            font-size: 0.78rem;
            color: var(--color-text-dim)
        }

        .content-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-2xl);
            max-width: 1320px;
            margin: 0 auto;
            padding: var(--spacing-2xl) var(--spacing-xl)
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xl)
        }

        .widget {
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg);
            border: 1px solid var(--color-border)
        }

        .widget-title {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-text);
            margin-bottom: var(--spacing-lg);
            padding-bottom: var(--spacing-sm);
            border-bottom: 1px solid var(--color-border);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm)
        }

        .widget-title svg {
            color: var(--color-accent)
        }

        .trending-list {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md)
        }

        .trending-item {
            display: flex;
            gap: var(--spacing-md);
            align-items: center;
            cursor: pointer;
            transition: transform var(--transition-fast)
        }

        .trending-item:hover {
            transform: translateX(4px)
        }

        .trending-num {
            font-family: var(--font-heading);
            font-size: 2rem;
            font-weight: 900;
            color: var(--color-border-strong);
            line-height: 1;
            min-width: 32px
        }

        .trending-thumb {
            width: 64px;
            height: 48px;
            border-radius: var(--radius-md);
            overflow: hidden;
            flex-shrink: 0
        }

        .trending-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .trending-info {
            flex: 1
        }

        .trending-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--color-text);
            line-height: 1.35;
            margin-bottom: 2px;
            transition: color var(--transition-fast)
        }

        .trending-item:hover .trending-title {
            color: var(--color-accent)
        }

        .trending-views {
            font-size: 0.75rem;
            color: var(--color-text-dim)
        }

        .newsletter-section {
            position: relative;
            background: linear-gradient(135deg, #0d2149 0%, #162d55 40%, #1a3366 100%);
            overflow: hidden;
            padding: var(--spacing-3xl) var(--spacing-xl);
            text-align: center
        }

        body.light-mode .newsletter-section {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%)
        }

        .newsletter-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.12) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 50%)
        }

        .newsletter-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.04;
            background-image: repeating-linear-gradient(45deg, var(--color-text) 0px, var(--color-text) 1px, transparent 1px, transparent 40px)
        }

        .newsletter-inner {
            position: relative;
            z-index: 1;
            max-width: 600px;
            margin: 0 auto
        }

        .newsletter-label {
            font-size: 0.72rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--color-accent);
            font-weight: 600;
            margin-bottom: var(--spacing-sm)
        }

        .newsletter-title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 900;
            color: var(--color-text);
            line-height: 1.15;
            margin-bottom: var(--spacing-md);
            letter-spacing: -0.02em
        }

        body.light-mode .newsletter-title {
            color: #1a1208
        }

        .newsletter-sub {
            font-size: 1rem;
            color: var(--color-text-muted);
            margin-bottom: var(--spacing-xl);
            line-height: 1.6
        }

        body.light-mode .newsletter-sub {
            color: #5c4b2e
        }

        .newsletter-form {
            display: flex;
            gap: var(--spacing-sm);
            max-width: 480px;
            margin: 0 auto
        }

        .newsletter-input {
            flex: 1;
            padding: 14px 18px;
            border-radius: var(--radius-full);
            border: 2px solid rgba(255, 255, 255, 0.15);
            background: rgba(255, 255, 255, 0.08);
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: 0.95rem;
            transition: border-color var(--transition-base), background var(--transition-base);
            outline: none
        }

        body.light-mode .newsletter-input {
            border-color: rgba(0, 0, 0, 0.15);
            background: rgba(255, 255, 255, 0.6);
            color: #1a1208
        }

        .newsletter-input::placeholder {
            color: var(--color-text-dim)
        }

        .newsletter-input:focus {
            border-color: var(--color-accent);
            background: rgba(255, 255, 255, 0.12)
        }

        body.light-mode .newsletter-input:focus {
            background: rgba(255, 255, 255, 0.9)
        }

        .newsletter-success {
            display: none;
            margin-top: var(--spacing-lg);
            padding: var(--spacing-md) var(--spacing-lg);
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: var(--radius-md);
            color: var(--color-accent);
            font-size: 0.9rem;
            font-weight: 500
        }

        .newsletter-success.show {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            justify-content: center
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-2xl);
            align-items: center
        }

        .about-photo {
            aspect-ratio: 4/3;
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative
        }

        .about-photo::after {
            content: '';
            position: absolute;
            inset: 0;
            border: 2px solid var(--color-accent);
            border-radius: var(--radius-lg);
            opacity: 0.4;
            transform: translate(8px, 8px);
            pointer-events: none
        }

        .about-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .about-label {
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--color-accent);
            font-weight: 600;
            margin-bottom: var(--spacing-sm)
        }

        .about-name {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 900;
            letter-spacing: -0.02em;
            color: var(--color-text);
            margin-bottom: var(--spacing-lg);
            line-height: 1.1
        }

        .about-bio {
            color: var(--color-text-muted);
            line-height: 1.8;
            font-size: 1rem;
            margin-bottom: var(--spacing-xl)
        }

        .social-links {
            display: flex;
            gap: var(--spacing-sm)
        }

        .social-link {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid var(--color-border);
            color: var(--color-text-muted);
            transition: all var(--transition-base)
        }

        .social-link:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
            background: var(--color-accent-dim);
            transform: translateY(-2px)
        }

        .about-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-xl)
        }

        .stat-card {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            text-align: center
        }

        .stat-num {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--color-accent);
            line-height: 1
        }

        .stat-label {
            font-size: 0.78rem;
            color: var(--color-text-muted);
            margin-top: 2px
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-2xl)
        }

        .contact-form-card {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: var(--spacing-2xl)
        }

        .form-group {
            margin-bottom: var(--spacing-lg)
        }

        .form-label {
            display: block;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--color-text-muted);
            margin-bottom: var(--spacing-sm);
            letter-spacing: 0.02em
        }

        .form-input,
        .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border-radius: var(--radius-md);
            border: 1.5px solid var(--color-border);
            background: var(--color-bg);
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: 0.95rem;
            transition: border-color var(--transition-base), box-shadow var(--transition-base);
            outline: none
        }

        .form-input:focus,
        .form-textarea:focus {
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px var(--color-accent-dim)
        }

        .form-textarea {
            resize: vertical;
            min-height: 140px
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg)
        }

        .contact-item {
            display: flex;
            gap: var(--spacing-md);
            align-items: flex-start;
            padding: var(--spacing-lg);
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md)
        }

        .contact-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-md);
            background: var(--color-accent-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-accent);
            flex-shrink: 0
        }

        .contact-item h3 {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: 2px
        }

        .contact-item p {
            font-size: 0.85rem;
            color: var(--color-text-muted)
        }

        footer {
            background: var(--color-bg-alt);
            border-top: 1px solid var(--color-border);
            padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
            margin-top: var(--spacing-3xl)
        }

        .footer-grid {
            max-width: 1320px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-2xl)
        }

        .footer-brand .nav-logo {
            margin-bottom: var(--spacing-md);
            font-size: 1.4rem
        }

        .footer-tagline {
            font-size: 0.9rem;
            color: var(--color-text-muted);
            line-height: 1.6;
            max-width: 260px;
            margin-bottom: var(--spacing-lg)
        }

        .footer-col h4 {
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--color-text);
            margin-bottom: var(--spacing-md)
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm)
        }

        .footer-links a {
            font-size: 0.9rem;
            color: var(--color-text-muted);
            transition: color var(--transition-fast), padding-left var(--transition-fast)
        }

        .footer-links a:hover {
            color: var(--color-accent);
            padding-left: 4px
        }

        .footer-bottom {
            max-width: 1320px;
            margin: var(--spacing-2xl) auto 0;
            padding-top: var(--spacing-lg);
            border-top: 1px solid var(--color-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacing-md);
            flex-wrap: wrap
        }

        .footer-copy {
            font-size: 0.82rem;
            color: var(--color-text-dim)
        }

        .footer-social {
            display: flex;
            gap: var(--spacing-sm)
        }

        #back-top {
            position: fixed;
            bottom: var(--spacing-xl);
            right: var(--spacing-xl);
            z-index: 50;
            width: 48px;
            height: 48px;
            border-radius: var(--radius-full);
            background: var(--color-accent);
            color: #0a1628;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-accent);
            opacity: 0;
            visibility: hidden;
            transform: translateY(16px);
            transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base), background var(--transition-fast)
        }

        #back-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0)
        }

        #back-top:hover {
            background: var(--color-accent-hover);
            transform: translateY(-2px)
        }


        .divider {
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--color-accent), transparent);
            border-radius: var(--radius-full);
            margin: var(--spacing-md) 0
        }

        .page-hero-mini {
            background: var(--color-bg-alt);
            padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-xl);
            border-bottom: 1px solid var(--color-border);
            text-align: center
        }

        .page-hero-mini h1 {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 900;
            letter-spacing: -0.03em;
            color: var(--color-text);
            margin-bottom: var(--spacing-sm)
        }

        .page-hero-mini p {
            color: var(--color-text-muted);
            font-size: 1rem;
            max-width: 500px;
            margin: 0 auto;
            line-height: 1.6
        }

        .featured-big {
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: 1fr;
            background: var(--color-surface);
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--color-border);
            transition: transform var(--transition-base), box-shadow var(--transition-base)
        }

        .featured-big:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg)
        }

        hr {
            border: none;
            border-top: 1px solid var(--color-border);
            margin: var(--spacing-xl) 0
        }

        .text-accent {
            color: var(--color-accent)
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0
        }

        @media(min-width:640px) {
            .cards-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .about-stats {
                gap: var(--spacing-lg)
            }
        }

        @media(min-width:768px) {
            .nav-links {
                display: flex
            }

            .hamburger-wrap {
                display: none
            }

            .footer-grid {
                grid-template-columns: 2fr 1fr 1fr 1fr
            }

            .about-grid {
                grid-template-columns: 1fr 1.3fr
            }

            .contact-grid {
                grid-template-columns: 1.3fr 1fr
            }

            .featured-big {
                grid-template-columns: 1.2fr 1fr
            }

            .featured-big .card-thumb {
                aspect-ratio: unset;
                height: 100%;
                min-height: 280px
            }
        }

        @media(min-width:1024px) {
            .cards-grid {
                grid-template-columns: repeat(3, 1fr)
            }

            .content-layout {
                grid-template-columns: 1fr 320px
            }

            .sidebar {
                position: sticky;
                top: 90px;
                align-self: start
            }
        }

        @media(max-width:768px) {
            .hero-side-text {
                display: none
            }

            .corner-deco {
                display: none
            }

            .hero-stats {
                gap: 0.6rem
            }
        }