/* ================================================
           RESET & CSS VARIABLES
        ================================================ */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-base:          #07101F;
            --bg-surface:       #0C1829;
            --clr-surface:      rgba(255, 255, 255, 0.03);
            --clr-border:       rgba(201, 168, 76, 0.20);
            --clr-border-dim:   rgba(255, 255, 255, 0.07);
            --clr-gold:         #C9A84C;
            --clr-gold-light:   #E2C97E;
            --clr-gold-dim:     rgba(201, 168, 76, 0.10);
            --clr-white:        #FFFFFF;
            --clr-text:         #B8CCDF;
            --clr-muted:        #5A6E82;
            --radius-sm:        8px;
            --radius-md:        14px;
            --radius-lg:        22px;
            --font-serif:       'Playfair Display', Georgia, serif;
            --font-sans:        'Inter', system-ui, sans-serif;
            --transition:       0.32s cubic-bezier(0.4, 0, 0.2, 1);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-sans);
            background-color: var(--bg-base);
            color: var(--clr-white);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* Ambient background glow */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse 75% 55% at 8%  8%,  rgba(201,168, 76, 0.055) 0%, transparent 60%),
                radial-gradient(ellipse 55% 70% at 92% 90%, rgba( 20, 60,150, 0.080) 0%, transparent 60%),
                radial-gradient(ellipse 60% 60% at 50% 40%, rgba(  7, 16, 31, 0.600) 0%, transparent 80%);
            pointer-events: none;
            z-index: 0;
        }

        /* ================================================
           LAYOUT
        ================================================ */
        .container {
            max-width: 1080px;
            margin: 0 auto;
            padding: 0 36px;
            position: relative;
            z-index: 1;
        }

        /* ================================================
           HEADER
        ================================================ */
        .site-header {
            padding: 52px 0 44px;
            text-align: center;
            position: relative;
            z-index: 10;
        }

        .header-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
        }

        /* ---------- Logo ---------- */
        /*
         * LOGO INSTRUCTIONS:
         * Replace the <span class="logo-placeholder"> inside .logo-ring
         * with: <img src="your-logo-file.png" alt="VastConfluence Logo">
         * The circular mask and border will apply automatically.
         */
        .logo-ring {
            width: 108px;
            height: 108px;
            border-radius: 50%;
            border: 1.5px solid var(--clr-gold);
            background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 68%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            animation: logoPulse 4s ease-in-out infinite;
            cursor: default;
        }

        .logo-ring img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .logo-placeholder {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--clr-gold);
            text-align: center;
            line-height: 1.55;
            opacity: 0.65;
            user-select: none;
        }

        @keyframes logoPulse {
            0%, 100% { box-shadow: 0 0 0 7px rgba(201,168,76,0.04), 0 0 28px rgba(201,168,76,0.10); }
            50%       { box-shadow: 0 0 0 7px rgba(201,168,76,0.09), 0 0 52px rgba(201,168,76,0.22); }
        }

        /* ---------- Site Name ---------- */
        .site-name {
            font-family: var(--font-serif);
            font-size: 27px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--clr-white);
        }

        .site-name em {
            font-style: normal;
            color: var(--clr-gold);
        }

        .site-location {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--clr-muted);
            margin-top: -6px;
        }

        .hdr-rule {
            width: 50px;
            height: 1.5px;
            background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
        }


        /* ================================================
           BANNER SECTION  (16 : 9 aspect ratio)
        ================================================ */
        /*
         * BANNER INSTRUCTIONS:
         * To use your own banner image, replace the entire .banner-fill div content
         * with: <img src="your-banner.jpg" alt="Banner"
         *             style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
         * (Keep the .banner-wrapper for the 16:9 ratio container.)
         */
        .banner-section { padding: 0 0 58px; }

        .banner-wrapper {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;   /* ← 16 : 9 */
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: 0 28px 80px rgba(0,0,0,0.55);
            border: 1px solid var(--clr-border-dim);
        }

        .banner-fill {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: linear-gradient(140deg, #060C1B 0%, #0C1E46 38%, #142660 65%, #080F22 100%);
        }

        /* Scrolling grid mesh */
        .banner-fill::before {
            content: '';
            position: absolute;
            inset: -50%;
            background-image:
                linear-gradient(rgba(201,168,76,0.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201,168,76,0.045) 1px, transparent 1px);
            background-size: 68px 68px;
            animation: meshScroll 24s linear infinite;
        }

        @keyframes meshScroll {
            from { transform: translate(0, 0); }
            to   { transform: translate(68px, 68px); }
        }

        /* Central radial flare */
        .banner-fill::after {
            content: '';
            position: absolute;
            top: -25%; left: 50%;
            transform: translateX(-50%);
            width: 75%;
            height: 75%;
            background: radial-gradient(ellipse, rgba(201,168,76,0.07) 0%, transparent 58%);
            animation: flarePulse 5.5s ease-in-out infinite alternate;
        }

        @keyframes flarePulse {
            from { opacity: 0.55; transform: translateX(-50%) scale(1.00); }
            to   { opacity: 1.00; transform: translateX(-50%) scale(1.18); }
        }

        /* Corner brackets */
        .b-corner {
            position: absolute;
            width: 34px;
            height: 34px;
            opacity: 0.5;
        }
        .b-corner--tl { top:14px; left:14px;   border-top:1.5px solid var(--clr-gold); border-left:1.5px solid var(--clr-gold); }
        .b-corner--tr { top:14px; right:14px;  border-top:1.5px solid var(--clr-gold); border-right:1.5px solid var(--clr-gold); }
        .b-corner--bl { bottom:14px; left:14px;  border-bottom:1.5px solid var(--clr-gold); border-left:1.5px solid var(--clr-gold); }
        .b-corner--br { bottom:14px; right:14px; border-bottom:1.5px solid var(--clr-gold); border-right:1.5px solid var(--clr-gold); }

        .banner-body {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 5%;
        }

        .banner-eyebrow {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.30em;
            text-transform: uppercase;
            color: var(--clr-gold);
            padding: 5px 16px;
            border: 1px solid rgba(201,168,76,0.30);
            border-radius: 50px;
            margin-bottom: 18px;
        }

        .banner-headline {
            font-family: var(--font-serif);
            font-size: clamp(22px, 4.6vw, 54px);
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 16px;
            background: linear-gradient(150deg, #FFFFFF 25%, #E2C97E 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .banner-sub {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: clamp(12px, 1.8vw, 17px);
            color: rgba(184,204,223,0.72);
            max-width: 520px;
            margin: 0 auto;
            line-height: 1.65;
        }


        /* ================================================
           NOTICE — UNDER CONSTRUCTION
        ================================================ */
        .notice-section { padding: 0 0 68px; }

        .notice-box {
            background: var(--clr-surface);
            border: 1px solid var(--clr-border);
            border-radius: var(--radius-lg);
            padding: 54px 52px;
            text-align: center;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .notice-box::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 180px; height: 1px;
            background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
        }

        .notice-box::after {
            content: '';
            position: absolute;
            bottom: 0; left: 50%;
            transform: translateX(-50%);
            width: 90px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201,168,76,0.35), transparent);
        }

        .notice-icon-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--clr-gold-dim);
            border: 1px solid rgba(201,168,76,0.22);
            margin-bottom: 26px;
        }

        .notice-icon-wrap svg {
            width: 26px;
            height: 26px;
        }

        .notice-heading {
            font-family: var(--font-serif);
            font-size: clamp(22px, 3.4vw, 34px);
            font-weight: 700;
            line-height: 1.22;
            margin-bottom: 20px;
        }

        .notice-heading mark {
            background: none;
            color: var(--clr-gold-light);
        }

        .notice-body {
            font-size: 15px;
            color: var(--clr-text);
            max-width: 620px;
            margin: 0 auto 32px;
            line-height: 1.90;
        }

        .notice-rule {
            width: 44px;
            height: 1.5px;
            background: var(--clr-border);
            margin: 0 auto;
        }


        /* ================================================
           ABOUT SECTION
        ================================================ */
        .about-section { padding: 0 0 68px; }

        .section-header {
            text-align: center;
            margin-bottom: 42px;
        }

        .section-label {
            display: block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--clr-gold);
            margin-bottom: 10px;
        }

        .section-heading {
            font-family: var(--font-serif);
            font-size: clamp(24px, 3vw, 36px);
            font-weight: 700;
            line-height: 1.18;
            margin-bottom: 12px;
        }

        .section-sub {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: 17px;
            color: var(--clr-text);
        }

        .about-intro {
            font-size: 15px;
            color: var(--clr-text);
            line-height: 1.92;
            max-width: 740px;
            margin: 0 auto 52px;
            text-align: center;
        }

        .about-intro strong {
            color: var(--clr-gold-light);
            font-weight: 600;
        }

        /* ---------- Four Pillars ---------- */
        .pillars-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
        }

        .pillar {
            background: var(--clr-surface);
            border: 1px solid var(--clr-border-dim);
            border-radius: var(--radius-md);
            padding: 30px 28px;
            position: relative;
            overflow: hidden;
            transition: border-color var(--transition),
                        background    var(--transition),
                        transform     var(--transition);
        }

        /* Animated left accent bar */
        .pillar::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 2.5px; height: 100%;
            background: linear-gradient(180deg, var(--clr-gold) 0%, transparent 100%);
            transform: scaleY(0);
            transform-origin: top center;
            transition: transform var(--transition);
        }

        .pillar:hover {
            border-color: rgba(201,168,76,0.22);
            background: rgba(255,255,255,0.05);
            transform: translateY(-4px);
        }

        .pillar:hover::before { transform: scaleY(1); }

        .pillar-icon-wrap {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-sm);
            background: var(--clr-gold-dim);
            border: 1px solid rgba(201,168,76,0.16);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
        }

        .pillar-icon-wrap svg {
            width: 20px;
            height: 20px;
            stroke: var(--clr-gold);
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .pillar-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--clr-white);
            margin-bottom: 9px;
            letter-spacing: 0.01em;
        }

        .pillar-desc {
            font-size: 13px;
            color: var(--clr-muted);
            line-height: 1.78;
        }

        .pillar-desc em { color: rgba(184,204,223,0.7); font-style: italic; }


        /* ================================================
           CONTACT SECTION
        ================================================ */
        .contact-section { padding: 0 0 80px; }

        .contact-card {
            background: linear-gradient(138deg,
                rgba(201,168, 76, 0.042) 0%,
                rgba( 20, 40,100, 0.110) 50%,
                rgba(201,168, 76, 0.042) 100%
            );
            border: 1px solid var(--clr-border);
            border-radius: var(--radius-lg);
            padding: 62px 44px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* Decorative circles */
        .contact-card::before {
            content: '';
            position: absolute;
            bottom: -70px; right: -70px;
            width: 220px; height: 220px;
            border-radius: 50%;
            border: 1px solid rgba(201,168,76,0.07);
            pointer-events: none;
        }

        .contact-card::after {
            content: '';
            position: absolute;
            top: -50px; left: -50px;
            width: 170px; height: 170px;
            border-radius: 50%;
            border: 1px solid rgba(201,168,76,0.055);
            pointer-events: none;
        }

        .contact-heading {
            font-family: var(--font-serif);
            font-size: clamp(22px, 3vw, 32px);
            font-weight: 700;
            margin-bottom: 13px;
            position: relative;
            z-index: 1;
        }

        .contact-sub {
            font-size: 15px;
            color: var(--clr-text);
            margin-bottom: 34px;
            line-height: 1.75;
            position: relative;
            z-index: 1;
        }

        .email-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 38px;
            border: 1.5px solid var(--clr-gold);
            border-radius: 50px;
            background: transparent;
            color: var(--clr-gold);
            font-family: var(--font-sans);
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.04em;
            text-decoration: none;
            transition: background var(--transition),
                        color     var(--transition),
                        transform var(--transition),
                        box-shadow var(--transition);
            position: relative;
            z-index: 1;
        }

        .email-btn svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0;
        }

        .email-btn:hover {
            background: var(--clr-gold);
            color: var(--bg-base);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(201,168,76,0.30);
        }


        /* ================================================
           FOOTER
        ================================================ */
        .site-footer {
            border-top: 1px solid var(--clr-border-dim);
            padding: 30px 0;
            text-align: center;
        }

        .footer-text {
            font-size: 12.5px;
            color: var(--clr-muted);
            letter-spacing: 0.04em;
            line-height: 1.8;
        }

        .footer-sep {
            display: inline-block;
            margin: 0 10px;
            opacity: 0.35;
        }


        /* ================================================
           ENTRANCE ANIMATIONS
        ================================================ */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .anim { opacity: 0; }

        .anim-1 { animation: fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.05s forwards; }
        .anim-2 { animation: fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
        .anim-3 { animation: fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.25s forwards; }
        .anim-4 { animation: fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.35s forwards; }
        .anim-5 { animation: fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.45s forwards; }
        .anim-6 { animation: fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.55s forwards; }
        .anim-7 { animation: fadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.65s forwards; }


        /* ================================================
           RESPONSIVE
        ================================================ */
        @media (max-width: 740px) {
            .container        { padding: 0 20px; }
            .pillars-grid     { grid-template-columns: 1fr; }
            .notice-box       { padding: 36px 24px; }
            .contact-card     { padding: 42px 24px; }
            .site-name        { font-size: 22px; }
        }

        @media (max-width: 480px) {
            .banner-eyebrow   { font-size: 8.5px; letter-spacing: 0.20em; }
            .site-header      { padding: 36px 0 30px; }
        }