/* Fornaq public site. Shares the workspace app's palette, type and shapes; shares none of its code. */
/*
  Fornaq Display: the company's own face, v2.110, from the Fornaq/fornaq_font repo (this is a
  hand-copied file; nothing here generates it). One weight, and the forward
  lean is drawn into the outlines, so never ask the browser to slant or embolden it. Display
  sizes only — headings here, never body copy, labels or anything small.
*/
@font-face {
  font-family: "Fornaq Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fornaq-display.bcf04ee8.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.c9407645.woff2") format("woff2");
}

:root {
  --background: #e9f1f7;
  --foreground: #2a2138;
  --card: #ffffff;
  --primary: #623cea;
  --primary-foreground: #ffffff;
  --muted: #dfe8f0;
  --muted-foreground: #6a5f7e;
  --border: #d2dce6;
  --brand-cyan: #2fceff;
  --logo: #101820; /* dark ink on light, cyan on dark: see fornaq-brand/ */
  --ring: #623cea;
  --radius: 0.625rem;
  color-scheme: light;
}
.dark {
  --logo: var(--brand-cyan);
  --background: #151020;
  --foreground: #e9f1f7;
  --card: #1e1729;
  --primary: #7b5cf0;
  --muted: #2a2139;
  --muted-foreground: #a99fbd;
  --border: rgb(233 241 247 / 0.1);
  --ring: #8d72f3;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid color-mix(in oklab, var(--ring) 55%, transparent); outline-offset: 2px; border-radius: 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1.25rem; }

/* backdrop: the same glow and faint grid as the app's sign-in page */
.backdrop { position: absolute; inset: 0 0 auto 0; height: 46rem; pointer-events: none; z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 70%),
    linear-gradient(to right, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* floating pill header */
.site-header { position: sticky; top: 0.75rem; z-index: 10; padding-inline: 0.75rem; margin-top: 0.75rem; }
.bar { max-width: 64rem; margin-inline: auto; height: 3.25rem; padding-inline: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--border); border-radius: 1rem; background: color-mix(in oklab, var(--card) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--primary) 25%, transparent); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo svg { height: 1.0625rem; width: auto; fill: var(--logo); display: block; }
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a { padding: 0.4rem 0.7rem; border-radius: 0.6rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; transition: background 0.15s, color 0.15s; }
.nav a:hover { background: var(--muted); color: var(--foreground); }
.icon-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 0.6rem; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.icon-btn:hover { background: var(--muted); color: var(--foreground); }
.icon-btn svg { width: 1rem; height: 1rem; }
/* the button shows where it will take you: a moon in light mode, a sun in dark mode */
.icon-btn .to-light, .dark .icon-btn .to-dark { display: none; }
.dark .icon-btn .to-light { display: block; }

/* hero */
.hero { padding-block: clamp(4rem, 12vw, 8rem) clamp(3rem, 8vw, 5rem); text-align: center; }
/*
  Fornaq Display is opt-in per element, never by tag. It sets a label beautifully and a
  sentence badly: the drawn-in slant and the squared lowercase read as texture once a line
  runs past a few words, and you stop reading it as language. So it goes on eyebrows and on
  short headings that work as a label ("What we do"), and Inter keeps the headline and any
  heading that is really a sentence ("Tell us what you are working on."). Judge by the words,
  not the tag — the two h2s on this page fall on opposite sides of that line.
  The two rules below are shared family and never-synthesize; the tracking differs, because
  the eyebrow is small uppercase and wants its wide letter-spacing, while at heading sizes
  the face's own spacing is already right.
*/
.display, .eyebrow { font-family: "Fornaq Display", "Inter", sans-serif; font-style: normal; font-synthesis: none; font-kerning: normal; }
.display { font-weight: 700; letter-spacing: 0; }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
h1 { margin: 0.9rem auto 0; max-width: 18ch; font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 650; text-wrap: balance; }
.lede { margin: 1.4rem auto 0; max-width: 40rem; font-size: clamp(1rem, 2vw, 1.175rem); color: var(--muted-foreground); text-wrap: pretty; }
.actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding-inline: 1.15rem; border-radius: 0.7rem; border: 1px solid transparent; font: inherit; font-size: 0.95rem; font-weight: 550; text-decoration: none; transition: transform 0.1s, background 0.15s, border-color 0.15s; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1rem; height: 1rem; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 8px 24px -10px var(--primary); }
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 88%, #000); }
.btn-ghost { border-color: var(--border); background: color-mix(in oklab, var(--card) 70%, transparent); }
.btn-ghost:hover { background: var(--muted); }

/* sections */
section { scroll-margin-top: 5.5rem; }
.section-head { max-width: 40rem; }
h2 { margin: 0.5rem 0 0; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 650; }
/* A heading wearing .display sets a touch smaller: the face is heavier than Inter at a size. */
h2.display { font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.2; }
.section-head p { margin: 0.75rem 0 0; color: var(--muted-foreground); }
.services { padding-block: clamp(2rem, 6vw, 4rem); }
.cards { margin: 2.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.card { padding: 1.5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.8); background: var(--card); box-shadow: 0 1px 0 color-mix(in oklab, var(--foreground) 4%, transparent); transition: border-color 0.2s, transform 0.2s; }
.card:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); transform: translateY(-2px); }
.card .icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
.card .icon svg { width: 1.25rem; height: 1.25rem; }
.card h3 { margin: 1.1rem 0 0; font-size: 1.1rem; letter-spacing: -0.01em; font-weight: 600; }
.card p { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--muted-foreground); }

/* contact */
.contact { padding-block: clamp(2rem, 6vw, 4rem) clamp(4rem, 9vw, 6rem); }
.panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--border); border-radius: calc(var(--radius) * 2.2);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 10%, var(--card)), var(--card) 60%); }
.panel h2 { margin: 0; }
.panel p { margin: 0.6rem 0 0; max-width: 34rem; color: var(--muted-foreground); }
.panel .mail { margin-top: 0.35rem; font-size: 0.875rem; color: var(--muted-foreground); }

footer { margin-top: auto; border-top: 1px solid var(--border); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 1.5rem; font-size: 0.85rem; color: var(--muted-foreground); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--foreground); }

.not-found { flex: 1; display: grid; place-items: center; text-align: center; padding: 4rem 1.25rem; }

@media (max-width: 30rem) { .nav a.hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card, .btn { transition: none; } .card:hover { transform: none; } }