*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f6f9ff;
    color:#0f172a;
}
.topbar{
    min-height:103px;
    background:linear-gradient(90deg,#06122d,#061a3d);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:16px 40px;
    gap:20px;
}
.brand{display:flex;align-items:center;gap:18px}
.brand img{width:74px;height:74px;object-fit:contain}
.brand-title{font-size:28px;font-weight:900;color:#fff;letter-spacing:.2px}
.brand-subtitle{font-size:18px;color:#ffd84a;font-style:italic;margin-top:3px}
.main-menu{display:flex;gap:22px;justify-content:center}
.nav-pill{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:17px 42px;
    border-radius:22px;
    color:#fff;
    text-decoration:none;
    font-size:24px;
    font-weight:800;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.22);
}
.nav-pill span{font-size:28px}
.nav-green{background:linear-gradient(180deg,#22c55e,#15803d)}
.nav-blue{background:linear-gradient(180deg,#0b63df,#0447ac)}
.nav-admin{
    justify-self:end;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.35);
    padding:14px 35px;
}
.hero{
    display:grid;
    grid-template-columns:42% 58%;
    min-height:432px;
    background:
      radial-gradient(circle at 20% 20%,rgba(42,114,255,.35),transparent 25%),
      linear-gradient(90deg,#06185a 0%,#06185a 35%,#0a2b7d 100%);
    overflow:hidden;
}
.hero-left{
    padding:34px 0 30px 50px;
    background:linear-gradient(90deg,#06185a 0%,rgba(6,24,90,.98) 78%,rgba(6,24,90,0) 100%);
    z-index:2;
}
.badge{
    display:inline-block;
    background:#ffcf32;
    color:#5b3b00;
    padding:12px 22px;
    border-radius:14px;
    font-size:18px;
    font-weight:900;
}
.hero h1{
    margin:18px 0 8px;
    color:#fff;
    font-size:72px;
    line-height:.98;
    letter-spacing:-2px;
    font-weight:900;
}
.hero h1 b{color:#ffcc19}
.hero p{
    color:#fff;
    font-size:27px;
    line-height:1.25;
    max-width:570px;
    margin:0 0 28px;
    font-weight:600;
}
.features{display:flex;gap:18px;flex-wrap:wrap}
.feature{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:16px;
    font-weight:800;
}
.feature i{
    width:54px;
    height:54px;
    border-radius:13px;
    background:linear-gradient(135deg,#1783ff,#7c3aed);
    display:grid;
    place-items:center;
    font-style:normal;
    font-size:26px;
    box-shadow:0 10px 20px rgba(0,0,0,.2)
}
.hero-photo{
    position:relative;
    overflow:hidden;
}
.hero-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}
.hero-photo:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(6,24,90,.95) 0%,rgba(6,24,90,.25) 22%,rgba(6,24,90,0) 55%);
}
.alur-section{
    background:linear-gradient(180deg,#fff,#eef5ff);
    padding:12px 45px 34px;
}
.alur-section h2{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin:0 0 22px;
    padding-top:18px;
    font-size:36px;
    color:#0b1f55;
    font-weight:900;
}
.alur-section h2 span{
    width:48px;
    height:2px;
    background:#1d4ed8;
    display:inline-block;
}
.alur-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:34px;
}
.alur-card{
    min-height:295px;
    background:#fff;
    border-radius:18px;
    padding:22px 26px;
    box-shadow:0 10px 30px rgba(15,23,42,.10);
    position:relative;
    border:1px solid #e5eefb;
}
.alur-card:after{
    content:"➜";
    position:absolute;
    right:-30px;
    top:44%;
    color:#1d4ed8;
    font-size:28px;
    font-weight:900;
}
.alur-card:last-child:after{display:none}
.num{
    display:inline-grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    color:#fff;
    font-size:23px;
    font-weight:900;
    margin-right:10px;
}
.alur-card h3{
    display:inline-block;
    margin:0;
    font-size:23px;
    font-weight:900;
}
.illus{
    text-align:center;
    font-size:82px;
    line-height:1;
    margin:20px 0 18px;
    min-height:92px;
}
.alur-card p{
    font-size:17px;
    line-height:1.35;
    margin:0;
    color:#0f1b3d;
}
.green-card .num{background:#16a34a}.green-card h3{color:#16a34a}
.blue-card .num{background:#2563eb}.blue-card h3{color:#1d4ed8}
.purple-card .num{background:#7c3aed}.purple-card h3{color:#6d28d9}
.orange-card .num{background:#f97316}.orange-card h3{color:#f97316}
.info-strip{
    margin-top:28px;
    background:#fff;
    border-radius:18px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    box-shadow:0 10px 30px rgba(15,23,42,.10);
    overflow:hidden;
}
.info-strip div{
    padding:20px 24px;
    border-right:1px solid #dbe4f0;
}
.info-strip div:last-child{border-right:0}
.info-strip b{
    display:block;
    color:#0b1f55;
    font-size:16px;
}
.info-strip small{
    display:block;
    margin-top:4px;
    color:#0f172a;
    font-size:13px;
}
@media(max-width:980px){
    .topbar{grid-template-columns:1fr;padding:18px;justify-items:center;text-align:center}
    .brand-title{font-size:22px}.brand-subtitle{font-size:15px}
    .main-menu{flex-wrap:wrap}.nav-pill{font-size:18px;padding:13px 22px}
    .nav-admin{justify-self:center}
    .hero{grid-template-columns:1fr}
    .hero-left{padding:28px;background:#06185a}
    .hero h1{font-size:48px}
    .hero p{font-size:20px}
    .hero-photo{height:260px}
    .alur-section{padding:20px}
    .alur-section h2{font-size:28px}
    .alur-grid{grid-template-columns:1fr;gap:18px}
    .alur-card:after{display:none}
    .info-strip{grid-template-columns:1fr}
    .info-strip div{border-right:0;border-bottom:1px solid #dbe4f0}
}