@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg:#f3f5f9;
  --bg-deep:#0e1527;
  --bg-deep-2:#151e38;
  --ink:#10172a;
  --muted:#5c6579;
  --muted-on-dark: rgba(243,245,249,0.68);
  --blue:#2451ff;
  --blue-deep:#1636c4;
  --pink:#e8396b;
  --line: rgba(16,23,42,0.12);
  --line-dark: rgba(243,245,249,0.16);
  --maxw: 1180px;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html{ scroll-padding-top: env(safe-area-inset-top, 0px); }
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family:"IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
h1,h2,h3{ font-family:"Sora", -apple-system, sans-serif; font-weight:600; margin:0; letter-spacing:-0.01em; }

/* ---------- NAV ---------- */
header.site{
  position: sticky; top:0; z-index:40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(243,245,249,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px; max-width:var(--maxw); margin:0 auto;
}
.wordmark{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.wordmark img{ height:44px; width:auto; }
nav.links{ display:flex; gap:26px; font-size:.92rem; }
nav.links a{ text-decoration:none; color: var(--muted); padding-bottom:3px; border-bottom:2px solid transparent; transition: color .15s, border-color .15s; }
nav.links a:hover, nav.links a:focus-visible, nav.links a.active{ color: var(--ink); border-color: var(--blue); }
.menu-btn{ display:none; background:none; border:1px solid var(--line); color:var(--ink); width:40px; height:40px; border-radius:6px; font-size:1.1rem; }

/* ---------- PAGE HEADER (non-home pages) ---------- */
.page-head{ background: var(--bg-deep); color:#fff; padding: 64px 0 56px; }
.page-head .eyebrow{ color: var(--pink); font-size:.92rem; margin-bottom:10px; }
.page-head h1{ font-size: clamp(1.9rem, 4vw, 2.8rem); color:#fff; }
.page-head p{ margin-top:14px; max-width:60ch; color: var(--muted-on-dark); font-size:1.05rem; }

/* ---------- HERO (home) ---------- */
.hero{ padding: 84px 0 72px; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:52px; align-items:center; }
.eyebrow{ color: var(--blue); font-weight:600; font-size:.92rem; margin-bottom:16px; }
h1.display{ font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height:1.08; max-width:17ch; }
h1.display .accent{ color: var(--blue); }
.hero p.sub{ margin-top:22px; font-size:1.08rem; color: var(--muted); max-width:52ch; }
.hero-cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:13px 26px; border-radius:8px; text-decoration:none;
  font-size:.95rem; font-weight:600; border:1px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn.primary{ background:var(--blue); color:#fff; }
.btn.primary:hover{ background:var(--blue-deep); }
.btn.ghost{ border-color: var(--line); color:var(--ink); }
.btn.ghost:hover{ border-color: var(--blue); color:var(--blue); }
.hero-photo{ border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(16,23,42,0.35); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }

/* ---------- STATS BAND ---------- */
.stats-band{ background: var(--bg-deep); color:#fff; padding: 56px 0; }
.stats-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; }
.stat{ border-left: 2px solid var(--pink); padding-left:18px; }
.stat .big{ font-family:"Sora", sans-serif; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight:700; }
.stat .lbl{ margin-top:6px; color: var(--muted-on-dark); font-size:.95rem; max-width:26ch; }

/* ---------- BRAND STRIP ---------- */
.brand-strip{ padding: 78px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:38px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.section-head a.more{ text-decoration:none; color:var(--blue); font-size:.92rem; font-weight:600; }
.logo-row{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:1px;
  background: var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.logo-cell{
  background:#fff; padding: 30px 20px; display:flex; align-items:center; justify-content:center; min-height:110px;
  transition: background .15s;
}
.logo-cell:hover{ background: #f7f9ff; }
.logo-cell img{ max-height:34px; width:auto; }

/* ---------- OFFICE / CTA ---------- */
.office{ padding: 80px 0 96px; }
.office-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:48px; align-items:center; }
.office img{ border-radius:14px; border:1px solid var(--line); }
.office h2{ font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom:16px; }
.office p{ color: var(--muted); max-width:52ch; }
.office .btn{ margin-top:24px; }

/* ---------- CARDS (websites page) ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:22px; }
.proj-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px 26px;
  display:flex; flex-direction:column; gap:14px;
}
.proj-card .logo-wrap{ height:32px; display:flex; align-items:center; }
.proj-card .logo-wrap img{ max-height:28px; width:auto; }
.proj-card p{ color: var(--muted); font-size:.95rem; flex-grow:1; }
.proj-card a.visit{ text-decoration:none; color:var(--blue); font-weight:600; font-size:.92rem; }
.proj-card a.visit:hover{ color: var(--blue-deep); }

.partner-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.partner-chip{
  border:1px solid var(--line); padding: 14px 22px; border-radius:8px; text-decoration:none;
  color: var(--ink); font-weight:600; font-size:.98rem; background:#fff;
  transition: border-color .15s, color .15s;
}
.partner-chip:hover{ border-color: var(--blue); color: var(--blue); }

/* ---------- PLAIN CONTENT (magazines / payments) ---------- */
.content{ padding: 72px 0 96px; }
.content .lede{ font-size:1.15rem; color: var(--ink); max-width: 66ch; margin-bottom:28px; }
.content p{ color: var(--muted); max-width: 66ch; margin: 0 0 18px; }
.content h2{ font-size:1.4rem; margin: 40px 0 14px; }
.content ul{ color: var(--muted); max-width:62ch; padding-left:20px; }
.content ul li{ margin-bottom:8px; }

/* ---------- CONTACT ---------- */
.contact{ padding: 72px 0 96px; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; }
.contact-list{ list-style:none; margin:0 0 28px; padding:0; }
.contact-list li{ padding:14px 0; border-bottom:1px solid var(--line); display:flex; gap:16px; }
.contact-list li span.k{ color: var(--blue); min-width:84px; font-weight:600; }
.mapbox{ border-radius:14px; overflow:hidden; border:1px solid var(--line); min-height:320px; }
.mapbox iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }

form.contact-form{ display:flex; flex-direction:column; gap:14px; }
form.contact-form label{ font-size:.88rem; color: var(--muted); font-weight:600; }
form.contact-form input, form.contact-form textarea{
  font-family:"IBM Plex Sans", sans-serif; font-size:.98rem; padding:12px 14px;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
form.contact-form textarea{ min-height:120px; resize:vertical; }
form.contact-form button{ align-self:flex-start; }

/* ---------- FOOTER ---------- */
footer.site{ background: var(--bg-deep-2); color:#fff; padding: 56px 0 30px; }
.foot-grid{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:40px; }
.foot-grid p{ color: var(--muted-on-dark); font-size:.92rem; margin-top:12px; max-width:34ch; }
.foot-col h3{ font-size:.92rem; color: var(--muted-on-dark); font-weight:600; margin-bottom:14px; }
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin-bottom:10px; }
.foot-col a{ text-decoration:none; color: #fff; font-size:.92rem; opacity:.9; }
.foot-col a:hover{ color: var(--pink); opacity:1; }
.foot-bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.85rem; color: var(--muted-on-dark);
}

@media (max-width: 900px){
  .wordmark img{ height:36px; }
  .hero-grid, .office-grid, .contact-grid, .foot-grid{ grid-template-columns:1fr; }
  .stats-row{ grid-template-columns:1fr; }
  nav.links{ display:none; }
  .menu-btn{ display:block; }
}