:root{--t2-navy:#061758;--t2-deep:#061344;--t2-blue:#0e4cff;--t2-cyan:#09dbff;--t2-ink:#071650;--t2-muted:#526382;--t2-line:#b9d1ff;--t2-green:#079541;--t2-white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--t2-ink);background:#fff;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}.t2-page{overflow:hidden}.t2-container{width:min(1240px,calc(100% - 36px));margin-inline:auto}
.t2-header{position:sticky;top:0;z-index:80;background:linear-gradient(90deg,#061550,#071858);color:#fff;border-bottom:1px solid rgba(255,255,255,.16)}.t2-nav{height:70px;display:flex;align-items:center;gap:24px}.t2-brand{display:flex;align-items:center;gap:11px;min-width:max-content}.t2-brand img{width:50px;height:50px;object-fit:contain}.t2-brand span{display:flex;flex-direction:column;line-height:1.05}.t2-brand strong{font-size:22px}.t2-brand small{font-size:9px;margin-top:5px;color:#d4e2ff}.t2-links{display:flex;gap:25px;margin-left:auto;align-items:center}.t2-links a{font-weight:700;font-size:13px;color:#fff;position:relative}.t2-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:3px;background:#12b9ff;border-radius:3px}.t2-logins{display:flex;gap:10px}.t2-logins a{border:1px solid rgba(255,255,255,.8);border-radius:11px;padding:10px 14px;font-weight:800;font-size:12px}.t2-logins .api{background:linear-gradient(135deg,#0e66ff,#1649ff);border-color:#337bff}.t2-menu{display:none;background:transparent;border:0;padding:7px}.t2-menu span{display:block;width:24px;height:2px;background:#fff;margin:5px}
.t2-hero{position:relative;background:linear-gradient(110deg,#04216c 0%,#0645cf 48%,#052a8e 100%);color:#fff;min-height:450px}.t2-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 48% 45%,rgba(27,207,255,.22),transparent 30%),linear-gradient(120deg,transparent 60%,rgba(23,86,230,.35));pointer-events:none}.t2-hero-bg{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(104,205,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(104,205,255,.08) 1px,transparent 1px);background-size:44px 44px}.t2-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;min-height:420px}.t2-hero-copy{padding:28px 0 60px;max-width:510px}.t2-hero h1{font-size:clamp(44px,5vw,66px);line-height:.96;letter-spacing:-.04em;margin:0 0 16px}.t2-hero h1 span{display:block;background:linear-gradient(90deg,#00dbff,#27b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.t2-hero-copy>p{font-size:18px;line-height:1.22;max-width:470px;margin:0 0 22px;color:#f0f6ff}.t2-mini-features{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:24px}.t2-mini-features>div{display:flex;align-items:center;gap:7px}.t2-mini-features b{font-size:16px}.t2-mini-features span{display:flex;flex-direction:column}.t2-mini-features strong{font-size:10px}.t2-mini-features small{font-size:9px;color:#e7efff}.t2-primary-btn{display:inline-flex;align-items:center;gap:16px;background:linear-gradient(90deg,#1188ff,#0857ff);padding:12px 24px;border-radius:999px;font-weight:900;box-shadow:0 12px 28px rgba(0,46,160,.32)}.t2-primary-btn span{font-size:22px}
.t2-hero-art{position:relative;height:420px;overflow:hidden}.t2-art-crop{position:absolute;inset:0;background-image:url('/assets/citizen/homepage-theme2-reference.png');background-repeat:no-repeat;background-size:1536px 1024px;background-position:-490px -70px;filter:saturate(1.03) contrast(1.02)}.t2-art-crop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0745c7 0%,rgba(7,69,199,.12) 16%,transparent 35%),linear-gradient(180deg,rgba(6,52,155,.06),rgba(5,42,142,.18))}
.t2-product-wrap{position:absolute;z-index:8;left:0;right:0;bottom:-43px}.t2-product-card{height:86px;background:#fff;border-radius:16px;box-shadow:0 13px 34px rgba(21,48,112,.2);display:flex;align-items:center;overflow:hidden;border:1px solid #d7e4ff}.t2-marquee{display:flex;width:max-content;animation:t2marquee 28s linear infinite}.t2-product-track{display:flex;align-items:center;height:86px}.brand{min-width:170px;padding:0 20px;border-right:1px solid #b8ccfb;display:flex;justify-content:center;align-items:center;height:50px;font-size:19px}.brand-mtn strong{background:#ffd51a;color:#111;border:3px solid #111;border-radius:999px;padding:4px 14px}.brand-airtel{color:#e91d28;font-style:italic;font-size:23px}.brand-glo strong{background:#0b8b36;color:#fff;border-radius:50%;width:55px;height:55px;display:grid;place-items:center}.brand-t2{color:#0f7f34}.brand-jamb,.brand-neco{color:#0d762f}.brand-waec{color:#111f70}.brand-power{color:#113fd2;min-width:220px}@keyframes t2marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}.t2-marquee:hover{animation-play-state:paused}
.t2-portals{padding:118px 0 0;background:linear-gradient(#fff,#fbfdff)}.t2-portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:930px;margin:0 auto}.t2-card{border:1px solid #5d9eff;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 14px 35px rgba(20,67,150,.07)}.t2-card-head{display:flex;align-items:center;gap:15px;padding:15px 20px;background:linear-gradient(100deg,#d6edff,#f4fbff)}.t2-card.partner .t2-card-head{background:linear-gradient(100deg,#dcf9e5,#d4f5dc)}.t2-card.api .t2-card-head{background:linear-gradient(100deg,#ece2ff,#f6f1ff)}.t2-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#b9ddff;font-size:22px;font-weight:900}.t2-card.partner .t2-icon{background:#9ae9af}.t2-card.api .t2-icon{background:#d1b9ff}.t2-card-head h2{font-size:22px;margin:0;color:#0a2a9a}.t2-card.partner h2{color:#0d6b2a}.t2-card.api h2{color:#3b1ead}.t2-card-head p{font-size:12px;margin:2px 0 0}.t2-card ul{list-style:none;padding:17px 30px 6px;margin:0;display:grid;gap:12px}.t2-card li{font-size:13px}.t2-card li:before{content:"✓";color:#0a9e43;font-weight:950;margin-right:12px}.t2-card>a{display:block;width:72%;margin:10px auto 16px;background:linear-gradient(90deg,#173fff,#0756ff);color:#fff;text-align:center;padding:10px;border-radius:9px;font-weight:900;font-size:12px}
.t2-why{padding:28px 0 17px}.t2-title-row{display:flex;align-items:center;justify-content:center;gap:20px}.t2-title-row span{width:50px;height:2px;background:#3d75ff}.t2-title-row h2{font-size:23px}.t2-why-grid{display:grid;grid-template-columns:repeat(5,1fr);max-width:830px;margin:2px auto 0}.t2-why-grid>div{text-align:center;padding:5px 20px;border-right:1px solid #6b95ff}.t2-why-grid>div:last-child{border-right:0}.t2-why-grid b{display:block;color:#1047ef;font-size:24px;margin-bottom:5px}.t2-why-grid strong{font-size:11px;line-height:1.05}
.t2-support{max-width:940px;margin:0 auto 10px;border-radius:999px;background:linear-gradient(90deg,#c8eaff,#b5dbff);min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:7px 16px 7px 25px}.t2-support-copy{display:flex;align-items:center;gap:18px;font-size:12px}.t2-support-copy b{font-size:22px}.t2-support-copy strong{font-size:16px}.t2-support-copy a{color:#0d327c;font-weight:800}.t2-contact{background:#111d93;color:#fff;padding:7px 20px;border-radius:999px;font-size:11px;font-weight:900}
.t2-footer{background:linear-gradient(90deg,#061343,#071b5d);color:#fff;padding:13px 0}.t2-footer-row{display:flex;align-items:center;gap:20px;font-size:10px}.t2-footer-row i{height:16px;width:1px;background:#88a0d2}
.t2-preloader{position:fixed;z-index:9999;inset:0;background:#f4f7fd;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.45s}.t2-preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.t2-preloader-logo{width:108px;height:108px;display:grid;place-items:center;position:relative}.t2-preloader-logo img{width:76px;position:relative;z-index:2}.t2-preloader-logo i{position:absolute;inset:4px;border-radius:50%;border:3px solid #dbe4f5;border-top-color:#164dff;animation:t2spin .9s linear infinite}.t2-preloader>strong{font-size:20px}.t2-preloader>small{font-size:9px;letter-spacing:.2em;color:#7182a2;margin-top:4px}@keyframes t2spin{to{transform:rotate(360deg)}}
@media(max-width:1120px){.t2-links{display:none}.t2-logins a:not(.api){display:none}.t2-hero-inner{grid-template-columns:.92fr 1.08fr}.t2-art-crop{background-position:-560px -70px}}
@media(max-width:760px){.t2-container{width:min(100% - 24px,1240px)}.t2-nav{height:64px}.t2-brand img{width:40px;height:40px}.t2-brand strong{font-size:17px}.t2-brand small{font-size:7px}.t2-logins{display:none}.t2-menu{display:block;margin-left:auto}.t2-header.menu-open .t2-nav{height:auto;min-height:64px;flex-wrap:wrap;padding-bottom:12px}.t2-header.menu-open .t2-links{display:grid;width:100%;grid-template-columns:repeat(2,1fr);gap:7px;order:5}.t2-header.menu-open .t2-links a{background:rgba(255,255,255,.06);padding:10px;border-radius:8px}.t2-header.menu-open .t2-logins{display:grid;width:100%;grid-template-columns:repeat(3,1fr);gap:6px;order:6}.t2-header.menu-open .t2-logins a{display:block;text-align:center;padding:8px 5px;font-size:9px}.t2-hero{min-height:610px}.t2-hero-inner{display:block;min-height:auto;padding-top:30px}.t2-hero-copy{padding:0;text-align:left}.t2-hero h1{font-size:43px}.t2-hero-copy>p{font-size:15px;max-width:360px}.t2-mini-features{grid-template-columns:repeat(2,1fr);max-width:340px}.t2-primary-btn{padding:11px 20px}.t2-hero-art{height:270px;margin:8px -12px 0}.t2-art-crop{background-size:1024px 683px;background-position:-405px -47px}.t2-product-wrap{bottom:-38px}.t2-product-card{height:76px;width:calc(100% - 18px)}.t2-product-track{height:76px}.brand{min-width:135px;height:43px;font-size:15px;padding:0 14px}.brand-power{min-width:185px}.brand-airtel{font-size:19px}.t2-portals{padding-top:95px}.t2-portal-grid{grid-template-columns:1fr;gap:15px;max-width:440px}.t2-card-head{padding:12px 16px}.t2-icon{width:44px;height:44px}.t2-card-head h2{font-size:19px}.t2-card ul{padding:15px 22px 3px}.t2-card>a{width:85%}.t2-title-row h2{font-size:20px}.t2-why-grid{grid-template-columns:repeat(2,1fr);gap:10px}.t2-why-grid>div{border:1px solid #d9e5ff!important;border-radius:11px;padding:12px;background:#fff}.t2-why-grid>div:last-child{grid-column:1/-1}.t2-support{border-radius:17px;display:block;padding:16px;margin-top:18px}.t2-support-copy{display:grid;grid-template-columns:auto 1fr;gap:4px 10px}.t2-support-copy b{grid-row:1/4}.t2-contact{display:block;text-align:center;margin-top:12px}.t2-footer-row{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}.t2-footer-row i{display:none}}
@media(max-width:390px){.t2-hero h1{font-size:38px}.t2-art-crop{background-position:-430px -47px}.t2-mini-features{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.t2-marquee{animation:none}.t2-preloader-logo i{animation:none}}

/* ============================================================
   v1.1.1-r1 MOBILE HERO + PRODUCT RIBBON RESPONSIVE CORRECTION
   ============================================================ */
@media (max-width:760px){
    html,body,.t2-page{max-width:100%;overflow-x:hidden}

    /*
     * The product ribbon must participate in normal document flow
     * on mobile. It must never float over the hero artwork.
     */
    .t2-hero{
        min-height:auto;
        padding-bottom:0;
        overflow:hidden;
    }

    .t2-hero-inner{
        position:relative;
        padding-bottom:0;
    }

    .t2-hero-art{
        height:285px;
        margin:14px -12px 0;
        overflow:hidden;
    }

    .t2-art-crop{
        background-size:1024px 683px;
        background-position:-405px -42px;
    }

    .t2-product-wrap{
        position:relative;
        z-index:6;
        left:auto;
        right:auto;
        bottom:auto;
        width:100%;
        margin:0;
        padding:14px 0 18px;
        background:#f7f9fd;
        border-top:1px solid rgba(185,209,255,.48);
    }

    .t2-product-card{
        width:min(100% - 24px,1240px);
        height:76px;
        margin-inline:auto;
        border-radius:18px;
        overflow:hidden;
        box-shadow:0 10px 24px rgba(21,48,112,.12);
    }

    .t2-marquee{
        max-width:none;
        overflow:visible;
    }

    .t2-product-track{
        flex:0 0 auto;
        height:76px;
    }

    .brand{
        flex:0 0 145px;
        min-width:145px;
        max-width:145px;
        height:46px;
        padding:0 12px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .brand-power{
        flex-basis:190px;
        min-width:190px;
        max-width:190px;
    }

    /*
     * The portal section now starts after the complete ribbon,
     * instead of reserving space for an overlapping absolute layer.
     */
    .t2-portals{
        padding-top:48px;
    }

    /*
     * Anchor navigation should land below the sticky header and
     * show the entire product ribbon rather than a cropped hero.
     */
    #products,
    #portals,
    #why,
    #support{
        scroll-margin-top:76px;
    }
}

@media (max-width:390px){
    .t2-hero-art{
        height:270px;
    }

    .t2-art-crop{
        background-position:-430px -42px;
    }

    .t2-product-card{
        width:calc(100% - 20px);
    }

    .brand{
        flex-basis:138px;
        min-width:138px;
        max-width:138px;
    }

    .brand-power{
        flex-basis:184px;
        min-width:184px;
        max-width:184px;
    }

    .t2-portals{
        padding-top:42px;
    }
}