:root{
  --blue:#123f91;
  --blue-dark:#0b2e6f;
  --red:#e60012;
  --ink:#10213c;
  --muted:#66758d;
  --line:#e8edf5;
  --bg:#f7f9fc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(18,63,145,.07), transparent 28%),
    radial-gradient(circle at 85% 82%, rgba(230,0,18,.06), transparent 25%),
    var(--bg);
  color:var(--ink);
}
.page-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.ambient{
  position:absolute;
  border-radius:999px;
  filter:blur(10px);
  opacity:.55;
  pointer-events:none;
}
.ambient-one{
  width:360px;height:360px;
  left:-160px;top:-120px;
  background:rgba(18,63,145,.08);
}
.ambient-two{
  width:300px;height:300px;
  right:-120px;bottom:-80px;
  background:rgba(230,0,18,.06);
}
.hero{
  width:min(1180px,calc(100% - 36px));
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:28px;
  align-items:stretch;
  padding:46px 0 22px;
  position:relative;
  z-index:1;
}
.brand-card,.visual-panel{
  border:1px solid rgba(17,47,91,.08);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(19,47,91,.10);
}
.brand-card{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  padding:48px;
}
.logo-wrap{
  width:min(100%,650px);
  margin-bottom:34px;
}
.logo-wrap img{
  width:100%;
  display:block;
  height:auto;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--blue);
  padding:9px 13px;
  background:#eef4ff;
  border-radius:999px;
}
.pulse{
  width:9px;height:9px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 0 rgba(230,0,18,.4);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(230,0,18,0)}
  100%{box-shadow:0 0 0 0 rgba(230,0,18,0)}
}
h1{
  font-size:clamp(38px,5vw,66px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:22px 0 18px;
  max-width:820px;
}
.lead{
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
  max-width:760px;
  margin:0;
}
.status-box{
  margin-top:34px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.status-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:14px;
  color:var(--muted);
  margin-bottom:12px;
}
.status-line strong{color:var(--blue-dark)}
.progress{
  height:8px;
  background:#edf1f7;
  border-radius:999px;
  overflow:hidden;
}
.progress span{
  display:block;
  width:76%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--blue),var(--red));
  animation:load 2.8s ease-in-out infinite alternate;
}
@keyframes load{from{width:62%}to{width:82%}}
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.badges span{
  padding:10px 13px;
  border:1px solid #e5ebf4;
  border-radius:999px;
  font-size:13px;
  color:#44536a;
  background:#fbfcfe;
}
.visual-panel{
  position:relative;
  overflow:hidden;
  min-height:620px;
  background:
    linear-gradient(150deg,rgba(11,46,111,.98),rgba(18,63,145,.95));
}
.grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.visual-panel:before{
  content:"";
  position:absolute;
  width:280px;height:280px;
  border:52px solid rgba(255,255,255,.07);
  border-radius:34px;
  transform:rotate(45deg);
  right:-90px;top:-70px;
}
.bolt{
  position:absolute;
  width:120px;
  height:240px;
  background:var(--red);
  clip-path:polygon(54% 0,100% 0,67% 42%,98% 42%,26% 100%,43% 56%,12% 56%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.18));
}
.bolt-a{right:72px;top:170px;transform:rotate(8deg)}
.bolt-b{
  width:70px;height:150px;
  right:180px;top:290px;
  background:rgba(255,255,255,.14);
  transform:rotate(-12deg);
}
.visual-copy{
  position:absolute;
  left:36px;
  bottom:40px;
  color:#fff;
}
.visual-copy small{
  display:block;
  font-size:14px;
  font-weight:800;
  letter-spacing:.34em;
  color:#d8e5ff;
  margin-bottom:10px;
}
.visual-copy strong{
  display:block;
  font-size:42px;
  line-height:.95;
  letter-spacing:-.03em;
}
footer{
  position:relative;
  z-index:1;
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
  padding:18px 0 28px;
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  color:#7a8799;
  font-size:13px;
}
.sep{color:#bdc5d0}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .visual-panel{min-height:360px}
  .brand-card{padding:34px 26px}
  .logo-wrap{margin-bottom:28px}
}
@media (max-width:560px){
  .hero{width:min(100% - 20px,1180px);padding-top:18px}
  .brand-card,.visual-panel{border-radius:22px}
  .brand-card{padding:28px 20px}
  h1{font-size:40px}
  .lead{font-size:16px}
  .visual-copy strong{font-size:34px}
  .bolt-a{right:38px}
  footer{width:min(100% - 24px,1180px)}
}