:root{
            --bg:#ffffff;
            --section:#f8fafc;
            --primary:#1d4ed8;
            --text:#0f172a;
            --muted:#475569;
            --line:rgba(15,23,42,.08);
            --radius-xl:28px;
            --radius-lg:22px;
            --radius-md:18px;
            --shadow:0 20px 60px rgba(29,78,216,.10), 0 6px 20px rgba(15,23,42,.06);
        }

        html {
            scroll-behavior: smooth;
            background: var(--bg);
        }

        body{
            font-family:'Inter',sans-serif;
            background:
                radial-gradient(circle at 0% 0%, rgba(29,78,216,.10), transparent 28%),
                radial-gradient(circle at 100% 20%, rgba(29,78,216,.08), transparent 26%),
                radial-gradient(circle at 20% 100%, rgba(59,130,246,.08), transparent 32%),
                linear-gradient(135deg, #ffffff 0%, #f8fafc 48%, #ffffff 100%);
            color:var(--text);
            min-height:100vh;
        }

        .navbar{
            background: rgba(255,255,255,.78);
            backdrop-filter: blur(18px);
            border-bottom:1px solid var(--line);
        }

        .navbar-brand .navbar-item.brand{
            font-weight:800;
            color:var(--text);
            letter-spacing:-0.04em;
            font-size:1.15rem;
        }

        .navbar-item, .navbar-link{
            color:var(--text);
            font-weight:600;
        }

        .navbar-burger span{
            height:2px;
            color:var(--text);
        }

        .button.is-outline-custom{
            background: transparent;
            color: var(--primary);
            border: 1.5px solid var(--primary);
            border-radius: 999px;
            font-weight: 700;
            padding-left: 1.15rem;
            padding-right: 1.15rem;
            transition: all .35s ease;
        }

        .button.is-outline-custom:hover{
            transform: translateY(-2px);
            background:#eff6ff;
            color:var(--primary);
            border-color:var(--primary);
        }

        .page-wrap{
            padding: 1.25rem;
        }

        .hero-shell{
            background: var(--section);
            border:1px solid var(--line);
            border-radius: 36px;
            overflow:hidden;
            box-shadow: var(--shadow);
        }

        .hero-grid{
            display:grid;
            grid-template-columns: 1.15fr .85fr;
            min-height: 620px;
        }

        .hero-copy{
            padding: 4rem 4rem 3.5rem 4rem;
            display:flex;
            flex-direction:column;
            justify-content:center;
            position:relative;
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.55rem;
            padding:.55rem .9rem;
            border:1px solid rgba(29,78,216,.18);
            background:#ffffff;
            border-radius:999px;
            color:var(--primary);
            font-size:.9rem;
            font-weight:700;
            width:max-content;
            margin-bottom:1.2rem;
            box-shadow: 0 8px 20px rgba(29,78,216,.08);
        }

        .outlined-title{
            font-size: clamp(2.6rem, 5vw, 5.2rem);
            line-height: .96;
            letter-spacing: -0.06em;
            font-weight: 800;
            color: transparent;
            -webkit-text-stroke: 2px var(--text);
            text-transform: none;
            margin-bottom: 1.35rem;
        }

        .hero-subtitle{
            max-width: 58ch;
            color: var(--muted);
            font-size: 1.05rem;
            line-height: 1.8;
            margin-bottom: 2rem;
        }

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.9rem;
            margin-bottom:2rem;
        }

        .hero-metrics{
            display:grid;
            grid-template-columns: repeat(3, minmax(0,1fr));
            gap:1rem;
            margin-top:.5rem;
        }

        .metric-card{
            background:#ffffff;
            border:1px solid var(--line);
            border-radius:20px;
            padding:1rem 1rem;
        }

        .metric-number{
            font-size:1.4rem;
            font-weight:800;
            color:var(--primary);
            line-height:1;
            margin-bottom:.45rem;
        }

        .metric-label{
            color:var(--muted);
            font-size:.92rem;
        }

        .hero-visual{
            position:relative;
            min-height:420px;
            background:
                radial-gradient(circle at 20% 30%, rgba(255,255,255,.72), transparent 28%),
                radial-gradient(circle at 75% 20%, rgba(29,78,216,.14), transparent 26%),
                radial-gradient(circle at 70% 80%, rgba(96,165,250,.18), transparent 30%),
                linear-gradient(160deg, #dbeafe 0%, #eff6ff 42%, #f8fafc 100%);
            display:flex;
            align-items:center;
            justify-content:center;
            padding:2.2rem;
        }

        .floating-panel{
            position:absolute;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(255,255,255,.9);
            box-shadow: var(--shadow);
            backdrop-filter: blur(16px);
            border-radius:22px;
            padding:1rem 1.1rem;
            animation: slideUp 1s ease both;
        }

        .floating-panel.small{
            top:8%;
            left:8%;
            max-width:180px;
        }

        .floating-panel.right{
            bottom:10%;
            right:8%;
            max-width:190px;
        }

        .floating-panel .tagline{
            font-size:.78rem;
            text-transform:uppercase;
            letter-spacing:.08em;
            color:var(--primary);
            font-weight:800;
            margin-bottom:.35rem;
        }

        .floating-panel p{
            color:var(--muted);
            font-size:.92rem;
            line-height:1.5;
        }

        .hero-image-card{
            width:100%;
            max-width:460px;
            border-radius:30px;
            overflow:hidden;
            background:#ffffff;
            border:1px solid rgba(255,255,255,.75);
            box-shadow: 0 30px 80px rgba(29,78,216,.16), 0 10px 30px rgba(15,23,42,.08);
            transform: translateY(12px);
            animation: slideLeft .95s ease both;
        }

        .hero-image-card img{
            display:block;
            width:100%;
            height:560px;
            object-fit:cover;
        }

        .section-block{
            padding: 2.25rem 0;
        }

        .soft-panel{
            background: var(--section);
            border:1px solid var(--line);
            border-radius: var(--radius-xl);
            box-shadow: 0 10px 30px rgba(15,23,42,.04);
        }

        .section-header{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:1rem;
            margin-bottom:1.4rem;
        }

        .section-kicker{
            font-size:.82rem;
            text-transform:uppercase;
            letter-spacing:.12em;
            color:var(--primary);
            font-weight:800;
            margin-bottom:.6rem;
        }

        .section-title{
            font-size: clamp(1.9rem, 3vw, 3rem);
            line-height:1;
            letter-spacing:-0.05em;
            font-weight:800;
            color:transparent;
            -webkit-text-stroke:1.4px var(--text);
            margin:0;
        }

        .section-copy{
            color:var(--muted);
            max-width:60ch;
            line-height:1.8;
            margin-top:.8rem;
        }

        .feature-ribbon{
            padding: 1.7rem;
        }

        .feature-track{
            display:grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            gap:1rem;
        }

        .feature-card{
            background:#ffffff;
            border:1px solid var(--line);
            border-radius:24px;
            padding:1.5rem;
            min-height:100%;
            transition: transform .35s ease, box-shadow .35s ease;
            animation: slideUp .8s ease both;
        }

        .feature-card:hover{
            transform: translateY(-6px);
            box-shadow: 0 16px 38px rgba(29,78,216,.10);
        }

        .feature-icon{
            width:52px;
            height:52px;
            border-radius:16px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#eff6ff;
            color:var(--primary);
            font-weight:800;
            font-size:1.1rem;
            margin-bottom:1rem;
        }

        .feature-card h3{
            font-size:1.15rem;
            font-weight:800;
            letter-spacing:-0.03em;
            margin-bottom:.7rem;
            color:var(--text);
        }

        .feature-card p{
            color:var(--muted);
            line-height:1.75;
        }

        .content-stage{
            display:grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap:1.4rem;
            align-items:start;
        }

        .masonry{
            column-count: 2;
            column-gap: 1.25rem;
        }

        .masonry-item{
            break-inside: avoid;
            margin-bottom:1.25rem;
            animation: slideUp .9s ease both;
        }

        .post-card{
            background:#ffffff;
            border:1px solid var(--line);
            border-radius:26px;
            overflow:hidden;
            box-shadow: 0 14px 34px rgba(15,23,42,.05);
            transition: transform .35s ease, box-shadow .35s ease;
        }

        .post-card:hover{
            transform: translateY(-6px);
            box-shadow: 0 20px 48px rgba(29,78,216,.10);
        }

        .post-card img{
            width:100%;
            display:block;
            object-fit:cover;
            box-shadow: 0 16px 38px rgba(15,23,42,.10);
        }

        .post-card.tall img{ height: 320px; }
        .post-card.medium img{ height: 240px; }
        .post-card.short img{ height: 190px; }

        .post-content{
            padding:1.35rem 1.35rem 1.5rem 1.35rem;
        }

        .post-topline{
            color:var(--primary);
            font-size:.78rem;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.12em;
            margin-bottom:.7rem;
        }

        .post-title{
            font-size:1.3rem;
            line-height:1.2;
            letter-spacing:-0.04em;
            font-weight:800;
            color:var(--text);
            margin-bottom:.8rem;
        }

        .post-excerpt{
            color:var(--muted);
            line-height:1.75;
            margin-bottom:1rem;
        }

        .post-link{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            color:var(--primary);
            font-weight:700;
        }

        .sidebar-stack{
            position:sticky;
            top:90px;
            display:grid;
            gap:1rem;
        }

        .side-card{
            background:#ffffff;
            border:1px solid var(--line);
            border-radius:24px;
            padding:1.35rem;
            box-shadow: 0 12px 28px rgba(15,23,42,.04);
            animation: slideRight .85s ease both;
        }

        .side-card h4{
            font-size:1rem;
            font-weight:800;
            letter-spacing:-0.03em;
            margin-bottom:.8rem;
            color:var(--text);
        }

        .side-card p, .side-card li{
            color:var(--muted);
            line-height:1.7;
        }

        .topic-list li{
            padding:.65rem 0;
            border-bottom:1px solid var(--line);
        }

        .topic-list li:last-child{
            border-bottom:none;
            padding-bottom:0;
        }

        .mini-highlight{
            background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
            border:1px solid rgba(29,78,216,.12);
        }

        footer.footer{
            background: transparent;
            padding: 2rem 1.25rem 3rem;
        }

        .footer-shell{
            background: var(--section);
            border:1px solid var(--line);
            border-radius:28px;
            padding:1.4rem 1.5rem;
        }

        .footer-brand{
            font-weight:800;
            color:var(--text);
            letter-spacing:-0.04em;
        }

        .footer-links{
            display:flex;
            gap:1rem;
            flex-wrap:wrap;
            justify-content:flex-end;
        }

        .footer-links a{
            color:var(--muted);
            font-weight:600;
        }

        .footer-links a:hover,
        .navbar-item:hover{
            color:var(--primary);
        }

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

        @keyframes slideLeft{
            from{opacity:0; transform:translateX(28px);}
            to{opacity:1; transform:translateX(0);}
        }

        @keyframes slideRight{
            from{opacity:0; transform:translateX(-24px);}
            to{opacity:1; transform:translateX(0);}
        }

        @media screen and (max-width: 1215px){
            .hero-grid{
                grid-template-columns: 1fr;
            }
            .hero-copy{
                padding: 3rem 2rem 2rem 2rem;
            }
            .hero-visual{
                min-height: 500px;
            }
            .content-stage{
                grid-template-columns: 1fr;
            }
            .sidebar-stack{
                position:relative;
                top:auto;
                grid-template-columns: repeat(3,minmax(0,1fr));
            }
        }

        @media screen and (max-width: 1023px){
            .feature-track{
                grid-template-columns: 1fr;
            }
            .masonry{
                column-count: 1;
            }
            .hero-metrics{
                grid-template-columns: 1fr;
            }
            .sidebar-stack{
                grid-template-columns: 1fr;
            }
        }

        @media screen and (max-width: 768px){
            .page-wrap{
                padding: .85rem;
            }
            .outlined-title{
                -webkit-text-stroke: 1.4px var(--text);
            }
            .section-title{
                -webkit-text-stroke: 1px var(--text);
            }
            .hero-visual{
                padding:1rem;
                min-height:380px;
            }
            .hero-image-card img{
                height:380px;
            }
            .floating-panel.small,
            .floating-panel.right{
                position:static;
                margin-top:1rem;
                max-width:none;
            }
            .hero-visual{
                display:block;
            }
            .footer-links{
                justify-content:flex-start;
                margin-top:1rem;
            }
        }