/* =============================================================================
   main.css — Global stylesheet for serbizAI OÜ
   =============================================================================

   Design system: "Calibrated Precision"
   ──────────────────────────────────────
   Aesthetic: Dark-tech instrument panel. Near-black field with a subtle
   dot-matrix grid at ~5% opacity. Electric cyan (#00b4d8) as the single
   accent — used for interactive elements, borders, and glow effects.
   Typography is Inter with optical sizing engaged: tight letter-spacing on
   headings gives a machine-tooled precision feel while body text stays
   relaxed and readable.

   Audience: B2B decision-makers. The design should communicate control,
   reliability, and technical sophistication — not playfulness.

   File structure
   ──────────────
    1.  Design Tokens       CSS custom properties for every colour, size, space
    2.  Reset               Box-sizing, margin, padding normalisation
    3.  Base                html, body — background, font, flex column layout
    4.  Background Texture  Dot-matrix grid overlay via body background-image
    5.  Ambient Glow        Subtle top-of-viewport radial glow via body::before
    6.  Typography          Headings, body text, links, code, hr
    7.  Accessibility       Skip-to-content link, focus ring
    8.  Layout              .container, .main-content
    9.  Navigation          Fixed glass-blur header, brand, nav links
   10.  Footer              Border-top, identity, legal links
   11.  Component: .page-header   h1 + subtitle block used on every inner page
   12.  Component: .card          Dark bordered surface for content groups
   13.  Component: .badge         Monospace label pill
   14.  Utilities           .sr-only, text-align, colour, spacing helpers
   15.  Responsive          Mobile adjustments below 768px

   Naming convention: BEM — .block__element--modifier
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   All visual values are stored here as CSS custom properties so the entire
   palette can be adjusted from a single location.
   ============================================================================= */

:root {

    /* ── Colour: backgrounds ────────────────────────────────────────────────
       Three layered levels of darkness create natural depth without needing
       shadows on every element. bg-base is the page canvas; surfaces sit on
       top; elevated elements (nav, raised cards) sit highest.               */
    --color-bg-base:     #0a0a0f;   /* near-black canvas — the page background */
    --color-bg-surface:  #0f0f1a;   /* card / panel surfaces — 1 step lighter  */
    --color-bg-elevated: #141421;   /* nav bar, raised surfaces, dropdowns      */
    --color-bg-subtle:   #1a1a2a;   /* hover states, zebra rows, subtle fills   */

    /* ── Colour: borders ────────────────────────────────────────────────────
       Default borders use no accent. Accent-tinted borders call more
       attention and are used for cards and interactive containers.          */
    --color-border:        #1e1e30;              /* default — barely visible    */
    --color-border-accent: rgba(0,180,216,0.18); /* cyan-tinted — for cards     */
    --color-border-strong: rgba(0,180,216,0.40); /* stronger — hover / focus    */

    /* ── Colour: text ───────────────────────────────────────────────────────
       Three tiers of text weight. Primary for headings and body; secondary
       for captions, meta, and labels; muted for disabled and placeholders.  */
    --color-text-primary:   #e8e8f2;   /* near-white body copy and headings     */
    --color-text-secondary: #7878a0;   /* captions, sublabels, helper text       */
    --color-text-muted:     #45455e;   /* disabled, placeholder, separators      */

    /* ── Colour: accent ─────────────────────────────────────────────────────
       A single accent colour keeps the palette disciplined and trustworthy.
       Cyan conveys technology and precision without the overused purple/pink
       gradient aesthetic common in AI branding.

       --color-accent        : base interactive colour — links, active states
       --color-accent-bright : hover variant — slightly lighter/more electric
       --color-accent-dim    : very low-opacity fill — badge backgrounds, etc.
       --color-accent-glow   : box-shadow glow on focused/hovered elements    */
    --color-accent:        #00b4d8;               /* electric cyan              */
    --color-accent-bright: #22d0f0;               /* brighter on hover          */
    --color-accent-dim:    rgba(0, 180, 216, 0.10); /* faint fill               */
    --color-accent-glow:   rgba(0, 180, 216, 0.22); /* glow for shadows/rings   */

    /* ── Colour: status ─────────────────────────────────────────────────────
       Semantic status colours for alerts, validation states, badges.        */
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-error:   #f87171;

    /* ── Typography ─────────────────────────────────────────────────────────
       Inter is specified in the design brief. We load it from Google Fonts
       with optical sizing (opsz) so the font subtly adjusts its letterforms
       for display sizes vs. text sizes — resulting in cleaner headings and
       more legible body copy without needing two separate fonts.

       The mono stack is used for badges, code, and any machine-readout UI.  */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

    /* Font size scale — unitless multiples of the 16px root size.
       Named by approximate pixel value at default browser settings.        */
    --text-xs:   0.6875rem;  /* ~11px — tiny labels, legal fine print        */
    --text-sm:   0.8125rem;  /* ~13px — nav links, captions, footer          */
    --text-base: 1rem;       /* 16px  — body copy                            */
    --text-lg:   1.125rem;   /* ~18px — lead paragraphs, subtitles           */
    --text-xl:   1.25rem;    /* 20px  — small headings                       */
    --text-2xl:  1.5rem;     /* 24px  — section headings                     */
    --text-3xl:  2rem;       /* 32px  — page headings                        */
    --text-4xl:  2.75rem;    /* 44px  — hero headings                        */

    /* Line heights */
    --leading-tight:  1.2;   /* headings — tight for visual weight           */
    --leading-snug:   1.45;  /* sub-headings — slight breathing room         */
    --leading-normal: 1.65;  /* body copy — comfortable for long reads       */
    --leading-loose:  1.85;  /* legal text — extra space aids comprehension  */

    /* Letter spacing — tighter for headings gives a precision / machined feel */
    --tracking-tight:  -0.04em;  /* large display headings                   */
    --tracking-snug:   -0.02em;  /* section headings                         */
    --tracking-normal:  0em;     /* body text default                        */
    --tracking-wide:    0.06em;  /* badges, labels, uppercase text           */

    /* ── Spacing scale ──────────────────────────────────────────────────────
       Based on a 4px grid. Every gap and padding should be a multiple of
       --space-1 (4px) to maintain visual rhythm across the layout.          */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ── Layout ─────────────────────────────────────────────────────────────
       960px container matches the brief. Prose width is narrower to keep
       legal text at a comfortable ~70 characters per line.                  */
    --max-width-container: 60rem;     /* 960px  — main layout container       */
    --max-width-prose:     44rem;     /* 704px  — comfortable reading column  */

    /* Navigation height — stored as a variable so the content offset below
       the fixed nav can reference it. Updated in the mobile media query.    */
    --nav-height: 3.75rem;            /* 60px desktop nav bar height          */

    /* ── Borders & Radius ───────────────────────────────────────────────────
       Very small radii keep the "precision instrument" feel — rounded corners
       should be subtle, not soft/friendly. Cards and badges use 2-3px.      */
    --radius-xs: 2px;    /* cards, badges — almost sharp                     */
    --radius-sm: 4px;    /* buttons, inputs                                  */
    --radius-md: 8px;    /* modals, larger containers                        */

    /* ── Transitions ────────────────────────────────────────────────────────
       Keep animations subtle and fast — this is a B2B professional site,
       not a marketing page. Hover states should feel responsive, not flashy. */
    --transition-fast:   150ms ease;    /* colour, opacity changes             */
    --transition-normal: 220ms ease;    /* border, shadow changes              */
    --transition-slow:   350ms ease;    /* layout shifts (use sparingly)       */
}


