@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600;700;800&family=Oranienbaum&family=PT+Mono&display=swap');

:root {
  --fm04-bg: #120b29;
  --fm04-ink: #fff8e8;
  --fm04-muted: #cfc4e5;
  --fm04-violet: #8f7cff;
  --fm04-melon: #ff9673;
  --fm04-citron: #d8ff62;
  --fm04-mint: #79f7d4;
  --fm04-rose: #ff67b3;
  --fm04-line: rgba(255, 248, 232, .17);
  --fm04-glass: rgba(28, 17, 59, .78);
  --fm04-display: "Oranienbaum", Georgia, serif;
  --fm04-body: "Commissioner", "Segoe UI", sans-serif;
  --fm04-mono: "PT Mono", Consolas, monospace;
  --fm04-radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--fm04-ink);
  font: 16px/1.68 var(--fm04-body);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 150, 115, .18), transparent 24rem),
    radial-gradient(circle at 87% 24%, rgba(121, 247, 212, .13), transparent 27rem),
    linear-gradient(115deg, transparent 0 46%, rgba(143, 124, 255, .06) 47% 49%, transparent 50%),
    var(--fm04-bg);
  background-size: auto, auto, 72px 72px, auto;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.fm04x-skip {
  position: fixed; top: -90px; left: 14px; z-index: 50;
  padding: 11px 16px; color: var(--fm04-bg); background: var(--fm04-citron);
}
.fm04x-skip:focus { top: 14px; }
.fm04x-header {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 226px 1fr auto; gap: 24px; align-items: center;
  padding: 12px max(22px, calc((100vw - 1280px) / 2));
  border-bottom: 1px solid var(--fm04-line);
  background: rgba(18, 11, 41, .9); backdrop-filter: blur(18px) saturate(130%);
}
.fm04x-brand { text-decoration: none; }
.fm04x-header nav, .fm04x-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.fm04x-header nav a, .fm04x-footer nav a { text-decoration: none; font-weight: 700; }
.fm04x-header nav a:hover { color: var(--fm04-citron); }
.fm04x-headeractions, .fm04x-sectionactions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fm04x-headeractions a, .fm04x-textlink {
  display: inline-flex; min-height: 46px; align-items: center; justify-content: center;
  padding: 10px 17px; border: 1px solid var(--fm04-mint); border-radius: 999px;
  text-decoration: none; font-weight: 800; letter-spacing: .01em;
}
.fm04x-headeractions a:last-child, .fm04x-textlink {
  color: #180d2c; border-color: var(--fm04-citron);
  background: linear-gradient(105deg, var(--fm04-citron), var(--fm04-mint));
  box-shadow: 0 0 24px rgba(121, 247, 212, .19);
}
.fm04x-sectionactions .fm04x-textlink:nth-child(even) {
  color: var(--fm04-ink); border-color: var(--fm04-melon); background: transparent; box-shadow: none;
}
.fm04x-signal {
  max-width: 1280px; margin: 22px auto 0; padding: 9px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  border: 1px solid var(--fm04-line); border-radius: 999px;
  background: rgba(28, 17, 59, .7); box-shadow: inset 0 0 45px rgba(143, 124, 255, .08);
}
.fm04x-signal div {
  min-width: 0; padding: 11px 15px; border-right: 1px solid var(--fm04-line); text-align: center;
}
.fm04x-signal div:last-child { border: 0; }
.fm04x-signal span { display: block; color: var(--fm04-citron); font: 700 1.36rem var(--fm04-mono); }
.fm04x-signal small { color: var(--fm04-muted); }
main { max-width: 1280px; margin: auto; padding: 30px 22px 84px; }
.fm04x-section, .fm04x-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 28px 0; padding: clamp(30px, 5vw, 70px);
  border: 1px solid var(--fm04-line); border-radius: var(--fm04-radius);
  background:
    linear-gradient(136deg, rgba(255, 150, 115, .08), transparent 34%),
    linear-gradient(315deg, rgba(121, 247, 212, .08), transparent 38%),
    var(--fm04-glass);
  box-shadow: 0 22px 70px rgba(4, 1, 18, .32);
}
.fm04x-section::before, .fm04x-hero::before {
  content: ""; position: absolute; inset: -55%; z-index: -2; opacity: .55;
  background: repeating-radial-gradient(ellipse at center, transparent 0 31px, rgba(143,124,255,.12) 32px 34px, transparent 35px 58px);
  transform: rotate(11deg) scale(1.15, .62);
}
.fm04x-section::after, .fm04x-hero::after {
  content: "F"; position: absolute; right: -.02em; top: -.38em; z-index: -1;
  color: rgba(216, 255, 98, .035); font: 400 clamp(13rem, 30vw, 29rem)/1 var(--fm04-display);
}
.fm04x-section:nth-of-type(3n+1) { border-top: 4px solid var(--fm04-violet); }
.fm04x-section:nth-of-type(3n+2) { border-left: 4px solid var(--fm04-melon); }
.fm04x-section:nth-of-type(3n) { border-bottom: 4px solid var(--fm04-mint); }
.fm04x-hero { min-height: 640px; display: grid; align-content: center; border-width: 2px; }
.fm04x-heading { position: relative; z-index: 1; max-width: 1060px; min-width: 0; }
.fm04x-kicker {
  color: var(--fm04-melon); font: 700 .76rem/1.4 var(--fm04-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
h1, h2, h3 { margin: .3em 0; font-family: var(--fm04-display); font-weight: 400; line-height: 1.02; }
h1 { max-width: 1160px; font-size: clamp(2.75rem, 6.5vw, 6.25rem); }
h2 { max-width: 1100px; font-size: clamp(2.05rem, 4.4vw, 4.2rem); }
h3 { font-size: 1.28rem; }
p { max-width: 1020px; color: var(--fm04-muted); font-size: 1.02rem; }
.fm04x-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 30px 0;
}
.fm04x-grid article {
  min-height: 174px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--fm04-line); border-radius: 8px 28px 8px 28px;
  background: linear-gradient(150deg, rgba(143,124,255,.14), rgba(18,11,41,.88));
}
.fm04x-grid article:nth-child(4n+2) { background: linear-gradient(150deg, rgba(255,150,115,.15), rgba(18,11,41,.9)); }
.fm04x-grid article:nth-child(4n+3) { background: linear-gradient(150deg, rgba(121,247,212,.12), rgba(18,11,41,.9)); }
.fm04x-grid article:nth-child(even) { transform: translateY(9px); }
.fm04x-grid span { color: var(--fm04-citron); font: 700 .76rem var(--fm04-mono); }
.fm04x-cardnote { margin: auto 0 12px; color: var(--fm04-muted); }
.fm04x-faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
details {
  border: 1px solid var(--fm04-line); border-radius: 20px 6px 20px 6px;
  padding: 18px; background: rgba(24, 13, 52, .86);
}
details[open] { border-color: var(--fm04-violet); box-shadow: 0 0 26px rgba(143,124,255,.12); }
summary { cursor: pointer; color: var(--fm04-citron); font-weight: 800; }
.fm04x-footer {
  display: grid; grid-template-columns: 226px 1fr; gap: 26px; align-items: center;
  padding: 46px max(24px, calc((100vw - 1240px) / 2));
  border-top: 1px solid var(--fm04-line);
  background: linear-gradient(90deg, #0b071b, #170d34 55%, #0b071b);
}
.fm04x-footer p { margin: 0; }
.fm04x-legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--fm04-line); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--fm04-citron); outline-offset: 4px; }

