:root{
  --bg:#0b0d10;
  --bg-alt:#10141a;
  --card:#121821;
  --text:#e9edf3;
  --muted:#a9b6c6;
  --line:#1e2835;
  --brand:#58b4ff;
}

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

.container{ width:min(1000px, 92%); margin-inline:auto; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--line);
  background:rgba(11,13,16,.6); backdrop-filter: blur(8px);
}
.brand{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--brand), #9df3c4);
  color:#0b0d10; text-decoration:none; font-weight:800;
}
.menu-toggle{ display:none; background:none; border:0; padding:.25rem; cursor:pointer; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--text); margin:4px 0; }

.nav{ margin-left:auto; display:none; gap:.6rem; align-items:center; }
.nav a{
  color:var(--text); text-decoration:none; padding:.45rem .7rem; border-radius:10px;
}
.nav a:hover{ background:#141a23; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:12px; font-weight:700;
  background:linear-gradient(135deg, var(--brand), #9df3c4); color:#0b0d10;
  border:1px solid transparent;
}
.btn.ghost{
  background:transparent; color:var(--text); border-color:#2a3647;
}
.btn.ghost:hover{ background:#141a23; }

/* Hero */
.hero{
  padding:4.5rem 0 2.5rem;
  background:
    radial-gradient(800px 400px at 80% -10%, rgba(88,180,255,.12), transparent 60%),
    var(--bg);
}
.hero h1{ margin:0; font-size:clamp(1.8rem, 3.5vw, 3rem); line-height:1.15; }
.sub{ color:var(--muted); margin:.4rem 0 1.1rem; }
.actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Section */
.section{ padding:2.8rem 0; }
.section h2{ margin:0 0 .9rem; font-size:clamp(1.2rem, 2.2vw, 1.8rem); }
.section.alt{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* Cards */
.cards{
  display:grid; gap:.8rem;
  grid-template-columns: repeat(12, 1fr);
}

/* Card base */
.card{
  grid-column: span 12; /* keeps your mobile layout */
  display:block; text-decoration:none; color:inherit;

  /* New: real card styling */
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02)) , var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.35);

  /* Smoother motion + subtle scale */
  transform: translateY(0) scale(1);
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease, 
    filter .25s ease;
}

/* Hover: lift, soften, brighten */
.card:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: #2b3a4f;
  box-shadow:
    0 14px 30px rgba(0,0,0,.35),
    0 4px 10px rgba(0,0,0,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.02)) , var(--card);
  filter: saturate(1.03);
}

/* Keyboard focus: visible and elegant */
.card:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.3),
    0 0 0 1px var(--brand) inset;
}

/* Tidy internal spacing */
.card h3{ margin:.15rem 0 .4rem; font-size:1.08rem; letter-spacing:.1px; }
.card p{ margin:0 0 .8rem; color:var(--muted); }

/* Tags look a touch more refined against the new card surface */
.tags{
  display:flex; gap:.4rem; padding:0; margin:0; list-style:none; flex-wrap:wrap;
}
.tags li{
  font-size:.82rem;
  color:#cfe6ff;
  background: #172034;
  border:1px solid #263247;
  padding:.22rem .6rem;
  border-radius: 999px;
}

/* Desktop grid */
@media (min-width: 760px){
  .card{ grid-column: span 4; }
}

/* Reduce motion for folks who prefer it */
@media (prefers-reduced-motion: reduce){
  .card{ transition: none; transform:none; }
  .card:hover{ transform:none; }
}

/* Light mode tune-up so shadows don’t get muddy */
@media (prefers-color-scheme: light){
  .card{
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)), var(--card);
  }
  .card:hover{
    box-shadow:
      0 12px 28px rgba(0,0,0,.12),
      0 3px 10px rgba(0,0,0,.08);
  }
}

/* Footer */
.site-footer{
  padding:2.4rem 0 3.6rem; /* more breathing room */
  color:var(--muted);
  border-top:1px solid var(--line);
  text-align:center;
}

.site-footer p{
  margin:0.4rem 0;
  line-height:1.6;
}

.site-footer a{
  color:var(--text);
  text-decoration:none;
  font-weight:500;
  padding:0.2rem 0.4rem;
  border-radius:6px;
  transition:color .2s ease, background .2s ease;
}
.site-footer a:hover{
  color:var(--brand);
  background:rgba(88,180,255,0.08);
}


/* Softer quote styling */
.quote {
  margin: 1.2rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--brand);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
  background: none; /* remove dark fill */
}
.quote span {
  display: block;
  margin-top: .4rem;
  font-size: .85rem;
  font-style: normal;
  color: var(--muted);
  text-align: right;
}