/* =============================================================================
   2. RESET
   Normalise browser default styles to a predictable baseline.
   ============================================================================= */

/*
 * Universal box-sizing: padding and border are included in the element's
 * stated width/height. This makes layout arithmetic predictable — a 200px
 * element with 20px padding is 200px wide, not 240px.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*
 * Remove list bullets and numbers — nav and footer lists are styled
 * as flex rows. Content lists that need bullets re-add them explicitly.
 */
ul,
ol {
    list-style: none;
}

/* Images should never overflow their containers and never inline-gap. */
img,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Strip default button chrome — component styles handle appearance. */
button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

/* Make form elements inherit the document font — browsers override this. */
input,
textarea,
select {
    font: inherit;
    color: inherit;
}


/* =============================================================================
   3. BASE — html and body
   ============================================================================= */

html {
    /*
     * color-scheme: dark tells the browser this page intentionally uses a
     * dark theme. This causes the browser to render native UI controls
     * (scrollbars, form inputs, select dropdowns) in a dark style that
     * matches the page, rather than the OS light-mode default.
     */
    color-scheme: dark;

    /*
     * Smooth scrolling for in-page anchor links (e.g. skip-to-content,
     * table of contents on legal pages). Disabled for users who prefer
     * reduced motion via the @media block at the bottom.
     */
    scroll-behavior: smooth;

    /*
     * Prevent any element from causing horizontal overflow and the
     * resulting scrollbar on mobile.
     */
    overflow-x: hidden;

    /*
     * scroll-padding-top pushes anchor targets below the fixed nav bar.
     * Without this, the nav bar covers the first line of the target section.
     */
    scroll-padding-top: var(--nav-height);

    /* Optical sizing: let the browser use the opsz axis for rendering */
    font-optical-sizing: auto;
}

body {
    /* Dark canvas */
    background-color: var(--color-bg-base);

    /* Light text with slightly blue-shifted white — avoids harsh pure-white
       on near-black which causes eye strain for extended reading sessions.   */
    color: var(--color-text-primary);

    /* Font stack: Inter loaded via Google Fonts, falling back to system fonts */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-normal);

    /* Sub-pixel rendering on macOS/WebKit for sharper text on dark backgrounds */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /*
     * Flex column layout: header → main (flex:1) → footer.
     * flex:1 on .main-content makes it expand to fill remaining viewport
     * height, ensuring the footer is always at the bottom even on short pages.
     */
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    /* Position context for the ::before ambient glow pseudo-element */
    position: relative;
}


/* =============================================================================
   4. BACKGROUND TEXTURE — dot-matrix grid
   A very low-opacity dot grid printed across the entire page background
   conveys a "technical grid" aesthetic without distracting from content.
   The dots are tinted with the accent colour at ~5% opacity.
   ============================================================================= */

body {
    /*
     * radial-gradient draws a tiny 1px dot at the centre of each 28×28px
     * tile. The circle colour is set at 5.5% opacity so the dots read as a
     * faint structural presence on the near-black background rather than a
     * visible pattern. Increasing the opacity above ~0.10 makes it too loud.
     */
    background-image: radial-gradient(
        circle,
        rgba(0, 180, 216, 0.055) 1px,
        transparent 1px
    );
    background-size: 28px 28px;
    /*
     * background-attachment: fixed keeps the grid stationary while the
     * page scrolls — like graph paper on a desk. This prevents the dots
     * from appearing to "swim" as content scrolls past.
     */
    background-attachment: fixed;
}


/* =============================================================================
   5. AMBIENT GLOW — top-of-viewport radial highlight
   A large, soft radial gradient centred at the top of the page creates
   a sense of a light source above the content — giving the dark background
   subtle atmospheric depth instead of pure flat black.
   ============================================================================= */

body::before {
    content: '';

    /* Fixed positioning keeps the glow anchored to the viewport top even
       when the page scrolls. It is purely decorative.                       */
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    /* Wide and tall enough to create a soft, graduating halo effect */
    width: 900px;
    height: 480px;

    /* Radial gradient from faint accent at centre to fully transparent.
       The accent colour at 4% opacity is barely perceptible — it should
       feel like atmosphere, not a designed shape.                           */
    background: radial-gradient(
        ellipse at top center,
        rgba(0, 180, 216, 0.04) 0%,
        transparent 68%
    );

    /* Pointer-events: none ensures the pseudo-element never intercepts clicks */
    pointer-events: none;

    /* Behind the page content but above the base background */
    z-index: 0;
}

/*
 * All layout elements that sit above the body::before glow must establish
 * their own stacking context so content renders correctly. We achieve this
 * by ensuring positioned elements use z-index where needed.
 */


/* =============================================================================
   6. TYPOGRAPHY
   ============================================================================= */

/* ── Headings ──────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: var(--leading-tight);
    /* Slightly negative letter-spacing on headings gives a machined,
       precision-instrument feel — as if each letter has been placed
       deliberately rather than left at browser defaults.                    */
    letter-spacing: var(--tracking-snug);
    /*
     * text-wrap: balance distributes words across heading lines as evenly
     * as possible, preventing typographic widows — a single short word
     * stranded alone on the last line of a multi-line heading.
     * Supported in Chrome 114+ / Safari 17.4+ / Firefox 121+.
     */
    text-wrap: balance;
}

