/* GobyTech landing page — built to the GobyTech brand book.
   Chrome uses the cool brand/UI palette only; the warm mascot palette lives
   inside the illustration. Display face: Space Grotesk (self-hosted). Body:
   the brand's system substitute chain.

   Theming: the fixed brand palette feeds SEMANTIC tokens (--bg, --surface,
   --text, --heading, --panel, --on-dark …). Light is the default; the
   prefers-color-scheme:dark block below re-points the semantic tokens only, so
   every rule themes from one place. EN/SV is a text-only toggle — both languages
   share every style; never style .sv differently from .en. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/SpaceGrotesk.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Fixed brand palette (cool) */
  --trench: #0a2a43;
  --teal: #2ec4b6;
  --reef: #1e88b0;
  --coral: #ff6b5b;
  --sand: #f4eee2;
  --paper: #ffffff;

  /* Semantic tokens — light mode (the dark block overrides these only) */
  --bg: var(--paper);          /* page surface (hero, contact) */
  --surface: var(--sand);      /* alt surface (work, footer) */
  --card: var(--paper);        /* card surface */
  --panel: var(--trench);      /* dark feature panel (approach) */
  --on-dark: #ffffff;          /* text on the panel / on coral — always light */
  --heading: var(--trench);    /* big headings + wordmark on light surfaces */
  --text: #0e0e10;
  --text-soft: #3a3a3d;
  --text-mute: #74747a;
  --rule: #e0e4e8;

  --display: "Space Grotesk", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1080px;
  --pad: clamp(20px, 5vw, 48px);
}

/* Dark mode — follows the OS setting; re-points the semantic tokens only.
   The brand accents (teal, coral) and the always-light --on-dark stay put. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1218;
    --surface: #121a22;
    --card: #141d26;
    --panel: #0f2740;
    --heading: #eaf2f7;
    --text: #e9edf1;
    --text-soft: #c3cad1;
    --text-mute: #8c959e;
    --rule: #2a333c;
  }
}

* { box-sizing: border-box; }

/* Dual language — show the active one; no layout shift, no framework. EN and SV
   share every style; only the text differs. */
body.lang-en .sv { display: none; }
body.lang-sv .en { display: none; }
.langtoggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.langtoggle button {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  border: 0; background: transparent; color: var(--text-mute); padding: 6px 12px; cursor: pointer;
}
.langtoggle button[aria-pressed="true"] { background: var(--panel); color: var(--on-dark); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
}
/* One type ramp: h1 (hero) → h2 (sections) → h3 (cards). */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 24px; }
a { color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--teal); margin: 0 0 16px;
}

/* Header */
header.site {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--heading); letter-spacing: -0.03em; text-decoration: none; }
header.site nav { display: flex; gap: 26px; align-items: center; font-size: 15px; }
header.site nav a { text-decoration: none; color: var(--text-soft); }
header.site nav a:hover { color: var(--heading); }
.btn {
  display: inline-block; font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 11px 20px; border-radius: 999px; transition: transform .15s ease, background .15s ease;
}
.btn-coral { background: var(--coral); color: var(--on-dark); }
.btn-coral:hover { transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--rule); color: var(--heading); }
.btn-ghost:hover { border-color: var(--teal); }

/* Hero — page surface, the colour mascot */
.hero { padding: 132px 0 72px; }
.hero .grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .hero .grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero h1 { font-size: clamp(40px, 7vw, 72px); color: var(--heading); }
.hero p.lede { font-size: clamp(17px, 2vw, 19px); color: var(--text-soft); max-width: 52ch; margin: 22px 0 28px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .art { display: flex; justify-content: center; }
.hero .art img { width: 100%; max-width: 420px; height: auto; }
.accent { width: 88px; height: 5px; background: var(--coral); border: 0; margin: 34px 0 0; }

/* Work — alt surface, product cards */
.work { background: var(--surface); padding: 72px 0; }
.section-intro { max-width: 62ch; color: var(--text-soft); font-size: 18px; margin: 0 0 28px; }
.cards { display: grid; gap: 20px; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  display: block; text-decoration: none; background: var(--card);
  border: 1px solid var(--rule); border-radius: 14px; padding: 28px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--teal); transform: translateY(-2px); }
.card h3 { color: var(--heading); margin-bottom: 10px; }
.card p { margin: 0; color: var(--text-soft); font-size: 16px; }
.card .go { display: inline-block; margin-top: 16px; color: var(--teal); font-weight: 600; font-size: 15px; }

/* Approach — dark feature panel, white-on-dark mascot */
.approach { background: var(--panel); color: var(--on-dark); padding: 80px 0; }
.approach .grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .approach .grid { grid-template-columns: 0.8fr 1.2fr; } }
.approach .eyebrow { color: var(--teal); }
.approach h2 { color: var(--on-dark); }
.approach p { color: rgba(255,255,255,0.84); font-size: 17px; max-width: 56ch; }
.approach .mission { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 3vw, 26px); color: var(--on-dark); margin-top: 26px; }
.approach .art img { width: 100%; max-width: 360px; height: auto; }

/* Contact */
.contact { padding: 76px 0; }
.contact h2 { color: var(--heading); }
.contact ul { list-style: none; padding: 0; margin: 22px 0 0; font-size: 18px; }
.contact li { margin: 0 0 10px; }
.contact a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--teal); }
.contact a:hover { color: var(--teal); }

/* Footer */
footer.site { background: var(--surface); color: var(--text-mute); font-size: 14px; padding: 30px 0; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
footer.site img { height: 30px; width: auto; opacity: 0.9; }