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

            :root {
                --navy:   #0f2044;
                --navy-d: #091529;
                --navy-l: #1a3560;
                --gold:   #c9a227;
                --gold-l: #e8b830;
                --text:   #1e293b;
                --muted:  #64748b;
                --border: #dde3ed;
                --bg:     #f4f6fb;
                --white:  #ffffff;
                --danger: #dc2626;
            }

            body {
                font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
                background: var(--bg);
                color: var(--text);
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }

            /* ── CONFIDENTIAL BANNER ── */
            .conf-banner {
                background: #7f1d1d;
                color: #fecaca;
                text-align: center;
                font-size: .7rem;
                font-weight: 700;
                letter-spacing: .18em;
                text-transform: uppercase;
                padding: .42rem 1rem;
            }

            /* ── NAV ── */
            nav {
                background: var(--navy);
                padding: 0 2.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 68px;
                position: sticky;
                top: 0;
                z-index: 100;
                box-shadow: 0 2px 12px rgba(0,0,0,.3);
            }

            .nav-brand {
                display: flex;
                align-items: center;
                gap: .9rem;
                text-decoration: none;
                color: var(--white);
            }

            .nav-coat {
                width: 44px;
                height: 52px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .nav-coat img { width: 100%; height: 100%; object-fit: contain; }

            .nav-brand-text { line-height: 1.2; }

            .nav-brand-name {
                font-size: 1rem;
                font-weight: 700;
                letter-spacing: .04em;
                text-transform: uppercase;
                display: block;
            }

            .nav-brand-sub {
                font-size: .63rem;
                text-transform: uppercase;
                letter-spacing: .1em;
                opacity: .5;
                display: block;
            }

            .nav-right {
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            .nav-divider {
                width: 1px;
                height: 32px;
                background: rgba(255,255,255,.15);
            }

            .nav-classification {
                font-size: .68rem;
                font-weight: 700;
                letter-spacing: .12em;
                text-transform: uppercase;
                color: var(--gold-l);
                border: 1px solid rgba(201,162,39,.4);
                padding: .22rem .65rem;
                border-radius: 4px;
            }

            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: .4rem;
                padding: .45rem 1.15rem;
                border-radius: 5px;
                font-size: .85rem;
                font-weight: 600;
                text-decoration: none;
                transition: background .15s, border-color .15s, color .15s;
                cursor: pointer;
                border: 2px solid transparent;
                white-space: nowrap;
                letter-spacing: .02em;
                font-family: inherit;
            }

            .btn-gold {
                background: var(--gold);
                color: var(--navy-d);
                border-color: var(--gold);
                font-weight: 700;
            }
            .btn-gold:hover { background: var(--gold-l); border-color: var(--gold-l); }

            .btn-lg {
                padding: .75rem 2rem;
                font-size: .95rem;
                border-radius: 6px;
            }

            /* ── HERO BANNER ── */
            :root {
                --kir-red:  #CE1126;
                --kir-blue: #003DA5;
                --kir-gold: #FFC61E;
            }

            .hero {
                position: relative;
                min-height: 92vh;
                display: flex;
                flex-direction: column;
                background: #030918;  /* base — the SVG scene renders on top */
                color: #fff;
                overflow: hidden;
            }

            /* Flag-colour top bar */
            .hero-flag-bar {
                display: flex;
                height: 6px;
                flex-shrink: 0;
            }
            .hero-flag-bar .kir-r { flex: 1; background: var(--kir-red); }
            .hero-flag-bar .kir-g { width: 3px; background: var(--kir-gold); }
            .hero-flag-bar .kir-b { flex: 1; background: var(--kir-blue); }

            /* Background scenic layer */
            .hero-bg-deco {
                position: absolute;
                inset: 0;
                pointer-events: none;
                overflow: hidden;
                z-index: 0;
            }
            .hero-bg-deco svg { width: 100%; height: 100%; }

            /* Dark readability overlay — heavier on left (text), lighter right (scene) */
            .hero-overlay {
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                background:
                    linear-gradient(to right, rgba(3,7,20,.88) 0%, rgba(3,7,20,.65) 40%, rgba(3,7,20,.30) 70%, rgba(3,7,20,.15) 100%),
                    linear-gradient(to bottom, rgba(0,0,0,.2) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.3) 100%);
            }

            @keyframes rise-pulse  { 0%,100%{opacity:1}    50%{opacity:.82} }
            @keyframes halo-glow   { 0%,100%{opacity:.22}  50%{opacity:.38} }
            @keyframes shimmer-sea { 0%,100%{opacity:.35}  50%{opacity:.75} }
            .sun-rise   { animation: rise-pulse  5s ease-in-out infinite; }
            .sun-halo-a { animation: halo-glow   5s ease-in-out infinite; }
            .sea-shim   { animation: shimmer-sea 3s ease-in-out infinite; }

            /* Main content area */
            .hero-body {
                flex: 1;
                display: grid;
                grid-template-columns: 1fr 420px;
                gap: 4rem;
                align-items: center;
                max-width: 1200px;
                width: 100%;
                margin: 0 auto;
                padding: 4rem 2.5rem 5rem;
                position: relative;
                z-index: 2;
            }

            /* ── Left: Kiribati branding ── */
            .hb-brand { display: flex; flex-direction: column; }

            .hb-coa {
                width: 110px;
                height: auto;
                filter: drop-shadow(0 4px 24px rgba(0,0,0,.5)) brightness(1.05);
                margin-bottom: 1.5rem;
            }

            .hb-nation {
                font-size: .7rem;
                font-weight: 800;
                letter-spacing: .28em;
                text-transform: uppercase;
                color: rgba(255,255,255,.55);
                margin-bottom: .35rem;
            }

            .hb-motto {
                font-size: .75rem;
                font-weight: 600;
                letter-spacing: .12em;
                color: var(--kir-gold);
                margin-bottom: 1.35rem;
                opacity: .85;
            }

            .hb-divider {
                width: 56px;
                height: 3px;
                background: linear-gradient(90deg, var(--kir-gold), var(--kir-red));
                border-radius: 99px;
                margin-bottom: 1.35rem;
            }

            .hb-title {
                font-size: clamp(2.4rem, 4.5vw, 3.8rem);
                font-weight: 900;
                letter-spacing: -.03em;
                line-height: 1;
                color: #fff;
                margin-bottom: .6rem;
            }
            .hb-title span { color: var(--kir-gold); }

            .hb-subtitle {
                font-size: 1rem;
                font-weight: 500;
                color: rgba(255,255,255,.55);
                letter-spacing: .04em;
                margin-bottom: 2rem;
            }

            .hb-class-badge {
                display: inline-flex;
                align-items: center;
                gap: .45rem;
                background: rgba(206,17,38,.15);
                border: 1px solid rgba(206,17,38,.4);
                color: #ff8a9a;
                font-size: .65rem;
                font-weight: 800;
                letter-spacing: .2em;
                text-transform: uppercase;
                padding: .25rem .75rem;
                border-radius: 3px;
                width: fit-content;
                margin-bottom: 2rem;
            }
            .hb-class-badge svg { width: 11px; height: 11px; }

            .hb-pillars {
                display: flex;
                flex-wrap: wrap;
                gap: .5rem .85rem;
            }
            .hb-pill {
                display: flex;
                align-items: center;
                gap: .4rem;
                font-size: .72rem;
                font-weight: 600;
                color: rgba(255,255,255,.5);
                letter-spacing: .03em;
            }
            .hb-pill-dot {
                width: 5px; height: 5px;
                border-radius: 50%;
                background: var(--kir-gold);
                opacity: .7;
                flex-shrink: 0;
            }

            /* ── Right: Action card ── */
            .hb-card {
                background: rgba(255,255,255,.04);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border: 1px solid rgba(255,255,255,.1);
                border-radius: 16px;
                overflow: hidden;
                box-shadow: 0 24px 60px rgba(0,0,0,.5);
            }

            .hb-card-head {
                background: linear-gradient(135deg, rgba(0,61,165,.6), rgba(3,11,30,.8));
                border-bottom: 1px solid rgba(255,255,255,.1);
                padding: 1.75rem 2rem;
                text-align: center;
            }
            .hb-card-emblem {
                width: 52px; height: 52px;
                border-radius: 50%;
                background: rgba(255,198,30,.12);
                border: 2px solid rgba(255,198,30,.3);
                display: flex; align-items: center; justify-content: center;
                margin: 0 auto 1rem;
            }
            .hb-card-emblem svg { width: 24px; height: 24px; color: var(--kir-gold); }
            .hb-card-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: .3rem; }
            .hb-card-sub   { font-size: .75rem; color: rgba(255,255,255,.45); letter-spacing: .03em; }
            .hb-card-flag  {
                display: flex; height: 3px; margin-top: 1.25rem;
                border-radius: 99px; overflow: hidden;
            }
            .hb-card-flag .r { flex:1; background: var(--kir-red); }
            .hb-card-flag .g { width: 3px; background: var(--kir-gold); }
            .hb-card-flag .b { flex:1; background: var(--kir-blue); }

            .hb-card-body { padding: 2rem; }

            .hb-login-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: .55rem;
                width: 100%;
                padding: .9rem 1.5rem;
                background: linear-gradient(135deg, var(--kir-gold), #e8a800);
                color: #1a0e00;
                font-size: .95rem;
                font-weight: 800;
                border-radius: 8px;
                text-decoration: none;
                letter-spacing: .02em;
                transition: opacity .15s, transform .15s;
                box-shadow: 0 4px 20px rgba(255,198,30,.3);
            }
            .hb-login-btn:hover { opacity: .9; transform: translateY(-1px); }
            .hb-login-btn svg { width: 18px; height: 18px; }

            .hb-card-notice {
                margin-top: 1.25rem;
                padding: .75rem 1rem;
                background: rgba(255,255,255,.04);
                border: 1px solid rgba(255,255,255,.08);
                border-radius: 7px;
                font-size: .74rem;
                color: rgba(255,255,255,.45);
                text-align: center;
                line-height: 1.55;
            }

            /* Welcome back card (auth) */
            .hb-welcome-name {
                font-size: 1.4rem;
                font-weight: 800;
                color: #fff;
                text-align: center;
                margin-bottom: .4rem;
                letter-spacing: -.01em;
            }
            .hb-welcome-sub {
                text-align: center;
                font-size: .82rem;
                color: rgba(255,255,255,.5);
                margin-bottom: 1.5rem;
            }

            /* Bottom classification strip */
            .hero-class-strip {
                position: relative;
                z-index: 2;
                background: rgba(0,0,0,.4);
                border-top: 1px solid rgba(255,255,255,.06);
                padding: .45rem 2.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-shrink: 0;
                backdrop-filter: blur(4px);
            }
            .hero-class-strip span {
                font-size: .6rem;
                font-weight: 700;
                letter-spacing: .18em;
                text-transform: uppercase;
            }
            .hero-class-strip .left { color: var(--kir-gold); opacity: .7; }
            .hero-class-strip .right { color: rgba(255,255,255,.28); }

            /* ── Auth hero: centered ── */
            .hero-centered {
                position: relative;
                text-align: center;
                padding: 5.5rem 2.5rem 6rem;
                max-width: 800px;
                margin: 0 auto;
            }

            .hero-centered h1 {
                font-size: clamp(1.85rem, 4.5vw, 3rem);
                font-weight: 800;
                line-height: 1.15;
                margin-bottom: 1.25rem;
                letter-spacing: -.01em;
            }

            .hero-centered .hero-lead {
                max-width: 560px;
                margin-left: auto;
                margin-right: auto;
            }


            /* ── PILLARS ── */
            .pillars-wrap {
                background: var(--white);
                border-bottom: 1px solid var(--border);
            }

            .pillars {
                max-width: 1100px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }

            .pillar {
                padding: 1.85rem 2.25rem;
                border-right: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                gap: .4rem;
            }

            .pillar:last-child { border-right: none; }

            .pillar-num {
                font-size: 1.6rem;
                font-weight: 800;
                color: var(--navy);
                line-height: 1;
            }

            .pillar-label {
                font-size: .78rem;
                color: var(--muted);
                line-height: 1.4;
                text-transform: uppercase;
                letter-spacing: .06em;
            }

            /* ── ABOUT SECTION ── */
            .about-section {
                max-width: 1100px;
                margin: 0 auto;
                padding: 5rem 2.5rem;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 5rem;
                align-items: center;
            }

            .about-label {
                font-size: .72rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .14em;
                color: var(--gold);
                margin-bottom: .75rem;
            }

            .about-section h2 {
                font-size: clamp(1.5rem, 2.5vw, 2.1rem);
                font-weight: 800;
                color: var(--navy);
                line-height: 1.2;
                margin-bottom: 1.25rem;
                letter-spacing: -.01em;
            }

            .about-section p {
                color: var(--muted);
                font-size: .95rem;
                line-height: 1.8;
                margin-bottom: 1rem;
            }

            .about-visual {
                background: linear-gradient(145deg, var(--navy) 0%, #1a3560 100%);
                border-radius: 16px;
                padding: 2rem;
                display: flex;
                flex-direction: column;
                gap: 1rem;
                box-shadow: 0 12px 40px rgba(15,32,68,.2);
            }

            .paper-card {
                background: rgba(255,255,255,.07);
                border: 1px solid rgba(255,255,255,.1);
                border-radius: 8px;
                padding: 1rem 1.2rem;
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            .paper-icon {
                width: 34px;
                height: 34px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .paper-icon svg { width: 17px; height: 17px; }
            .pi-gold  { background: rgba(201,162,39,.2);   color: var(--gold-l); }
            .pi-green { background: rgba(34,197,94,.15);   color: #4ade80; }
            .pi-blue  { background: rgba(96,165,250,.15);  color: #93c5fd; }

            .paper-info { flex: 1; min-width: 0; }
            .paper-title { font-size: .8rem; font-weight: 700; color: #fff; margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .paper-meta  { font-size: .68rem; color: rgba(255,255,255,.45); }

            .paper-badge {
                font-size: .63rem;
                font-weight: 700;
                padding: .18rem .5rem;
                border-radius: 20px;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .pb-new    { background: rgba(201,162,39,.2); color: var(--gold-l); }
            .pb-open   { background: rgba(34,197,94,.15); color: #4ade80; }
            .pb-closed { background: rgba(148,163,184,.15); color: #94a3b8; }

            .visual-caption {
                font-size: .65rem;
                color: rgba(255,255,255,.22);
                text-align: center;
                letter-spacing: .08em;
                text-transform: uppercase;
                margin-top: .25rem;
            }

            /* ── FEATURES ── */
            .features-section {
                background: var(--bg);
                padding: 5rem 2.5rem;
            }

            .features-inner { max-width: 1100px; margin: 0 auto; }

            .section-header { text-align: center; margin-bottom: 3.5rem; }

            .section-label {
                font-size: .72rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .14em;
                color: var(--gold);
                margin-bottom: .6rem;
            }

            .section-title {
                font-size: clamp(1.5rem, 2.5vw, 2.1rem);
                font-weight: 800;
                color: var(--navy);
                margin-bottom: .75rem;
                letter-spacing: -.01em;
            }

            .section-sub {
                color: var(--muted);
                font-size: .95rem;
                max-width: 520px;
                margin: 0 auto;
                line-height: 1.7;
            }

            .feature-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 1.25rem;
            }

            .feature-card {
                background: var(--white);
                border: 1px solid var(--border);
                border-radius: 10px;
                padding: 1.75rem;
                display: flex;
                gap: 1.1rem;
                transition: box-shadow .2s, border-color .2s;
            }

            .feature-card:hover {
                box-shadow: 0 6px 24px rgba(15,32,68,.08);
                border-color: #c5d0e8;
            }

            .feature-icon {
                width: 44px;
                height: 44px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .feature-icon svg { width: 22px; height: 22px; }

            .fi-navy   { background: #e8edf8; color: var(--navy); }
            .fi-gold   { background: #fdf6e3; color: #92700a; }
            .fi-green  { background: #ecfdf5; color: #15803d; }
            .fi-purple { background: #f5f3ff; color: #6d28d9; }
            .fi-red    { background: #fff1f2; color: #be123c; }
            .fi-blue   { background: #eff6ff; color: #1d4ed8; }

            .feature-card h3 {
                font-size: .95rem;
                font-weight: 700;
                color: var(--navy);
                margin-bottom: .35rem;
                line-height: 1.3;
            }

            .feature-card p {
                font-size: .85rem;
                color: var(--muted);
                line-height: 1.65;
            }

            /* ── FOOTER ── */
            footer {
                background: var(--navy-d);
                color: rgba(255,255,255,.4);
                padding: 1.5rem 2.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: .75rem;
                font-size: .75rem;
                letter-spacing: .03em;
            }

            .footer-class {
                font-size: .68rem;
                font-weight: 700;
                letter-spacing: .14em;
                text-transform: uppercase;
                color: rgba(201,162,39,.6);
                border: 1px solid rgba(201,162,39,.25);
                padding: .2rem .55rem;
                border-radius: 3px;
            }

            /* ── RESPONSIVE ── */

            @media (max-width: 860px) {
                .about-section {
                    grid-template-columns: 1fr;
                    gap: 2.5rem;
                    padding: 3.5rem 1.5rem;
                }
                .about-visual { order: -1; }
            }

            @media (max-width: 900px) {
                .hero-body { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.5rem 4rem; }
                .hb-coa { width: 80px; }
                .hb-title { font-size: 2.6rem; }
            }
            @media (max-width: 640px) {
                nav { padding: 0 1.25rem; }
                .nav-brand-sub, .nav-divider, .nav-classification { display: none; }
                .hero-body { padding: 2rem 1.25rem 3rem; gap: 2rem; }
                .hb-title { font-size: 2rem; }
                .features-section { padding: 3.5rem 1.25rem; }
                footer { flex-direction: column; text-align: center; }
                .pillar { border-right: none; border-bottom: 1px solid var(--border); }
                .pillar:last-child { border-bottom: none; }
            }