h1 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-tight); /* tightest at the largest size     */
    font-weight: 700;
}

h2 {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-snug);
}

h3 {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-snug);
}

h4 {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-normal);
    font-weight: 600;
}

h5 {
    font-size: var(--text-lg);
    font-weight: 600;
}

h6 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ── Body paragraphs ───────────────────────────────────────────────────────── */

p {
    color: var(--color-text-primary);
    line-height: var(--leading-normal);

    /*
     * max-width on paragraphs prevents excessively long line lengths on
     * wide screens. Optimal reading is 60–80 characters per line (~45rem).
     * This applies globally; override with max-width: none in flex/grid
     * children where the containing layout already constrains width.
     */
    max-width: var(--max-width-prose);
}

/* Lead paragraph — slightly larger, used for page introductions */
p.lead {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-snug);
}

/* ── Links ─────────────────────────────────────────────────────────────────── */

a {
    color: var(--color-accent);
    text-decoration: none;
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

a:hover {
    color: var(--color-accent-bright);
    /* A very subtle underline on hover confirms interactivity              */
    text-decoration: underline;
    text-decoration-color: rgba(0, 180, 216, 0.45);
    text-underline-offset: 3px;
}

/* ── Inline code, keyboard keys, preformatted blocks ───────────────────────── */

code,
kbd {
    font-family: var(--font-mono);
    font-size: 0.875em;             /* slightly smaller than surrounding text */
    background-color: var(--color-bg-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    padding: 0.1em 0.4em;
    letter-spacing: 0;              /* reset — monospace already handles this */
}

pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-accent);
    border-radius: var(--radius-xs);
    padding: var(--space-4) var(--space-6);
    overflow-x: auto;
    line-height: var(--leading-loose);
}

pre code {
    /* Reset inline code styles inside a <pre> block */
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: var(--color-text-primary);
}

/* ── Horizontal rule ───────────────────────────────────────────────────────── */

hr {
    border: none;
    /*
     * A 1px top-border with the default border colour creates a clean
     * divider. We use box-shadow instead on some components to get a
     * slight glow, but for inline <hr> elements a plain border is cleaner.
     */
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-8);
}

/* ── Strong and emphasis ───────────────────────────────────────────────────── */

strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

em {
    font-style: italic;
    /* <em> used in the nav brand for the "AI" suffix is styled separately   */
}

/* ── Blockquote ────────────────────────────────────────────────────────────── */

blockquote {
    border-left: 2px solid var(--color-accent);
    padding-left: var(--space-6);
    margin-block: var(--space-6);
    color: var(--color-text-secondary);
    font-style: italic;
}


/* =============================================================================
   7. ACCESSIBILITY
   ============================================================================= */

/* ── Skip-to-content link ──────────────────────────────────────────────────── */

/*
 * This link is the first focusable element on the page. It is visually
 * hidden via transform/clip until it receives keyboard focus, at which
 * point it slides into view as a visible button above the nav bar.
 * This allows keyboard users to bypass repetitive navigation on every page.
 */
.skip-link {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 9999;

    padding: var(--space-2) var(--space-4);
    background-color: var(--color-accent);
    color: #000;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;

    /* Hidden until focused: translate off-screen upward */
    transform: translateY(calc(-100% - var(--space-8)));
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    /* Slide into view on keyboard focus */
    transform: translateY(0);
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ── Global focus ring ─────────────────────────────────────────────────────── */

/*
 * :focus-visible applies only when the browser determines the user is
 * navigating by keyboard (not mouse clicks), preventing the focus ring
 * from appearing on mouse clicks while preserving it for keyboard users.
 */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* Remove outline from elements that have their own focus styles */
.nav__link:focus-visible,
.footer__legal-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-xs);
}


/* =============================================================================
   8. LAYOUT — .container and .main-content
   ============================================================================= */

/*
 * .container
 * The single-width layout container, used by the nav, main content, and footer.
 * max-width is set to 960px (60rem) as specified in the design brief.
 * padding-inline provides breathing room so content does not press against
 * viewport edges on tablet and mobile.
 */
.container {
    width: 100%;
    max-width: var(--max-width-container);   /* 960px */
    margin-inline: auto;                      /* horizontally centred          */
    padding-inline: var(--space-8);          /* 32px side padding             */
}

/*
 * .container--prose
 * A narrower container variant for content-heavy pages (legal text, privacy
 * policy, terms). The tighter 704px max-width keeps lines to ~70 characters
 * for maximum reading comfort on long documents.
 */
.container--prose {
    max-width: var(--max-width-prose);
}

/*
 * .main-content
 * The <main> element. flex: 1 makes it grow to fill available vertical space
 * between the fixed-height nav and the footer, ensuring the footer always
 * stays at the bottom of the viewport even on pages with very little content.
 *
 * padding-top offsets the fixed nav bar so page content is not obscured.
 * The value matches --nav-height set in :root.
 */
.main-content {
    flex: 1;
    padding-top: var(--nav-height);           /* clear the fixed nav bar       */
    position: relative;
    z-index: 1;                               /* above body::before glow layer */
}


/* =============================================================================
   9. NAVIGATION
   Fixed top bar. Uses backdrop-filter to blur background content, creating
   a glass-panel effect that reveals the dot-grid below without obscuring
   the nav text. A very subtle glowing line at the nav bottom separates it
   from the page content — more refined than a solid border.
   ============================================================================= */

/*
 * .site-header
 * The outermost header element wrapping the <nav>.
 * position: fixed keeps it anchored to the viewport top while the page scrolls.
 * z-index: 200 places it above all page content and the body::before glow.
 */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 200;

    /* Semi-transparent background — the blur beneath it shows the dot grid */
    background-color: rgba(10, 10, 15, 0.82);

    /*
     * backdrop-filter: blur creates the glass effect.
     * saturate(160%) gives the blurred content a slight colour boost so it
     * remains distinguishable. The -webkit- prefix is required for Safari.
     */
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);

    /* Establish stacking context so the ::after glow line renders correctly */
    isolation: isolate;
}

/*
 * The glowing bottom border line.
 * Using ::after with a gradient instead of border-bottom allows us to fade
 * the line at both ends, creating a subtle luminous accent rather than a
 * hard edge. The glow appears to radiate from the centre.
 */
.site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 180, 216, 0.20) 25%,
        rgba(0, 180, 216, 0.55) 50%,
        rgba(0, 180, 216, 0.20) 75%,
        transparent 100%
    );
    /* No pointer-events — this is purely cosmetic */
    pointer-events: none;
}

