@font-face {
    font-family: 'Trueno';
    src: url('assets/trueno.otf') format('opentype');
    font-weight: 600 800;
    font-display: swap;
  }

  @font-face {
    font-family: 'Monocraft';
    src: url('assets/Monocraft.ttf') format('truetype');
    font-weight: 400 700;
    font-display: swap;
  }

  :root {
    --bg-deep:     #0a0e1a;
    --bg-dusk-1:   #121a2c;
    --bg-dusk-2:   #241f42;
    --bg-dusk-3:   #45324e;
    --amber:       #e0985a;
    --cyan:        #4dd8f0;
    --blue:        #2f7de0;
    --text:        #edf1f8;
    --muted:       #93a0ba;
    --panel:       #131c30;
    --panel-line:  #263353;
    --panel-line-hover: #3a4a72;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--bg-deep);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  a { color: inherit; }

  .wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(10, 14, 26, 0.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: 17px;
    text-decoration: none;
  }
  .brand img { height: 22px; width: auto; display: block; }
  .brand .brand-text {
    font-family: 'Monocraft', monospace;
    font-weight: 700;
    background: linear-gradient(100deg, var(--cyan), var(--blue) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .nav-links {
    display: flex;
    gap: 26px;
    font-size: 14px;
    color: var(--muted);
  }
  .nav-links a { text-decoration: none; transition: color .15s ease; }
  .nav-links a:hover { color: var(--text); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 130px;
    isolation: isolate;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.86) 62%, var(--bg-deep) 100%),
      url('assets/hero-bg.webp');
    background-size: cover;
    background-position: center 35%;
    filter: saturate(0.75) brightness(0.55);
    z-index: -2;
  }
  .hero-glow {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(680px 420px at 18% 8%, rgba(224,152,90,0.20), transparent 60%),
      radial-gradient(720px 460px at 82% 0%, rgba(77,216,240,0.16), transparent 60%);
    z-index: -1;
  }

  .hero h1 {
    font-family: 'Trueno', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 6.2vw, 68px);
    line-height: 1.03;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 18ch;
  }
  .hero h1 .grad {
    background: linear-gradient(100deg, var(--cyan), var(--blue) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero p.lede {
    margin: 22px 0 0;
    max-width: 46ch;
    font-size: 17px;
    color: var(--muted);
  }

  .hero-cta {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    flex-wrap: wrap;
  }

  /* Notched blocky buttons - the recurring cut-corner motif */
  .btn {
    --notch: 10px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 13px 22px;
    clip-path: polygon(
      var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
      calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)
    );
    transition: transform .15s ease, filter .15s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  .btn-primary {
    background: linear-gradient(100deg, var(--cyan), var(--blue) 85%);
    color: #06111f;
  }
  .btn-primary:hover { filter: brightness(1.08); }

  /* Ghost buttons need a border that survives the notch cut, so they're
     built as a frame (border colour) + inset fill (content colour) rather
     than a single element with `border` - a plain border does not follow
     a clip-path cut edge, only the original rectangular edges. */
  .btn-ghost {
    --notch: 10px;
    --bw: 1px;
    padding: var(--bw);
    background: var(--panel-line);
  }
  .btn-ghost:hover { background: var(--panel-line-hover); }
  .btn-ghost .btn-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 100%;
    padding: 12px 21px;
    background: #182236;
    color: var(--text);
    clip-path: polygon(
      calc(var(--notch) - var(--bw)) 0, 100% 0, 100% calc(100% - (var(--notch) - var(--bw))),
      calc(100% - (var(--notch) - var(--bw))) 100%, 0 100%, 0 calc(var(--notch) - var(--bw))
    );
  }

  /* diagonal seam between hero and content, echoing the mark's cut */
  .seam {
    position: relative;
    height: 46px;
    margin-top: -46px;
    background: var(--bg-deep);
    clip-path: polygon(0 46px, 100% 0, 100% 46px, 0 46px);
  }

  /* ---------- Downloads ---------- */
  section.downloads {
    position: relative;
    padding: 96px 0 100px;
    isolation: isolate;
    overflow: hidden;
  }
  .downloads-bg {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, var(--bg-deep) 0%, rgba(10,14,26,0.72) 12%, rgba(10,14,26,0.8) 88%, var(--bg-deep) 100%),
      url('assets/hero-bg-2.webp');
    background-size: cover;
    background-position: center 45%;
    filter: saturate(0.85) brightness(0.72);
    z-index: -2;
  }
  .downloads-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .section-head { margin-bottom: 40px; }
  .section-head .kicker {
    font-family: 'Trueno', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan);
  }
  .section-head h2 {
    font-family: 'Trueno', sans-serif;
    font-weight: 800;
    font-size: 28px;
    margin: 8px 0 10px;
  }
  .section-head p { color: var(--muted); max-width: 60ch; margin: 0; font-size: 15px; }

  .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .btn svg { height: 16px; width: 16px; flex-shrink: 0; display: block; }

  /* Sharp-cornered cards: soft border, deep panel fill,
     platform-tinted icon badge, lift + glow on hover. */
  .card {
    position: relative;
    background: linear-gradient(180deg, rgba(24,34,54,0.35), rgba(15,21,35,0.25));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(237,241,248,0.14);
    border-radius: 0;
    padding: 30px 28px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .card:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, rgba(24,34,54,0.48), rgba(15,21,35,0.35));
    border-color: var(--panel-line-hover);
    box-shadow: 0 16px 40px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(77,216,240,0.08);
  }

  .card-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
  }
  .card-icon svg { width: 50px; height: 50px; }
  .card-icon img { width: 40px; height: 40px; object-fit: contain; display: block; }
  .card-icon.icon-windows { color: var(--cyan); }
  .card-icon.icon-modrinth{ color: #3ee6a8; }
  .card-icon.icon-curseforge { color: var(--amber); }

  .card h3 {
    font-family: 'Trueno', sans-serif;
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 8px;
  }

  .card p.desc {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0 0 22px;
    flex-grow: 1;
  }

  /* Card download buttons: sharp notched corners, unified dark-gray gradient
     for every platform so none of them stand out with a different fill. */
  .card .btn {
    justify-content: center;
    width: 100%;
    margin-top: auto;
    background: linear-gradient(160deg, #2a2e37 0%, #4b505c 100%);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .card .btn:hover { filter: brightness(1.15); }



  /* ---------- How it works ---------- */
  section.steps { padding: 70px 0; }
  .step-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .step {
    position: relative;
    padding-left: 4px;
  }
  .step h4 { font-size: 15px; margin: 0 0 6px; font-weight: 650; }
  .step p { font-size: 13.5px; color: var(--muted); margin: 0; }

  /* ---------- Footer ---------- */
  footer {
    border-top: 1px solid var(--panel-line);
    padding: 34px 0 44px;
    margin-top: 30px;
  }
  .footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--muted);
  }
  .footer-links { display: flex; gap: 20px; }
  .footer-links a { text-decoration: none; color: var(--muted); }
  .footer-links a:hover { color: var(--text); }

  @media (max-width: 640px) {
    .cards { grid-template-columns: 1fr; }
  }

  @media (max-width: 760px) {
    .step-list { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .hero { padding: 70px 0 100px; }
  }