/* ===============  Cityslicka Mistweaver Light  =============== */
:root {
  --bg:#08976f;       /* lighter jade green background */
  --surface:#2c4a42;  /* brighter card surface */
  --ink:#ecfff7;      /* main text, soft near-white */
  --muted:#9fc2b5;    /* secondary text (sage grey-green) */
  --line:rgba(0,255,153,.20); /* neon border hint */
  --accent:#00ff99;   /* monk green (primary) */
  --accent-2:#22e6b5; /* teal hover/secondary */
  --ring:rgba(0,255,153,.45);

  --r-lg:18px;
  --r-md:14px;
  --shadow-1:0 6px 14px rgba(0,0,0,.18);
  --shadow-2:0 10px 24px rgba(0,0,0,.26);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px; margin:0 auto; padding:28px}

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
}
.nav .brand{
  font-weight:800; letter-spacing:.3px; font-size:20px; color:var(--accent);
}
.nav .links{display:flex; gap:18px; flex-wrap:wrap}
.nav .links a{color:#00ff99}
.nav .links a:hover{opacity:.85}

.hero{
  border-radius:var(--r-lg);
  padding:32px 28px;
  background:
    radial-gradient(900px 300px at 0% 0%, rgba(0,255,153,.15), transparent 60%),
    radial-gradient(900px 300px at 100% 100%, rgba(0,212,170,.14), transparent 60%),
    linear-gradient(180deg, #ecfbf4 0%, #e3faf2 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  margin:12px 0 28px;
}
.hero h1{margin:0 0 8px; font-size:36px; letter-spacing:.2px}
.hero p{margin:0 0 14px; color:var(--muted)}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
  margin-top:6px;
  align-items: stretch;   /* makes all cards in the grid equal height */
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px;
  box-shadow:var(--shadow-1);
  display: flex;
  flex-direction: column;
}

.card .talent-fig {
  flex-grow: 1;           /* screenshot area stretches to fill space */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card h3{margin:0 0 10px; font-size:20px}
.card p{margin:0 0 10px; color:var(--muted)}

.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  background:var(--accent);     /* #00ff99 */
  color:#052417;
  font-weight:800;
  letter-spacing:.2px;

  /* toned down */
  box-shadow:none;              /* remove glow */
  border:1px solid rgba(0,255,153,.25);
  transition:transform .08s ease, opacity .08s ease, background .08s ease;
}
.btn:hover{
  transform:translateY(-1px);
  opacity:.96;
}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}


iframe{
  width:100%; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-1);
}

ul.clean{margin:0; padding-left:18px}
.footer{margin:34px 0 6px; text-align:center; color:var(--muted); font-size:14px}

/* Subtle separators on very light backgrounds */
hr{border:0; height:1px; background:var(--line); margin:18px 0}

/* Optional dark-mode if someone prefers it */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1210;
    --surface:#0f1815;
    --ink:#eafaf4;
    --muted:#9bb8ad;
    --line:rgba(0,255,153,.16);
  }
  .nav .brand{color:#38f7b1}
  .nav .links a{color:#65ffc6}
  .hero{background:
    radial-gradient(900px 300px at 0% 0%, rgba(0,255,153,.10), transparent 60%),
    radial-gradient(900px 300px at 100% 100%, rgba(0,212,170,.10), transparent 60%),
    linear-gradient(180deg, #0f1714 0%, #101b17 100%);}
}

/* talents page: force single column and tidy image behavior */
.talents-grid {
  grid-template-columns: 1fr !important;   /* always one per row */
  gap: 22px;
}

/* don't vertically center the screenshots; start at the top */
.card .talent-fig {
  flex-grow: 0;              /* no stretch needed now that it's stacked */
  display: block;            /* reset the flex centering you added */
}

/* make screenshots fill card width, keep aspect ratio */
.talent-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.copy-row{ display:flex; gap:10px; align-items:center; margin-top:12px }
.copy-status{ color:var(--muted); font-size:.95rem }
.copy-btn.copied{ background:#18d892 }   /* quick visual “copied” state */
.copy-src{ position:absolute; left:-9999px } /* keep hidden but selectable if fallback runs */