/*
 * .nav
 * Inner flex container for brand + nav links.
 * We reuse .container for max-width centering and add flex layout here.
 */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;                             /* fill the full --nav-height    */
}

/* ── Brand / wordmark ────────────────────────────────────────────────────────
 * The "serbizAI" wordmark. The "serbiz" prefix is in primary text colour;
 * the "AI" suffix uses the accent colour to highlight the product category
 * without needing a separate logo asset.
 */
.nav__brand {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);

    /* Prevent the brand text from ever being split across lines */
    white-space: nowrap;
}

.nav__brand:hover {
    color: var(--color-text-primary);    /* brand stays white on hover       */
    text-decoration: none;
}

/*
 * .nav__brand-accent — the "AI" <em> suffix.
 * font-style: normal resets the italic that <em> applies by default so
 * the wordmark reads as a single coherent unit.
 */
.nav__brand-accent {
    font-style: normal;
    color: var(--color-accent);
    transition: color var(--transition-fast);
}

.nav__brand:hover .nav__brand-accent {
    color: var(--color-accent-bright);
}

/* ── Nav link list ───────────────────────────────────────────────────────────
 * Horizontal list of page links. gap provides consistent spacing between
 * items without needing individual margins.
 */
.nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-6);               /* 24px between each nav link          */
}

/*
 * .nav__link
 * Individual navigation anchor. Slightly smaller than body text so the nav
 * feels secondary to the page content. Medium weight adds legibility on the
 * semi-transparent background.
 */
.nav__link {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);

    /* Prevent line breaks in multi-word link labels */
    white-space: nowrap;
}

.nav__link:hover {
    color: var(--color-text-primary);
    text-decoration: none;
}

/*
 * .nav__link--active
 * Applied when the current page matches this link's endpoint.
 * The accent colour marks the active page without needing an underline
 * or background highlight — cleaner on a transparent nav.
 */
.nav__link--active {
    color: var(--color-accent);
    font-weight: 600;
}

.nav__link--active:hover {
    color: var(--color-accent-bright);
}


/* =============================================================================
   10. FOOTER
   Stays at the bottom of every page thanks to flex: 1 on .main-content.
   Compact and muted — the footer is functional (legal links) not decorative.
   ============================================================================= */

.site-footer {
    background-color: var(--color-bg-elevated);

    /*
     * A very thin top border with low-opacity accent tint matches the
     * visual language of the nav bottom line without the glow effect —
     * the footer should feel grounded, not floating.
     */
    border-top: 1px solid rgba(0, 180, 216, 0.10);

    padding-block: var(--space-6);
    position: relative;
    z-index: 1;
}

/*
 * .footer__inner
 * Two-column flex layout: identity on the left, legal links on the right.
 * flex-wrap: wrap allows the layout to gracefully stack on mobile.
 */
.footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/*
 * .footer__identity — "© 2026 serbizAI OÜ · Estonia"
 * max-width: none overrides the global max-width on <p> which would
 * otherwise truncate this short line on wide screens.
 */
.footer__identity {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/*
 * .footer__sep — the middle-dot separators (·)
 * aria-hidden="true" is set in the HTML so screen readers skip them.
 * The separators are purely visual — the semantic separation is conveyed
 * by the list or flow structure of the items themselves.
 */
.footer__sep {
    color: var(--color-text-muted);
    opacity: 0.5;
    user-select: none;               /* don't copy when selecting footer text */
}

/* ── Legal navigation ────────────────────────────────────────────────────────
 * Inline row of legal page links, also separated by .footer__sep dots.
 */
.footer__legal-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    row-gap: var(--space-1);
}

.footer__legal-link {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__legal-link:hover {
    color: var(--color-text-secondary);
    text-decoration: none;
}


/* =============================================================================
   11. COMPONENT: .page-header
   Used at the top of every inner page (Contact, Privacy, Terms, etc.) to
   establish the page title and optional subtitle. The accent left-edge bar
   visually anchors the heading and ties it to the nav's accent language.
   ============================================================================= */

/*
 * .page-header
 * Full-width section sitting at the top of .main-content on inner pages.
 * The bottom border separates the heading area from the page body.
 */
.page-header {
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
    margin-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

/*
 * ::before draws a short horizontal accent bar above the heading.
 * This is a recurring motif throughout the design — a precise short line
 * of accent colour marks a structural point of interest.
 */
.page-header::before {
    content: '';
    display: block;
    width: var(--space-10);           /* 40px — precise, deliberate           */
    height: 2px;
    background-color: var(--color-accent);
    margin-bottom: var(--space-6);
}

/* The main page title inside .page-header */
.page-header__title {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin-bottom: 0;
}

/* Optional subtitle / description below the title */
.page-header__subtitle {
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-snug);
    max-width: 38rem;                 /* narrower than prose for introductions */
}

/* Convenience wrapper: use .page-header as a direct container */
.page-header h1 {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    margin-bottom: 0;
}

.page-header p {
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 38rem;
}

/*
 * .page-header__eyebrow
 * Optional badge or label displayed between the ::before accent bar and the
 * page title. Used on the 404 page to show the status code as a badge.
 * The accent bar ::before still renders above this element.
 */
.page-header__eyebrow {
    margin-bottom: var(--space-4);
}

/*
 * .error-actions
 * Button row on error pages (404, etc.). Mirrors .cta__actions — centred
 * on error pages that use .container--prose (narrower reading width).
 * Sits below the .page-header block, giving the user a clear next step.
 */
.error-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}


/* =============================================================================
   12. COMPONENT: .card
   A bordered dark surface for grouping related content — service descriptions,
   feature lists, contact details, etc. Subtle hover state with increased
   border opacity and a faint outer glow rewards visual exploration without
   demanding attention.
   ============================================================================= */

.card {
    background-color: var(--color-bg-surface);

    /*
     * A 1px border with low-opacity cyan tint keeps cards visually distinct
     * from the page background without being heavy. The 18% opacity is the
     * minimum needed to read against --color-bg-base.
     */
    border: 1px solid var(--color-border-accent);

    /*
     * 2px radius — almost sharp. This is intentional: the "precision
     * instrument" aesthetic avoids the rounded-corners softness common in
     * consumer B2C products. B2B tools look engineered, not cuddly.
     */
    border-radius: var(--radius-xs);

    padding: var(--space-6);

    /*
     * Transition both border-color and box-shadow on hover so the card
     * appears to "illuminate" slightly when the user's pointer passes over.
     * Two shadows are stacked:
     *   1. A close ambient shadow for depth (rgba black)
     *   2. A wide, soft cyan glow for the accent effect
     */
    transition:
        border-color var(--transition-normal),
        box-shadow   var(--transition-normal);
}

