/* ---------- Design tokens ---------- */
:root{
  --bg:#f8f9fb; --text:#1f2328; --muted:#606770; --card:#ffffff; --ring:rgba(0,0,0,.08);
  --shadow:0 6px 16px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.06);

  /* 20 light-mode gradient pairs */
  --azure-1:hsl(210 90% 98%); --azure-2:hsl(210 100% 94%);
  --rose-1:hsl(350 90% 98%);  --rose-2:hsl(350 100% 94%);
  --mint-1:hsl(160 70% 97%);  --mint-2:hsl(160 75% 92%);
  --lavender-1:hsl(260 65% 97%); --lavender-2:hsl(260 70% 92%);
  --amber-1:hsl(40 100% 97%);    --amber-2:hsl(40 100% 90%);
  --sky-1:hsl(200 95% 97%);      --sky-2:hsl(200 95% 92%);
  --violet-1:hsl(270 90% 97%);   --violet-2:hsl(270 90% 92%);
  --lime-1:hsl(90 70% 96%);      --lime-2:hsl(90 70% 90%);
  --peach-1:hsl(20 95% 97%);     --peach-2:hsl(20 95% 91%);
  --slate-1:hsl(220 20% 97%);    --slate-2:hsl(220 20% 90%);
  --cyan-1:hsl(180 70% 96%);     --cyan-2:hsl(180 70% 90%);
  --indigo-1:hsl(245 70% 96%);   --indigo-2:hsl(245 70% 90%);
  --sand-1:hsl(35 40% 96%);      --sand-2:hsl(35 40% 90%);
  --grape-1:hsl(285 60% 96%);    --grape-2:hsl(285 60% 90%);
  --sea-1:hsl(175 55% 96%);      --sea-2:hsl(175 55% 90%);
  --coral-1:hsl(10 85% 96%);     --coral-2:hsl(10 85% 90%);
  --blush-1:hsl(330 70% 96%);    --blush-2:hsl(330 70% 90%);
  --teal-1:hsl(170 60% 96%);     --teal-2:hsl(170 60% 90%);
  --periwinkle-1:hsl(235 70% 97%); --periwinkle-2:hsl(235 70% 92%);
  --butter-1:hsl(55 90% 96%);    --butter-2:hsl(55 90% 90%);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --text:#e8edf2; --muted:#a0a7b3; --card:#151922; --ring:rgba(255,255,255,.12);
    --shadow:0 10px 24px rgba(0,0,0,.5);

    /* 20 dark-mode counterparts (softer/darker) */
    --azure-1:hsl(210 80% 14%); --azure-2:hsl(210 70% 20%);
    --rose-1:hsl(350 70% 16%);  --rose-2:hsl(350 70% 22%);
    --mint-1:hsl(160 60% 14%);  --mint-2:hsl(160 55% 20%);
    --lavender-1:hsl(260 45% 16%); --lavender-2:hsl(260 45% 22%);
    --amber-1:hsl(40 50% 18%);    --amber-2:hsl(40 50% 24%);
    --sky-1:hsl(200 50% 16%);     --sky-2:hsl(200 50% 22%);
    --violet-1:hsl(270 45% 16%);  --violet-2:hsl(270 45% 22%);
    --lime-1:hsl(90 35% 14%);     --lime-2:hsl(90 35% 20%);
    --peach-1:hsl(20 50% 16%);    --peach-2:hsl(20 50% 22%);
    --slate-1:hsl(220 20% 14%);   --slate-2:hsl(220 20% 20%);
    --cyan-1:hsl(180 45% 14%);    --cyan-2:hsl(180 45% 20%);
    --indigo-1:hsl(245 45% 14%);  --indigo-2:hsl(245 45% 20%);
    --sand-1:hsl(35 30% 14%);     --sand-2:hsl(35 30% 20%);
    --grape-1:hsl(285 40% 14%);   --grape-2:hsl(285 40% 20%);
    --sea-1:hsl(175 40% 14%);     --sea-2:hsl(175 40% 20%);
    --coral-1:hsl(10 50% 16%);    --coral-2:hsl(10 50% 22%);
    --blush-1:hsl(330 45% 16%);   --blush-2:hsl(330 45% 22%);
    --teal-1:hsl(170 45% 14%);    --teal-2:hsl(170 45% 20%);
    --periwinkle-1:hsl(235 45% 16%); --periwinkle-2:hsl(235 45% 22%);
    --butter-1:hsl(55 45% 16%);   --butter-2:hsl(55 45% 22%);
  }
}

