/* ============================================================
   MTX Studio — shared stylesheet
   Brand: #153BFF (MTX Blue) · #F5F5F5 (off-white) · #0A0A0C (ink/dark)
   Type: Kamerik 105 (display + body) + Space Mono (technical labels)
   ============================================================ */

/* ---------- self-hosted fonts (no third-party request) ---------- */
/* Kamerik 105 (brand typeface, licensed): Light 300 / Book 400 / Bold 700 / Heavy 800.
   Requests for 500 fall back to Book, 600 to Bold per CSS weight matching. */
@font-face{
  font-family:'Kamerik105';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/assets/fonts/Kamerik105-Light.woff2') format('woff2');
}
@font-face{
  font-family:'Kamerik105';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/Kamerik105-Book.woff2') format('woff2');
}
@font-face{
  font-family:'Kamerik105';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/Kamerik105-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Kamerik105';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/Kamerik105-Heavy.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/space-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/space-mono-700.woff2') format('woff2');
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#F5F5F5}
body{font-family:'Kamerik105',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#0A0A0A}
::selection{background:#153BFF;color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
input,textarea{font-family:inherit}
::placeholder{color:rgba(245,245,245,.45)}
img{display:block}

/* ---------- motion ---------- */
@keyframes mtxFlow{from{left:-4%}to{left:104%}}
@keyframes mtxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
[data-motion="off"] *{animation:none !important}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* ---------- hover / focus (override inline styles) ---------- */
.lnk:hover{color:#0A0A0A !important}
.btn-primary:hover{background:#0f30d6 !important}
.btn-outline:hover{border-color:#0A0A0A !important}
.card:hover{border-color:rgba(21,59,255,.5) !important}
.flink:hover{color:#8aa0ff !important}
.allwork:hover{gap:12px !important}
.casenext:hover{color:#153BFF !important}
.backlink:hover{color:#153BFF !important}
.field:focus{border-color:#5a78ff !important}

/* ---------- 3-up grid (e.g. "What we build" — 6 tiles) ---------- */
/* 3 cols desktop, 2 cols tablet, stays 2-up on phones (compact) so the
   six tiles read as 3 short rows instead of one long stack. */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .grid-3{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid-3 .card{padding:20px 16px !important;gap:12px !important}
  .grid-3 .card h3{font-size:17px !important}
}

/* ---------- "Why now" — 3 cards; 2-up with 3rd full-width on mobile ---------- */
.grid-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){
  .grid-why{grid-template-columns:repeat(2,1fr)}
  .grid-why>div:last-child{grid-column:1 / -1}
}
@media (max-width:560px){
  .grid-why{gap:10px}
  .grid-why>div{min-height:0 !important;padding:22px 18px !important;gap:12px !important}
}

/* ---------- FAQ accordion (native <details>, no JS) ---------- */
details.faq{border-bottom:1px solid rgba(10,10,10,.12)}
details.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 2px;font-family:'Kamerik105',system-ui,sans-serif;font-weight:600;font-size:clamp(16px,1.9vw,20px);color:#0A0A0A}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font:700 22px/1 'Space Mono',monospace;color:#153BFF;flex:none}
details.faq[open] summary::after{content:"–"}
details.faq summary:hover{color:#153BFF}
details.faq > div{padding:0 2px 24px;max-width:68ch;font:400 15.5px/1.7 Kamerik105;color:rgba(10,10,10,.66)}

/* ---------- "How we work" — 4 steps as 2×2 on mobile ---------- */
.grid-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.grid-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .grid-steps{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid-steps>div{min-height:0 !important;padding:18px 15px !important}
}

/* ---------- starfield (replaces galaxy/hero photo backdrops) ---------- */
.starfield{
  background-color:#0A0A0C;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle at 70% 30%, rgba(21,59,255,.18), transparent 45%),
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 75% 18%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 38% 62%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 88% 55%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.8px 1.8px at 60% 80%, rgba(138,160,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 25% 86%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.1px 1.1px at 50% 34%, rgba(255,255,255,.45), transparent),
    radial-gradient(2.2px 2.2px at 18% 70%, rgba(138,160,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 92% 82%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.3px 1.3px at 45% 12%, rgba(255,255,255,.4), transparent);
}

/* ---------- mobile nav (CSS-only burger) ---------- */
@media (max-width:820px){
  #mtxHeader{flex-wrap:wrap}
  #mtxBurger{display:flex !important}
  #mtxToggle:not(:checked) ~ #mtxNav{display:none !important}
  #mtxNav{position:absolute;top:100%;left:0;right:0;flex-direction:column !important;align-items:stretch !important;gap:2px !important;background:#F5F5F5;border-bottom:1px solid rgba(10,10,10,.12);padding:10px 5vw 18px !important;box-shadow:0 14px 28px rgba(0,0,0,.1)}
  #mtxNav>a{width:100%;justify-content:flex-start;padding:13px 4px}
}