.card:hover {
    border-color: var(--color-border-strong);   /* brighter cyan border         */
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.45),          /* depth shadow                */
        0 0 32px rgba(0, 180, 216, 0.07);         /* wide soft glow              */
}

/* Card title — slightly smaller than page headings, no accent bar */
.card__title {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

/* Card body text — inherits colour from parent so it uses text-secondary
   when a card has class text-muted, or text-primary by default.            */
.card__body {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    max-width: none;                   /* cards already constrain width        */
}

/* Optional footer row inside a card (e.g. a CTA link or metadata) */
.card__footer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}


/* =============================================================================
   13. COMPONENT: .badge
   A small monospace pill label used for status indicators, technology tags,
   category markers, etc. Monospace font makes it read like a system label
   or terminal output — reinforcing the technical aesthetic.
   ============================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);

    /* Tight padding creates a compact pill */
    padding: 0.2em 0.6em;

    /*
     * Monospace font gives badges a "terminal label" or "chip identifier"
     * appearance — appropriate for technology categories and status values.
     */
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.5;

    /*
     * Uppercase + wide letter-spacing is a classic label treatment.
     * At the tiny font size used here it remains legible because the
     * monospace characters are already spaced for code clarity.
     */
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);

    /* Accent colour text, very low-opacity accent fill */
    color: var(--color-accent);
    background-color: var(--color-accent-dim);

    /* 1px accent border — brings the badge to life against dark backgrounds */
    border: 1px solid rgba(0, 180, 216, 0.28);
    border-radius: var(--radius-xs);

    /* Badges should never wrap mid-word */
    white-space: nowrap;

    /* cursor: default so badges don't imply interactivity unless wrapped in <a> */
    cursor: default;
}

/* Variant: muted badge for less prominent labels */
.badge--muted {
    color: var(--color-text-secondary);
    background-color: transparent;
    border-color: var(--color-border);
}

/* Variant: success status */
.badge--success {
    color: var(--color-success);
    background-color: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.25);
}

/* Variant: warning status */
.badge--warning {
    color: var(--color-warning);
    background-color: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.25);
}


/* =============================================================================
   14. UTILITIES
   ============================================================================= */

/* ── Visually hidden (screen-reader only) ────────────────────────────────────
 * Standard .sr-only pattern — element is removed from visual layout but
 * remains in the accessibility tree so screen readers still announce it.
 * Use for icon buttons with no visible label, or supplementary text that
 * aids AT users but would be redundant visually.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Text alignment ─────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── Text colour shortcuts ───────────────────────────────────────────────────── */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent); }

/* ── Display ─────────────────────────────────────────────────────────────────── */
.d-flex   { display: flex; }
.d-block  { display: block; }
.d-inline { display: inline; }

/* ── Margin utilities ────────────────────────────────────────────────────────── */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mx-auto { margin-inline: auto; }

/* ── Stack: vertical flex column with gap ───────────────────────────────────── */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.stack--lg { gap: var(--space-8); }
.stack--sm { gap: var(--space-2); }

/* ── Cluster: horizontal flex wrap ─────────────────────────────────────────── */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}


/* =============================================================================
   15. RESPONSIVE — mobile adjustments below 768px
   =============================================================================

   Strategy: the base styles above target desktop (wide screens first).
   This block adjusts for mobile, using max-width so the changes only apply
   on viewports narrower than 768px (48rem).

   Key changes:
   • Nav stacks vertically: brand on top, links beneath
   • Nav height increases to accommodate the stacked layout
   • Container side padding reduces to preserve content width
   • Page header title scales down via clamp() (already handled above)
   • Footer stacks vertically, centred
   ============================================================================= */

@media (max-width: 48rem) {   /* 768px */

    /* ── Adjust CSS custom properties for mobile ───────────────────────────── */
    :root {
        /*
         * Increase nav height on mobile to accommodate the stacked
         * brand + links layout. main-content padding-top matches this.
         */
        --nav-height: 6.5rem;       /* 104px — brand row + links row          */
    }

    /* ── Navigation — stack vertically ─────────────────────────────────────── */

    /*
     * On mobile the nav bar grows taller to show both the brand and the
     * nav links. We switch to a column layout and reduce the site-header
     * height to auto so it expands naturally.
     */
    .site-header {
        height: var(--nav-height);
    }

    .nav {
        /* Switch from row to column layout */
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-2);
        padding-block: var(--space-3);
    }

    .nav__brand {
        font-size: var(--text-lg);   /* slightly smaller on mobile             */
    }

    .nav__links {
        /* Links wrap to next line and become smaller — no hamburger needed
           as there are only three short items (Home, Contact, Imprint).      */
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    .nav__link {
        font-size: var(--text-xs);
        letter-spacing: 0.02em;
    }

    /* ── Container padding ──────────────────────────────────────────────────── */

    .container {
        /*
         * Reduce side padding on narrow screens so content gets more room.
         * 16px (space-4) is the minimum comfortable margin on a phone.
         */
        padding-inline: var(--space-4);
    }

    /* ── Page header ────────────────────────────────────────────────────────── */

    .page-header {
        padding-top: var(--space-8);
        padding-bottom: var(--space-6);
        margin-bottom: var(--space-8);
    }

    /* ── Footer stacks vertically on narrow screens ─────────────────────────── */

    .footer__inner {
        flex-direction: column;
        align-items: flex-start;   /* left-align both rows for readability      */
        gap: var(--space-3);
    }

    .footer__legal-nav {
        row-gap: var(--space-2);
    }

    /* ── Cards ──────────────────────────────────────────────────────────────── */

    .card {
        /* Reduce card padding on mobile to preserve inner content space */
        padding: var(--space-4);
    }
}


/* =============================================================================
   REDUCED MOTION
   Users who set "prefer reduced motion" in their OS accessibility settings
   expect all animations to be removed or minimised. We disable smooth
   scrolling and any transition longer than an instant.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =============================================================================
   16. COMPONENT: .btn
   Buttons and anchors styled as buttons. Used for CTAs and primary actions.

   Rules:
   - <a class="btn"> for navigation (Cmd/Ctrl+click support)
   - <button class="btn"> for in-page actions (submit, toggle, etc.)
   - touch-action: manipulation prevents the 300ms double-tap zoom delay
     on iOS/Android without disabling zoom entirely (unlike user-scalable=no)

   Variants:
   - .btn--primary   Solid filled — the most prominent call to action
   - .btn--ghost     Transparent with border — secondary / less prominent
   ============================================================================= */

