/* ============================================================
   MESINJA.NET · site stylesheet
   Built on the Mesinja Design System (see project tokens/)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Serif:ital,wght@0,400;1,400;1,500&display=swap');

:root {
  --red-050:#FCE9E9; --red-100:#F7C9C9; --red-500:#E00000; --red-600:#BE0000; --red-700:#970000;
  --n-0:#FFFFFF; --n-25:#FBFBFA; --n-50:#F5F5F4; --n-100:#ECECEA; --n-200:#DEDEDB;
  --n-300:#C8C8C4; --n-400:#A2A29D; --n-500:#757571; --n-600:#545451; --n-700:#3A3A38;
  --n-800:#303030; --n-850:#232323; --n-900:#171717;
  --font-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'IBM Plex Serif',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --container:1200px; --prose:62ch;
  --dur-fast:120ms; --dur-base:200ms; --ease:cubic-bezier(0.2,0,0.1,1);
  --shadow-xs:0 1px 2px rgba(23,23,23,0.05);
  --shadow-md:0 4px 12px rgba(23,23,23,0.08),0 1px 3px rgba(23,23,23,0.05);
  --focus-ring:0 0 0 3px rgba(224,0,0,0.28);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--n-0); color:var(--n-700);
  font-family:var(--font-sans); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }

a { color:var(--red-600); text-decoration:none; transition:color var(--dur-fast) var(--ease); }
a:hover { color:var(--red-700); text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:3px; }

h1,h2,h3,h4 { font-family:var(--font-sans); color:var(--n-800); letter-spacing:-0.01em; line-height:1.15; text-wrap:pretty; }
strong { color:var(--n-800); }

.container { max-width:var(--container); margin:0 auto; padding:0 32px; }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--n-200);
}
.site-header .container { display:flex; align-items:center; gap:28px; height:72px; }
.brand { display:flex; align-items:center; flex:0 0 auto; }
.brand img { height:34px; width:auto; }
.nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav > a, .nav-dd > button {
  font-size:0.9375rem; font-weight:500; color:var(--n-700); padding:8px 12px;
  border-radius:5px; background:none; border:none; font-family:var(--font-sans);
  cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.nav > a:hover, .nav-dd > button:hover { color:var(--n-900); background:var(--n-50); text-decoration:none; }
.nav > a[aria-current="page"] { color:var(--red-600); }
.nav-dd { position:relative; }
.nav-dd .caret { font-family:var(--font-mono); font-size:0.625rem; color:var(--n-400); transition:transform var(--dur-fast) var(--ease); }
.nav-dd.open .caret { transform:rotate(180deg); }
.dd-menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:300px;
  background:var(--n-0); border:1px solid var(--n-200); border-radius:8px;
  box-shadow:var(--shadow-md); padding:6px; display:none;
}
.nav-dd.open .dd-menu { display:block; }
.dd-menu a { display:block; padding:9px 12px; border-radius:5px; color:var(--n-700); font-size:0.9375rem; font-weight:500; }
.dd-menu a:hover { background:var(--n-50); color:var(--n-900); text-decoration:none; }
.dd-menu a span { display:block; font-size:0.8125rem; font-weight:400; color:var(--n-500); margin-top:1px; }
.nav-cta {
  margin-left:8px; background:var(--red-500); color:#fff !important; font-weight:600;
  padding:9px 18px !important; border-radius:6px;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-cta:hover { background:var(--red-600) !important; color:#fff !important; text-decoration:none !important; }
.nav-cta:active { background:var(--red-700) !important; transform:translateY(1px); }
.menu-btn { display:none; margin-left:auto; background:none; border:1px solid var(--n-200); border-radius:6px; padding:8px 12px; font-family:var(--font-mono); font-size:0.8125rem; letter-spacing:0.08em; color:var(--n-700); cursor:pointer; }
@media (max-width: 980px) {
  .nav {
    display:none; position:absolute; top:72px; left:0; right:0; background:var(--n-0);
    border-bottom:1px solid var(--n-200); flex-direction:column; align-items:stretch; padding:12px 24px 20px; gap:2px;
    box-shadow:var(--shadow-md);
  }
  .nav.open { display:flex; }
  .menu-btn { display:block; }
  .nav-dd .dd-menu { position:static; display:block; border:none; box-shadow:none; padding:0 0 0 14px; min-width:0; }
  .nav-dd > button { width:100%; }
  .nav-cta { margin:10px 0 0; text-align:center; }
}

/* ---------- Kicker ---------- */
.kicker {
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--n-500);
}
.kicker::before { content:""; width:28px; height:3px; background:var(--red-500); }
.on-ink .kicker { color:var(--n-300); }

