*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

:root{
  --bg1:#070b18;
  --bg2:#0b1634;

  --cardA: rgba(255,255,255,.08);
  --cardB: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.12);

  --text:#e8eefc;
  --muted:#b8c2e0;

  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 26px;
}

/* BODY ----------------------------------------------------- */
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(110,168,255,.20), transparent 60%),
    radial-gradient(700px 520px at 80% 30%, rgba(155,123,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));

  padding: clamp(18px, 4vw, 42px);
}

/* PANEL ---------------------------------------------------- */
.panel{
  width:min(1200px,100%);
  margin:0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  padding: clamp(18px, 3vw, 32px);
}

.logo{ font-size: clamp(32px, 4.2vw, 64px); margin:0; }
.hint{ margin-top:6px; color:var(--muted); }

/* CARDS ---------------------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap: clamp(18px, 2.2vw, 26px);
  margin-top:18px;
}

.card{
  display:flex;
  align-items:center;
  gap:18px;
  padding: clamp(20px, 2.4vw, 26px);
  border-radius:30px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, var(--cardA), var(--cardB));
  color:inherit;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

@media (hover:hover){
  .card:hover{
    transform: translateY(-3px);
    box-shadow:0 14px 36px rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.18);
  }
}

.card__icon{
  width: clamp(50px, 5.5vw, 60px);
  height: clamp(50px, 5.5vw, 60px);
}

.card__label{ font-weight:900; }
.card__sub{ color:rgba(255,255,255,.7); font-size:14px; }

.card__go{ margin-left:auto; opacity:.6; font-weight:900; }

/* QUICK LINKS --------------------------------------------- */
.quick-links{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quick-links__label{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.quick-links__row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.quick-link{
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 14px 18px;

  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));

  font-size: 15px;
  text-decoration: none;
  color: var(--text);

  transition:
    background .15s ease,
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.quick-link img{
  width: 22px;
  height: 22px;
  opacity: .95;
}

@media (hover:hover){
  .quick-link:hover{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,.28);
  }
}

.quick-link:active{
  transform: scale(.985);
}

/* FOOTER --------------------------------------------------- */
.footer{
  margin-top:26px;
  text-align:center;
  color:rgba(255,255,255,.55);
}

/* MOBILE --------------------------------------------------- */
@media (max-width:640px){
  .cards{ grid-template-columns:1fr; }
}