/* Shared technical studio theme. Dark is the initial presentation. */
:root {
  color-scheme: dark;
  --bg: #101b28;
  --ink: #e8f2f9;
  --muted: #b0c2d2;
  --line: #35495c;
  --accent: #9cfdc6;
  --green: #9cfdc6;
  --surface: #162535;
  --raised: #1c3042;
  --on-accent: #10271c;
  --selection: #315c49;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fb;
  --ink: #14283c;
  --muted: #4b6277;
  --line: #c7d4df;
  --accent: #096344;
  --green: #096344;
  --surface: #e9f0f6;
  --raised: #ffffff;
  --on-accent: #ffffff;
  --selection: #bfe7d5;
}
::selection { background: var(--selection); color: var(--ink); }
body { background: var(--bg); color: var(--ink); }
header { background: var(--bg); }
.nav { gap: 20px; }
.brand { white-space: nowrap; font-family: 'DM Sans', sans-serif; }
.brand span:last-child { color: var(--muted) !important; }
.mark { background: var(--accent); color: var(--on-accent); transform: none; border-radius: 5px; }
.navlinks { margin-left: auto; gap: 20px; }
.theme-toggle { flex-shrink: 0; min-height: 44px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; font-size: 14px; cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); }
.menu-toggle { color: var(--ink); }
.eyebrow,.kicker,.step-num,.service-top,.project-number { font-family: Consolas, monospace; }
h1 { letter-spacing: -2px; font-weight: 700; }
.hero { padding-top: 66px; }
.hero-grid { grid-template-columns: 1.15fr 1fr; gap: 48px; }
.lead,.about-copy,.budget-copy p,.project-body dd,.principles,.service-top,.tags span { color: var(--muted); }
.btn,.contact .btn { background: var(--accent); color: var(--on-accent); border-radius: 6px; }
.btn:hover,.contact .btn:hover { background: var(--accent); filter: brightness(.92); }
.navcta { border-color: var(--line); border-radius: 6px; }
.navcta:hover { border-color: var(--accent); }
.hero-note i { background: var(--accent); }
.services { background: var(--surface); border-radius: 10px; }
.icon,.avatar { background: var(--raised); color: var(--accent); }
.experience .project-card,.project-card { background: var(--surface); border-color: var(--line); border-radius: 10px; }
.experience .project-card:hover,.experience .project-card:focus-within { border-color: var(--accent); box-shadow: none; }
.experience .work-tags li,.experience .demo-slot { background: var(--raised); color: var(--muted); }
.about,.budget-guide,.contact { background: var(--surface); color: var(--ink); border-color: var(--line); }
.contact p,.contact .email-help,.contact .price-anchor>span { color: var(--muted); }
.contact .kicker,.contact .contact-email:hover { color: var(--accent); }
.contact .contact-email { color: var(--ink); }
.contact .price-anchor { border-color: var(--line); }
.skip-link { background: var(--accent); color: var(--on-accent); }
.service-page { max-width: 980px; }
.service-page h1 { margin-top: 28px; }
.service-page h2 { margin-top: 44px; }
.service-page p,.service-page li { color: var(--muted); }
.service-page .service-price strong { color: var(--accent); }
.service-page a { color: var(--ink); }
.service-page a.btn { color: var(--on-accent); }
.terminal { min-width: 0; padding: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; font-family: Consolas, monospace; }
.terminal-title { display: flex; align-items: center; gap: 7px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.terminal-title i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.terminal-title span { margin-left: 6px; }
.terminal-comment { color: var(--muted); font-size: 13px; margin: 22px 0; }
.terminal ol { padding: 0; margin: 0; list-style: none; }
.terminal li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; color: var(--accent); font-size: 16px; }
.terminal li + li { margin-top: 20px; }
.terminal li b { font-weight: 400; color: var(--muted); font-size: 12px; padding-top: 4px; }
.terminal li small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.terminal-footer { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 16px; color: var(--muted); font-size: 12px; }
@media (max-width:1100px) {
  .navlinks { gap: 12px; font-size: 14px; }
  .navcta { padding: 8px 10px; }
  .nav { gap: 12px; }
}
@media (max-width:900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .navlinks { display: none; position: absolute; left: 0; right: 0; top: 88px; padding: 22px 30px; background: var(--bg); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .navlinks.open { display: flex; }
  .menu-toggle { display: block; margin-left: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; min-height: 44px; padding: 6px 12px; }
}
@media (max-width:620px) {
  .nav { gap: 8px; height: 72px; }
  .brand { gap: 7px; font-size: 16px; }
  .mark { width: 25px; height: 25px; }
  .theme-toggle { padding: 8px; font-size: 12px; }
  .navlinks { top: 72px; padding: 20px 22px; }
  .hero { padding-top: 38px; }
  .terminal { padding: 20px; }
  header .nav > .textlink { display: none; }
  header .nav > .theme-toggle:last-child { margin-left: auto; }
}