@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600;700&family=Mulish:wght@400;500;600;700;800&family=Yeseva+One&display=swap');

:root {
  --m367-bg: #062c2e;
  --m367-ink: #fff5dc;
  --m367-muted: #b9d4cd;
  --m367-violet: #5bb8b1;
  --m367-melon: #ef8354;
  --m367-citron: #f3c06b;
  --m367-mint: #8ed7c9;
  --m367-rose: #8ca8ff;
  --m367-line: rgba(255, 245, 220, .18);
  --m367-glass: rgba(7, 51, 52, .86);
  --m367-display: "Yeseva One", Georgia, serif;
  --m367-body: "Mulish", "Segoe UI", sans-serif;
  --m367-mono: "Fira Code", Consolas, monospace;
  --m367-radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--m367-ink);
  font: 16px/1.68 var(--m367-body);
  background:
    radial-gradient(circle at 14% 8%, rgba(239, 131, 84, .13), transparent 31rem),
    radial-gradient(circle at 88% 18%, rgba(142, 215, 201, .11), transparent 29rem),
    radial-gradient(circle at 1.5px 1.5px, rgba(243, 192, 107, .105) 1.25px, transparent 1.5px),
    var(--m367-bg);
  background-size: auto, auto, 26px 26px, auto;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.m367c-skip {
  position: fixed; top: -90px; left: 14px; z-index: 50;
  padding: 11px 16px; color: var(--m367-bg); background: var(--m367-citron);
}
.m367c-skip:focus { top: 14px; }
.m367c-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(--m367-line);
  background: rgba(6, 44, 46, .92); backdrop-filter: blur(18px) saturate(130%);
}
.m367c-brand { text-decoration: none; }
.m367c-header nav, .m367c-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.m367c-footer nav { flex-wrap: nowrap; gap: 10px; white-space: nowrap; }
.m367c-header nav a, .m367c-footer nav a { text-decoration: none; font-weight: 700; }
.m367c-header nav a:hover { color: var(--m367-citron); }
.m367c-headeractions, .m367c-sectionactions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.m367c-headeractions a, .m367c-textlink {
  display: inline-flex; min-height: 46px; align-items: center; justify-content: center;
  padding: 10px 17px; border: 1px solid var(--m367-mint); border-radius: 999px;
  text-decoration: none; font-weight: 800; letter-spacing: .01em;
}
.m367c-headeractions a:last-child, .m367c-textlink {
  color: #082f30; border-color: var(--m367-citron);
  background: linear-gradient(105deg, var(--m367-citron), var(--m367-mint));
  box-shadow: 0 0 24px rgba(142, 215, 201, .18);
}
.m367c-sectionactions .m367c-textlink:nth-child(even) {
  color: var(--m367-ink); border-color: var(--m367-melon); background: transparent; box-shadow: none;
}
.m367c-signal {
  max-width: 1280px; margin: 22px auto 0; padding: 9px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  border: 1px solid var(--m367-line); border-radius: 999px;
  background: rgba(7, 51, 52, .78); box-shadow: inset 0 0 45px rgba(91, 184, 177, .09);
}
.m367c-signal div {
  min-width: 0; padding: 11px 15px; border-right: 1px solid var(--m367-line); text-align: center;
}
.m367c-signal div:last-child { border: 0; }
.m367c-signal span { display: block; color: var(--m367-citron); font: 700 1.36rem var(--m367-mono); }
.m367c-signal small { color: var(--m367-muted); }
main { max-width: 1280px; margin: auto; padding: 30px 22px 84px; }
.m367c-section, .m367c-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 28px 0; padding: clamp(30px, 5vw, 70px);
  border: 1px solid var(--m367-line); border-radius: var(--m367-radius);
  background:
    linear-gradient(136deg, rgba(239, 131, 84, .075), transparent 34%),
    linear-gradient(315deg, rgba(142, 215, 201, .075), transparent 38%),
    var(--m367-glass);
  box-shadow: 0 22px 70px rgba(0, 18, 19, .38);
}
.m367c-section::before, .m367c-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .42;
  background-image:
    linear-gradient(30deg, transparent 47%, rgba(243, 192, 107, .14) 48% 50%, transparent 51%),
    linear-gradient(150deg, transparent 47%, rgba(142, 215, 201, .12) 48% 50%, transparent 51%);
  background-size: 52px 90px;
  mask-image: linear-gradient(105deg, #000, transparent 72%);
}
.m367c-section::after, .m367c-hero::after {
  content: "M"; position: absolute; right: -.02em; top: -.38em; z-index: -1;
  color: rgba(140, 168, 255, .042); font: 400 clamp(13rem, 30vw, 29rem)/1 var(--m367-display);
}
.m367c-section:nth-of-type(3n+1) { border-top: 4px solid var(--m367-violet); }
.m367c-section:nth-of-type(3n+2) { border-left: 4px solid var(--m367-melon); }
.m367c-section:nth-of-type(3n) { border-bottom: 4px solid var(--m367-mint); }
.m367c-hero { min-height: 640px; display: grid; align-content: center; border-width: 2px; }
.m367c-heading { position: relative; z-index: 1; max-width: 1060px; min-width: 0; }
.m367c-kicker {
  color: var(--m367-melon); font: 700 .76rem/1.4 var(--m367-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
h1, h2, h3 { margin: .3em 0; font-family: var(--m367-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(--m367-muted); font-size: 1.02rem; }
.m367c-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 30px 0;
}
.m367c-grid article {
  min-height: 174px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--m367-line); border-radius: 28px 8px 28px 8px;
  background: linear-gradient(150deg, rgba(91,184,177,.15), rgba(5,39,41,.92));
}
.m367c-grid article:nth-child(4n+2) { background: linear-gradient(150deg, rgba(239,131,84,.16), rgba(5,39,41,.94)); }
.m367c-grid article:nth-child(4n+3) { background: linear-gradient(150deg, rgba(142,215,201,.14), rgba(5,39,41,.94)); }
.m367c-grid article:nth-child(even) { transform: translateY(9px); }
.m367c-grid span { color: var(--m367-citron); font: 700 .76rem var(--m367-mono); }
.m367c-cardnote { margin: auto 0 12px; color: var(--m367-muted); }
.m367c-faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
details {
  border: 1px solid var(--m367-line); border-radius: 6px 20px 6px 20px;
  padding: 18px; background: rgba(8, 57, 58, .9);
}
details[open] { border-color: var(--m367-violet); box-shadow: 0 0 26px rgba(243,192,107,.13); }
summary { cursor: pointer; color: var(--m367-citron); font-weight: 800; }
.m367c-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(--m367-line);
  background: linear-gradient(90deg, #031d1f, #0a3c3c 55%, #031d1f);
}
.m367c-footer p { margin: 0; }
.m367c-legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--m367-line); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--m367-citron); outline-offset: 4px; }

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

@media (max-width: 580px) {
  .m367c-header { grid-template-columns: 144px 1fr; gap: 10px; padding: 9px 11px; }
  .m367c-headeractions a:first-child { display: none; }
  .m367c-headeractions a { min-height: 44px; padding: 8px 13px; }
  .m367c-signal { grid-template-columns: 1fr 1fr; }
  .m367c-signal div:last-child { grid-column: 1 / -1; }
  main { padding: 16px 10px 54px; }
  .m367c-section, .m367c-hero { width: calc(100vw - 20px); margin: 16px 0; padding: 28px 18px; min-height: 0; }
  .m367c-grid, .m367c-faqgrid { grid-template-columns: 1fr; }
  .m367c-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; }
  .m367c-textlink { max-width: 100%; white-space: normal; }
  .m367c-footer { grid-template-columns: 1fr; padding: 36px 18px; }
  .m367c-legal { grid-column: auto; }
}

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