.btn {
    /* Layout: inline flex so icon + text align cleanly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* Sizing */
    padding: 0.72em 1.75em;

    /* Typography */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;

    /* Shape */
    border-radius: var(--radius-sm);
    border: 1px solid transparent;

    /* Behaviour */
    cursor: pointer;
    white-space: nowrap;

    /*
     * touch-action: manipulation disables the browser's built-in double-tap
     * zoom gesture on the button area, making taps feel instant on mobile.
     * This is safe — the user can still zoom by pinching anywhere else.
     */
    touch-action: manipulation;

    /*
     * Explicit property list — never use `transition: all` as it causes
     * unnecessary repaints on properties that don't need to animate.
     */
    transition:
        background-color var(--transition-fast),
        border-color     var(--transition-fast),
        color            var(--transition-fast),
        box-shadow       var(--transition-normal),
        opacity          var(--transition-fast);
}

/* ── Primary button: solid cyan fill ────────────────────────────────────────
 * Used for the single most important action on a page. High contrast — black
 * text on cyan background — meets WCAG AA for normal text (4.5:1 ratio).   */
.btn--primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #000;    /* black on cyan — high contrast */
}

.btn--primary:hover {
    background-color: var(--color-accent-bright);
    border-color: var(--color-accent-bright);
    color: #000;
    text-decoration: none;
    /*
     * Two-layer shadow on hover: a close black shadow for depth, plus a
     * wide soft cyan glow that ties the button to the accent language.
     */
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 28px rgba(0, 180, 216, 0.30);
}

.btn--primary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.20);
}

.btn--primary:active {
    /* Slight darkening on press to confirm the click */
    background-color: var(--color-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transform: translateY(1px);
    transition-duration: 50ms;
}

/* ── Ghost button: transparent with accent border ────────────────────────────
 * Used for secondary actions alongside a .btn--primary.                     */
.btn--ghost {
    background-color: transparent;
    border-color: var(--color-border-accent);
    color: var(--color-text-secondary);
}

.btn--ghost:hover {
    background-color: var(--color-accent-dim);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
    text-decoration: none;
}

.btn--ghost:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}


/* =============================================================================
   17. SECTION: .hero
   The opening section on the home page. Centred layout, generous vertical
   padding, and a large display heading make the company name the first and
   strongest impression.

   The hero depends on the ambient glow in body::before (section 5) for its
   atmospheric depth — no additional background effects are added here.
   ============================================================================= */

.hero {
    /*
     * Generous vertical padding makes the hero feel like a proper landing
     * zone — not cramped. The bottom padding is slightly less so the features
     * section below doesn't feel too far away.
     */
    padding-block: var(--space-24) var(--space-20);

    /* Centred text alignment — standard for hero / landing sections */
    text-align: center;

    /* Stacking context — sits above the body::before glow layer */
    position: relative;
    z-index: 1;
}

/*
 * .hero__eyebrow
 * Small badge or label that appears above the main heading.
 * Provides context (geography, category) before the brand name dominates.
 */
.hero__eyebrow {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}

/*
 * .hero__heading
 * The company name rendered as a large display heading. clamp() scales it
 * fluidly between a comfortable mobile size and a dramatic desktop size
 * without needing a media query.
 *
 * font-weight: 800 (Extra Bold) pushes Inter to its heaviest weight for
 * maximum visual impact — this heading IS the logo on this page.
 */
.hero__heading {
    font-size: clamp(3.25rem, 10vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.05em;   /* very tight — "carved" precision at large size */
    line-height: 1.0;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    text-wrap: balance;        /* already set globally but explicit here         */
}

/*
 * .hero__heading-accent
 * Applied to the "AI" portion of the "serbizAI" wordmark in the hero.
 * Matches the nav__brand-accent treatment for visual consistency.
 * font-style: normal resets the italic applied by <em> if used.
 */
.hero__heading-accent {
    color: var(--color-accent);
    font-style: normal;
}

/*
 * .hero__tagline
 * The company tagline: "AI-based services for business".
 * Rendered in accent colour slightly smaller than the heading — it reads
 * as a subheading that qualifies the brand name above it.
 */
.hero__tagline {
    font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
    font-weight: 500;
    letter-spacing: var(--tracking-snug);
    color: var(--color-accent);
    margin-bottom: var(--space-6);
    max-width: 32rem;
    margin-inline: auto;
    text-wrap: balance;
}

/*
 * .hero__body
 * One or two sentences describing what the company does.
 * Secondary text colour keeps it visually subordinate to the tagline.
 */
.hero__body {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    max-width: 34rem;
    margin-inline: auto;
    margin-bottom: 0;   /* no actions in hero — margin set by consumer */
}


/* =============================================================================
   18. SECTION: .features
   A three-column grid of .card components presenting the company's service
   areas. A small monospace section label above the grid serves as both a
   visual divider and an accessible heading for the section.
   ============================================================================= */

.features {
    padding-block: var(--space-16);

    /*
     * A full-width top border creates a clean division between the hero
     * and the features section. The default border colour (no accent tint)
     * keeps this divider quiet — structural, not decorative.
     */
    border-top: 1px solid var(--color-border);

    position: relative;
    z-index: 1;
}

/*
 * .features__label
 * The section heading — styled to look like a monospace machine label,
 * uppercase with wide letter-spacing. Despite its small visual size it
 * is a real <h2> element for correct heading hierarchy.
 */
.features__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-8);
    display: block;
    text-wrap: balance;
}

/*
 * .features__grid
 * Three equal columns on desktop. Each column holds one .card component.
 * gap matches the --space-6 card padding for consistent visual rhythm.
 */
.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}


/* =============================================================================
   19. SECTION: .cta
   The call-to-action section at the bottom of the home page.
   Centred text, a single primary button. The section is deliberately
   simple — it should feel like a landing pad, not a sales pitch.
   ============================================================================= */

.cta {
    padding-block: var(--space-16) var(--space-20);
    text-align: center;

    /*
     * Border matches the features section divider — consistent visual rhythm
     * between the three homepage sections (hero → features → CTA).
     */
    border-top: 1px solid var(--color-border);

    position: relative;
    z-index: 1;
}

