*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#fff}
body{background:#06133a}
.page{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background-image:linear-gradient(rgba(3,17,57,.20),rgba(3,17,57,.34)),url("assets/background.png");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero{
  width:min(92%,560px);
  margin:0 auto;
  min-height:100vh;
  padding:42px 18px 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:24px;text-align:left}
.brand-mark{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#2d8cff,#0849bd);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 7px 24px rgba(0,80,255,.45);
  font-size:15px;font-weight:900;
}
.brand-title{font-weight:900;font-size:16px;letter-spacing:1.6px}
.brand-subtitle{font-size:11px;color:#a9c8ff;margin-top:4px;letter-spacing:1px}
.welcome{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  background:rgba(3,24,75,.74);
  border:1px solid rgba(92,177,255,.45);
  box-shadow:0 5px 22px rgba(0,0,0,.25);
  color:#d7eaff;font-size:11px;font-weight:800;letter-spacing:1.2px;
}
.online-dot{width:8px;height:8px;border-radius:50%;background:#28e26f;box-shadow:0 0 12px #28e26f}
h1{margin:20px 0 8px;font-size:clamp(30px,7vw,46px);line-height:1.05;letter-spacing:-1px;text-shadow:0 4px 20px #00194f}
h1 span{color:#7ec4ff}
.lead{max-width:440px;margin:0 0 22px;color:#d2e2ff;font-size:13px;line-height:1.6}
.services{width:100%;display:grid;gap:12px}
.service{
  width:100%;min-height:74px;
  display:flex;align-items:center;gap:13px;
  padding:11px 15px;
  color:#fff;text-decoration:none;text-align:left;
  border:1px solid rgba(108,188,255,.42);
  border-radius:18px;
  background:linear-gradient(100deg,rgba(3,36,105,.92),rgba(5,20,61,.88));
  box-shadow:0 9px 25px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08);
  transition:.2s ease;
  backdrop-filter:blur(3px);
}
.service:hover{transform:translateY(-2px) scale(1.01);border-color:#7bc5ff;box-shadow:0 14px 30px rgba(0,0,0,.34),0 0 24px rgba(0,115,255,.20)}
.service:active{transform:scale(.99)}
.icon{
  width:50px;height:50px;flex:0 0 50px;
  border-radius:14px;overflow:hidden;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.icon img{width:100%;height:100%;object-fit:cover}
.icon-fallback{font-size:13px;font-weight:900}
.info{min-width:0;flex:1}
.name{font-weight:900;font-size:15px;letter-spacing:.2px}
.desc{margin-top:4px;font-size:11px;color:#aac9ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrow{font-size:28px;color:#83c6ff;font-weight:300}
.service.disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.35)}
.service.disabled:hover{transform:none;box-shadow:0 9px 25px rgba(0,0,0,.25)}
.footer-note{margin-top:20px;padding:11px 14px;color:#a9c1df;font-size:10px;line-height:1.5}
@media(max-width:600px){
  .page{background-position:center top}
  .hero{padding-top:28px;width:min(94%,560px)}
  .brand{margin-bottom:18px}
  .brand-title{font-size:14px}
  .brand-mark{width:44px;height:44px}
  h1{font-size:34px}
  .service{min-height:70px;padding:10px 12px}
  .icon{width:46px;height:46px;flex-basis:46px}
}