@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Raleway:wght@300;400;500&display=swap');

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

:root {
  --ice-deep:   #020b18;
  --ice-frost:  rgba(77, 184, 240, 0.08);
  --ice-border: rgba(77, 184, 240, 0.18);
  --ice-glow:   #4db8f0;
  --ice-white:  #cdeeff;
}

html, body {
  height: 100%;
  background-color: var(--ice-deep);
  color: var(--ice-white);
  font-family: 'Raleway', sans-serif;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%,  rgba(29,100,180,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 80%,  rgba(13,63,110,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 60% 30%,  rgba(77,184,240,0.06) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── Ice shards ── */
.shard {
  position: fixed; border-radius: 2px;
  background: linear-gradient(135deg, rgba(77,184,240,0.15), rgba(77,184,240,0.03));
  border: 1px solid rgba(77,184,240,0.12);
  animation: drift linear infinite;
  pointer-events: none; z-index: 0;
}
.shard:nth-child(1) { width:60px;  height:20px; left:8%;  top:-40px; animation-duration:18s; animation-delay:0s;  }
.shard:nth-child(2) { width:30px;  height:10px; left:22%; top:-20px; animation-duration:24s; animation-delay:4s;  }
.shard:nth-child(3) { width:90px;  height:14px; left:45%; top:-50px; animation-duration:20s; animation-delay:9s;  }
.shard:nth-child(4) { width:45px;  height:16px; left:68%; top:-30px; animation-duration:15s; animation-delay:2s;  }
.shard:nth-child(5) { width:70px;  height:12px; left:83%; top:-45px; animation-duration:22s; animation-delay:7s;  }
.shard:nth-child(6) { width:25px;  height:8px;  left:55%; top:-25px; animation-duration:17s; animation-delay:12s; }

@keyframes drift {
  from { transform: translateY(0)     rotate(25deg); opacity: 0;   }
  10%  {                                              opacity: 1;   }
  90%  {                                              opacity: 0.4; }
  to   { transform: translateY(110vh) rotate(85deg); opacity: 0;   }
}

/* ── Layout ── */
.wrapper {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 1.5rem 5rem;
}

/* ── Header ── */
header {
  width: 100%; max-width: 860px;
  padding: 3.5rem 0 2.8rem;
  text-align: center;
  animation: fadeDown 0.9s cubic-bezier(.22,1,.36,1) both;
}
.header-eyebrow {
  font-weight: 300; font-size: 0.72rem;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--ice-glow); opacity: 0.75; margin-bottom: 0.9rem;
}
.header-title {
  font-family: 'Cinzel', serif; font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.08; letter-spacing: 0.04em;
  background: linear-gradient(135deg, #cdeeff 0%, #4db8f0 45%, #1a7abf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 28px rgba(77,184,240,0.35));
}
.header-divider {
  margin: 1.5rem auto 0; width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ice-glow), transparent);
  border-radius: 2px;
}
.header-subtitle {
  margin-top: 1rem; font-size: 0.88rem; font-weight: 300;
  letter-spacing: 0.06em; color: rgba(205,238,255,0.45);
}

/* ── Cards grid ── */
.cards {
  width: 100%; max-width: 860px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem; margin-top: 2.5rem;
}

.card {
  position: relative; display: flex; align-items: center; gap: 1.2rem;
  padding: 1.55rem 1.7rem; border-radius: 14px;
  background: var(--ice-frost); border: 1px solid var(--ice-border);
  backdrop-filter: blur(10px);
  text-decoration: none; color: var(--ice-white);
  overflow: hidden; cursor: pointer;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease,
              border-color 0.3s ease, background 0.3s ease;
  animation: fadeUp 0.7s cubic-bezier(.22,1,.36,1) both;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ice-glow), transparent);
  opacity: 0; transition: opacity 0.3s ease;
}
.card::after {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(77,184,240,0.14) 0%, transparent 70%);
  border-radius: 50%; opacity: 0; transition: opacity 0.4s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(77,184,240,0.42);
  background: rgba(77,184,240,0.11);
  box-shadow: 0 8px 40px rgba(13,63,110,0.55), 0 0 0 1px rgba(77,184,240,0.15);
}
.card:hover::before { opacity: 1; }
.card:hover::after  { opacity: 1; }
.card:active        { transform: translateY(-2px) scale(1.008); }

.card-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(26,122,191,0.3), rgba(13,63,110,0.4));
  border: 1px solid rgba(77,184,240,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  transition: background 0.3s ease, transform 0.3s ease;
}
.card:hover .card-icon {
  background: linear-gradient(135deg, rgba(26,122,191,0.5), rgba(13,63,110,0.6));
  transform: scale(1.08) rotate(-3deg);
}

.card-body { flex: 1; min-width: 0; }
.card-title {
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 1rem;
  letter-spacing: 0.04em; color: var(--ice-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-desc {
  margin-top: 0.25rem; font-size: 0.77rem; font-weight: 300;
  letter-spacing: 0.04em; color: rgba(205,238,255,0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-arrow {
  flex-shrink: 0; font-size: 1rem;
  color: var(--ice-glow); opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card:hover .card-arrow { opacity: 1; transform: translateX(4px); }

/* ── Animations ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Footer ── */
footer {
  position: relative; z-index: 1; margin-top: 3.5rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(205,238,255,0.2); text-align: center;
  animation: fadeUp 1s 0.6s cubic-bezier(.22,1,.36,1) both;
}

@media (max-width: 500px) {
  .cards { grid-template-columns: 1fr; }
}