/* ============================================================
   Atomic24 — main stylesheet
   Palette:  ink #16161C · paper #FAFAFB · violet #6A4DF0
             light-violet #9a86f5 · cyan #39B6E0 · border #ecebf0
   Type:     Space Grotesk (headings) · Hanken Grotesk (body)
             Space Mono (labels)
   Most page layout lives as inline styles in the templates so the
   design is easy to read top-to-bottom. This file holds the things
   that can't be inline: resets, hover/focus states, the blog prose,
   forms, and the responsive grid breakpoints.
   ============================================================ */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Hanken Grotesk', sans-serif;
  color:#16161C;
  background:#FAFAFB;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; font-family:'Space Grotesk', sans-serif; font-weight:600; line-height:1.04; letter-spacing:-0.02em; }
p{ margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
summary{ list-style:none; cursor:pointer; }
summary::-webkit-details-marker{ display:none; }

/* ----- Hover / focus states ------------------------------------
   Base appearance stays inline in the markup; these rules only add
   the hover delta. !important lets them win over the inline base. */
.h-nav:hover{ background:#efeafe !important; color:#16161C !important; }
.h-cta:hover{ background:#5a3fe0 !important; }
.h-btn:hover{ background:#5a3fe0 !important; transform:translateY(-1px) !important; }
.h-ghost:hover{ border-color:#6A4DF0 !important; color:#6A4DF0 !important; }
.h-white:hover{ transform:translateY(-1px) !important; }
.h-card:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 38px -16px rgba(20,20,30,.22) !important; border-color:#d8d0f5 !important; }
.h-card-lg:hover{ transform:translateY(-3px) !important; box-shadow:0 18px 42px -18px rgba(20,20,30,.22) !important; border-color:#d8d0f5 !important; }
.h-feat:hover{ box-shadow:0 20px 46px -20px rgba(20,20,30,.25) !important; border-color:#d8d0f5 !important; }
.h-cell:hover{ background:#FAFAFB !important; }
.h-link:hover{ opacity:.65 !important; }
.h-foot:hover{ color:#FAFAFB !important; }
.h-chip:hover{ border-color:#6A4DF0 !important; color:#6A4DF0 !important; }

/* ----- Forms (contact) ----------------------------------------- */
input, textarea{
  font-family:'Hanken Grotesk', sans-serif;
  width:100%;
  border:1px solid #d6d3e0;
  border-radius:11px;
  padding:14px 15px;
  font-size:15px;
  color:#16161C;
  background:#fff;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
input::placeholder, textarea::placeholder{ color:#9a9aa4; }
input:focus, textarea:focus{ border-color:#6A4DF0; box-shadow:0 0 0 3px rgba(106,77,240,.12); }

/* ----- Blog prose (rendered from markdown) --------------------- */
.prose{ font-size:clamp(17px,2.2vw,19px); line-height:1.72; color:#2a2a32; }
.prose > p{ margin-top:22px; }
.prose > p:first-child{ font-size:clamp(19px,2.6vw,22px); line-height:1.55; color:#16161C; margin-top:0; }
.prose h2{ font-size:clamp(24px,3.4vw,30px); letter-spacing:-0.02em; margin-top:44px; }
.prose h3{ font-size:clamp(22px,3vw,27px); letter-spacing:-0.02em; margin-top:40px; }
.prose h2 + p, .prose h3 + p{ margin-top:14px; }
.prose ul, .prose ol{ margin-top:16px; padding-left:22px; }
.prose li{ margin-bottom:9px; }
.prose li::marker{ color:#6A4DF0; }
.prose a{ color:#6A4DF0; text-decoration:underline; text-underline-offset:2px; }
.prose strong{ font-weight:600; color:#16161C; }
.prose img{ border-radius:14px; margin-top:24px; }
.prose hr{ border:none; border-top:1px solid #ecebf0; margin:40px 0; }
.prose blockquote{
  margin:36px 0; padding:8px 0 8px 28px;
  border-left:3px solid #6A4DF0;
  font-family:'Space Grotesk', sans-serif; font-weight:500;
  font-size:clamp(22px,3vw,28px); line-height:1.2; letter-spacing:-0.02em; color:#16161C;
}
.prose blockquote p{ margin:0; font-size:inherit; line-height:inherit; color:inherit; }
.prose code{ font-family:'Space Mono', monospace; background:#f3f1fb; padding:2px 6px; border-radius:5px; font-size:.88em; }
.prose pre{ background:#16161C; color:#FAFAFB; padding:20px 22px; border-radius:14px; overflow:auto; margin-top:24px; font-size:14px; }
.prose pre code{ background:none; padding:0; color:inherit; }

/* ----- Responsive grids ---------------------------------------
   Base columns are set inline in the markup; these only collapse
   them at smaller widths. */
.nav-mobile{ display:none; }
@media (max-width:860px){
  .nav-desktop{ display:none !important; }
  .nav-mobile{ display:block !important; }
  .atoms-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:520px){
  .atoms-grid{ grid-template-columns:1fr !important; }
  .fleet-grid{ grid-template-columns:1fr !important; }
}
.feat{ grid-template-columns:1.1fr 0.9fr; }
@media (max-width:760px){
  .feat{ grid-template-columns:1fr !important; }
  .feat-img{ min-height:200px; order:-1; }
}
@media (max-width:720px){ .team-split{ grid-template-columns:1fr !important; } }
@media (max-width:640px){ .sol-grid{ grid-template-columns:1fr !important; } }
.cgrid{ grid-template-columns:0.9fr 1.1fr; }
@media (max-width:820px){ .cgrid{ grid-template-columns:1fr !important; } }