/* ============================================================
   Tilio · Shared chrome (topbar, footer, tokens)
   Loaded by every page so the nav stays identical across the site.
   ============================================================ */

/* Fonts, served from this site (owner, 2026-11-05: no request to Google). Variable files, the
   Latin subset (æ, ø and å included), the same files Google Fonts served. Licences: fonts/OFL-*.txt.
   A page that links this file must also have fonts/ next to it (the data.tilio.no Worker too). */
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/instrument-sans.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/jetbrains-mono.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/outfit.woff2') format('woff2');
}

:root {
    /* 2026-10: a touch bluer and less purple-black than the first palette */
    --bg: #0b1320;
    --bg2: #101b2b;
    --bg-primary: #0b1320;
    --bg-secondary: #101b2b;
    --bg-card: #15223a;
    --bg-card-hover: #1b2b47;
    --panel: #15223a;
    --panel2: #1b2b47;
    --bubble-user: #16203a;
    /* Calmer than the first #4a8ed4 / #6aabef: still blue, less startup */
    --accent: #5b92c8;
    --accent-light: #8db6de;
    /* Filled-button variants. --accent is tuned for text/lines on the dark
       ground; white text on it is only 3.44:1, so solid CTAs use these. */
    --accent-cta: #2f6ea8;        /* white text: 5.36:1 */
    --accent-cta-hover: #3878b4;  /* white text: 4.65:1 */
    --accent-dim: rgba(91, 146, 200, 0.45);
    --accent-glow: rgba(91, 146, 200, 0.13);
    --sys-green: #5fb89a;
    --coral: #c4694a;
    --text: #e8ecf4;
    --text-primary: #e8ecf4;
    --text-secondary: #bcc4d6;
    --text-muted: #97a1b8;
    --text2: #bcc4d6;
    --text3: #97a1b8;
    --text4: #7f8aa5;           /* 2026-11-02: was #707b96 (4.1:1 on --bg2), now at least 4.5:1 on --bg, --bg2 and --bg-card */
    --line: rgba(74, 142, 212, 0.13);
    --line-soft: rgba(74, 142, 212, 0.07);
    --line-strong: rgba(74, 142, 212, 0.25);
    --border: rgba(74, 142, 212, 0.12);
    --border-strong: rgba(74, 142, 212, 0.25);
    --white: #ffffff;
    --mono: 'JetBrains Mono', monospace;
    /* 2026-10: Instrument Sans replaces Instrument Serif and DM Sans. --serif keeps its
       name so existing rules still resolve; it now holds the display face. */
    --body: 'Instrument Sans', system-ui, sans-serif;
    --serif: 'Instrument Sans', system-ui, sans-serif;
    --logo: 'Outfit', sans-serif;
    --font-display: 'Instrument Sans', system-ui, sans-serif;
    --font-body: 'Instrument Sans', system-ui, sans-serif;
    color-scheme: dark;
}

/* Light sections. Rule: dark is the machinery (hero, diagrams, try it, contact), light is
   the business (what it is, the offer, price, about). Switch only where the topic changes,
   never every other section. Tokens are redefined, so components need no light variants. */
.light {
    --bg: #f4f6f9;
    --bg2: #ffffff;
    --bg-card: #ffffff;
    --panel: #ffffff;
    --text: #0f1b2b;
    --text-primary: #0f1b2b;
    --text2: #3c4a5d;
    --text-secondary: #3c4a5d;
    --text3: #56647a;
    --text-muted: #56647a;
    --text4: #626f82;           /* 2026-11-02: was #6b788b (4.1:1), now 4.7:1 on the light ground */
    --white: #0f1b2b;
    --line: rgba(15, 27, 43, 0.12);
    --line-soft: rgba(15, 27, 43, 0.07);
    --line-strong: rgba(15, 27, 43, 0.24);
    --border: rgba(15, 27, 43, 0.12);
    --border-strong: rgba(15, 27, 43, 0.24);
    --accent: #1f5f99;
    --accent-light: #1f5f99;
    --accent-glow: rgba(31, 95, 153, 0.07);
    --accent-dim: rgba(31, 95, 153, 0.35);
    --sys-green: #2b7a55;
    --coral: #b0552f;
    background: var(--bg);
    color: var(--text);
    color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* Just under the fixed top bar (54.6px; 59.5px on phones), so an anchor jump shows no
       strip of the section before */
    scroll-padding-top: 3.4rem;
}

body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Faint scanline texture, shared by every page (homepage motif) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(74,142,212,0.012) 0px,
        rgba(74,142,212,0.012) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 200;
}

