/* ===== THEME TOKENS: edit colors / fonts here =====
   Everything else reads these variables. Software = dark, Product = warm paper, Neutral = Home/Contact default. */
:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --software-accent:#5eead4; --software-on:#04201c; --product-accent:#9a3412; --product-on:#fff;
  --slab: Rockwell, "Roboto Slab", "Courier New", Georgia, serif;
}
:root, :root[data-theme="neutral"] {
  --bg:#f4f4f1; --surface:#fff; --text:#1c1f24; --muted:#4b5563; --accent:#0f766e; --on-accent:#fff;
  --line:#d5d7d2; --head:var(--sans); --pattern:none; --pattern-size:auto;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="neutral"] { --bg:#14161a; --surface:#1c2026; --text:#eceef1; --muted:#a3acb8; --accent:#5eead4; --on-accent:#04201c; --line:#2f353d; }
}
[data-theme="software"] {
  --bg:#0d1117; --surface:#151b23; --text:#e6edf3; --muted:#a5b3c2; --accent:#5eead4; --on-accent:#04201c;
  --line:#26303c; --head:var(--mono);
  --pattern: linear-gradient(#18212b 1px, transparent 1px), linear-gradient(90deg, #18212b 1px, transparent 1px); --pattern-size:32px 32px;
}
[data-theme="product"] {
  --bg:#f6efe0; --surface:#fffaf0; --text:#2b2118; --muted:#5e4f40; --accent:#9a3412; --on-accent:#fff;
  --line:#dccfb6; --head:var(--slab);
  --pattern: linear-gradient(rgba(60,90,140,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(60,90,140,.10) 1px, transparent 1px); --pattern-size:24px 24px;
}

/* ===== base ===== */
*,*::before,*::after { box-sizing:border-box; }
html { color-scheme: light dark; scroll-behavior:smooth; }
:root[data-theme="software"] { color-scheme: dark; } :root[data-theme="product"] { color-scheme: light; }
body { margin:0; font:1.0625rem/1.65 var(--sans); background-color:var(--bg); background-image:var(--pattern); background-size:var(--pattern-size); color:var(--text); }
@media (prefers-reduced-motion: no-preference) {
  body, .site-header, .site-footer, .card, .entry, .btn, .half, input, textarea { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
h1,h2,h3 { font-family:var(--head); line-height:1.2; margin:0 0 .6em; }
h1 { font-size:clamp(1.9rem,5vw,3rem); } h2 { font-size:1.5rem; } h3 { font-size:1.1rem; margin-bottom:.3em; }
a { color:var(--accent); text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
main:focus { outline:none; }
.wrap { width:min(100% - 2rem, 68rem); margin-inline:auto; }
.section { padding-block:2.5rem; }
.hero { padding-top:3.5rem; }
.lead { font-size:1.2rem; max-width:44rem; color:var(--muted); }
.prose { max-width:42rem; }
.skip { position:absolute; left:-999px; background:var(--accent); color:var(--on-accent); padding:.6rem 1rem; z-index:20; }
.skip:focus { left:1rem; top:1rem; }

/* ===== header / footer / toggle ===== */
.site-header { position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--line); }
.site-footer { margin-top:3rem; border-top:1px solid var(--line); background:var(--bg); padding-block:1rem; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:.5rem; }
.brand { font:700 1.05rem var(--mono); color:var(--text); text-decoration:none; padding-block:.7rem; }
.site-footer .bar a { display:inline-flex; min-height:44px; align-items:center; }

/* ===== cards / grid / flow ===== */
.grid { list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); }
.card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:1rem; color:var(--text); text-decoration:none; }
a.card:hover { border-color:var(--accent); }
.card p { margin:0; color:var(--muted); }
.card h3 { color:var(--text); }
.ph { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; margin-bottom:.8rem;
  font:.85rem var(--mono); color:var(--muted); border:1px dashed var(--muted); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.flow { list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); }
.flow li { counter-increment:s; position:relative; border-left:3px solid var(--accent); padding:.2rem 0 .2rem 1rem; }
.flow li::before { content:counter(s); font:700 .85rem var(--mono); color:var(--accent); }
.flow p { margin:0; color:var(--muted); }
.entries { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:2rem; }
.entry { display:block; padding:1.5rem; border:2px solid var(--muted); border-radius:12px; background:var(--surface); color:var(--text); text-decoration:none; min-height:44px; }
.entry:hover { border-color:var(--accent); }
.entry p { color:var(--muted); }
.btn { display:inline-flex; align-items:center; min-height:44px; padding:0 1.3rem; border:0; border-radius:8px; background:var(--accent); color:var(--on-accent); font:600 1rem var(--mono); text-decoration:none; cursor:pointer; }
.btn:disabled { opacity:.6; cursor:wait; }
.next { text-align:center; }
.article img.ph, .article .ph { max-width:44rem; }

/* ===== form ===== */
.form { max-width:36rem; display:grid; gap:1.1rem; }
.field { display:grid; gap:.35rem; }
label { font:600 .95rem var(--mono); }
input, textarea { font:inherit; padding:.7rem .8rem; min-height:44px; border:2px solid var(--muted); border-radius:8px; background:var(--surface); color:var(--text); }
.validation-message { color:var(--text); font-size:.9rem; border-left:3px solid var(--accent); padding-left:.5rem; }
.invalid { border-color:var(--accent); }
.status { min-height:1.5em; margin:0; }

/* ===== home: split screen ===== */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.split { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100svh - 9rem); }
.half { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.5rem; min-height:20rem; padding:2rem clamp(1.25rem,5vw,4rem);
  color:var(--text); text-decoration:none; background-color:var(--bg); background-image:var(--pattern); background-size:var(--pattern-size); }
.half h2 { font-size:clamp(2rem,5vw,3.5rem); margin:0; }
.half p { margin:0; max-width:24rem; color:var(--muted); }
.half .go { align-self:center; margin-top:1rem; font:600 1rem var(--mono); color:var(--accent); border-bottom:2px solid transparent; }
.half:hover, .half:focus-visible { background-color:color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.half:hover .go, .half:focus-visible .go { border-bottom-color:var(--accent); }
.half:focus-visible { outline:3px solid var(--accent); outline-offset:-6px; border-radius:0; }
@media (max-width:600px) { .split { grid-template-columns:1fr; } }

/* ===== discipline switch: Software [ o ] Product ===== */
.switch { appearance:none; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-decoration:none;
  display:inline-flex; align-items:center; gap:.7rem; min-height:44px; }
.lbl { font:500 .95rem var(--mono); color:var(--muted); }
.track { position:relative; flex:none; width:3.25rem; height:1.75rem; border-radius:999px; border:2px solid var(--muted); background:var(--surface); }
.thumb { position:absolute; top:2px; left:2px; width:1.25rem; height:1.25rem; border-radius:50%; background:var(--muted);
  transition:transform .3s ease, background-color .3s ease; }
.lbl-sw, .lbl-pr { transition:color .3s ease; }
:root[data-theme="software"] .lbl-sw, :root[data-theme="product"] .lbl-pr { font-weight:700; color:var(--text); }
:root[data-theme="neutral"] .thumb { transform:translateX(calc(1rem - 4px)); }
:root[data-theme="software"] .thumb { background:var(--software-accent); }
:root[data-theme="product"] .thumb { transform:translateX(calc(2rem - 8px)); background:var(--product-accent); }
.switch:focus-visible { outline:3px solid var(--accent); outline-offset:4px; border-radius:999px; }

/* ===== header nav ===== */
.main-nav a { display:inline-flex; align-items:center; min-height:44px; font:600 .95rem var(--mono); color:var(--text); text-decoration:none; border-bottom:2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color:var(--accent); }

/* ===== counter ===== */
.counter { min-height:calc(100svh - 9rem); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; text-align:center; }
.count { margin:0; font:800 clamp(5rem,24vw,13rem)/1 var(--head); color:var(--accent); font-variant-numeric:tabular-nums;
  text-shadow:0 .04em 0 color-mix(in srgb, var(--accent) 35%, transparent), 0 0 .5em color-mix(in srgb, var(--accent) 22%, transparent); }
.num { display:inline-block; animation:pop .3s ease-out; }
@keyframes pop { 0% { transform:scale(.86); } 60% { transform:scale(1.06); } 100% { transform:scale(1); } }
.btn.big { min-height:56px; padding:0 2.2rem; font-size:1.15rem; }
.hint { margin:0; color:var(--muted); font-size:.9rem; }

/* ===== touch: stop iOS double-tap zoom when tapping fast (pinch-zoom still works) ===== */
a, button, .counter { touch-action: manipulation; }
.btn, .switch { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.counter { user-select: none; -webkit-user-select: none; }

/* ===== header layout: row 1 = brand + nav; the switch drops to its own row on small screens ===== */
.site-header .bar { gap:.1rem 1rem; }
.main-nav { display:flex; align-items:center; gap:1.25rem; margin-left:auto; }
.lang { appearance:none; background:none; border:0; padding:0; cursor:pointer; min-width:44px; min-height:44px; font:600 .95rem var(--mono); color:var(--text); border-bottom:2px solid transparent; }
.lang:hover { border-bottom-color:var(--accent); }
@media (max-width:620px) {
  .brand { font-size:.95rem; }
  .site-header .switch { order:3; flex:0 0 100%; justify-content:center; }
}
.lang[aria-current="true"] { border-bottom-color:var(--accent); }