/* ============================================================
   SoftAims Plus — keep-subset site
   Aesthetic: refined modern-tech. Warm paper canvas, near-black
   ink, one confident cobalt accent, dramatic dark hero/footer
   bands. Distinctive type: Bricolage Grotesque display, Hanken
   Grotesk body, JetBrains Mono for the per-domain wordmark.
   ============================================================ */

:root {
  --paper:#f5f4f0;
  --paper-2:#efeee9;
  --ink:#14161b;
  --ink-2:#3a3f4a;
  --muted:#6a707c;
  --line:#e0ded6;
  --line-2:#d5d3ca;
  --accent:#2b3aff;
  --accent-ink:#1d29c9;
  --accent-lt:#97a6ff;
  --night:#0d0e12;
  --night-2:#15171d;
  --on-night:#ecebe6;
  --on-night-muted:#9a9fab;
  --on-night-line:#262932;
  --maxw:1120px;
  --r:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(20,22,27,.04), 0 8px 30px -12px rgba(20,22,27,.14);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html, body { margin:0; }
body {
  font-family:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:17px; line-height:1.62; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { color:var(--accent); }

h1, h2, h3 { font-family:"Bricolage Grotesque", "Hanken Grotesk", sans-serif; font-weight:700; letter-spacing:-.02em; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.band { width:100%; }
.band-dark { background:var(--night); color:var(--on-night); }
.band-soft { background:var(--paper-2); }

.eyebrow {
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.band-dark .eyebrow { color:var(--accent-lt); }

/* ---------- Nav ---------- */
.nav {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 28px; background:rgba(245,244,240,.82); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line); max-width:none;
}
.brand {
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:16px; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); display:inline-flex; align-items:baseline; gap:1px;
}
.brand:hover { color:var(--ink); }
.brand .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:9px; align-self:center; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { color:var(--ink-2); font-size:15px; font-weight:500; }
.nav-links a:hover { color:var(--ink); }
.nav-cta {
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:13px; font-weight:600;
  padding:9px 15px; border:1px solid var(--line-2); border-radius:10px; color:var(--ink) !important;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.nav-cta:hover { border-color:var(--accent); background:#fff; }
.nav-cta .sm { display:none; }
@media (max-width:860px){
  .nav-links .hide-sm { display:none; }
  .nav-cta .lg { display:none; }
  .nav-cta .sm { display:inline; }
}

/* ---------- Hero ---------- */
.hero { padding:104px 0 96px; position:relative; overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 90% at 82% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, #101219, var(--night) 70%);
  z-index:0;
}
.hero .wrap { position:relative; z-index:1; }
.hero h1 {
  font-size:clamp(40px, 6.4vw, 74px); line-height:1.02; letter-spacing:-.035em;
  margin:0 0 22px; max-width:16ch;
}
.hero h1 .u { color:var(--accent-lt); }
.hero .lede { font-size:clamp(18px,2.1vw,21px); color:var(--on-night-muted); max-width:56ch; margin:0 0 34px; }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn {
  display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600;
  padding:13px 22px; border-radius:12px; transition:transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary { background:var(--accent); color:#fff !important; box-shadow:0 10px 30px -10px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn-primary:hover { background:color-mix(in srgb, var(--accent) 88%, #ffffff); transform:translateY(-1px); }
.btn-ghost { color:var(--on-night) !important; border:1px solid var(--on-night-line); }
.btn-ghost:hover { border-color:#4a4f5c; background:rgba(255,255,255,.04); }
.btn .arw { transition:transform .2s var(--ease); }
.btn:hover .arw { transform:translateX(3px); }

.trust { display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:52px; padding-top:30px; border-top:1px solid var(--on-night-line); }
.trust .item { display:flex; flex-direction:column; }
.trust b { font-family:"Bricolage Grotesque",sans-serif; font-size:26px; color:var(--on-night); letter-spacing:-.02em; line-height:1; }
.trust span { font-size:13px; color:var(--on-night-muted); margin-top:6px; }

/* ---------- Section scaffolding ---------- */
.section { padding:92px 0; }
.section-head { max-width:60ch; margin:0 0 46px; }
.section-head h2 { font-size:clamp(26px,3.4vw,38px); line-height:1.1; margin:0 0 12px; }
.section-head p { color:var(--muted); font-size:18px; margin:0; }

/* ---------- Service cards ---------- */
.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(258px,1fr)); }
.card {
  position:relative; background:#fbfaf7; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px 24px; transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.card .idx { font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--accent); font-weight:600; }
.card h3 { font-size:19px; margin:14px 0 8px; letter-spacing:-.01em; }
.card p { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }

/* ---------- Process / approach ---------- */
.steps { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.step { background:var(--paper); padding:26px 22px; }
.step .n { font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.1em; }
.step h3 { font-size:17px; margin:12px 0 6px; }
.step p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }

/* ---------- Tags ---------- */
.tags { display:flex; flex-wrap:wrap; gap:10px; }
.tag {
  border:1px solid var(--line-2); border-radius:999px; padding:9px 18px; font-size:14px; font-weight:500;
  color:var(--ink-2); background:#fbfaf7; transition:border-color .2s var(--ease), color .2s var(--ease);
}
.tag:hover { border-color:var(--accent); color:var(--accent-ink); }

/* ---------- CTA band ---------- */
.cta-band { padding:84px 0; text-align:center; }
.cta-band h2 { font-size:clamp(28px,4vw,44px); margin:0 0 14px; letter-spacing:-.03em; }
.cta-band p { color:var(--on-night-muted); font-size:18px; margin:0 auto 30px; max-width:48ch; }

/* ---------- Footer ---------- */
.foot { padding:56px 0 46px; }
.foot .grid { display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start; }
.foot .brand { color:var(--on-night); }
.foot .ident { color:var(--on-night-muted); font-size:14px; margin-top:16px; max-width:46ch; line-height:1.6; }
.foot-links { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
.foot-links a { color:var(--on-night-muted); font-size:14px; font-weight:500; }
.foot-links a:hover { color:var(--on-night); }
.foot-links .mail { font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--accent-lt); }
.foot-links .mail:hover { color:color-mix(in srgb, var(--accent-lt), #ffffff 25%); }

/* ---------- Prose (policy pages) ---------- */
.page-head { padding:66px 0 30px; }
.page-head h1 { font-size:clamp(32px,4.6vw,48px); letter-spacing:-.03em; margin:0 0 10px; }
.page-head .eff { color:var(--muted); font-size:14px; margin:0; font-family:"JetBrains Mono",monospace; letter-spacing:.02em; }
.prose { padding:8px 0 88px; }
.prose > * { max-width:72ch; }
.prose h2 { font-size:22px; margin:38px 0 10px; letter-spacing:-.01em; }
.prose p, .prose li { color:var(--ink-2); font-size:16.5px; }
.prose ul { padding-left:22px; }
.prose li { margin:6px 0; }
.prose strong { color:var(--ink); }
.prose code { font-family:"JetBrains Mono",monospace; background:var(--paper-2); padding:2px 6px; border-radius:6px; font-size:.85em; }
.prose a { border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.prose a:hover { border-color:var(--accent); }

/* ---------- Load animation ---------- */
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.rise { opacity:0; animation:rise .8s var(--ease) forwards; }
.d1 { animation-delay:.05s; } .d2 { animation-delay:.15s; } .d3 { animation-delay:.27s; } .d4 { animation-delay:.4s; }

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

@media (max-width:600px){
  body { font-size:16px; }
  .wrap { padding:0 20px; }
  .nav { padding:14px 20px; }
  .section { padding:60px 0; }
  .section-head { margin-bottom:34px; }
  .hero { padding:72px 0 64px; }
  .trust { gap:18px 30px; margin-top:40px; }
  .cta-band { padding:64px 0; }
}