/* =========================================================
   GENGBOLA FINAL - MAIN STYLESHEET
   Theme: Navy / Electric Blue / Yellow
========================================================= */
:root{--bg:#00122b;--bg2:#001a3c;--panel:#032553;--panel2:#021d43;--blue:#0798ff;--blue2:#0067df;--yellow:#ffe600;--text:#f7fbff;--muted:#b8cce5;--line:#0b72bd;--radius:16px;--shadow:0 18px 45px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.72 Arial,Helvetica,sans-serif;background-image:radial-gradient(circle at 50% 0,#06488e 0,transparent 28%)}a{color:inherit}.container{width:min(1320px,calc(100% - 40px));margin:auto}.grid{display:grid}.topbar{background:#002c63;border-bottom:1px solid #0b8de5;font-size:12px}.topbar__inner{height:32px;display:flex;align-items:center;justify-content:space-between}.topbar p{margin:0;color:#d9eaff}.topbar strong{color:var(--yellow)}.topbar a{margin-left:18px;text-decoration:none;color:#fff}.site-header{position:sticky;top:0;z-index:30;background:rgba(0,18,43,.95);backdrop-filter:blur(15px);border-bottom:2px solid #078fff;box-shadow:0 8px 28px #0008}.header__inner{height:76px;display:flex;align-items:center;gap:28px}.logo img{display:block;width:220px;max-height:62px;object-fit:contain}.site-header nav{display:flex;gap:28px;margin-left:auto}.site-header nav a{text-decoration:none;color:#dcecff;font-weight:700;font-size:13px}.site-header nav a:hover{color:var(--yellow)}.actions{display:flex;gap:9px}.btn{display:inline-flex;justify-content:center;align-items:center;min-width:112px;padding:11px 20px;border-radius:10px;text-decoration:none;text-transform:uppercase;font-weight:900;letter-spacing:.3px}.bluebtn{background:linear-gradient(#159eff,#005ccc);border:1px solid #39b7ff;color:#fff;box-shadow:0 0 18px #008cff33}.yellowbtn{background:linear-gradient(#fff936,#ffc400);border:1px solid #fff45c;color:#08224a;box-shadow:0 0 20px #ffd80044}.menu{display:none}.hero{padding:18px 0 0}.hero__frame{overflow:hidden;border:1px solid #0a82d7;border-radius:18px;background:#002153;box-shadow:var(--shadow),0 0 35px #008cff20}.hero__frame img{display:block;width:100%;max-height:620px;object-fit:cover}.news{margin-top:12px;background:#003a80;border-block:1px solid #0ca5ff}.news .container{min-height:42px;display:flex;align-items:center;gap:20px}.news strong{white-space:nowrap;color:var(--yellow);font-size:12px}.news p{margin:0;color:#e4f1ff;font-size:13px}.quick{padding:14px 0}.quickgrid{grid-template-columns:repeat(4,1fr);gap:10px}.quick article{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#05316b,#021b3d)}.quick article>b{font-size:25px}.quick strong,.quick small{display:block}.quick small{color:#a9c5e3}.section{padding:76px 0}.dark{background:#000d23}.blue{background:linear-gradient(180deg,#00265a,#001630)}.heading{text-align:center;max-width:820px;margin:0 auto 38px}.heading>span,.eyebrow{color:var(--yellow);font-weight:900;font-size:12px;letter-spacing:1.8px}.heading h2{font-size:38px;line-height:1.15;letter-spacing:-1.3px;margin:8px 0 12px}.heading p{margin:0;color:var(--muted);font-size:16px}.categories{grid-template-columns:repeat(4,1fr);gap:14px}.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,var(--panel),var(--panel2));box-shadow:inset 0 0 24px #008cff12}.category{padding:22px;transition:.2s transform,.2s border-color}.category:hover{transform:translateY(-3px);border-color:#20aaff}.cardtop{display:flex;align-items:center;justify-content:space-between}.cardtop b{font-size:30px}.cardtop i,.exp i{font-style:normal;color:#65bfff;font-weight:900}.card h3{margin:13px 0 7px;font-size:20px}.card p{color:#c3d6eb}.category ul{margin:15px 0 0;padding-left:18px;color:#9fbddd;font-size:13px}.category li::marker{color:var(--yellow)}.stats{padding:28px 0;background:linear-gradient(90deg,#004b9e,#087ad5,#004b9e);border-block:1px solid #21acff}.statgrid{grid-template-columns:repeat(4,1fr)}.statgrid article{text-align:center;border-right:1px solid #ffffff35}.statgrid article:last-child{border:0}.statgrid b,.statgrid span{display:block}.statgrid b{font-size:29px;color:#fff}.statgrid span{color:#d7edff;font-size:13px}.guide{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}.steps{display:grid;gap:11px}.step{display:flex;gap:18px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#021e45}.step>b{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(#fff62d,#ffc400);color:#08224a;font-size:20px}.step h3{margin:0 0 4px}.step p{margin:0;color:var(--muted)}.summary{padding:26px;border:1px solid #168fe0;border-radius:18px;background:linear-gradient(155deg,#06417f,#011936);box-shadow:var(--shadow)}.summary h3{font-size:26px;margin:8px 0 20px}.summary dl{margin:0}.summary dl div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #ffffff18}.summary dt{color:#9ebcdb}.summary dd{margin:0;font-weight:800}.summary p{color:#b9cde4;margin-top:20px}.experience{grid-template-columns:repeat(3,1fr);gap:14px}.exp{padding:23px}.exp i{font-size:13px;color:var(--yellow)}.reviews{grid-template-columns:repeat(3,1fr);gap:14px}.review{padding:20px}.review header{display:flex;align-items:center;gap:11px}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#159eff,#005ccc);border:1px solid #3cc1ff}.review header div strong,.review header div small{display:block}.review header small{color:#8eb0d4}.review header i{margin-left:auto;color:var(--yellow);font-style:normal;font-size:12px;letter-spacing:1px}.review p{min-height:72px}.review footer{color:#789bc2;font-size:12px}.article{background:#001631}.prose{max-width:1000px}.prose h1{font-size:38px;line-height:1.18;margin:8px 0 22px;color:#fff}.prose h2{font-size:25px;margin-top:32px;color:#58c1ff}.prose p{color:#c8daed}.prose a{color:var(--yellow)}.notice{margin-top:28px;padding:17px 19px;background:#062d61;border-left:4px solid var(--yellow);border-radius:7px}.narrow{max-width:960px}.narrow details{margin:10px 0;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#021e45}.narrow summary{font-weight:800;font-size:16px;cursor:pointer}.narrow details p{color:#b9cde4;margin-bottom:0}.cta{text-align:center;padding:72px 0;background:radial-gradient(circle at center,#0756aa,#00122b 65%);border-top:1px solid #0a7ed1}.cta>div>span{color:var(--yellow);font-weight:900;letter-spacing:2px}.cta h2{font-size:36px;margin:7px 0}.cta p{color:#c4d8ee}.cta .btn{margin:10px 4px}.footer{background:#000b1d;border-top:2px solid #087fd7}.footergrid{display:grid;grid-template-columns:1.5fr .6fr .6fr;gap:50px;padding:35px 0}.footergrid img{width:210px}.footergrid p{color:#91acca;max-width:450px}.footergrid h3{color:var(--yellow);font-size:14px}.footergrid a{display:block;text-decoration:none;color:#b6cae0;margin:6px 0}.copyright{text-align:center;padding:12px;border-top:1px solid #153356;color:#7893b1;font-size:12px}
@media(max-width:1000px){.site-header nav{gap:15px}.categories{grid-template-columns:repeat(2,1fr)}.reviews,.experience{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.container{width:min(94%,680px)}.topbar__inner>div{display:none}.header__inner{height:66px}.logo img{width:170px}.menu{display:flex;margin-left:auto;width:42px;height:42px;padding:9px;border:1px solid #167dc5;border-radius:9px;background:#03234c;flex-direction:column;justify-content:center;gap:5px}.menu span{display:block;height:2px;background:#fff}.site-header nav,.actions{display:none}.site-header.open nav{display:flex;position:absolute;top:66px;left:0;right:0;padding:18px 4%;background:#00132e;border-bottom:1px solid #087fd7;flex-direction:column}.site-header.open .actions{display:flex;position:absolute;top:355px;left:4%;right:4%;padding:12px;background:#00132e}.hero{padding-top:10px}.hero__frame{border-radius:11px}.hero__frame img{min-height:340px;object-fit:cover}.news .container{align-items:flex-start;padding-block:10px}.quickgrid,.statgrid{grid-template-columns:repeat(2,1fr)}.categories,.reviews,.experience{grid-template-columns:1fr}.guide{grid-template-columns:1fr}.heading h2,.prose h1{font-size:30px}.section{padding:58px 0}.footergrid{grid-template-columns:1fr;gap:15px}.footergrid img{width:180px}}
@media(max-width:480px){.quickgrid{grid-template-columns:1fr}.statgrid{gap:1px}.statgrid b{font-size:22px}.statgrid span{font-size:11px}.hero__frame img{min-height:300px}.heading h2,.prose h1{font-size:27px}.cta h2{font-size:29px}}

/* =========================================================
   DUAL HERO BANNER
   Desktop : 1920 x 613
   Mobile  : original square artwork
   The browser switches automatically with <picture>.
========================================================= */
.hero__frame {
    aspect-ratio: 1920 / 613;
    overflow: hidden;
}

.hero__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__picture img,
.hero__frame > img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 780px) {
    .hero__frame {
        aspect-ratio: 1 / 1;
    }

    .hero__picture img,
    .hero__frame > img {
        min-height: 0;
        height: 100%;
        object-fit: contain;
    }
}