/*
 * .cta__label
 * A small monospace decorative label above the CTA heading.
 * This is a <p> element, not a heading — the actual heading follows it.
 */
.cta__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-5);
    max-width: none;
}

/*
 * .cta__heading
 * The CTA's h2 — a clear, direct question or statement.
 * Sized between the card titles and the hero heading for correct hierarchy.
 */
.cta__heading {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}

/*
 * .cta__body
 * A single sentence expanding on the CTA heading before the button.
 * max-width: none is required because the global <p> rule sets
 * max-width: var(--max-width-prose); we override that here as the
 * parent text-align: center already constrains line length visually.
 */
.cta__body {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-inline: auto;
    margin-bottom: var(--space-8);
    max-width: 32rem;
}

/*
 * .cta__actions
 * Wrapper for the CTA button(s). Centred flex row that wraps on mobile.
 */
.cta__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}


/* =============================================================================
   20. COMPONENT: .contact-detail
   A two-column definition row used inside a .card on the Contact page.
   Left column: a monospace label (Email, Address, etc.)
   Right column: the actual value (link, address block, etc.)

   Rows are stacked with bottom borders between them to create a clean
   data-table-like appearance without using a literal <table> element —
   the content is not tabular data, just labelled fields.
   ============================================================================= */

/*
 * .contact-detail
 * A single label + value row. display: grid gives precise two-column control.
 * The 7rem left column is wide enough for the longest label ("Address")
 * without wrapping.
 */
.contact-detail {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-4) var(--space-6);
    align-items: start;
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

/* Last row inside a card has no bottom border — the card's own padding
   creates sufficient separation from the card edge.                        */
.contact-detail:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* First row has no top padding — the card's padding already provides it */
.contact-detail:first-child {
    padding-top: 0;
}

/*
 * .contact-detail__label
 * The left-column identifier. Monospace font + uppercase + wide tracking
 * gives it a "field name" quality — matching the features__label and
 * badge aesthetic of the rest of the site.
 */
.contact-detail__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding-top: 3px;    /* align baseline with the value text beside it */
    /* Labels should never overflow their column */
    word-break: break-word;
}

/*
 * .contact-detail__value
 * The right-column content. max-width: none overrides the global <p>
 * max-width because the grid column already constrains the line length.
 */
.contact-detail__value {
    color: var(--color-text-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    max-width: none;
}

/*
 * .contact-detail__address
 * Applied to the <address> element in the postal address row.
 * Browsers render <address> in italic by default — we reset that since
 * the field-label treatment makes the "address" context clear without
 * needing typographic italics.
 */
.contact-detail__address {
    font-style: normal;   /* reset browser default italic on <address> */
    line-height: var(--leading-loose);
}

/*
 * .contact-detail--note
 * A modifier for rows that contain a note or secondary information
 * rather than a primary data value. The label is dimmed slightly.
 */
.contact-detail--note .contact-detail__label {
    color: var(--color-text-muted);
}

.contact-detail--note .contact-detail__value {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}


/* =============================================================================
   21. COMPONENT: .contact-registry
   A small card below the main contact card on the Contact page.
   Displays company registration details and links to the Estonian Business
   Registry. Styled slightly differently from .contact-detail rows —
   more like a block of prose than a data table.
   ============================================================================= */

.contact-registry {
    margin-top: var(--space-6);
}

/*
 * .contact-registry__body
 * A short paragraph describing the registration details.
 * max-width: none overrides the global <p> constraint — the card already
 * limits line length.
 */
.contact-registry__body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-5);
    max-width: none;
}

/*
 * .contact-registry__link
 * The link to the Estonian Business Registry public record.
 * Opens in a new tab — the aria-label in the HTML includes "opens in new tab"
 * so screen readers announce this to users before they activate the link.
 */
.contact-registry__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    transition:
        color var(--transition-fast),
        gap   var(--transition-fast);
}

.contact-registry__link:hover {
    color: var(--color-accent-bright);
    text-decoration: none;
    gap: var(--space-2);   /* the icon nudges right on hover — subtle motion  */
}

.contact-registry__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/*
 * .contact-registry__external-icon
 * The ↗ arrow icon indicating the link opens in a new tab.
 * aria-hidden="true" is set on this element in the HTML because the
 * parent link's aria-label already conveys this information to screen readers.
 */
.contact-registry__external-icon {
    font-size: 0.9em;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.contact-registry__link:hover .contact-registry__external-icon {
    transform: translate(1px, -1px);   /* subtle diagonal nudge on hover */
}


/* =============================================================================
   22. UTILITY ADDITIONS
   ============================================================================= */

/*
 * .tabular-nums
 * Applies font-variant-numeric: tabular-nums so all digit characters occupy
 * equal horizontal space. Use on registration numbers, VAT numbers, prices,
 * and any other numeric strings that should align vertically in a list.
 */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/*
 * Address element reset — applies globally.
 * Browsers render <address> in italic by default. We reset this here so
 * any <address> element on the site is non-italic unless explicitly styled.
 * The .contact-detail__address class also sets font-style: normal as a
 * more specific override, but this global reset is a useful safety net.
 */
address {
    font-style: normal;
}


/* =============================================================================
   23. COMPONENT: .prose
   Rich-text content container for long-form legal and editorial documents:
   privacy policies, terms and conditions, cookie policies, imprint pages.

   The .prose class is a scoping context — descendant selectors override global
   element styles to produce typography optimised for extended reading of dense
   formal content.

   max-width: 45rem (720px) — narrower than .container (60rem / 960px) by
   design; combined with container padding, legal pages have generous white
   space on both sides on wide monitors. Lines sit at ~70-80 characters,
   which is the optimum range for legibility of body text.

   line-height is set to --leading-loose (1.85) for body copy inside .prose
   — more generous than the global --leading-normal (1.65) because legal
   text benefits from extra vertical breathing room between dense clauses.
   ============================================================================= */

.prose {
    max-width: 45rem;   /* 720px — comfortable legal document column */
}

/* ── Paragraphs ─────────────────────────────────────────────────────────────── */

/*
 * max-width: none overrides the global <p> rule's max-width constraint.
 * The .prose parent already constrains the column width — we do not want
 * a further restriction applied to every <p> inside it.
 */
.prose p {
    max-width: none;
    margin-bottom: var(--space-4);
    line-height: var(--leading-loose);
    color: var(--color-text-primary);
}

/* Remove trailing bottom margin from the last paragraph in any prose block */
.prose p:last-child {
    margin-bottom: 0;
}

/* ── Section headings (h2) ─────────────────────────────────────────────────── */

/*
 * h2 elements inside .prose act as section dividers. A thin bottom border
 * provides a clear visual break without heavy ornamentation. Generous top
 * margin pushes each new section well away from the preceding body copy.
 */
.prose h2 {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-snug);
    color: var(--color-text-primary);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-wrap: balance;
}