/* ---------- Page hero ---------- */
.page-hero { position:relative; background:var(--n-50); border-bottom:1px solid var(--n-200); overflow:hidden; }
.page-hero .container { position:relative; padding-top:72px; padding-bottom:64px; }
.page-hero h1 { font-size:clamp(2.1rem, 4.2vw, 3rem); font-weight:600; margin:18px 0 0; max-width:22ch; }
.page-hero .lede { font-size:1.375rem; line-height:1.5; color:var(--n-600); max-width:58ch; margin:20px 0 0; }
.digitstream {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; user-select:none;
  font-family:var(--font-mono); font-size:13px; line-height:2.1; letter-spacing:0.42em;
  color:rgba(48,48,48,0.10); white-space:pre; z-index:0;
  -webkit-mask-image:linear-gradient(to left, black 0%, black 34%, transparent 72%);
          mask-image:linear-gradient(to left, black 0%, black 34%, transparent 72%);
}
.digitstream b { font-weight:400; color:rgba(224,0,0,0.38); }
.on-ink .digitstream { color:rgba(255,255,255,0.09); }
.on-ink .digitstream b { color:rgba(224,0,0,0.5); }
.page-hero .container, .hero-home .container { z-index:1; }

/* ---------- Sections ---------- */
.section { padding:96px 0; }
.section.paper { background:var(--n-50); border-top:1px solid var(--n-200); border-bottom:1px solid var(--n-200); }
.section.ink { background:var(--n-900); color:var(--n-300); }
.section.ink h2, .section.ink h3 { color:#fff; }
.section.ink strong { color:#fff; }
.section h2 { font-size:2.25rem; font-weight:600; margin:18px 0 0; }
.section-lede { font-size:1.25rem; color:var(--n-600); max-width:62ch; margin:16px 0 0; }
.section.ink .section-lede { color:var(--n-300); }

/* ---------- Prose (article body) ---------- */
.prose { max-width:70ch; }
.prose > * { max-width:62ch; }
.prose h2 { font-size:1.875rem; font-weight:600; margin:64px 0 16px; padding-top:28px; border-top:1px solid var(--n-200); }
.prose h2:first-child { margin-top:0; padding-top:0; border-top:none; }
.prose h3 { font-size:1.3125rem; font-weight:600; margin:40px 0 10px; }
.prose p { margin:0 0 20px; }
.prose ul, .prose ol { padding-left:26px; margin:0 0 20px; }
.prose li { margin:0 0 10px; }
.prose li p { margin:0 0 8px; }
.prose ul li::marker { color:var(--red-500); }
.prose ol { counter-reset:item; }
.prose blockquote { margin:28px 0; padding:18px 24px; border-left:3px solid var(--red-500); background:var(--n-50); font-style:italic; }
.prose .ext { font-family:var(--font-mono); font-size:0.75em; vertical-align:super; margin-left:2px; }
.prose em { font-style:italic; }
.meta-updated { font-family:var(--font-mono); font-size:0.8125rem; letter-spacing:0.02em; color:var(--n-500); margin:0 0 36px; }

/* ---------- Article layout ---------- */
.article-body { padding:72px 0 96px; }
.article-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:72px; align-items:start; }
.article-aside { position:sticky; top:104px; border-left:1px solid var(--n-200); padding-left:24px; display:flex; flex-direction:column; gap:10px; }
.article-aside .aside-label { font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--n-400); margin-bottom:4px; }
.article-aside a { color:var(--n-600); font-size:0.9375rem; line-height:1.4; }
.article-aside a:hover { color:var(--red-600); }
@media (max-width: 980px) { .article-grid { grid-template-columns:1fr; } .article-aside { display:none; } }

/* ---------- Cards ---------- */
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:56px; }
@media (max-width: 980px) { .card-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns:1fr; } }
.usecase-card {
  position:relative; display:flex; flex-direction:column; gap:14px;
  background:var(--n-0); border:1px solid var(--n-200); border-radius:8px;
  padding:28px 26px 24px; color:inherit; overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.usecase-card::before {
  content:""; position:absolute; top:0; left:0; height:3px; width:0; background:var(--red-500);
  transition:width var(--dur-base) var(--ease);
}
.usecase-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none; color:inherit; }
.usecase-card:hover::before { width:100%; }
.usecase-card .tile {
  width:46px; height:46px; border-radius:6px; background:var(--n-50); border:1px solid var(--n-200);
  display:flex; align-items:center; justify-content:center; color:var(--n-800);
}
.usecase-card .tile svg { width:22px; height:22px; }
.usecase-card h3 { font-size:1.1875rem; font-weight:600; margin:0; }
.usecase-card p { margin:0; font-size:0.9375rem; color:var(--n-600); flex:1; }
.usecase-card .go { font-size:0.9375rem; font-weight:600; color:var(--red-600); }
.usecase-card .go i { font-style:normal; display:inline-block; transition:transform var(--dur-fast) var(--ease); }
.usecase-card:hover .go i { transform:translateX(3px); }