/* ---------- Global layout ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color:var(--text);
  background:
    /* faint grid texture */
    linear-gradient(0deg, transparent 24%, rgba(0,0,0,.02) 25%, rgba(0,0,0,.02) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.02) 75%, rgba(0,0,0,.02) 76%, transparent 77%),
    linear-gradient(90deg, transparent 24%, rgba(0,0,0,.02) 25%, rgba(0,0,0,.02) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.02) 75%, rgba(0,0,0,.02) 76%, transparent 77%),
    var(--bg);
  background-size:28px 28px, 28px 28px, auto;
  display:grid; grid-template-rows:auto 1fr auto;
  gap:2.5rem; padding:clamp(16px, 3vw, 40px);
}

/* ---------- Header ---------- */
.site-header{ text-align:center; }
.site-header h1{
  font-size:clamp(1.6rem, 2.2vw + 1rem, 2.8rem);
  line-height:1.1; margin:0 0 .4rem; letter-spacing:.2px;
}
.tagline{
  margin:0 auto; color:var(--muted); max-width:56ch;
  font-size:clamp(.95rem, .3vw + .85rem, 1.05rem);
}

/* ---------- Tiles grid (with size cap) ---------- */
.tiles{
  width:min(980px, 100%);
  margin-inline:auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); /* min 160px, max 220px */
  gap:clamp(14px, 1.2vw, 20px);
  justify-content:center; /* center when row has extra space */
}

/* ---------- Tile ---------- */
.tile{
  width:100%; aspect-ratio:1/1;
  border-radius:16px; position:relative; text-decoration:none; color:var(--text);
  background:var(--card); overflow:hidden; box-shadow:var(--shadow); outline:none;
  transition:transform .2s ease, box-shadow .2s ease; isolation:isolate;
}

/* hover “shine” */
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.0) 20%, rgba(255,255,255,.15) 35%, rgba(255,255,255,0) 55%);
  transform:translateX(-120%); transition:transform .5s ease; pointer-events:none; mix-blend-mode:screen;
}
.tile:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.tile:hover::after{ transform:translateX(120%); }
.tile:focus-visible{ box-shadow:0 0 0 3px var(--ring), var(--shadow); }

.tile-inner{
  position:absolute; inset:8px;
  background:color-mix(in oklab, var(--card) 86%, transparent);
  border:1px solid color-mix(in oklab, var(--ring) 60%, transparent);
  border-radius:12px; backdrop-filter:blur(2px);
  display:grid; place-items:center; gap:8px; padding:12px;
}
.icon{ width:36%; height:auto; opacity:.9; }
.tile-title{ font-weight:700; font-size:clamp(1rem, .7vw + .9rem, 1.15rem); }
.tile-sub{ font-size:.82rem; color:var(--muted); }

/* ---------- Gradient skins (20 hues) ---------- */
.hue-azure       { background:linear-gradient(135deg,var(--azure-1),       var(--azure-2)); }
.hue-rose        { background:linear-gradient(135deg,var(--rose-1),        var(--rose-2)); }
.hue-mint        { background:linear-gradient(135deg,var(--mint-1),        var(--mint-2)); }
.hue-lavender    { background:linear-gradient(135deg,var(--lavender-1),    var(--lavender-2)); }
.hue-amber       { background:linear-gradient(135deg,var(--amber-1),       var(--amber-2)); }
.hue-sky         { background:linear-gradient(135deg,var(--sky-1),         var(--sky-2)); }
.hue-violet      { background:linear-gradient(135deg,var(--violet-1),      var(--violet-2)); }
.hue-lime        { background:linear-gradient(135deg,var(--lime-1),        var(--lime-2)); }
.hue-peach       { background:linear-gradient(135deg,var(--peach-1),       var(--peach-2)); }
.hue-slate       { background:linear-gradient(135deg,var(--slate-1),       var(--slate-2)); }
.hue-cyan        { background:linear-gradient(135deg,var(--cyan-1),        var(--cyan-2)); }
.hue-indigo      { background:linear-gradient(135deg,var(--indigo-1),      var(--indigo-2)); }
.hue-sand        { background:linear-gradient(135deg,var(--sand-1),        var(--sand-2)); }
.hue-grape       { background:linear-gradient(135deg,var(--grape-1),       var(--grape-2)); }
.hue-sea         { background:linear-gradient(135deg,var(--sea-1),         var(--sea-2)); }
.hue-coral       { background:linear-gradient(135deg,var(--coral-1),       var(--coral-2)); }
.hue-blush       { background:linear-gradient(135deg,var(--blush-1),       var(--blush-2)); }
.hue-teal        { background:linear-gradient(135deg,var(--teal-1),        var(--teal-2)); }
.hue-periwinkle  { background:linear-gradient(135deg,var(--periwinkle-1),  var(--periwinkle-2)); }
.hue-butter      { background:linear-gradient(135deg,var(--butter-1),      var(--butter-2)); }

/* ---------- Small screens ---------- */
@media (max-width:520px){
  .tiles{ grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); }
  .icon{ width:40%; }
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  opacity: 0.9;
}