@media (max-width: 940px) {
  .fm04x-header { grid-template-columns: 1fr auto; }
  .fm04x-header nav { display: none; }
  .fm04x-signal { margin-inline: 12px; border-radius: 24px; grid-template-columns: repeat(2, 1fr); }
  .fm04x-signal div:nth-child(even) { border-right: 0; }
  .fm04x-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .fm04x-header { grid-template-columns: 144px 1fr; gap: 10px; padding: 9px 11px; }
  .fm04x-headeractions a:first-child { display: none; }
  .fm04x-headeractions a { min-height: 44px; padding: 8px 13px; }
  .fm04x-signal { grid-template-columns: 1fr 1fr; }
  .fm04x-signal div:last-child { grid-column: 1 / -1; }
  main { padding: 16px 10px 54px; }
  .fm04x-section, .fm04x-hero { width: calc(100vw - 20px); margin: 16px 0; padding: 28px 18px; min-height: 0; }
  .fm04x-grid, .fm04x-faqgrid { grid-template-columns: 1fr; }
  .fm04x-grid article:nth-child(even) { transform: none; }
  h1 { font-size: clamp(2rem, 10.7vw, 3.2rem); overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.75rem, 8.8vw, 2.7rem); overflow-wrap: anywhere; }
  p, summary, h3 { overflow-wrap: anywhere; word-break: break-word; }
  .fm04x-textlink { max-width: 100%; white-space: normal; }
  .fm04x-footer { grid-template-columns: 1fr; padding: 36px 18px; }
  .fm04x-legal { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}