/* ---------- Callout ---------- */
.callout {
  border:1px solid var(--n-200); border-left:3px solid var(--red-500); border-radius:0 8px 8px 0;
  background:var(--n-0); padding:22px 26px; max-width:70ch; margin:36px 0 0;
}
.callout .callout-label { font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--n-500); margin:0 0 8px; }
.callout p { margin:0 0 12px; font-size:0.9375rem; }
.callout p:last-child { margin-bottom:0; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-sans);
  font-size:1rem; font-weight:600; border-radius:6px; padding:13px 26px; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  border:1px solid transparent;
}
.btn i { font-style:normal; transition:transform var(--dur-fast) var(--ease); }
.btn:hover i { transform:translateX(3px); }
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--red-500); color:#fff; }
.btn-primary:hover { background:var(--red-600); color:#fff; }
.btn-primary:active { background:var(--red-700); }
.btn-secondary { background:var(--n-0); color:var(--n-800); border-color:var(--n-300); }
.btn-secondary:hover { border-color:var(--n-500); background:var(--n-25); color:var(--n-900); }
.btn-ghost-inverse { background:transparent; color:#fff; border-color:var(--n-600); }
.btn-ghost-inverse:hover { border-color:var(--n-400); color:#fff; background:rgba(255,255,255,0.06); }

/* ---------- Read-more link rows ---------- */
.readmore { display:flex; flex-direction:column; gap:12px; margin-top:32px; }
.readmore a {
  display:flex; align-items:baseline; gap:10px; font-weight:600; color:var(--n-800);
  border:1px solid var(--n-200); border-radius:8px; padding:16px 22px; background:var(--n-0);
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  max-width:70ch;
}
.readmore a:hover { text-decoration:none; border-color:var(--n-400); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.readmore a .arrow { color:var(--red-500); font-family:var(--font-mono); }
.readmore a span.kind { font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--n-500); margin-left:auto; }

/* ---------- Feature list (Why choose) ---------- */
.feature-list { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--n-200); border:1px solid var(--n-200); border-radius:8px; overflow:hidden; margin-top:56px; }
@media (max-width: 980px) { .feature-list { grid-template-columns:1fr 1fr; } }
@media (max-width: 640px) { .feature-list { grid-template-columns:1fr; } }
.feature-list .feature { background:var(--n-0); padding:26px 22px; }
.feature-list .feature .idx { font-family:var(--font-mono); font-size:0.75rem; color:var(--red-600); display:block; margin-bottom:14px; }
.feature-list .feature h3 { margin:0 0 6px; font-size:1.0625rem; font-weight:600; }
.feature-list .feature p { margin:0; font-size:0.875rem; color:var(--n-600); line-height:1.5; }

/* ---------- Contact / CTA band ---------- */
.cta-band { background:var(--n-900); color:var(--n-300); position:relative; overflow:hidden; }
.cta-band .container { position:relative; padding-top:88px; padding-bottom:88px; z-index:1; }
.cta-band h2 { color:#fff; font-size:2.25rem; margin:18px 0 0; }
.cta-band p { max-width:62ch; }
.cta-band .actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }

/* ---------- Embeds ---------- */
.embed-frame { border:1px solid var(--n-200); border-radius:8px; background:var(--n-0); padding:8px 20px; max-width:720px; box-shadow:var(--shadow-xs); }
.embed-frame iframe { width:100%; border:none; }

/* ---------- Footer ---------- */
.site-footer { background:var(--n-900); color:var(--n-400); }
.site-footer a { color:var(--n-300); }
.site-footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px; padding:72px 0 56px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns:1fr; } }
.footer-brand img { height:30px; margin-bottom:18px; }
.footer-brand p { font-size:0.9375rem; max-width:34ch; margin:0; line-height:1.55; }
.footer-col h4 { font-family:var(--font-mono); font-size:0.6875rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--n-500); margin:0 0 16px; }
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:0.9375rem; }
.footer-legal { border-top:1px solid var(--n-800); padding:22px 0; display:flex; align-items:center; gap:24px; flex-wrap:wrap; font-size:0.8125rem; }
.footer-legal .copy { font-family:var(--font-mono); letter-spacing:0.02em; color:var(--n-500); margin-left:auto; }
@media (max-width: 640px) { .footer-legal .copy { margin-left:0; } }

/* ---------- Home hero ---------- */
.hero-home { position:relative; background:var(--n-0); border-bottom:1px solid var(--n-200); overflow:hidden; }
.hero-home .container { position:relative; padding-top:110px; padding-bottom:100px; }
.hero-home h1 { font-size:clamp(2.6rem, 5.4vw, 4.25rem); font-weight:600; letter-spacing:-0.02em; line-height:1.05; margin:26px 0 0; max-width:15ch; }
.hero-home h1 em { font-style:normal; color:var(--red-500); }
.hero-home .lede { font-size:1.375rem; line-height:1.55; color:var(--n-600); max-width:56ch; margin:28px 0 0; }
.hero-home .actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; }

@media (max-width: 640px) {
  .container { padding:0 22px; }
  .section { padding:64px 0; }
  .page-hero .container { padding-top:48px; padding-bottom:44px; }
  .hero-home .container { padding-top:64px; padding-bottom:60px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}