@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Spline+Sans+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes drift { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-14px) translateX(6px); } }
@keyframes dotblink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes popin { 0% { opacity: 0; transform: translateY(14px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes logoslide { 0% { transform: translateX(0); } 100% { transform: translateX(-1470px); } }

/* hover helpers (replace the prototype's style-hover attribute) */
.btn-primary { transition: transform .15s ease, background .15s ease; }
.btn-primary:hover { background: #2E3A8C !important; transform: translateY(-2px); }
.btn-ghost { transition: background .15s ease; }
.btn-ghost:hover { background: rgba(34,44,107,0.05); }
.navlink { text-decoration: none; font-size: 15px; font-weight: 500; color: #3C3E47; padding: 8px 14px; border-radius: 8px; transition: color .15s ease; }
.navlink:hover { color: #222C6B; }
.navlink.active { color: #222C6B; font-weight: 600; }
.card-lift { transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(22,24,42,0.35); }
.work-card { transition: transform .18s ease, box-shadow .18s ease; }
.work-card:hover { transform: translateY(-5px); box-shadow: 0 26px 52px -28px rgba(22,24,42,0.4); }
.flink { transition: color .15s ease; }
.flink:hover { color: #fff; }
.logo-track:hover { animation-play-state: paused; }

.cinput { width:100%; font-family:'Hanken Grotesk',sans-serif; font-size:15px; color:#1B1D24; background:#fff; border:1px solid rgba(27,29,36,0.14); border-radius:12px; padding:14px 16px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.cinput::placeholder { color:#9A9CA4; }
.cinput:focus { border-color:#2E9BF0; box-shadow:0 0 0 4px rgba(46,155,240,0.14); }

/* AI chat widget */
#sx-fab { position:fixed; bottom:24px; right:24px; z-index:121; width:62px; height:62px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(140deg,#2E9BF0,#222C6B); color:#fff; box-shadow:0 16px 38px -10px rgba(34,44,107,0.7); display:flex; align-items:center; justify-content:center; transition:transform .15s ease; }
#sx-fab:hover { transform: scale(1.07); }
#sx-chat { position:fixed; bottom:98px; right:24px; z-index:120; width:384px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 130px); background:#fff; border:1px solid rgba(27,29,36,0.1); border-radius:22px; box-shadow:0 36px 80px -22px rgba(22,24,42,0.55); display:flex; flex-direction:column; overflow:hidden; font-family:'Hanken Grotesk',sans-serif; animation:popin .22s ease; }
.sx-bubble-user { max-width:80%; background:#222C6B; color:#fff; padding:10px 14px; border-radius:14px 14px 4px 14px; font-size:14px; line-height:1.55; }
.sx-bubble-bot { max-width:86%; background:#F2EFE8; color:#23252E; padding:10px 14px; border-radius:14px 14px 14px 4px; font-size:14px; line-height:1.55; }

/* ============================================================
   Responsive layer — the templates use inline styles, so these
   overrides rely on attribute selectors + !important to win.
   ============================================================ */

/* Tablets: 3- and 4-column card grids drop to 2 columns */
@media (max-width: 1080px) {
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Phones */
@media (max-width: 820px) {
  /* every inline multi-column grid becomes a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* type scale */
  h1[style] { font-size: clamp(32px, 9vw, 42px) !important; }
  h2[style] { font-size: clamp(25px, 7vw, 32px) !important; }

  /* page gutters: every 1200px container tightens to 20px */
  [style*="max-width:1200px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* nav: logo row + wrapping link row, big CTA hidden (Contact link remains) */
  nav > div {
    height: auto !important;
    flex-wrap: wrap;
    justify-content: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    row-gap: 2px;
  }
  nav img { height: 42px !important; }
  nav > div > div { flex-wrap: wrap; justify-content: center; gap: 0 !important; }
  nav .btn-primary { display: none !important; }
  nav .btn-ghost { margin-left: 4px !important; padding: 7px 12px !important; }
  .navlink { padding: 7px 9px; font-size: 14px; }

  /* hero: floating badges tucked inside the card edge */
  div[style*="animation:floaty"] { top: -16px !important; left: 6px !important; }
  div[style*="animation:drift"]  { bottom: -16px !important; right: 6px !important; }

  /* hero stats row wraps instead of overflowing */
  div[style*="gap:36px"] { flex-wrap: wrap; gap: 20px 28px !important; }

  /* dark "How we work" panel: desktop padding is too wide for phones */
  div[style*="padding:64px 56px"] { padding: 36px 24px !important; }

  /* footer: tighter columns */
  footer [style*="gap:48px"] { gap: 32px !important; }

  /* chat panel hugs the small screen */
  #sx-chat { right: 12px; bottom: 90px; height: 520px; }
  #sx-fab { bottom: 18px; right: 16px; }
}