/* ══════════════════════════════════════════════════════════════════════
   SmartMindsWorld — site stylesheet
   Blueprint / industrial design system. Barlow + Barlow Condensed.
   Shared by index.html and portfolio.html.
   ══════════════════════════════════════════════════════════════════════ */

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

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-400: #94bce3;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
}

p { margin: 0 0 10px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent-900); color: #f2f2f3;
  padding: 10px 16px; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── blueprint frame ───────────────────────────────────────────────── */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.blueprint.on-dark { border-color: color-mix(in srgb, #f2f2f3 22%, transparent); }
.blueprint.on-dark > .corner { color: color-mix(in srgb, #f2f2f3 60%, transparent); }

/* ── buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid var(--color-divider); border-radius: 0;
  padding: 10px 20px; min-height: 44px;
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-on-dark { background: var(--color-accent-400); color: var(--color-accent-900); border-color: var(--color-accent-400); }
.btn-on-dark:hover { background: #b5d9fd; border-color: #b5d9fd; }
.btn-on-dark-ghost { background: transparent; color: #f2f2f3; border-color: var(--color-accent-400); }
.btn-on-dark-ghost:hover { background: color-mix(in srgb, #f2f2f3 10%, transparent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── tags ──────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 0;
}
.tag-outline { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); }
.tag-solid { background: var(--color-accent-800); color: #f2f2f3; }
.tag-quiet { background: var(--color-neutral-100); color: var(--color-neutral-800); border: 1px solid var(--color-divider); }

/* ── type helpers ──────────────────────────────────────────────────── */
.kicker {
  display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent-700); margin-bottom: 12px;
}
.kicker-dark { color: var(--color-accent-400); }
.rule { height: 1px; border: 0; margin: 0 0 clamp(28px, 4vw, 44px); background: var(--color-divider); }
.h-display {
  font-size: clamp(46px, 7vw, 92px); line-height: 1.03; letter-spacing: 0.01em;
  text-transform: uppercase; margin-left: -0.03em;
}
.h-section {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: 0.02em; text-transform: uppercase;
}
.h-card { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; }
.h-small { font-size: 21px; line-height: 1.12; letter-spacing: 0.02em; text-transform: uppercase; }
.lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; max-width: 62ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.body-text { font-size: 15px; line-height: 1.62; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.muted { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.mono-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-700); }

section { padding: clamp(40px, 6vw, 80px) 0; }

/* ── nav ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 14px clamp(20px, 5vw, 72px);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}
.brand { display: flex; flex-direction: column; line-height: 1; margin-right: auto; text-decoration: none; }
.brand-word {
  font-family: var(--font-heading); font-weight: 600; font-size: 24px;
  letter-spacing: -0.01em; color: var(--color-text);
}
.brand-word em { font-style: normal; color: var(--color-accent); }
.brand-sub {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: 4px;
}
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--color-text); text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav-links a:hover { color: var(--color-accent); }
.nav-links a[aria-current="page"] { color: var(--color-accent-700); font-weight: 700; }

/* ── spec plate ────────────────────────────────────────────────────── */
.plate-head { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--color-divider); }
.plate-head span {
  padding: 12px 20px; font-size: 13px; line-height: 1.6;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.plate-head span:first-child { flex: 1; min-width: 16ch; }
.plate-head span + span { border-left: 1px solid var(--color-divider); white-space: nowrap; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.plate-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.plate-cell { padding: 24px 20px; border-right: 1px solid color-mix(in srgb, #1d1f20 10%, transparent); }
.plate-cell:last-child { border-right: 0; }
.plate-num { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-accent-700); margin-bottom: 10px; }
.plate-big {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1; letter-spacing: 0.01em;
}
.plate-big em { font-style: normal; color: var(--color-accent); }
.plate-note { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin-top: 10px; }
.plate-foot {
  margin: 0; padding: 12px 20px; border-top: 1px solid var(--color-divider);
  font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ── grids ─────────────────────────────────────────────────────────── */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(22px, 3vw, 44px); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.stack { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 52px); }

/* ── portfolio company card ────────────────────────────────────────── */
.co { padding: 0; }
.co-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 18px clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--color-divider);
}
.co-ref { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-700); margin-right: auto; }
.co-body { padding: clamp(22px, 2.6vw, 36px) clamp(20px, 2.4vw, 32px); }
.co-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, #1d1f20 9%, transparent); font-size: 14px; }
.spec-list li:last-child { border-bottom: 0; }
.spec-list dt, .spec-k { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: color-mix(in srgb, var(--color-text) 58%, transparent); flex: none; }
.spec-v { text-align: right; font-weight: 500; }
.arrow-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.arrow-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.arrow-list li::before { content: "→"; color: var(--color-accent); font-weight: 700; flex: none; }
.co-foot {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 16px clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--color-divider);
  background: color-mix(in srgb, #1d1f20 3%, transparent);
}

/* ── table ─────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.table caption { text-align: left; font-size: 13px; padding: 14px 16px; border-bottom: 1px solid var(--color-divider); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: 12px 16px; border-bottom: 1px solid var(--color-divider);
}
.table td { padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, #1d1f20 8%, transparent); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, #1d1f20 4%, transparent); }
.table td a { color: var(--color-accent-700); font-weight: 600; text-decoration: none; }
.table td a:hover { text-decoration: underline; }

/* ── steps ─────────────────────────────────────────────────────────── */
.step { padding: 24px; }
.step-num { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1; color: var(--color-accent); margin-bottom: 14px; }

/* ── dark field ────────────────────────────────────────────────────── */
.dark-field { background: var(--color-accent-900); color: #f2f2f3; }
.dark-field .brand-word { color: #f2f2f3; }
.dark-field .brand-word em { color: var(--color-accent-400); }
.dark-field .brand-sub { color: color-mix(in srgb, #f2f2f3 65%, transparent); }
.dark-field .body-text, .dark-field .lead { color: color-mix(in srgb, #f2f2f3 82%, transparent); }
.dark-field .muted { color: color-mix(in srgb, #f2f2f3 58%, transparent); }
.dark-field a { color: #f2f2f3; }

/* ── forms ─────────────────────────────────────────────────────────── */
.form { max-width: 640px; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; color: color-mix(in srgb, #f2f2f3 72%, transparent); }
.inp {
  width: 100%; min-height: 44px; padding: 9px 14px; font: inherit; font-size: 15px;
  color: #f2f2f3; background: color-mix(in srgb, #f2f2f3 8%, transparent);
  border: 1px solid color-mix(in srgb, #f2f2f3 28%, transparent); border-radius: 0;
}
select.inp { background: var(--color-accent-900); }
textarea.inp { resize: vertical; min-height: 96px; }
.inp::placeholder { color: color-mix(in srgb, #f2f2f3 50%, transparent); }
.inp:focus-visible { border-color: var(--color-accent-400); outline-offset: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, #f2f2f3 82%, transparent); }
.check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--color-accent-400); }
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; line-height: 1.55; color: color-mix(in srgb, #f2f2f3 64%, transparent); }
.form-msg { font-size: 15px; margin: 0; }
.form-msg.ok { color: var(--color-accent-400); }
.form-msg.err { color: #e9a3a3; }

/* ── disclaimer ────────────────────────────────────────────────────── */
.disclaimer { padding: clamp(22px, 2.6vw, 32px); }
.disclaimer h2 { font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.disclaimer p { font-size: 13px; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 72%, transparent); max-width: 92ch; }
.disclaimer p:last-child { margin-bottom: 0; }

/* ── footer ────────────────────────────────────────────────────────── */
.footer-links {
  display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 48px; padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, #f2f2f3 18%, transparent); font-size: 14px;
}
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--color-accent-400); }
.footer-copy { margin-left: auto; color: color-mix(in srgb, #f2f2f3 55%, transparent); }

/* ── details / FAQ ─────────────────────────────────────────────────── */
.qa { padding: 0; }
.qa > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--color-accent); flex: none; }
.qa[open] > summary::after { content: "–"; }
.qa > p { margin: 0; padding: 0 22px 20px; font-size: 15px; line-height: 1.62; color: color-mix(in srgb, var(--color-text) 80%, transparent); max-width: 68ch; }

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .co-split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
}
@media (max-width: 680px) {
  .plate-grid { grid-template-columns: 1fr 1fr; }
  .plate-cell:nth-child(2) { border-right: 0; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .plate-grid { grid-template-columns: 1fr; }
  .plate-cell { border-right: 0; border-bottom: 1px solid color-mix(in srgb, #1d1f20 10%, transparent); }
}
@media print {
  .nav, .form, .skip-link { display: none !important; }
  body { background: #fff; }
}