/* Avoid single-word orphans on large display headings */
h1, h2, h3 { text-wrap: balance; }

::selection { background: var(--accent-cta); color: var(--white); }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   SKIP TO CONTENT
   ============================================================ */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--accent-cta);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 0 0 4px 4px;
    z-index: 10000;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus { top: 0; }

/* ============================================================
   TOPBAR (shared across all pages)
   ============================================================ */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 1.5rem;
    background: rgba(11, 19, 32, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    font-size: 0.72rem;
}

/* The logo: TILIO with a round blue footnote, inline SVG from tilio-company: company/brand/logo/nav-logo.svg.txt
   (owner, 2026-11-05). Letters take the text colour, the footnote the accent. */
.brand {
    display: inline-flex;
    align-items: center;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.brand-logo {
    display: block;
    height: 0.9rem;
    width: auto;
    fill: currentColor;
    overflow: visible;
}
.brand-logo .brand-dot { fill: var(--accent-light); }

.nav-menu {
    display: flex;
    gap: 1.4rem;
    margin-left: 1.5rem;
    align-items: center;
}

.nav-menu button,
.nav-menu a {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text3);
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.25s;
    padding: 0;
}

.nav-menu button:hover,
.nav-menu a:hover { color: var(--text); }

.nav-menu a.active {
    color: var(--text);
}

.nav-menu a.active::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 0.45rem;
    vertical-align: middle;
}

.nav-menu a.ext::after {
    content: ' ↗';
    color: var(--accent);
    opacity: 0.6;
}

.nav-menu a.ext.active::after {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 1;
    margin-left: 0.45rem;
    display: inline-block;
    vertical-align: middle;
}

.status {
    margin-left: auto;
    display: flex;
    gap: 1.4rem;
    color: var(--text3);
    font-family: var(--mono);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
}

.live { color: var(--accent-light); }
.live::before {
    content: '●';
    margin-right: 0.35rem;
    color: var(--sys-green);
    animation: blink 2.4s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    padding: 6px;
    z-index: 1002;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--text);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

/* ============================================================
   FOOTER (homepage: flat inline row)
   ============================================================ */
.footer {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    border-top: 1px solid var(--line-soft);
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text4);
}

.footer .footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.footer a {
    color: var(--text3);
    text-decoration: none;
    transition: color 0.25s;
}

.footer a:hover { color: var(--accent); }
.footer-sep { color: var(--text4); opacity: 0.5; }

/* ============================================================
   FOOTER (long-form subpages: logo + columns)
   ============================================================ */
footer:not(.footer) {
    border-top: 1px solid var(--line);
    padding: 2.5rem 3rem;
}

footer:not(.footer) .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    font-family: var(--logo);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--text3);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 1;
}

.footer-logo .footer-tagline {
    font-size: 0.4rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: var(--text3);
    opacity: 0.6;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

.footer-links a {
    color: var(--text3);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.25s;
}

.footer-links a:hover { color: var(--text2); }

.footer-copy {
    color: var(--text3);
    font-size: 0.75rem;
}

/* ============================================================
   REVEAL (used by long-form pages)
   ============================================================ */
/* Hidden only once a script has added the js class to <html>, so pages are complete without it */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   SESSION CRUMB (mono breadcrumb above subpage headlines,
   mirrors the homepage session-meta)
   ============================================================ */
.session-crumb {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--text4);
    margin-bottom: 1.4rem;
}

/* ============================================================
   SECTION LABEL (used by long-form pages)
   ============================================================ */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.section-label::before {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: var(--accent);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
    .live::before { animation: none; opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .topbar {
        padding: 1rem 1.5rem;
        justify-content: space-between;
        gap: 0;
        background: var(--bg);
    }

    /* When the menu overlay is open, drop the topbar background so it isn't
       a visible strip across the overlay. */
    .topbar:has(.nav-menu.open) {
        background: transparent;
        border-bottom-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav-menu {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 1001;
        margin-left: 0;
    }

    .nav-menu.open { display: flex; }

    .nav-menu button,
    .nav-menu a {
        font-size: 1.1rem;
        letter-spacing: 0.1em;
    }

    .status { display: none; }
    .hamburger { display: flex; }

    html { scroll-padding-top: 3.7rem; }

    .footer { padding-left: 1rem; padding-right: 1rem; font-size: 0.68rem; }

    footer:not(.footer) { padding: 2rem 1.5rem; }
    footer:not(.footer) .footer-inner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    .footer-right { flex-direction: column; gap: 1rem; }
}