*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}
body{
  min-height:100vh;
  background:linear-gradient(135deg,#edf5ff,#ffffff);
  color:#15324f
}
.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px
}
.hero{
  width:100%;
  max-width:760px;
  text-align:center
}
.hero h1{
  margin:0 0 8px;
  font-size:clamp(25px,4vw,38px);
  color:#005bbb
}
.hero p{
  margin:0 0 34px;
  color:#637487;
  font-size:16px
}
.windows-grid{
  width:min(520px,90vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}
.tile{
  aspect-ratio:1/1;
  min-height:185px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:.18s ease
}
.tile-active{
  background:linear-gradient(145deg,#0068d7,#004da9);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,78,169,.22)
}
.tile-active:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,78,169,.30)
}
.tile-icon{
  font-size:48px;
  margin-bottom:18px
}
.tile-title{
  font-size:18px;
  line-height:1.35;
  font-weight:700
}
.tile-empty{
  background:rgba(255,255,255,.78);
  border:2px dashed #b9c9da;
  box-shadow:0 8px 18px rgba(39,77,110,.07)
}
@media(max-width:560px){
  .windows-grid{width:min(390px,92vw);gap:9px}
  .tile{min-height:150px}
  .tile-icon{font-size:38px;margin-bottom:13px}
  .tile-title{font-size:15px}
}