:root{
  --bg-main:#ecfeff;
  --bg-card:#ffffff;

  --text-main:#1f2937;
  --text-muted:#6b7280;

  --primary:#22c55e;
  --primary-dark:#16a34a;
  --primary-soft:#dcfce7;

  --border-soft:#d1fae5;
  --shadow:0 12px 28px rgba(15,23,42,0.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:var(--bg-main);
  color:var(--text-main);
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.page{
  width:100%;
  max-width:480px;
  padding:12px 16px 24px;
  position:relative;
}

/* ----------------------------------------------------------
   YLÄBANNERI + LOGO
   ---------------------------------------------------------- */

.top-banner{
  background:var(--primary);
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:8px 0 12px;
  box-shadow:0 6px 18px rgba(34,197,94,0.35);
}

.logo-text{
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  display:flex;
  gap:1px;
}

/* Logo-kirjainten värit */
.logo-a{ color:#2563eb; }  /* sininen */
.logo-b{ color:#f97316; }  /* oranssi */
.logo-c{ color:#16a34a; }  /* vihreä */
.logo-d{ color:#7c3aed; }  /* violetti */
.logo-g, .logo-a2, .logo-m, .logo-e{ color:#ffffff; }

.logo-badge{
  font-size:0.7rem;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.35);
  white-space:nowrap;
}

/* ----------------------------------------------------------
   NAV-LINKIT
   ---------------------------------------------------------- */

.nav-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin:0 0 12px;
}

.nav-links a{
  text-decoration:none;
  color:#2563eb;
  font-size:0.85rem;
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(37,99,235,0.18);
  padding:6px 12px;
  border-radius:999px;
}

.nav-links a:hover{
  background:rgba(255,255,255,0.8);
}

/* Piilota vahingossa tyhjät linkit */
.nav-links a:empty{
  display:none !important;
}

/* Info-linkki vihreäksi */
.nav-links a.nav-info{
  color:var(--primary-dark);
  font-weight:600;
}

/* ----------------------------------------------------------
   KORTIT + OTSIKOT
   ---------------------------------------------------------- */

.card{
  background:var(--bg-card);
  border-radius:18px;
  padding:16px 14px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}

.page-title{
  font-size:1.25rem;
  margin:0 0 6px;
  font-weight:700;
  text-align:center;
  letter-spacing:0.02em;
}

.subtitle{
  font-size:0.9rem;
  color:var(--text-muted);
  text-align:center;
  margin:0 0 12px;
  line-height:1.4;
}

/* ----------------------------------------------------------
   VÄRIKIRJAIN-OTSIKOT (sama henki kuin bannerissa)
   ---------------------------------------------------------- */

.title-colorful-word{
  display:inline-flex;
  gap:1px;
  margin-right:6px;
}

.title-colorful-word span{
  display:inline-block;
}

.title-first-1{ color:#2563eb; }  /* sininen */
.title-first-2{ color:#f97316; }  /* oranssi */
.title-first-3{ color:#16a34a; }  /* vihreä */
.title-first-4{ color:#7c3aed; }  /* violetti */

.title-second-word{
  color:var(--primary);
}