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

        /* ===== Color palette (single place to change site colors) =====
           1. Identity colors: brand reference values given by MobileNeuron. Do not edit.
           2. Tuning constants: the only values to change when identity colors look dull on screen.
           3. Working colors: used by every rule below; derived from 1 and 2. No other rule may hard-code a brand color. */
        :root {
            /* 1. Identity colors */
            --id-orange: #FF7F00;       /* RGB 255,127,0 / CMYK 0,54,100,0 */
            --id-orange-2: #ED783C;     /* CMYK 0,57,96,0; available for new components */
            --id-blue: #0A50A1;         /* RGB 10,80,161 */
            --id-blue-2: #224E8E;       /* available for new components */

            /* 2. Tuning constants
               lightness: added to OKLCH lightness (0 = unchanged, 0.03 = slightly brighter, -0.03 = slightly darker)
               chroma: multiplies OKLCH chroma (1 = unchanged, 1.15 = 15 percent more saturated)
               gradient-tint: share of white mixed into the light end of the brand gradients */
            --tune-orange-lightness: 0;
            --tune-orange-chroma: 1;
            --tune-blue-lightness: 0;
            --tune-blue-chroma: 1;
            --tune-gradient-tint: 25%;

            /* Spacing constants: the single place to tighten or loosen the page rhythm.
               Values before the 2026-10-18 tightening are given in parentheses. */
            --space-section: 3rem;          /* top and bottom padding of every section (4rem) */
            --space-section-about: 2.25rem; /* top and bottom padding of the About section (4rem) */
            --space-columns: 2.5rem;        /* gap between the two columns of About and Contact (4rem) */
            --space-block: 1.5rem;          /* section header to grid, grid gaps, pricing header (2rem to 3rem) */
            --space-card: 2rem;             /* inner padding of service, pricing and form cards (2.5rem) */

            /* Hero height: 60 percent of the screen, kept between the two limits; tablet and phone follow the content */
            --nav-height: 70px;             /* height of the fixed navigation bar; body padding-top reserves it */
            --hero-min-height: 400px;       /* slogan block 354px + scroll indicator zone + breathing space (460px before 2026-10-18 tightening) (440px before 2026-10-19 R154) */
            --hero-screen-share: 46vh;      /* share of the screen height the hero follows between the two limits (60vh before) (52vh before R154) */
            --hero-max-height: 480px;       /* stops empty space growing on large screens (640px before; 864px at 2560x1440 originally) (560px before R154) */
            --hero-indicator-space: 2.5rem; /* bottom zone of the hero reserved for the scroll indicator */

            /* 3. Working colors (identity values; replaced by tuned values below when the browser supports relative colors) */
            --primary-orange: var(--id-orange);
            --primary-blue: var(--id-blue);
            --dark-bg: #1a1a1a;
            --light-bg: #f8fafc;
            --text-dark: #1f2937;
            --text-light: #6b7280;
            --white: #ffffff;
            --gradient: linear-gradient(135deg, var(--primary-orange), color-mix(in srgb, var(--primary-orange), white var(--tune-gradient-tint)));
            /* Header background of the home hero and of every detail page header (R106): brand gradient over the photo.
               Photo: Unsplash free license, external link (commander choice 2026-10-18; former photo returned 404). */
            --hero-background: linear-gradient(135deg, color-mix(in srgb, var(--dark-bg) 80%, transparent), color-mix(in srgb, var(--primary-blue) 90%, transparent)),
                               url('https://images.unsplash.com/photo-1639322537228-f710d846310a?w=1920&q=75&auto=format&fit=crop') center/cover;
        }

        @supports (color: oklch(from red l c h)) {
            :root {
                --primary-orange: oklch(from var(--id-orange) calc(l + var(--tune-orange-lightness)) calc(c * var(--tune-orange-chroma)) h);
                --primary-blue: oklch(from var(--id-blue) calc(l + var(--tune-blue-lightness)) calc(c * var(--tune-blue-chroma)) h);
            }
        }
        
		@font-face {
		    font-family: "mn";
		    /* Only the last src declaration takes effect in current browsers; the two earlier src lines (eot for
		       Internet Explorer 8 and older, plus a woff and ttf list) were overridden and are removed (R66).
		       The font files stay in /fonts (frozen path). */
		    src: local('※'), url('../fonts/MobileNeuron-Comfortaa-Bold-Extra.woff') format('woff');
		}
		
        html {
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--nav-height) + 10px);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
            padding-top: var(--nav-height); /* the page starts below the fixed navbar */
        }

        /* Korean pages: lines break only at spaces, never inside a Korean word (default Korean line breaking splits words
           between syllables, measured on every /ko/ page 2026-10-19); a word longer than its line may still break so
           nothing overflows. English pages are not affected. */
        html:lang(ko) body {
            word-break: keep-all;
            overflow-wrap: break-word; /* break-word, not anywhere: grid and flex minimum widths stay as on English pages */
        }

        /* Modern Navigation - FIXED */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: color-mix(in srgb, var(--dark-bg) 95%, transparent);
            backdrop-filter: blur(20px);
            z-index: 1000;
            padding: 0;
            transition: all 0.1s ease;
            height: var(--nav-height);
            display: flex;
            align-items: center;
        }

        .navbar.scrolled {
            padding: 0;
            height: 60px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
            height: 100%;
            width: 100%;
            position: relative;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 800;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0;
        }

		.logo .mobile {
		    color: var(--primary-orange);
		    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		    font-family: "mn", sans-serif;
		}

		.logo .neuron {
		    color: var(--primary-blue);
		    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		    font-family: "mn", sans-serif;
		}

        /* Company name right of the header logo on Korean pages (commander R163, as on the QGKR site): small plain
           text in the light gray of the logo outline (site gray mixed with white), readable on the dark navbar.
           Hidden on tablets and phones (max-width 1024px block), as on the QGKR site. */
        .navbar .logo {
            align-items: baseline; /* R165: the company name sits on the baseline of the logo letters (bottom aligned) */
        }

        .logo .brand-name {
            margin-left: 0.6rem;
            font-size: 0.8rem;
            font-weight: 500;
            color: color-mix(in srgb, var(--text-light), white 50%);
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 1rem;
            align-items: center;
            height: 100%;
            margin-left: auto; /* keeps the menu at the right end when the language toggle follows it */
        }

        .nav-links li {
            display: flex;
            align-items: center;
        }

        .nav-links a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: all 0.1s ease;
            padding: 0.4rem 0.8rem;
            border-radius: 8px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            line-height: 1;
        }

        .nav-links a:hover {
            color: var(--primary-orange);
            background: color-mix(in srgb, var(--primary-orange) 10%, transparent);
        }

        .nav-links a.active {
            color: var(--primary-orange);
            background: color-mix(in srgb, var(--primary-orange) 15%, transparent);
        }

        .mobile-menu {
            display: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            z-index: 1001;
        }

        /* Language toggle (commander R38, R41): a rounded-rectangle button outside the menu, at the right end of the
           header (beside the hamburger on phones and tablets); the permanent outline sets it apart from menu items */
        .lang-toggle {
            padding: 0.35rem 0.75rem;
            border: 1.5px solid var(--primary-orange);
            border-radius: 6px;
            color: var(--primary-orange);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            line-height: 1;
            text-decoration: none;
            transition: background-color 0.1s ease, color 0.1s ease;
        }

        .lang-toggle:hover,
        .lang-toggle:focus-visible {
            background: var(--primary-orange);
            color: var(--dark-bg);
        }

        /* PC only (R92): a smaller right padding of the header moves the language toggle towards the right edge;
           the left padding (logo side) stays 2rem. Tablet and phone keep the symmetric 2rem padding. */
        /* 2026-10-19 (commander R131, "like QGKR"): on PC the toggle is no longer next to the menu but at the right end
           of the full-width navbar, 1rem from the window edge: .nav-container is not positioned here, so the toggle's
           containing block is the fixed .navbar. The 1rem right padding above (R92) is replaced: the menu keeps 2rem,
           and more where the window is too narrow for the menu, the 2rem gap and the toggle (--lang-toggle-reserve =
           1rem edge + toggle width + 2rem gap, measured toggle width under 3rem); (100vw - 1200px) / 2 is the free
           space right of the 1200px container. */
        @media (min-width: 1025px) {
            .nav-container {
                --lang-toggle-reserve: 6.5rem;
                position: static;
                padding-right: max(2rem, calc(var(--lang-toggle-reserve) - (100vw - 1200px) / 2));
            }

            .lang-toggle {
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%);
            }

            /* Header logo on PC (R92, R94 to R96): 1px sharp light gray outline around the blue "Neuron" only, so it
               stands out from the dark header (eight 1px shadows without blur); "Mobile" keeps the soft dark shadow of
               .logo .mobile. Tried before: gray var(--text-light) and white on both words, dark gray on "Neuron". */
            .navbar .logo .neuron {
                --logo-outline: color-mix(in srgb, var(--text-light), white 50%); /* light gray derived from the site gray */
                text-shadow: -1px -1px 0 var(--logo-outline), 0 -1px 0 var(--logo-outline), 1px -1px 0 var(--logo-outline),
                             -1px 0 0 var(--logo-outline), 1px 0 0 var(--logo-outline),
                             -1px 1px 0 var(--logo-outline), 0 1px 0 var(--logo-outline), 1px 1px 0 var(--logo-outline);
            }
        }

        /* Mobile Menu Dropdown Styles - COMPLETELY SOLID */
        .nav-links.active {
            display: flex !important;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--dark-bg) !important; /* SOLID DARK BACKGROUND */
            backdrop-filter: none !important; /* REMOVE ANY BLUR EFFECTS */
            flex-direction: column;
            padding: 0;
            margin: 0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
            border-top: 3px solid var(--primary-orange);
            border-bottom: 3px solid var(--primary-orange);
            z-index: 999;
            width: 100%;
            gap: 0;
        }

        .nav-links.active li {
            width: 100%;
            text-align: center;
            background: var(--dark-bg) !important; /* SOLID BACKGROUND FOR EACH ITEM */
            margin: 0;
            padding: 0;
            border: none;
            gap: 0;
            border-bottom: 1px solid color-mix(in srgb, var(--primary-orange) 20%, transparent);
        }

        .nav-links.active li:last-child {
            border-bottom: none;
        }

        .nav-links.active a {
            display: block !important;
            padding: 1.2rem !important;
            width: 100%;
            border-radius: 0;
            font-size: 1.1rem;
            font-weight: 600;
            text-align: center;
            color: var(--white) !important;
            background: var(--primary-blue) !important; /* Brand blue background */
            border: none !important;
            transition: all 0.3s ease;
            margin: 0;
            line-height: 1.2;
        }

        .nav-links.active a:hover {
            background: var(--primary-orange) !important;
            color: var(--dark-bg) !important; /* DARK TEXT ON ORANGE HOVER */
            transform: scale(1.05);
        }

        /* Hero Section */
        .hero {
		    min-height: clamp(var(--hero-min-height), var(--hero-screen-share), var(--hero-max-height)); /* was height: 60vh */
		    margin-bottom: 0;
            padding-bottom: var(--hero-indicator-space); /* keeps the scroll indicator below the buttons and lifts the slogan above center */
            background: var(--hero-background); /* gradient and photo defined once in :root (R106) */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            --hero-glow-x: 30%; /* resting glow position, also for browsers without @property (R157) */
            --hero-glow-y: 40%;
            transition: --hero-glow-x 0.6s ease-out, --hero-glow-y 0.6s ease-out; /* pointer-following glow (R154), see below */
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y), color-mix(in srgb, var(--primary-orange) 30%, transparent) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--primary-blue) 30%, transparent) 0%, transparent 50%);
            animation: float 6s ease-in-out infinite;
        }

        /* Orange glow of the hero follows the mouse pointer (commander R154): js/site.js sets --hero-glow-x and
           --hero-glow-y on .hero in percent of the hero box. The initial values 30% 40% are the former fixed position,
           kept on touch screens, with reduced motion and without scripts. Registered properties (inherited by
           .hero::before) so that the glow glides to the pointer instead of jumping. */
        @property --hero-glow-x { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
        @property --hero-glow-y { syntax: '<percentage>'; inherits: true; initial-value: 40%; }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(1deg); }
        }

        .hero-content {
            text-align: center;
            color: var(--white);
            max-width: 800px;
            padding: 2rem 1.5rem 1rem 1.5rem;
            position: relative;
            z-index: 2;
        }

        /* Slogan before the typing starts: laid out (it gives the hero its final height) but invisible (R169) */
        .hero h1.typing-pending {
            visibility: hidden;
        }

        .hero h1 {
            font-size: clamp(1.85rem, 3.6vw, 2.5rem); /* clamp(2rem, 4vw, 2.8rem) before 2026-10-19 R154 (smaller hero) */
            font-weight: 800;
            margin-bottom: 0.8rem;
            line-height: 1.2;
        }

        .hero .brand {
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            font-size: 1rem;
            margin-bottom: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.1s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: var(--gradient);
            color: var(--white);
            box-shadow: 0 8px 25px color-mix(in srgb, var(--primary-orange) 30%, transparent);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 35px color-mix(in srgb, var(--primary-orange) 40%, transparent);
        }

        /* Contact form button while a message is being sent (js/contact.js disables it, commander R51) */
        .btn:disabled {
            opacity: 0.6;
            cursor: wait;
            transform: none;
        }

        .btn-secondary {
            background: transparent;
            color: var(--white);
            border: 2px solid var(--white);
        }

        .btn-secondary:hover {
            background: var(--white);
            color: var(--text-dark);
            transform: translateY(-2px);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            color: var(--white);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
            40% { transform: translateX(-50%) translateY(-10px); }
            60% { transform: translateX(-50%) translateY(-5px); }
        }

        /* Section Styles */
        .section {
            padding: var(--space-section) 0;
            position: relative;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .section-header {
            text-align: center;
            margin-bottom: var(--space-block);
        }

        .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 800;
            margin-bottom: 1rem;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: var(--gradient);
            border-radius: 2px;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }

        /* Secondary note line under a section subtitle, e.g. "The plans below are examples." (R45) */
        .subtitle-note {
            display: block;
            margin-top: 0.4rem;
            font-size: 0.9em;
        }

        /* About Section */
        .about {
            background: var(--light-bg);
		    position: relative;
		    z-index: 1;
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-columns);
            align-items: center;
        }

        .about-text h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

		.about-text .mobile { 
		    color: var(--primary-orange); 
		    font-family: "mn", sans-serif;
		}
		.about-text .neuron { 
		    color: var(--primary-blue); 
		    font-family: "mn", sans-serif;
		}
        .about-image {
            height: 300px;
            overflow: hidden;
            position: relative;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
        }

        .about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Services Grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: var(--space-block);
            margin-top: var(--space-block);
        }

        /* Every card spans the rows of its grid (home: icon, title, text, link = 4; detail pages: title, text, link = 3)
           and shares them through subgrid, so titles start at the top and texts and links start at the same height in
           all cards of one row even when a title wraps (R74, same method as the pricing cards, R44). Cards of one grid
           row have equal height, so their links line up (R34). The card's own row-gap 0 replaces the grid gap inside. */
        .service-card {
            background: var(--white);
            border-radius: 20px;
            padding: var(--space-card);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            transition: all 0.1s ease;
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 4;
            row-gap: 0;
            align-content: start;
        }

        .detail-body .service-card {
            grid-row: span 3;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        }

        .service-card:hover::before {
            transform: scaleX(1);
        }

        .service-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.2rem;
            color: var(--white);
            font-size: 1.8rem;
        }

        .service-card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-dark);
            white-space: pre-line; /* a line break written in a content title (\n) is shown as a line break (R92) */
        }

        .service-card p {
            color: var(--text-light);
            line-height: 1.7;
        }

        /* Pricing Section */
        .pricing {
            background: var(--light-bg);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 4 pricing cards in one row on every width above the 1024 px breakpoint (240px split them 3+1 between 1025 and 1095 px) */
            gap: var(--space-block);
            margin-top: var(--space-block);
        }

        /* Every card spans three rows of the pricing grid (title, period, features) and shares them through subgrid,
           so period and feature list start at the same height in all cards of one row even when a title wraps to
           two lines (commander request 2026-10-18, R44). The card's own row-gap 0 replaces the grid gap inside it. */
        .pricing-card {
            background: var(--white);
            border-radius: 20px;
            padding: var(--space-card) 1.5rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            transition: all 0.1s ease;
            position: relative;
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 3;
            row-gap: 0;
        }

        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        }

        /* display: contents makes title and period direct rows of the card subgrid; text-align is still inherited.
           The header gap below the period moved to .pricing-period (was margin-bottom here). */
        .pricing-header {
            text-align: center;
            display: contents;
        }

        .pricing-header h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
            line-height: 1.2;  /* tighter line spacing when a title wraps (R44) */
            align-self: start; /* titles are top-aligned in their shared row (commander, R44) */
        }

        .pricing-period {
            color: var(--text-light);
            font-size: 1.1rem;
            margin-bottom: var(--space-block);
        }

        .pricing-features {
            list-style: none;
            margin-bottom: 0;
        }

        .pricing-features li {
            padding: 0.6rem 0;
            color: var(--text-light);
            position: relative;
            padding-left: 1.5rem;
        }

        .pricing-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--primary-orange);
            font-weight: bold;
        }

        /* Contact Section */
        .contact {
            background: var(--dark-bg);
            color: var(--white);
        }

        /* Section header and form status text of the dark contact section (were inline styles in home.html, R66) */
        .contact .section-title {
            color: var(--white);
        }

        .contact .section-subtitle {
            color: rgba(255, 255, 255, 0.8);
        }

        .form-result {
            margin-top: 1rem;
            color: var(--primary-orange);
            font-weight: 600;
            text-align: center;
        }

        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-columns);
            align-items: start;
        }

        .contact-info h3 {
            color: var(--primary-orange);
            font-size: 1.3rem;
            margin-bottom: 1rem;
        }

        .contact-info p {
            margin-bottom: 2rem;
            opacity: 0.8;
        }

        .contact-form {
            background: rgba(255, 255, 255, 0.05);
            padding: var(--space-card);
            border-radius: 20px;
            backdrop-filter: blur(20px);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: var(--white);
            font-size: 1rem;
        }

        /* Message box: the visitor may change its height only; the width stays fixed to the form (commander R52) */
        .form-group textarea {
            resize: vertical;
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-orange);
        }

        /* Footer */
        .footer {
            background: #000;
            color: var(--white);
            padding: 3rem 0 1rem;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
		.footer .logo .mobile {
		    font-family: "mn", sans-serif;
		}
		.footer .logo .neuron {
		    font-family: "mn", sans-serif;
		}
        .social-links {
            display: flex;
            gap: 1rem;
        }

        .social-links a {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            text-decoration: none;
            transition: all 0.1s ease;
        }

        .social-links a:hover {
            background: var(--primary-orange);
            transform: translateY(-2px);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0.7;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            /* Tablets and phones (commander R168, 2026-10-19): the navbar (logo, language toggle, menu button) is
               fixed at the bottom of the screen from the first screen on; the page reserves its height at the bottom
               (was padding-top: 60px), in-page links stop 10px below the window top, and the menu opens upward. */
            html {
                scroll-padding-top: 10px;
            }

            body {
                padding-top: 0;
                padding-bottom: 60px;
            }

            .navbar {
                top: auto;
                bottom: 0;
                height: 60px;
            }

            .navbar.scrolled {
                height: 55px;
                box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
            }

            .nav-links {
                display: none;
            }

            .nav-links.active {
                top: auto;
                bottom: 100%;
                box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8);
            }

            .logo .brand-name {
                display: none;
            }

            .mobile-menu {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                width: 40px;
                color: var(--white);
                font-size: 1.5rem;
                cursor: pointer;
            }

            .mobile-menu.active i {
                transform: rotate(90deg);
                transition: transform 0.3s ease;
            }

            .lang-toggle {
                margin-left: auto; /* the menu list is hidden here, so the toggle moves to the right beside the hamburger */
                margin-right: 0.5rem;
            }

            /* Tablet and phone: the hero follows its content (a fixed 40vh / 350px clipped the title under the navbar on phones) */
            .hero {
                min-height: 0;
                padding-bottom: var(--hero-indicator-space);
            }

            .hero h1 {
                font-size: 1.85rem; /* 2rem before 2026-10-19 R154 */
            }

            .hero p {
                font-size: 1rem;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .about-content,
            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .services-grid,
            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .section {
                padding: var(--space-section) 0;
            }

            .footer-content {
                flex-direction: column;
                gap: 2rem;
            }
        }

        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.2s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Loading Animation */
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--dark-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: opacity 0.5s ease;
        }

        .loading.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid color-mix(in srgb, var(--primary-orange) 30%, transparent);
            border-top: 3px solid var(--primary-orange);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ===== Added for the hub and detail structure (5.renewal) ===== */

        /* Hero lead: the closing phrase is split into two spans that never wrap inside; on narrow screens the line
           breaks only after the comma, at full font size (commander request 2026-10-18) */
        .hero .lead-tail,
        .hero .nowrap {
            white-space: nowrap;
        }

        /* Hero title connector word ("that") toned down to gray (commander request 2026-10-18) */
        .hero .connector {
            color: #808080; /* solid gray chosen by the commander (R101); tried #A9A9A9 (R99); rgba(255, 255, 255, 0.65) before */
        }

        /* About section: tighter than other sections (two selectors so the mobile .section rule does not override it) */
        .section.about {
            padding: var(--space-section-about) 0;
        }

        /* Footer legal links: same layout as the former inline style of the single-page site */
        .legal-links p {
            text-align: right;
            color: rgba(255, 255, 255, 0.6);   /* plain, unobtrusive on the black footer */
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .legal-links a {
            color: inherit;
            text-decoration: none;
        }

        .legal-links a:hover {
            color: var(--white);
            text-decoration: underline;
        }

        /* About section proof strip: verified figures */
        .fact-strip {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .fact-strip li {
            background: var(--white);
            border-left: 4px solid var(--primary-orange);
            border-radius: 8px;
            padding: 0.8rem 1rem;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        .fact-strip strong {
            display: block;
            font-size: 1.4rem;
            color: var(--primary-blue);
        }

        .fact-strip span {
            font-size: 0.9rem;
            color: var(--text-light);
        }

        /* Links start at the top of the last card row, which all cards of one grid row share (subgrid), so single links
           and link groups line up (R74, R78); line-height equals .service-card p so both kinds start at the same height. */
        .card-link {
            display: inline-block;
            padding-top: 1.2rem;     /* minimum gap between the text and the link */
            justify-self: start;     /* clickable area only as wide as the link text */
            align-self: start;
            line-height: 1.7;
            color: var(--primary-orange);
            font-weight: 600;
            text-decoration: none;
        }

        .card-link:hover {
            text-decoration: underline;
        }

        /* Several external links in one card (patent records, exam pages): the group takes the place of a single
           .card-link in the last card row, the links wrap side by side */
        .card-links {
            align-self: start;
            padding-top: 1.2rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 1.2rem;
        }

        .card-links .card-link {
            padding-top: 0;
        }

        /* Detail pages (services/<id>.html level 2, solutions/<id>.html level 3) */
        .page-header {
            padding: var(--space-section) 0;
            background: var(--hero-background); /* same as the home hero (R106); gradient only, 92% dark, before */
            color: var(--white);
        }

        .page-header h1 {
            font-size: clamp(1.8rem, 4vw, 2.6rem);
            font-weight: 800;
            margin: 0.5rem 0 1rem;
        }

        .page-header .tagline {
            font-size: 1.15rem;
            max-width: 800px;
            line-height: 1.7;
            opacity: 0.9;
            margin-bottom: 1.5rem;
        }

        /* Store buttons of a detail page header, one per app (R83); they wrap on narrow screens */
        .header-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .breadcrumb {
            font-size: 0.9rem;
            opacity: 0.85;
        }

        .breadcrumb a {
            color: var(--white);
            text-decoration: none;
        }

        .breadcrumb a:hover {
            color: var(--primary-orange);
        }

        .detail-block {
            max-width: 900px;
            margin: 0 auto calc(var(--space-section) * 2 / 3);
        }

        /* Block with space_before = true in the content file (R139): wider space above it, to separate groups of blocks */
        .detail-block.space-before {
            margin-top: calc(var(--space-section) * 2 / 3);
        }

        .detail-block h2 {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .detail-block p,
        .detail-block li {
            color: var(--text-light);
            line-height: 1.8;
        }

        .detail-block ul {
            padding-left: 1.3rem;
        }

        .detail-block li + li {
            margin-top: 0.4rem;
        }

        .detail-block a {
            color: var(--primary-blue);
        }

        .detail-body .section-header {
            margin-top: calc(var(--space-section) * 2 / 3);
        }

        .detail-cta {
            text-align: center;
            margin-top: calc(var(--space-section) * 2 / 3);
        }

        .detail-block p + ul {
            margin-top: 0.6rem;
        }

        /* Sub-sections of a detail block (R86): smaller heading, grouped by a light brand-blue line on the left */
        .detail-part {
            margin-top: 1.25rem;
            padding-left: 1.25rem;
            border-left: 3px solid color-mix(in srgb, var(--primary-blue) 25%, var(--white));
        }

        .detail-part h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

        /* Three-part detail block (commander R47): label column and content column; stacked on phones */
        .block-profile {
            display: grid;
            grid-template-columns: 8rem 1fr;
            gap: 0.75rem 1.25rem;
        }

        .block-profile dt {
            font-weight: 700;
            color: var(--primary-blue);
            line-height: 1.8;
        }

        .block-profile dd {
            margin: 0;
            color: var(--text-light);
            line-height: 1.8;
        }

        .detail-block .element-tags {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .detail-block .element-tags li {
            margin: 0;
            padding: 0.2rem 0.75rem;
            border-radius: 0.9rem; /* half the one-line tag height: a pill on one line, a rounded box when a tag wraps on phones */
            background: color-mix(in srgb, var(--primary-blue) 8%, var(--white));
            color: var(--text-dark);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        /* Work process of a service page (commander R120, R125): numbered step boxes in reading order, joined by a
           chevron drawn with two borders (no arrow character, so no font dependency). The chevron is centered in the
           column gap after every step but the last; at a line end it points on to the next line.
           PC (R133, R135: one line where possible, slightly smaller font): the steps stay in one row; a box narrower than
           its label wraps the label inside the box (flex-shrink), the boxes of a row keep one height. */
        .detail-block ol.flow {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.9rem 2rem;
            counter-reset: flow-step;
        }

        .detail-block ol.flow li {
            position: relative;
            display: flex; /* number and label side by side; a wrapped label keeps its lines right of the number */
            align-items: center;
            margin: 0;
            padding: 0.45rem 0.85rem;
            border: 1.5px solid var(--primary-blue);
            border-radius: 0.5rem;
            background: color-mix(in srgb, var(--primary-blue) 6%, var(--white));
            color: var(--text-dark);
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.45;
            counter-increment: flow-step;
        }

        .detail-block ol.flow li::before {
            content: counter(flow-step);
            margin-right: 0.45rem;
            color: var(--primary-orange);
            font-weight: 700;
        }

        @media (min-width: 1025px) {
            .detail-block ol.flow {
                flex-wrap: nowrap;
            }
        }

        .detail-flow .flow-note {
            margin-top: 0.9rem;
        }

        .detail-block ol.flow li:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 50%;
            left: calc(100% + 0.8rem); /* the visible ">" is the right half of the rotated square: this centers it in the gap */
            width: 0.55rem;
            height: 0.55rem;
            border-top: 2.5px solid var(--primary-orange);
            border-right: 2.5px solid var(--primary-orange);
            transform: translate(-50%, -50%) rotate(45deg);
        }

        /* Terms of Service (terms/terms_<lang>.htm): articles inside each chapter block */
        .terms-chapter h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-dark);
            margin: 1.2rem 0 0.4rem;
        }

        .terms-chapter p + p {
            margin-top: 0.4rem;
        }

        .terms-chapter ol {
            padding-left: 1.5rem;
            margin-top: 0.4rem;
        }

        @media (max-width: 768px) {
            .fact-strip {
                grid-template-columns: 1fr;
            }

            .page-header {
                padding-top: var(--space-block);
            }

            .block-profile {
                grid-template-columns: 1fr;
                gap: 0.25rem;
            }

            .block-profile dd + dt {
                margin-top: 0.75rem;
            }
        }