:root {
            --bg-page:      #f5f0e8;
            --bg-warm:      #ede6d6;
            --bg-card:      #f9f5ed;
            --bg-card-alt:  #f2ebe0;
            --bg-deep:      #1a0f08;

            --rot:          #c0392b;
            --rot-dark:     #922b21;
            --rot-pale:     #e8b4b0;
            --rot-glow:     rgba(192,57,43,0.08);
            --rot-glow-md:  rgba(192,57,43,0.15);

            --gold:         #b8860b;
            --gold-bright:  #d4a017;
            --gold-pale:    #e8d5a0;
            --gold-dim:     #8b6914;
            --gold-glow:    rgba(184,134,11,0.12);

            /* Copper palette additions */
            --copper:       #b87333;
            --copper-light: #da9654;
            --copper-pale:  #e8c49a;
            --copper-deep:  #7d4e1f;

            --text:         #1f140a;
            --text-soft:    #5c4a35;
            --text-dim:     #9e8468;
            --text-inv:     #f5f0e8;

            --border:       rgba(184,134,11,0.2);
            --border-rot:   rgba(192,57,43,0.15);
            --border-strong:rgba(184,134,11,0.4);

            --grad-gold:    linear-gradient(135deg, #b8860b, #e8d5a0, #b8860b);
            --grad-rot:     linear-gradient(135deg, #c0392b, #e74c3c, #c0392b);
            --grad-paper:   linear-gradient(160deg, #f9f5ed 0%, #ede6d6 100%);

            --shadow-sm:    0 2px 12px rgba(31,20,10,0.08);
            --shadow-md:    0 8px 40px rgba(31,20,10,0.12);
            --shadow-lg:    0 20px 60px rgba(31,20,10,0.16);

            --r: 4px;
            --r-md: 8px;
        }

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

        html {
            scroll-behavior: smooth;
            background-color: #f5f0e8;
        }

        body {
            font-family: 'Nunito', system-ui, sans-serif;
            background: transparent;
            color: var(--text);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        #bgCanvas {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            pointer-events: none;
            z-index: 1;
        }

        .navbar-wrap  { z-index: 100 !important; }
        .hero         { position: relative; z-index: 2; background: linear-gradient(160deg, rgba(249,245,237,0.78) 0%, rgba(237,230,214,0.78) 100%) !important; }
        .stats-strip  { position: relative; z-index: 2; }
        .section      { position: relative; z-index: 2; background: rgba(245,240,232,0.80); }
        .section-alt  { position: relative; z-index: 2; background: rgba(237,230,214,0.80) !important; }
        .paper-divider{ position: relative; z-index: 2; }
        .cta-section  { position: relative; z-index: 2; }
        .footer       { position: relative; z-index: 2; background: rgba(237,230,214,0.82) !important; }

        h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; }

        a { color: var(--rot); text-decoration: none; transition: color .25s; }
        a:hover { color: var(--rot-dark); }
        ::selection { background: var(--rot); color: white; }

        /* Ornaments */
        .ornament {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .ornament-line {
            flex: 1; max-width: 120px; height: 1px;
            background: linear-gradient(90deg, transparent, var(--border-strong));
        }
        .ornament-line.flip { background: linear-gradient(90deg, var(--border-strong), transparent); }
        .ornament-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
        .ornament-dot { width: 3px; height: 3px; background: var(--gold-dim); border-radius: 50%; }

        /* =============================================
           NAVBAR — full-width, edge-to-edge inner
        ============================================= */
        .navbar-wrap {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 100;
            transition: all .4s cubic-bezier(.16,1,.3,1);
        }
        .nav-ribbon { background: var(--rot); height: 3px; }
        .navbar-inner {
            background: rgba(245,240,232,0.92);
            backdrop-filter: blur(20px) saturate(1.2);
            border-bottom: 1px solid var(--border);
            padding: .85rem 0;
            transition: all .4s;
        }
        .navbar-wrap.scrolled .navbar-inner {
            background: rgba(245,240,232,0.97);
            box-shadow: var(--shadow-md);
            padding: .55rem 0;
        }
        /* WIDER NAVBAR — use max-width: none with generous px padding */
        .nav-inner {
            max-width: 100%;
            padding: 0 3.5rem;
            display: flex; align-items: center; justify-content: space-between; gap: 2rem;
        }
        @media (max-width: 1400px) { .nav-inner { padding: 0 2.5rem; } }
        @media (max-width: 991px)  { .nav-inner { padding: 0 1.5rem; } }
        @media (max-width: 600px)  { .nav-inner { padding: 0 1rem; } }

        .nav-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
        .nav-sigil {
            width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.2rem; font-weight: 700; color: white;
            position: relative; overflow: hidden; flex-shrink: 0;
        }
        .nav-sigil::after {
            content: ''; position: absolute;
            top: 0; left: 0; right: 50%; bottom: 0;
            background: rgba(255,255,255,0.1);
        }
        .nav-brand-text { display: flex; flex-direction: column; line-height: 2; }
        .nav-brand-name {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.05rem; font-weight: 700; color: var(--rot); letter-spacing: .03em;
        }
        .nav-brand-name span { color: var(--gold); }
        .nav-brand-sub {
            font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
            color: var(--text-dim); font-family: 'Nunito', system-ui, sans-serif;
        }
        .nav-links-wrapper {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .nav-links {
            display: flex;
            align-items: center;
            gap: .1rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .nav-links li {
            display: flex;
            align-items: center;
        }
        .nav-links a {
            font-family: 'Nunito', system-ui, sans-serif;
            font-size: .9rem;
            font-weight: 600;
            letter-spacing: .03em;
            color: var(--text-soft);
            padding: .45rem .85rem;
            border-radius: var(--r);
            transition: all .2s;
            display: flex;
            align-items: center;
            line-height: 1;
        }
        .nav-links a:hover {
            color: var(--text);
            background: var(--rot-glow);
        }
        .nav-btn {
            font-family: 'Playfair Display', Georgia, serif; font-size: .95rem; font-weight: 600;
            letter-spacing: .05em; padding: .5rem 1.5rem; background: var(--rot);
            color: white; border-radius: var(--r); transition: all .3s;
            box-shadow: 0 2px 12px rgba(192,57,43,0.25); white-space: nowrap;
        }
        .nav-btn:hover { background: var(--rot-dark); color: white; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(192,57,43,.35); }
        .nav-hamburger {
            display: none; background: none; border: 1px solid var(--border);
            color: var(--text); font-size: 1.3rem; padding: .3rem .6rem; border-radius: var(--r); cursor: pointer;
        }
        .btn-dashboard {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Playfair Display', Georgia, serif;
            font-weight: 600;
            font-size: .9rem;
            padding: .45rem 1rem;
            background: var(--rot);
            color: #fff;
            border-radius: var(--r);
            box-shadow: 0 2px 10px rgba(192,57,43,0.25);
            text-decoration: none;
            transition: all .3s;
        }

        .btn-dashboard:hover {
            background: #a8281f;
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(192,57,43,0.35);
        }
        @media (max-width: 900px) { .nav-links { display: none; } .nav-hamburger { display: block; } }
        @media (max-width: 600px) { .nav-btn { display: none; } }

        /* =============================================
           HERO
        ============================================= */
        .hero {
            min-height: 100vh; padding-top: 90px;
            display: flex; align-items: center;
            background: linear-gradient(160deg, rgba(249,245,237,0.7) 0%, rgba(237,230,214,0.75) 100%);
            position: relative; overflow: hidden; z-index: 2;
        }
        .hero-watermark {
            position: absolute; right: -5%; top: 50%;
            transform: translateY(-50%);
            width: 55%; max-width: 700px;
            opacity: 0.03; pointer-events: none; user-select: none;
        }
        .hero-stripe {
            position: absolute; left: 0; top: 0; bottom: 0;
            width: 5px; background: var(--rot);
        }
        .hero-section-left {position: relative; top: -40px;}
        .hero-eyebrow {
            display: inline-flex; align-items: center; gap: .6rem;
            font-family: 'Nunito', system-ui, sans-serif; font-size: .68rem; font-weight: 600;
            letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.5rem;
        }
        .hero-eyebrow-line { width: 28px; height: 1px; background: var(--rot); }
        .hero-badge {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: .4rem .85rem; background: rgba(255,255,255,0.93);
            border: 1px solid var(--border-rot); border-radius: 100px;
            font-family: 'Nunito', system-ui, sans-serif; font-size: .72rem; color: var(--text-soft);
            margin-bottom: 1.75rem; box-shadow: var(--shadow-sm);
        }
        .hero-badge-dot {
            width: 7px; height: 7px; border-radius: 50%; background: #27ae60;
            box-shadow: 0 0 8px rgba(39,174,96,.5); animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

        .hero-title {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: clamp(3rem, 6.5vw, 5.5rem);
            font-weight: 700; line-height: 1.0; letter-spacing: -.01em;
            color: var(--text); margin-bottom: 1rem;
        }
        .hero-title .rot { color: var(--rot); }
        .hero-title .italic-line {
            display: block; font-size: .55em; font-weight: 400;
            font-style: italic; color: var(--text-soft); margin-top: .25rem;
        }
        .hero-body {
            font-family: 'Nunito', system-ui, sans-serif; font-size: 1.2rem;
            line-height: 1.85; color: var(--text-soft); max-width: 480px; margin-bottom: 2.5rem;
        }
        .hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

        .btn-main {
            display: inline-flex; align-items: center; gap: .55rem;
            padding: .9rem 2.2rem; background: var(--rot); color: white;
            font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem;
            font-weight: 600; letter-spacing: .05em; border-radius: var(--r);
            transition: all .3s cubic-bezier(.16,1,.3,1);
            box-shadow: 0 4px 20px rgba(192,57,43,0.28);
        }
        .btn-main:hover { background: var(--rot-dark); color: white; transform: translateY(-2px); box-shadow: 0 8px 35px rgba(192,57,43,.38); }

        .btn-outline {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: .9rem 2rem; background: transparent; color: var(--text-soft);
            font-family: 'Nunito', system-ui, sans-serif; font-size: .88rem; font-weight: 500;
            border: 1px solid var(--border); border-radius: var(--r); transition: all .3s;
        }
        .btn-outline:hover { color: var(--text); border-color: var(--border-strong); background: rgba(184,134,11,0.04); }

        /* Hero panel */
        .hero-panel {
            background: rgba(255,255,255,0.93); border: 1px solid var(--border);
            border-radius: var(--r-md); padding: 2.25rem;
            box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
        }
        .hero-panel::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0;
            height: 4px; background: var(--rot);
        }
        .hero-panel::after {
            content: ''; position: absolute; top: 4px; left: 0; right: 0;
            height: 2px; background: var(--gold);
        }
        .panel-heading {
            font-family: 'Nunito', system-ui, sans-serif; font-size: .62rem; font-weight: 600; text-align: center;
            letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.25rem;
        }
        .panel-stat {
            display: flex; align-items: baseline; justify-content: space-between;
            padding: .65rem 0; border-bottom: 1px solid var(--bg-warm);
        }
        .panel-stat:last-of-type { border-bottom: none; }
        .panel-stat-label { font-family: 'Nunito', system-ui, sans-serif; font-size: 1rem; color: var(--text-soft); }
        .panel-stat-val { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--rot); }
        .panel-map {
            display: block;
            margin: 1rem auto;
            padding: 0.5rem;
            border: 1px solid var(--border);
            border-radius: var(--r, 8px);
            max-width: 90%;
            height: auto;
            background: rgba(237,230,214,0.92);
            box-sizing: border-box;
        }
        .panel-crest { display: flex; justify-content: center; margin-bottom: 1.25rem; }

        .hero-scroll {
            position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: .4rem;
        }
        .hero-scroll-text { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
        .hero-scroll-bar {
            width: 1px; height: 44px;
            background: linear-gradient(to bottom, var(--rot), transparent);
            animation: scrollbar 2.5s ease-in-out infinite;
        }
        @keyframes scrollbar {
            0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
            50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
            100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
        }

        /* =============================================
           STATS STRIP
        ============================================= */
        .stats-strip {
            background: var(--rot); padding: 2.25rem 0;
            position: relative; overflow: hidden; z-index: 2;
        }
        .stats-strip::before {
            content: ''; position: absolute; inset: 0; opacity: .06;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 256px;
        }
        .stat-item { text-align: center; }
        .stat-num { font-family: 'Playfair Display', Georgia, serif; font-size: 2.2rem; font-weight: 700; color: white; line-height: 1; }
        .stat-label { font-family: 'Nunito', system-ui, sans-serif; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: .3rem; }
        .stat-divider { width: 1px; background: rgba(255,255,255,.2); align-self: stretch; }

        /* =============================================
           SECTIONS
        ============================================= */
        .section { padding: 7rem 0; }
        .section-alt { }

        .section-label {
            display: inline-flex; align-items: center; gap: .6rem;
            font-family: 'Nunito', system-ui, sans-serif; font-size: .65rem; font-weight: 600;
            letter-spacing: .22em; text-transform: uppercase; color: var(--rot); margin-bottom: 1rem;
        }
        .section-label-line { width: 24px; height: 1.5px; background: var(--rot); }

        .section-title {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.15;
            color: var(--text); margin-bottom: .75rem;
        }
        .section-title .gold { color: var(--gold-dim); }
        .section-title .rot  { color: var(--rot); }

        .section-body {
            font-family: 'Nunito', system-ui, sans-serif;
            font-size: 1.15rem; line-height: 1.85; color: var(--text-soft); max-width: 520px;
        }
        .paper-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent); position: relative; z-index: 2; }

        /* =============================================
           FEATURE CARDS
        ============================================= */
        .feat-card {
            background: rgba(255,255,255,0.93); border: 1px solid var(--border); border-radius: var(--r-md);
            padding: 2rem; height: 100%; position: relative; overflow: hidden;
            transition: all .35s cubic-bezier(.16,1,.3,1); box-shadow: var(--shadow-sm);
        }
        .feat-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0;
            height: 3px; background: transparent; transition: background .35s;
        }
        .feat-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
        .feat-card:hover::before { background: linear-gradient(90deg, var(--rot), var(--gold)); }
        .feat-card-featured { background: linear-gradient(135deg, #fff 60%, var(--bg-card-alt)); }

        .feat-icon {
            width: 48px; height: 48px; border-radius: var(--r);
            background: var(--rot-glow); border: 1px solid var(--border-rot);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; color: var(--rot); margin-bottom: 1.25rem;
        }
        .feat-card h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
        .feat-card p { font-family: 'Nunito', system-ui, sans-serif; font-size: 1rem; line-height: 1.8; color: var(--text-soft); margin: 0; }

        /* =============================================
           GALLERY
        ============================================= */
        .gallery-frame {
            background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
            overflow: hidden; transition: all .35s; box-shadow: var(--shadow-sm);
        }
        .gallery-frame:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
        .gallery-inner {
            background: rgba(237,230,214,0.92); display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: .6rem; position:relative; overflow: hidden; color: var(--text-dim);
        }
        .gallery-inner i { font-size: 2rem; opacity: .4; }
        .gallery-inner span { font-size: .72rem; letter-spacing: .05em; opacity: .6; }
        .gallery-inner img {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0;}
        .gallery-wide { aspect-ratio: 16/10; }
        .gallery-sq   { aspect-ratio: 1/1; }
        .gallery-caption { padding: .75rem 1rem; border-top: 1px solid var(--border); }
        .gallery-caption span { font-family: 'Nunito', system-ui, sans-serif; font-size: .95rem; color: var(--text-soft); }

        /* =============================================
           TIMELINE
        ============================================= */
        .timeline { position: relative; padding-left: 3.5rem; }
        .timeline::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0;
            width: 2px; background: linear-gradient(to bottom, var(--rot), var(--rot-pale), transparent);
        }
        .t-step { padding-bottom: 2.5rem; position: relative; }
        .t-step:last-child { padding-bottom: 0; }
        .t-dot {
            position: absolute; left: -4.1rem; top: 0;
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(255,255,255,0.93); border: 2px solid var(--rot);
            display: flex; align-items: center; justify-content: center;
            font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--rot);
            transition: all .3s; box-shadow: var(--shadow-sm);
        }
        .t-step:hover .t-dot { background: var(--rot); color: white; box-shadow: 0 0 20px rgba(192,57,43,.3); }
        .t-step h4 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }
        .t-step p { font-family: 'Nunito', system-ui, sans-serif; font-size: 1rem; line-height: 1.75; color: var(--text-soft); margin: 0; }

        .ip-box {
            display: inline-flex; align-items: center; gap: .75rem;
            margin-top: .65rem; padding: .5rem .5rem .5rem 1rem;
            background: rgba(237,230,214,0.92); border: 1px solid var(--border); border-radius: 100px;
        }
        .ip-box code { font-size: .85rem; font-weight: 600; color: var(--text); }
        .ip-copy {
            padding: .3rem .85rem; background: var(--rot); color: white;
            border: none; border-radius: 100px; font-size: .72rem; font-weight: 600;
            cursor: pointer; transition: all .2s; font-family: 'Nunito', system-ui, sans-serif;
        }
        .ip-copy:hover { background: var(--rot-dark); }
        .ip-copy.copied { background: #27ae60; }

        .btn-steam {
            display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem;
            padding: .4rem 1rem; background: rgba(255,255,255,0.93); border: 1px solid var(--border);
            border-radius: var(--r); font-size: .78rem; color: var(--text-soft);
            transition: all .25s; box-shadow: var(--shadow-sm);
        }
        .btn-steam:hover { color: var(--text); border-color: var(--border-strong); }

        /* =============================================
           COMMUNITY CARDS
        ============================================= */
        .comm-card {
            display: flex; flex-direction: row; align-items: center; gap: 1.25rem;
            padding: 1.5rem 1.75rem;
            border-radius: var(--r-md); border: 1px solid; height: auto;
            text-decoration: none; color: inherit; transition: all .35s cubic-bezier(.16,1,.3,1);
            box-shadow: var(--shadow-sm);
        }
        .comm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .cc-discord { background: #f0f1ff; border-color: rgba(88,101,242,.2); }
        .cc-discord:hover { border-color: rgba(88,101,242,.4); box-shadow: 0 12px 40px rgba(88,101,242,.12); }
        .cc-ts { background: #f0f6ff; border-color: rgba(37,128,195,.2); }
        .cc-ts:hover { border-color: rgba(37,128,195,.4); box-shadow: 0 12px 40px rgba(37,128,195,.12); }
        .cc-icon { width: 48px; height: 48px; min-width: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .cc-icon i { font-size: 1.4rem; line-height: 1; }
        .cc-discord .cc-icon { background: rgba(88,101,242,.1); color: #5865f2; }
        .cc-ts .cc-icon { background: rgba(37,128,195,.1); color: #2580c3; }
        .cc-body { flex: 1; min-width: 0; }
        .cc-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 .2rem; }
        .cc-desc { font-family: 'Nunito', system-ui, sans-serif; font-size: .9rem; color: var(--text-soft); margin: 0; }
        .cc-arrow { font-size: .82rem; color: var(--text-dim); flex-shrink: 0; transition: all .3s; }
        .comm-card:hover .cc-arrow { color: var(--text-soft); transform: translateX(4px); }

        /* =============================================
           NEWS CARDS
        ============================================= */
        .news-card {
            display: flex; flex-direction: column; background: rgba(255,255,255,0.93);
            border: 1px solid var(--border); border-radius: var(--r-md);
            overflow: hidden; height: 100%; text-decoration: none; color: inherit;
            transition: all .35s cubic-bezier(.16,1,.3,1); box-shadow: var(--shadow-sm);
        }
        .news-card:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .news-visual {
            height: 160px; background: rgba(237,230,214,0.92);
            display: flex; align-items: center; justify-content: center;
            font-size: 2.5rem; color: var(--text-dim); opacity: .6;
        }
        .news-accent {
            height: 3px; background: var(--rot);
            transform: scaleX(0); transform-origin: left;
            transition: transform .4s cubic-bezier(.16,1,.3,1);
        }
        .news-card:hover .news-accent { transform: scaleX(1); }
        .news-body { padding: 1.4rem; flex: 1; }
        .news-date { font-family: 'Nunito', system-ui, sans-serif; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
        .news-body h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--text); margin: .4rem 0; line-height: 1.35; transition: color .25s; }
        .news-card:hover h3 { color: var(--rot); }
        .news-body p { font-family: 'Nunito', system-ui, sans-serif; font-size: .98rem; color: var(--text-soft); line-height: 1.7; margin: 0; }

        /* =============================================
           FOOTER
        ============================================= */
        .footer { background: rgba(237,230,214,0.75); border-top: 1px solid var(--border); padding: 3.5rem 0 2rem; position: relative; z-index: 2; }
        .footer-tagline { font-family: 'Nunito', system-ui, sans-serif; font-style: italic; font-size: 1rem; color: var(--text-soft); line-height: 1.7; margin-top: .5rem; }
        .footer-heading { font-family: 'Nunito', system-ui, sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem; }
        .footer-links { list-style: none; padding-left: 0; margin-bottom: .35rem;}
        .footer-links li { margin-bottom: .35rem; }
        .footer-links a { font-family: 'Nunito', system-ui, sans-serif; font-size: 1rem; color: var(--text-soft); }
        .footer-links a:hover { color: var(--rot); }
        .footer-social {
            width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.93); border: 1px solid var(--border); border-radius: var(--r);
            color: var(--text-dim); font-size: .9rem; transition: all .25s; box-shadow: var(--shadow-sm);
        }
        .footer-social:hover { color: var(--rot); border-color: var(--border-rot); transform: translateY(-2px); }
        .footer-bottom {
            margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
        }
        .footer-bottom p { font-family: 'Nunito', system-ui, sans-serif; font-size: .75rem; color: var(--text-dim); margin: 0; }

        /* =============================================
           ANIMATIONS
        ============================================= */
        .reveal {
            opacity: 0; transform: translateY(24px);
            transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
        }
        .reveal.in { opacity: 1; transform: none; }
        .rd1 { transition-delay: .1s; } .rd2 { transition-delay: .2s; }
        .rd3 { transition-delay: .3s; } .rd4 { transition-delay: .4s; }

        .hfade { opacity: 0; transform: translateY(20px); animation: hfadeIn .9s cubic-bezier(.16,1,.3,1) forwards; }
        .hf1 { animation-delay: .15s; } .hf2 { animation-delay: .3s; }
        .hf3 { animation-delay: .45s; } .hf4 { animation-delay: .6s; }
        .hf5 { animation-delay: .75s; }
        @keyframes hfadeIn { to { opacity:1; transform:none; } }

        /* =============================================
           RESPONSIVE
        ============================================= */
        /* TABLET (768px - 991px) */
        @media (max-width: 991px) {
            .hero-panel-col { 
                margin-top: 2.5rem; 
                padding-left: 0 !important;
            }
            .hero-panel {
                padding: 1.75rem;
            }
            .hero-title {
                font-size: 2.2rem;
            }
            .hero-body {
                font-size: 1rem;
            }
        }
        
        /* MOBILE (< 768px) */
        @media (max-width: 767px) {
            .section { padding: 4.5rem 0; }
            .hero-title { font-size: 2.2rem; }
            .hero-actions { flex-direction: column; }
            .hero-actions > * { width: 100%; justify-content: center; text-align: center; }
            .hero-panel-col { 
                margin-top: 2rem; 
                padding-left: 0 !important;
            }
            .hero-panel {
                padding: 1.5rem;
                max-width: 100%;
            }
            .panel-map {
                max-width: 100%;
            }
            .hero-body {
                font-size: 0.95rem;
                max-width: 100%;
            }
            .hero-section-left {
                top: 0;
            }
            .timeline { padding-left: 2.75rem; }
            .t-dot { left: -3.55rem; width: 36px; height: 36px; font-size: .9rem; }
        }
        
        /* SMALL MOBILE (< 480px) */
        @media (max-width: 479px) {
            .hero {
                min-height: auto;
                padding-top: 80px;
            }
            .hero-title {
                font-size: 1.8rem;
                margin-bottom: 0.75rem;
            }
            .hero-body {
                font-size: 0.9rem;
                line-height: 1.7;
                max-width: 100%;
            }
            .hero-eyebrow {
                margin-bottom: 1rem;
            }
            .hero-actions {
                gap: 0.75rem;
            }
            .btn-main, .btn-outline {
                padding: 0.75rem 1.5rem;
                font-size: 0.85rem;
            }
            .hero-panel {
                padding: 1.25rem;
                margin-top: 1.5rem;
            }
            .panel-stat {
                padding: 0.5rem 0;
            }
            .panel-stat-label {
                font-size: 0.9rem;
            }
            .panel-stat-val {
                font-size: 1.2rem;
            }
            .nav-inner {
                padding: 0 0.75rem;
            }
        }