html, body { margin:0; padding:0; background:#eef4f9; }
* { box-sizing: border-box; }
a { color:#2b6b96; text-decoration:none; }
a:hover { color:#14425f; }
::selection { background: rgba(120,190,235,.35); }

@keyframes mcwRise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }

.page {
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  font-family:Figtree,system-ui,sans-serif; color:#0f2c3f; overflow:hidden; background:#e9f1f7;
}
.bg { position:fixed; inset:0; z-index:0; overflow:hidden; }
.bg-photo {
  position:absolute; inset:-6%;
  background-image:url('uploads/wind-flowlines.webp');
  background-size:cover; background-position:center;
  filter:saturate(1.15) brightness(1.02);
}
.bg-wash { position:absolute; inset:0; background:linear-gradient(180deg, rgba(238,246,252,.58) 0%, rgba(226,240,250,.42) 45%, rgba(240,247,252,.62) 100%); }
.bg-blur { position:absolute; inset:0; backdrop-filter:blur(1px); }

.streaks { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.streaks canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.blk {
  position:absolute; border-radius:16px;
  background:rgba(255,255,255,.32); backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 40px rgba(28,80,112,.14), inset 0 1px 0 rgba(255,255,255,.9);
}

.blk-1 { left:9%;  top:14%; width:120px; height:120px; }
.blk-2 { left:78%; top:20%; width:96px;  height:96px;  border-radius:14px; }
.blk-3 { left:86%; top:66%; width:130px; height:130px; border-radius:18px; }
.blk-4 { left:4%;  top:72%; width:104px; height:104px; border-radius:14px; }

main {
  position:relative; z-index:10; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:52px; padding:88px 32px 56px; animation:mcwRise .5s ease both;
}
.lede { text-align:center; max-width:640px; text-shadow:0 1px 3px rgba(12,44,64,.18); }
.eyebrow { display:inline-flex; align-items:center; gap:12px; margin-bottom:26px; }
.dot { width:10px; height:10px; border-radius:50%; background:#4fa8d8; box-shadow:0 0 0 5px rgba(120,190,235,.22); }
.eyebrow span { font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:.24em; font-weight:500; color:#123549; }
h1 { font-size:52px; line-height:1.06; font-weight:300; letter-spacing:-.03em; margin:0 0 18px; color:#0d2d42; }
.lede p { font-size:18px; line-height:1.6; font-weight:300; color:#2c5570; margin:0; text-wrap:pretty; }

.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; width:100%; max-width:960px; }
.card {
  display:flex; flex-direction:column; gap:16px; padding:30px 30px 26px; border-radius:20px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85); box-shadow:0 18px 50px rgba(28,80,112,.12);
  color:#0f2c3f; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.card:hover { transform:translateY(-4px); background:rgba(255,255,255,.7); box-shadow:0 26px 64px rgba(28,80,112,.18); }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.kind { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; color:#6b90a8; }
.where { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:#4d7a94; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.65); }
.card h2 { margin:0 0 8px; font-size:27px; font-weight:400; letter-spacing:-.02em; color:#12384f; }
.card p { margin:0; font-size:15.5px; line-height:1.6; color:#2c5570; text-wrap:pretty; }
.go { margin-top:auto; padding-top:6px; font-size:15px; color:#1b4b68; }

.card.dark { background:rgba(19,64,92,.88); backdrop-filter:blur(26px) saturate(1.4); border:1px solid rgba(255,255,255,.35); box-shadow:0 18px 50px rgba(21,71,102,.26); color:#eaf5fb; }
.card.dark:hover { background:rgba(15,55,80,.94); box-shadow:0 26px 64px rgba(21,71,102,.34); }
.card.dark .kind { color:#9dc6de; }
.card.dark .where { color:#cfe6f3; background:rgba(255,255,255,.14); }
.card.dark h2 { color:#f4fbfe; }
.card.dark p { color:#c3ddeb; }
.card.dark .go { color:#a9d3ea; }
.card code { font-family:'JetBrains Mono',monospace; font-size:14px; }

button.card {
  font:inherit; text-align:left; width:100%; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}

.sheet {
  position:fixed; inset:0; margin:auto; z-index:70; width:min(400px, calc(100vw - 40px));
  padding:26px 26px 22px; border:none; border-radius:20px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9); box-shadow:0 30px 80px rgba(21,71,102,.28);
  color:#0f2c3f; font-family:Figtree,system-ui,sans-serif;
}
.sheet:not(:popover-open):not(.is-open) { display:none; }
.sheet.is-open { display:block; }
.sheet::backdrop { background:rgba(12,44,64,.34); backdrop-filter:blur(3px); }
.sheet-back { position:fixed; inset:0; z-index:60; background:rgba(12,44,64,.34); backdrop-filter:blur(3px); }
.sheet h3 { margin:6px 0 4px; font-size:23px; font-weight:400; letter-spacing:-.02em; color:#12384f; }
.sheet p { margin:0 0 18px; font-size:14px; line-height:1.55; color:#4d7a94; }

.dl {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; margin-bottom:9px; border-radius:13px;
  background:rgba(255,255,255,.6); border:1px solid rgba(120,165,190,.34);
  font-size:15px; color:#12384f;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.dl:hover { background:#fff; border-color:rgba(79,168,216,.75); transform:translateX(2px); color:#12384f; }
.dl-host { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.13em; color:#6b90a8; }

.dl.pending { opacity:.5; cursor:not-allowed; }
.dl.pending:hover { background:rgba(255,255,255,.6); border-color:rgba(120,165,190,.34); transform:none; }
.dl.pending .dl-host { color:#8aa8bb; }

.sheet-close {
  display:block; width:100%; margin-top:14px; padding:10px; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:#5b8199;
  background:none; border:none; border-top:1px solid rgba(120,165,190,.26);
}
.sheet-close:hover { color:#12384f; }

footer {
  position:relative; z-index:10; display:flex; justify-content:center;
  padding:0 32px 40px; font-family:'JetBrains Mono',monospace; font-size:12px; color:#35596f;
  text-align:center;
}

@media (max-width: 620px) {
  h1 { font-size:38px; }
  main { padding:64px 20px 40px; gap:40px; }
  .card { padding:26px 24px 22px; }
  .where { font-size:10px; letter-spacing:.06em; padding:3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  main { animation:none; }
  .card { transition:none; }
  .dl { transition:none; }
}