/*
 * The first h2 in a .prose block has no top margin — the .page-header
 * component above it already provides the necessary vertical separation.
 */
.prose h2:first-child {
    margin-top: 0;
}

/* ── Sub-section headings (h3) ─────────────────────────────────────────────── */

.prose h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-normal);
    color: var(--color-text-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    text-wrap: balance;
}

/* ── Unordered lists ────────────────────────────────────────────────────────── */

/*
 * Default disc bullets are replaced with custom en-dash markers via ::before.
 * An en-dash is more refined than a disc for formal documents and the accent
 * colour ties the bullet to the rest of the site's visual language.
 */
.prose ul {
    list-style: none;
    padding-left: var(--space-5);
    margin-bottom: var(--space-4);
}

.prose ul > li {
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-2);
    line-height: var(--leading-loose);
    color: var(--color-text-primary);
}

.prose ul > li::before {
    content: '\2013';   /* U+2013 EN DASH */
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 500;
}

/* ── Ordered lists ──────────────────────────────────────────────────────────── */

.prose ol {
    list-style: decimal;
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.prose ol > li {
    padding-left: var(--space-2);
    margin-bottom: var(--space-2);
    line-height: var(--leading-loose);
    color: var(--color-text-primary);
}

/* ── Links ──────────────────────────────────────────────────────────────────── */

/*
 * Links within long-form text are underlined by default. Unlike navigation
 * links (which rely on colour alone), underline aids scannability in dense
 * document prose where inline links could easily be missed at a glance.
 */
.prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: rgba(0, 180, 216, 0.35);
    text-underline-offset: 3px;
    transition:
        color                 var(--transition-fast),
        text-decoration-color var(--transition-fast);
}

.prose a:hover {
    color: var(--color-accent-bright);
    text-decoration: underline;
    text-decoration-color: rgba(34, 208, 240, 0.55);
}

/* ── Strong text ────────────────────────────────────────────────────────────── */

.prose strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Meta line (.prose__meta) ───────────────────────────────────────────────── */

/*
 * The "Last updated: …" notice displayed at the top of legal documents.
 * Monospace font matches the badge/label language used elsewhere on the site.
 * A small accent dot before the text signals that this is metadata rather
 * than body content. Muted colour keeps it secondary to the page header.
 */
.prose__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    max-width: none;
}

/* Accent dot before the meta text */
.prose__meta::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    opacity: 0.65;
}

/* ── Data card (.prose__data-card) ─────────────────────────────────────────── */

/*
 * A structured label/value table inside a prose section. Used on the Imprint
 * page to display company registration details in a clean two-column grid —
 * matches the .contact-detail aesthetic from the Contact page for consistency.
 */
.prose__data-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-accent);
    border-radius: var(--radius-xs);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

/*
 * A single label + value row inside .prose__data-card.
 * 10rem left column is wide enough for the longest expected label
 * ("Registration") without text wrapping.
 */
.prose__data-row {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-2) var(--space-6);
    align-items: start;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.prose__data-row:first-child {
    padding-top: 0;
}

.prose__data-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* The left-column field name — monospace, uppercase, secondary colour */
.prose__data-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding-top: 2px;   /* optical alignment with value text baseline */
}

/* The right-column content — inherits global text styles */
.prose__data-value {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
    max-width: none;
}

/* ── Notice / callout box (.prose__notice) ──────────────────────────────────── */

/*
 * A highlighted information box for important notices: rights summaries,
 * key obligations, or contextual warnings within a legal document.
 *
 * A 3px left border in accent colour signals elevated importance without
 * the visual weight of a full solid-background box. The very faint accent
 * tint on the background makes it stand out from plain prose at a glance.
 */
.prose__notice {
    background-color: rgba(0, 180, 216, 0.05);
    border: 1px solid rgba(0, 180, 216, 0.18);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    padding: var(--space-4) var(--space-6);
    margin-block: var(--space-6);
}

.prose__notice p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    line-height: var(--leading-normal);
}

.prose__notice p:last-child {
    margin-bottom: 0;
}

.prose__notice strong {
    color: var(--color-accent);
    font-weight: 600;
}

/* ── Responsive: prose data rows collapse on mobile ─────────────────────────── */

@media (max-width: 48rem) {

    /*
     * Two-column label/value rows are too cramped on phone-width screens.
     * Collapse to a single column: label on top, value below.
     */
    .prose__data-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
        padding-block: var(--space-4);
    }

    .prose__data-label {
        padding-top: 0;
    }
}


/* =============================================================================
   RESPONSIVE ADDITIONS — new components at mobile (≤ 768px)
   Appended here rather than inside the existing @media block above to keep
   each component's mobile override near its desktop definition conceptually,
   even though they live in this trailing block for maintainability.
   ============================================================================= */

@media (max-width: 48rem) {   /* 768px */

    /* ── Hero ───────────────────────────────────────────────────────────────── */

    .hero {
        /* Reduce vertical padding on mobile — the viewport is shorter      */
        padding-block: var(--space-16) var(--space-12);
    }

    /* ── Features grid: collapse to single column on mobile ─────────────────── */

    /*
     * Three equal columns won't fit on a phone. We collapse to a single
     * column so cards stack vertically and remain fully readable.
     */
    .features__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .features {
        padding-block: var(--space-12);
    }

    /* ── CTA ────────────────────────────────────────────────────────────────── */

    .cta {
        padding-block: var(--space-12) var(--space-16);
    }

    /* ── Contact detail rows: collapse to single column on mobile ───────────── */

    /*
     * A two-column grid (label | value) doesn't fit on narrow screens.
     * We switch to a stacked layout: label on top, value below, separated
     * by a small gap. This is more readable than trying to squeeze both
     * columns into a narrow viewport.
     */
    .contact-detail {
        grid-template-columns: 1fr;
        gap: var(--space-1);
        padding-block: var(--space-4);
    }

    .contact-detail__label {
        padding-top: 0;
    }
}