:root {
        --bg:           #E8ECF2;
        --bg2:          #DDE3EC;
        --bg3:          #D0D8E4;
        --surface:      #FFFFFF;
        --navy:         #0D1F3C;
        --navy-light:   #1A3560;
        --accent:       #007E7A;
        --accent-light: #00A89B;
        --accent-pale: color-mix(in srgb, var(--accent) 11%, #fff);
        --accent-mid:   rgba(var(--accent-rgb),0.12);
        --border:       rgba(var(--navy-rgb),0.10);
        --border-accent:rgba(var(--accent-rgb),0.30);
        --text: #252B37;
        --text-dim: #3E4756;
        --text-bright:  var(--ink);
        --font-head:    'Fraunces', Georgia, 'Times New Roman', serif;
        --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        --radius:       16px;
        --shadow:       0 2px 20px rgba(var(--shade-rgb),0.08);
        --shadow-lg:    0 8px 40px rgba(var(--shade-rgb),0.12);

        /* ── TYPE SCALE (4 sizes) ─────────────────
           Display : clamp(32px,5vw,56px)   Hero H1 only
           --fs-1  : 36px   Section headings (H2)
           --fs-2  : 24px   Panel headings (H3, kit names, AIMX title, CTA)
           --fs-3  : 16px   All body text AND card/component headings
                            — headings use font-weight 700, body uses 400
           --fs-4  : 13px   Labels, badges, captions, footer, pills, nav
        ─────────────────────────────────────────── */
        --fs-1: 36px;
        --fs-2: 24px;
        --fs-3: 16px;
        --fs-4: 13px;
        /* palette tokens (default = current CARIMO teal) */
        --blue: #0052A5;
        --navy-rgb: 13,31,60; --accent-rgb: 0,126,122; --accent-light-rgb: 0,168,155; --blue-rgb: 0,82,165; --bg-rgb: 232,236,242;
        --navy-deep: color-mix(in srgb, var(--navy) 78%, #000);
        --ai-start: color-mix(in srgb, var(--accent) 42%, #000);
        --ai-end: color-mix(in srgb, var(--accent) 72%, #000);
        --ctrl-end: color-mix(in srgb, var(--navy-light) 88%, #000);
        --accent-tint: color-mix(in srgb, var(--accent) 10%, #fff);
        --accent-tint2: color-mix(in srgb, var(--accent) 5%, #fff);
        --bg-soft: color-mix(in srgb, var(--bg) 40%, #fff);
        --bg-soft2: color-mix(in srgb, var(--bg) 75%, #fff);
        --exp-end: color-mix(in srgb, var(--navy) 78%, var(--navy-light));
        --prod-a: color-mix(in srgb, var(--navy) 60%, var(--navy-light));
        --ink: var(--navy); --ink-rgb: var(--navy-rgb); --shade-rgb: var(--navy-rgb);
        --accent-text: #005655; --sec-a: var(--surface); --ring: rgba(var(--ink-rgb),.06);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-3); line-height: 1.7; overflow-x: hidden; }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

    h1,h2,h3,h4,h5 { font-family: var(--font-head); color: var(--text-bright); font-weight: 600; letter-spacing: 0em; line-height: 1.2; }
    p { color: var(--text); }
    .label { font-family: var(--font-body); font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); }
    .gradient-text { background: linear-gradient(110deg, var(--accent) 0%, var(--accent-light) 50%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

    /* BUTTONS */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: var(--fs-3); font-weight: 700; letter-spacing: 0.04em; padding: 13px 26px; border-radius: 100px; transition: all 0.22s; cursor: pointer; border: none; white-space: nowrap; min-height: 46px; }
    .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--navy); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
    .btn-outline { background: transparent; color: var(--accent-text); border: 1.5px solid var(--border-accent); }
    .btn-outline:hover { background: var(--accent-mid); color: var(--ink); }
    .btn-ghost { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); }
    .btn-ghost:hover { border-color: var(--border-accent); color: var(--accent-text); }
    .btn-navy { background: var(--navy); color: #fff; }
    .btn-navy:hover { background: var(--navy-light); box-shadow: var(--shadow-lg); }

    /* NAVBAR */
    #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(245,247,250,0.82); backdrop-filter: blur(14px); padding: 14px 48px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s; border-bottom: 1px solid transparent; gap: 16px; }
    #navbar.scrolled { background: rgba(245,247,250,0.95); backdrop-filter: blur(20px); border-color: var(--border); box-shadow: var(--shadow); padding: 10px 48px; }
    .nav-logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .nav-logo img { height: 42px; width: auto; object-fit: contain; flex-shrink: 0; }
    .nav-logo-text { min-width: 0; }
    .nav-logo-text .name { font-family: var(--font-head); font-size: var(--fs-3); font-weight: 600; color: var(--ink); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15; }
    .nav-logo-text .name .long { display: inline; }
    .nav-logo-text .sub { font-size: var(--fs-4); color: var(--accent-text); letter-spacing: 0.15em; margin-top: 3px; font-weight: 600; display: block; }
    .nav-links { display: flex; align-items: center; gap: 26px; }
    .nav-links a { font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); transition: color 0.2s; }
    .nav-links a:hover { color: var(--accent-text); }
    .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; flex-shrink: 0; }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: all 0.3s; }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .mobile-menu { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(245,247,250,0.98); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 80px 24px 40px; overflow-y: auto; }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { font-family: var(--font-head); font-size: 26px; font-weight: 600; color: var(--ink); transition: color 0.2s; padding: 6px 12px; }
    .mobile-menu a:hover { color: var(--accent-text); }

    /* HERO */
    #hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 120px 48px 72px; text-align: center; position: relative; overflow: hidden; }
    .hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--accent-rgb),0.07) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 85% 85%, rgba(var(--blue-rgb),0.05) 0%, transparent 60%); }
    .hero-grid { display: none; }
    #hero .inner { position: relative; z-index: 2; max-width: 860px; width: 100%; }
    .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-accent); border-radius: 100px; padding: 8px 20px; margin-bottom: 28px; font-size: var(--fs-3); font-weight: 700; letter-spacing: 0.08em; color: var(--accent-text); }
    .hero-badge::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: blink 2s infinite; flex-shrink: 0; }
    @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
    #hero h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 10px; color: var(--ink); }
    .hero-sub { font-size: var(--fs-4); color: var(--text-dim); letter-spacing: 0.1em; margin-bottom: 20px; font-weight: 600; text-transform: uppercase; }
    #hero .lead { font-size: var(--fs-3); color: var(--text); max-width: 600px; margin: 0 auto 36px; }
    .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
    .hero-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; width: 100%; max-width: 820px; margin: 0 auto; }
    .hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 16px; text-align: center; transition: all 0.25s; cursor: pointer; }
    .hero-card:hover { border-color: var(--border-accent); background: var(--accent-pale); transform: translateY(-3px); box-shadow: var(--shadow); }
    .hero-card .icon { font-size: 30px; margin-bottom: 8px; }
    .hero-card h4 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 3px; font-family: var(--font-body); font-weight: 700; }
    .hero-card p { font-size: var(--fs-4); color: var(--text-dim); }

    /* TRUST — field evidence only */
    #trust { background: var(--navy); padding: 32px 48px; }
    .trust-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-around; gap: 8px 0; }
    .trust-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 18px; }
    .trust-item .num { font-family: var(--font-body); font-size: 32px; font-weight: 800; color: #fff; line-height: 1; }
    .trust-item .desc { font-size: var(--fs-4); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); font-weight: 600; text-align: center; }
    .trust-div { width: 1px; height: 36px; background: rgba(255,255,255,0.12); }

    /* SECTIONS */
    section { padding: 88px 48px; scroll-margin-top: 84px; }
    section > .section-inner > .section-header { scroll-margin-top: 84px; }
    .section-inner { max-width: 1080px; margin: 0 auto; }
    .section-header { margin-bottom: 52px; }
    .section-header .label { display: block; margin-bottom: 10px; }
    .section-header h2 { font-size: var(--fs-1); }
    .section-header p { margin-top: 14px; max-width: 100%; font-size: var(--fs-3); }
    .section-header.center { text-align: center; }
    .section-header.center p { margin-left: auto; margin-right: auto; }

    /* ABOUT */
    #about { background: var(--surface); }
    .about-grid { display: flex; flex-direction: column; gap: 36px; }
    .about-top { display: block; }
    .about-bottom { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding-top: 32px; border-top: 1px solid var(--border); }
    .pillar { display: flex; gap: 14px; margin-bottom: 22px; }
    .pillar-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-pale); border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
    .pillar-text h4 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 2px; font-family: var(--font-body); font-weight: 700; }
    .pillar-text p { font-size: var(--fs-3); color: var(--text-dim); }
    .cert-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
    .cert { background: var(--accent-pale); border: 1px solid var(--border-accent); border-radius: 100px; padding: 6px 15px; font-size: var(--fs-4); color: var(--accent-text); font-weight: 700; }
    .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .stat-box { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
    .stat-box .big { font-family: var(--font-head); font-size: 32px; font-weight: 600; color: var(--accent-text); line-height: 1; }
    .stat-box .lbl { display: block; font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
    .stat-box p { font-size: var(--fs-3); color: var(--text-dim); margin-top: 6px; }
    .market-box { margin-top: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
    .market-box .label { margin-bottom: 12px; display: block; }
    .pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
    .pill { background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 6px 14px; font-size: var(--fs-4); color: var(--text); font-weight: 500; }

    /* Founder credentials strip (moved out of trust bar) */
    .founder-box { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 14px; padding: 22px 24px; margin-top: 0; }
    .founder-box .label { display: block; margin-bottom: 10px; }
    .founder-nums { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 12px; }
    .founder-nums div { display: flex; align-items: baseline; gap: 8px; }
    .founder-nums .n { font-family: var(--font-body); font-size: 26px; font-weight: 800; color: var(--accent-text); line-height: 1; }
    .founder-nums .t { font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

    /* CONSULTING */
    #consulting { background: var(--bg); }
    .consult-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .consult-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.25s; }
    .consult-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .consult-top { height: 160px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 52px; border-bottom: 1px solid var(--border); }
    .consult-body { padding: 24px; }
    .consult-body h4 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 8px; font-family: var(--font-body); font-weight: 700; }
    .consult-body p { font-size: var(--fs-3); color: var(--text-dim); line-height: 1.7; }

    /* CAPMAC */
    #capmac { background: var(--navy); }
    #capmac .section-header .label { color: var(--accent-light); }
    #capmac .section-header h2 { color: #fff; }
    #capmac .section-header p { color: rgba(255,255,255,0.72); }
    .capmac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .capmac-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 28px; transition: all 0.25s; }
    .capmac-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(var(--accent-light-rgb),0.5); transform: translateY(-3px); }
    .capmac-num { font-family: var(--font-head); font-size: 36px; font-weight: 600; color: rgba(var(--accent-light-rgb),0.5); line-height: 1; margin-bottom: 14px; }
    .capmac-card h3 { font-size: var(--fs-3); color: #fff; margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
    .capmac-card p { font-size: var(--fs-3); color: rgba(255,255,255,0.72); line-height: 1.7; }
    .capmac-badge { margin-top: 16px; background: rgba(var(--accent-light-rgb),0.12); border: 1px solid rgba(var(--accent-light-rgb),0.3); border-radius: 10px; padding: 11px 14px; font-size: var(--fs-4); color: rgba(255,255,255,0.7); }
    .capmac-badge strong { color: var(--accent-light); }
    .deploy-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 40px; }
    .deploy-box { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; text-align: center; }
    .deploy-box .icon { font-size: 26px; margin-bottom: 7px; }
    .deploy-box h5 { font-size: var(--fs-3); color: #fff; margin-bottom: 3px; font-family: var(--font-body); font-weight: 700; }
    .deploy-box p { font-size: var(--fs-4); color: rgba(255,255,255,0.72); }

    /* EDUCATION */
    #education { background: var(--bg); }
    .edu-tabs { display: flex; gap: 6px; margin-bottom: 44px; background: var(--bg2); border: 1px solid var(--border); border-radius: 100px; padding: 4px; width: fit-content; }
    .edu-tab { font-family: var(--font-body); font-size: var(--fs-3); font-weight: 700; padding: 11px 26px; border-radius: 100px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; transition: all 0.22s; white-space: nowrap; min-height: 44px; }
    .edu-tab.active { background: var(--navy); color: #fff; }
    .edu-tab:hover:not(.active) { color: var(--ink); }
    .edu-panel { display: none; }
    .edu-panel.active { display: block; }

    /* Kit layout */
    .kit-hero { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: start; margin-bottom: 44px; }
    .kit-hero.kit-hero-solo { grid-template-columns: 1fr; }
    .kit-hero-solo .spec-table { max-width: 640px; }
    .kit-img { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); height: 280px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 72px; }
    .kit-img img { width: 100%; height: 100%; object-fit: cover; }
    .kit-info h3 { font-size: var(--fs-2); color: var(--ink); margin-bottom: 8px; }
    .kit-info .kit-sub { font-size: var(--fs-3); color: var(--text-dim); margin-bottom: 24px; line-height: 1.6; }
    .spec-table { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
    .spec-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px; font-size: var(--fs-3); border-bottom: 1px solid var(--border); }
    .spec-row:last-child { border-bottom: none; }
    .spec-row span:first-child { color: var(--text-dim); flex-shrink: 0; }
    .spec-row span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
    .kit-btns { display: flex; gap: 10px; flex-wrap: wrap; }

    /* Objectives */
    .obj-label { font-family: var(--font-body); font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 16px; }
    .objectives { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 44px; }
    .obj-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; gap: 12px; align-items: flex-start; transition: border-color 0.2s; }
    .obj-card:hover { border-color: var(--border-accent); }
    .obj-num { font-family: var(--font-head); font-size: var(--fs-2); font-weight: 600; color: var(--accent-text); line-height: 1; flex-shrink: 0; padding-top: 1px; }
    .obj-body h5 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 3px; font-family: var(--font-body); font-weight: 700; }
    .obj-body p { font-size: var(--fs-3); color: var(--text-dim); }
    .obj-body .acad { display: block; font-size: var(--fs-4); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); opacity: 1; margin-bottom: 5px; }

    /* AIMX */
    .aimx-block { background: var(--surface); border: 1.5px solid var(--border-accent); border-radius: var(--radius); overflow: hidden; margin-bottom: 44px; }
    .aimx-header { background: linear-gradient(110deg, var(--navy) 0%, var(--navy-light) 100%); padding: 28px 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
    .aimx-header h4 { font-size: var(--fs-2); color: #fff; margin-bottom: 6px; }
    .aimx-header p { font-size: var(--fs-3); color: rgba(255,255,255,0.72); max-width: 480px; line-height: 1.6; }
    .aimx-body { padding: 28px 32px; }
    .aimx-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
    .tier-badge { border-radius: 10px; padding: 14px 18px; }
    .tier-std { background: var(--accent-pale); border: 1px solid var(--border-accent); }
    .tier-adv { background: var(--bg2); border: 1px solid var(--border); }
    .tier-label-text { font-size: var(--fs-4); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 2px; }
    .tier-std .tier-label-text { color: var(--accent-text); }
    .tier-adv .tier-label-text { color: var(--ink); }
    .tier-name { font-family: var(--font-head); font-size: var(--fs-3); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
    .tier-badge p { font-size: var(--fs-3); color: var(--text-dim); }

    /* AIMX table */
    .table-hint { display: none; font-size: var(--fs-4); color: var(--text-dim); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.06em; }
    .aimx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--border); }
    .aimx-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
    .aimx-table th { padding: 13px 18px; font-weight: 700; text-align: left; font-size: var(--fs-4); letter-spacing: 0.05em; font-family: var(--font-body); border-bottom: 2px solid var(--border); }
    .aimx-table th:first-child { background: var(--bg2); color: var(--text-bright); width: 16%; }
    .aimx-table th.th-std { background: var(--accent-pale); color: var(--accent-text); width: 42%; }
    .aimx-table th.th-adv { background: var(--navy); color: #fff; width: 42%; }
    .aimx-table td { padding: 15px 18px; vertical-align: top; border-top: 1px solid var(--border); line-height: 1.6; font-size: var(--fs-3); }
    .aimx-table tr:hover td { background: var(--bg) !important; }
    .aimx-table td:first-child { font-weight: 700; color: var(--ink); font-size: var(--fs-3); background: var(--bg2); white-space: nowrap; }
    .aimx-table td.td-std { color: var(--text); background: var(--surface); }
    .aimx-table td.td-adv { color: var(--accent-text); font-weight: 500; background: var(--accent-tint2); }
    .aimx-table tr.row-alt td.td-std { background: var(--bg); }
    .aimx-table tr.row-alt td.td-adv { background: var(--accent-tint2); }

    /* DC highlights */
    .dc-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; }
    .dc-hl { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: flex; gap: 14px; transition: border-color 0.2s; }
    .dc-hl:hover { border-color: var(--border-accent); }
    .dc-hl .icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
    .dc-hl h5 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 2px; font-family: var(--font-body); font-weight: 700; }
    .dc-hl p { font-size: var(--fs-3); color: var(--text-dim); }

    /* Apps grid */
    .apps-label { font-family: var(--font-body); font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 14px; }
    .apps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 36px; }
    .app-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 13px 14px; font-size: var(--fs-3); font-weight: 600; color: var(--text); text-align: center; transition: all 0.2s; }
    .app-chip:hover { border-color: var(--border-accent); color: var(--accent-text); background: var(--accent-pale); }

    /* Videos */
    .video-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; }
    .video-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all 0.25s; }
    .video-card:hover { border-color: var(--border-accent); transform: translateY(-2px); box-shadow: var(--shadow); }
    .video-preview { height: 120px; background: linear-gradient(135deg, var(--bg2), var(--bg3)); display: flex; align-items: center; justify-content: center; }
    .play-btn { width: 48px; height: 48px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
    .video-card:hover .play-btn { transform: scale(1.1); }
    .play-btn svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
    .video-meta { padding: 16px 18px; }
    .video-meta strong { display: block; font-size: var(--fs-3); color: var(--ink); margin-bottom: 2px; font-weight: 700; }
    .video-meta span { font-size: var(--fs-4); color: var(--text-dim); }

    /* Resources */
    .resources-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 36px; }
    .resources-box h4 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 4px; font-family: var(--font-body); font-weight: 700; }
    .resources-box .sub { font-size: var(--fs-3); color: var(--text-dim); margin-bottom: 20px; }
    .res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
    .res-btn { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; transition: all 0.22s; }
    .res-btn:hover { border-color: var(--border-accent); background: var(--accent-pale); }
    .res-icon { width: 40px; height: 40px; background: var(--accent-pale); border: 1px solid var(--border-accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
    .res-text h5 { font-size: var(--fs-3); color: var(--ink); font-weight: 700; margin-bottom: 2px; }
    .res-text p { font-size: var(--fs-4); color: var(--text-dim); }

    /* ═══ MATLAB ECOSYSTEMS ═══ */
    #matlab { background: var(--surface); }
    .mx-lead { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 14px; padding: 24px 26px; margin-bottom: 32px; }
    .mx-lead p { font-size: var(--fs-3); color: var(--text); }
    .mx-lead strong { color: var(--ink); }
    .mx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
    .mx-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.25s; display: flex; flex-direction: column; }
    .mx-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .mx-top { padding: 22px 26px 18px; color: #fff; }
    .mx-top.ai { background: linear-gradient(115deg, var(--ai-start) 0%, var(--ai-end) 100%); }
    .mx-top.ctrl { background: linear-gradient(115deg, var(--navy) 0%, var(--ctrl-end) 100%); }
    .mx-eyebrow { font-size: var(--fs-4); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 8px; }
    .mx-top h3 { font-size: var(--fs-2); color: #fff; margin-bottom: 4px; }
    .mx-tag { font-size: var(--fs-3); color: rgba(255,255,255,0.75); font-weight: 500; }
    .mx-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
    .mx-body p { font-size: var(--fs-3); color: var(--text); margin-bottom: 18px; }
    .mx-parts { font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; padding-top: 16px; border-top: 1px solid var(--border); margin-top: auto; }
    .mx-parts strong { color: var(--accent-text); display: block; font-size: var(--fs-3); letter-spacing: 0; text-transform: none; margin-top: 6px; font-weight: 700; }
    .mx-figure { margin-bottom: 28px; scroll-margin-top: 96px; }
    .mx-figure a { display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); transition: border-color 0.25s, box-shadow 0.25s; }
    .mx-figure a:hover { border-color: var(--border-accent); box-shadow: var(--shadow-lg); }
    .mx-figure img { width: 100%; height: auto; }
    .mx-figure figcaption { font-size: var(--fs-4); color: var(--text-dim); margin-top: 10px; text-align: center; }
    .mx-figure figcaption .tap { color: var(--accent-text); font-weight: 700; }
    .mx-numbers { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 28px; }
    .mx-num { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 20px; text-align: center; }
    .mx-num .n { font-family: var(--font-body); font-size: 34px; font-weight: 800; color: var(--accent-text); line-height: 1; }
    .mx-num .t { display: block; font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
    .mx-num small { display: block; font-size: var(--fs-4); color: var(--text-dim); margin-top: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; }

    /* Brochure request form */
    .mx-form-box { background: var(--navy); border-radius: var(--radius); padding: 36px 40px; }
    .mx-form-box h4 { font-size: var(--fs-2); color: #fff; margin-bottom: 8px; }
    .mx-form-box > p { font-size: var(--fs-3); color: rgba(255,255,255,0.72); margin-bottom: 24px; max-width: 560px; }
    .mx-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 620px; }
    .mx-form input[type="email"], .mx-form input[type="text"] { flex: 1 1 200px; min-width: 0; font-family: var(--font-body); font-size: var(--fs-3); padding: 13px 18px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; min-height: 46px; }
    .mx-form input::placeholder { color: rgba(255,255,255,0.72); }
    .mx-form input:focus { outline: none; border-color: var(--accent-light); background: rgba(255,255,255,0.12); }
    .mx-form button { flex: 0 0 auto; background: var(--accent-light); color: var(--navy); font-weight: 700; }
    .mx-form button:hover { background: #fff; }
    .mx-form-note { font-size: var(--fs-4); color: rgba(255,255,255,0.72); margin-top: 14px; }
    .mx-form-msg { display: none; font-size: var(--fs-3); color: var(--accent-light); font-weight: 700; margin-top: 16px; }
    .mx-form-msg.show { display: block; }
    .mx-trademark { font-size: var(--fs-4); color: var(--text-dim); margin-top: 24px; line-height: 1.6; }

    /* ═══ CARI-ON LEARNING ═══ */
    #learning { background: var(--bg); }
    .learn-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 28px; }
    .learn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; transition: all 0.25s; display: flex; flex-direction: column; }
    .learn-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .learn-dur { display: inline-block; background: var(--accent-pale); border: 1px solid var(--border-accent); border-radius: 100px; padding: 4px 13px; font-size: var(--fs-4); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; align-self: flex-start; }
    .learn-card h4 { font-size: var(--fs-2); color: var(--ink); margin-bottom: 8px; }
    .learn-card p { font-size: var(--fs-3); color: var(--text-dim); }
    .learn-foot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
    .learn-foot h5 { font-size: var(--fs-3); color: var(--ink); font-weight: 700; margin-bottom: 4px; font-family: var(--font-body); }
    .learn-foot p { font-size: var(--fs-3); color: var(--text-dim); }

    .learn-photo { margin-bottom: 28px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg2); }
    .learn-photo img { width: 100%; height: 340px; object-fit: cover; display: block; }
    .learn-photo figcaption { font-size: var(--fs-4); color: var(--text-dim); padding: 12px 18px; background: var(--surface); }

    .bridge { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1080px; margin: 44px auto 0; padding-top: 28px; border-top: 1px solid var(--border); font-size: var(--fs-3); color: var(--text-dim); text-align: center; }
    .bridge a { color: var(--accent-text); font-weight: 700; }
    .bridge a:hover { text-decoration: underline; }
    #capmac .bridge, #matlab .bridge { border-top-color: rgba(255,255,255,0.12); }

    /* ═══ IN THE LABS (merged evidence) ═══ */
    #labs { background: var(--surface); }
    .labs-hero-nums { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 40px; }
    .labs-num { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px 18px; text-align: center; }
    .labs-num .n { font-family: var(--font-body); font-size: 34px; font-weight: 800; color: var(--accent-text); line-height: 1; }
    .labs-num .t { display: block; font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }

    .labs-sub { font-family: var(--font-body); font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 18px; }
    .dept-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 44px; }
    .dept-card { border-top: 2px solid var(--accent); padding-top: 12px; }
    .dept-card h5 { font-size: var(--fs-3); color: var(--ink); font-weight: 700; margin-bottom: 4px; font-family: var(--font-body); }
    .dept-card p { font-size: var(--fs-4); color: var(--text-dim); line-height: 1.6; }

    .repeat-box { background: var(--navy); border-radius: var(--radius); padding: 32px 36px; margin-bottom: 44px; display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: center; }
    .repeat-box h4 { font-size: var(--fs-2); color: #fff; margin-bottom: 10px; }
    .repeat-box p { font-size: var(--fs-3); color: rgba(255,255,255,0.72); }
    .repeat-stats { display: flex; flex-direction: column; gap: 12px; }
    .repeat-stat { background: rgba(var(--accent-light-rgb),0.12); border: 1px solid rgba(var(--accent-light-rgb),0.3); border-radius: 12px; padding: 14px 18px; }
    .repeat-stat .n { font-family: var(--font-body); font-size: 26px; font-weight: 800; color: var(--accent-light); line-height: 1; }
    .repeat-stat .t { display: block; font-size: var(--fs-4); color: rgba(255,255,255,0.72); margin-top: 5px; }

    .survey-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 20px; }
    .survey-bars { display: flex; flex-direction: column; gap: 14px; }
    .sbar-row .sbar-top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-3); margin-bottom: 6px; }
    .sbar-row .sbar-top span:first-child { color: var(--text); }
    .sbar-row .sbar-top span:last-child { color: var(--accent-text); font-weight: 800; }
    .sbar-track { height: 7px; background: var(--bg2); border-radius: 100px; overflow: hidden; }
    .sbar-fill { height: 100%; background: var(--accent); border-radius: 100px; width: 0; transition: width 1.1s cubic-bezier(.2,.7,.3,1); }
    .faculty-said { display: flex; flex-direction: column; gap: 14px; }
    .fs-item { display: flex; gap: 12px; align-items: flex-start; }
    .fs-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-pale); border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
    .fs-tick svg { width: 12px; height: 12px; stroke: var(--accent-text); }
    .fs-item h5 { font-size: var(--fs-3); color: var(--ink); font-weight: 700; margin-bottom: 2px; font-family: var(--font-body); }
    .fs-item p { font-size: var(--fs-3); color: var(--text-dim); }
    .survey-note { font-size: var(--fs-4); color: var(--text-dim); line-height: 1.6; margin-bottom: 44px; padding-top: 14px; border-top: 1px solid var(--border); }

    .quote-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 44px; }
    .quote-card { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 12px; padding: 22px 24px; }
    .quote-card p { font-size: var(--fs-3); color: var(--text); font-style: italic; margin-bottom: 14px; }
    .quote-card .attr { font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }

    .photo-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
    .photo-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
    .photo-card .ph { height: 180px; background: var(--bg2); overflow: hidden; }
    .photo-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
    .photo-card:hover .ph img { transform: scale(1.05); }
    .photo-card .cap { padding: 13px 15px; font-size: var(--fs-4); color: var(--text-dim); line-height: 1.5; }
    .photo-card .cap strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 2px; }

    /* TEAM */
    #team { background: var(--bg); }
    .team-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; max-width: 740px; margin: 0 auto; }
    .team-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; text-align: center; transition: all 0.25s; }
    .team-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--border); margin: 0 auto 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 32px; transition: border-color 0.25s; }
    .team-card:hover .avatar { border-color: var(--border-accent); }
    .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .team-card h4 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 4px; font-family: var(--font-body); font-weight: 700; }
    .team-card .role { font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 10px; }
    .team-card p { font-size: var(--fs-3); color: var(--text-dim); }

    /* CONTACT */
    #contact { background: var(--surface); }
    .contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 36px; }
    .contact-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.25s; }
    .contact-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow); }
    .contact-top { height: 6px; background: var(--border); }
    .contact-top.hl { background: var(--accent); }
    .contact-body { padding: 26px; }
    .contact-body h4 { font-size: var(--fs-3); color: var(--ink); margin-bottom: 8px; font-family: var(--font-body); font-weight: 700; }
    .contact-body p { font-size: var(--fs-3); color: var(--text-dim); line-height: 1.8; }
    .contact-cta { background: var(--navy); border-radius: var(--radius); padding: 48px; text-align: center; }
    .contact-cta h3 { font-size: var(--fs-2); color: #fff; margin-bottom: 10px; }
    .contact-cta p { font-size: var(--fs-3); color: rgba(255,255,255,0.72); margin-bottom: 28px; }
    .email-link { font-family: var(--font-body); font-size: var(--fs-2); font-weight: 700; color: var(--accent-light); display: inline-flex; align-items: center; gap: 10px; transition: opacity 0.2s; word-break: break-word; }
    .email-link:hover { opacity: 0.75; }

    /* INCUBATION */
    #incubation { background: var(--bg); padding: 52px 48px; border-top: 1px solid var(--border); }
    .incubation-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
    .logo-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
    .logo-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px; min-width: 130px; height: 72px; display: flex; align-items: center; justify-content: center; transition: all 0.25s; }
    .logo-card:hover { border-color: var(--border-accent); transform: scale(1.04); box-shadow: var(--shadow); }
    .logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: all 0.25s; }
    .logo-card:hover img { filter: grayscale(0); opacity: 1; }
    .cert-card { border-color: var(--border-accent); }
    .cert-card .ct { font-family: var(--font-head); font-size: var(--fs-3); font-weight: 600; color: var(--accent-text); text-align: center; line-height: 1.3; }
    .cert-card .ct small { display: block; font-family: var(--font-body); font-size: var(--fs-4); font-weight: 700; letter-spacing: 0.12em; color: var(--text-dim); margin-top: 3px; text-transform: uppercase; }


    /* BACK TO TOP */
    #back-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; background: var(--navy); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(10px); transition: all 0.3s; z-index: 90; box-shadow: var(--shadow); pointer-events: none; }
    #back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    #back-top:hover { background: var(--accent); }
    #back-top svg { width: 16px; height: 16px; stroke: #fff; }

    /* SVG ICONS */
    .svg-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .svg-icon svg { display:block; }
    .hero-card .icon { display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
    .hero-card .icon svg { width:36px; height:36px; }
    .pillar-icon svg { width:20px; height:20px; }
    .consult-top svg { width:52px; height:52px; }
    .deploy-box .icon svg { width:28px; height:28px; }
    .dc-hl .icon svg { width:22px; height:22px; }
    .res-icon svg { width:20px; height:20px; }
    .contact-body h4 svg { width:18px; height:18px; vertical-align:middle; margin-right:6px; margin-top:-2px; }
    .fade-up { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
    .fade-up.vis { opacity: 1; transform: translateY(0); }

    /* ═══════════ RESPONSIVE ═══════════ */
    @media (max-width: 1100px) {
        .mx-numbers, .labs-hero-nums { grid-template-columns: repeat(2,1fr); }
        .dept-grid { grid-template-columns: repeat(2,1fr); }
        .learn-grid { grid-template-columns: repeat(2,1fr); }
        .photo-strip { grid-template-columns: repeat(2,1fr); }
        .repeat-box { grid-template-columns: 1fr; }
        .quote-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 920px) {
        section { padding: 60px 20px; }
        #navbar, #navbar.scrolled { padding: 10px 20px; }
        #incubation { padding: 44px 20px; }
        .nav-links { display: none; }
        .hamburger { display: flex; }
        .hero-cards { grid-template-columns: 1fr 1fr; max-width: 520px; }
        .about-grid, .capmac-grid, .consult-grid, .contact-grid, .team-grid,
        .about-top, .about-bottom,
        .kit-hero, .dc-highlights, .video-row, .aimx-tiers,
        .mx-grid, .survey-wrap { grid-template-columns: 1fr; }
        .objectives { grid-template-columns: 1fr 1fr; }
        .apps-grid { grid-template-columns: repeat(2,1fr); }
        .res-grid { grid-template-columns: 1fr; }
        .deploy-row { grid-template-columns: 1fr 1fr; }
        .kit-img { height: 220px; }
        .trust-div { display: none; }
        .edu-tabs { flex-direction: column; border-radius: var(--radius); width: 100%; }
        .edu-tab { border-radius: 10px; }
        .aimx-header, .aimx-body { padding: 22px 20px; }
        .mx-form-box { padding: 28px 22px; }
        .repeat-box { padding: 26px 22px; }
        .contact-cta { padding: 36px 24px; }
        .table-hint { display: block; }
        #hero { padding: 104px 20px 60px; }
    }

    @media (max-width: 600px) {
        :root { --fs-1: 28px; --fs-2: 21px; }
        .hero-cards { grid-template-columns: 1fr; max-width: 340px; }
        .objectives, .apps-grid, .deploy-row,
        .mx-numbers, .labs-hero-nums, .dept-grid,
        .learn-grid, .photo-strip { grid-template-columns: 1fr; }
        .aimx-table th, .aimx-table td { padding: 10px 12px; font-size: var(--fs-4); }
        .aimx-table td:first-child { white-space: normal; }
        /* Nav logo: short form only */
        .nav-logo img { height: 34px; }
        .nav-logo-text .name .long { display: none; }
        .nav-logo-text .sub { letter-spacing: 0.08em; }
        /* Buttons stack full width */
        .hero-actions { flex-direction: column; align-items: stretch; }
        .hero-actions .btn { width: 100%; }
        .kit-btns { flex-direction: column; align-items: stretch; }
        .kit-btns .btn { width: 100%; }
        .mx-form input[type="email"], .mx-form input[type="text"] { flex: 1 1 100%; }
        .mx-form button { width: 100%; }
        /* Trust bar: two per row */
        .trust-inner { justify-content: center; }
        .trust-item { flex: 0 0 45%; padding: 10px 6px; }
        .trust-item .num { font-size: 26px; }
        .spec-row { flex-direction: column; align-items: flex-start; gap: 2px; }
        .spec-row span:last-child { text-align: left; }
        .photo-card .ph { height: 210px; }
        .learn-photo img { height: 220px; }
        .section-header { margin-bottom: 36px; }
        .email-link { font-size: var(--fs-3); }
        #back-top { bottom: 18px; right: 18px; }
    }

    /* ═══════════════════════════════════════════════════════════
       UPGRADE v2 — polish, interactivity, hero simulation
       (all sizes still use --fs-1…--fs-4; no new type sizes)
    ═══════════════════════════════════════════════════════════ */
    body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
    .skip-link { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 100px; font-weight: 700; font-size: var(--fs-4); transition: top .2s; }
    .skip-link:focus { top: 14px; }

    /* Scroll progress */
    #progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transform: scaleX(0); transform-origin: 0 50%; z-index: 200; }

    /* Nav: active state + tighter fit */
    .nav-links { gap: 22px; }
    .nav-links a:not(.btn) { position: relative; padding: 6px 0; }
    .nav-links a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s ease; }
    .nav-links a:not(.btn):hover::after, .nav-links a.active::after { transform: scaleX(1); }
    .nav-links a.active { color: var(--accent-text); }
    .mobile-menu a.active { color: var(--accent-text); }
    @media (max-width: 1240px) { .nav-links { gap: 15px; } .nav-links a { letter-spacing: .06em; } .nav-logo-text .sub { display: none; } .nav-logo-text .name .long { display: none; } }
    @media (max-width: 1080px) { .nav-links { display: none; } .hamburger { display: flex; } #navbar, #navbar.scrolled { padding-left: 24px; padding-right: 24px; } }

    .nav-links a { white-space: nowrap; }
    .nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }
    .nav-links a.btn-primary::after { display: none; }
    /* Buttons */
    .btn { transition: background .2s, box-shadow .2s, transform .2s, color .2s, border-color .2s; }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn-primary { box-shadow: 0 6px 18px rgba(var(--accent-rgb),.28); }
    .btn-primary:hover { box-shadow: 0 10px 26px rgba(var(--shade-rgb),.25); }
    .btn-ondark { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
    .btn-ondark:hover { background: rgba(255,255,255,.16); border-color: var(--accent-light); }

    /* Readable line lengths */
    .section-header p { max-width: 68ch; }
    .section-header.center p { max-width: 68ch; }
    #hero .lead { max-width: 52ch; }

    /* HERO — split layout */
    #hero { min-height: 0; align-items: stretch; text-align: left; padding: 132px 48px 84px; }
    .hero-bg { background: radial-gradient(ellipse 60% 60% at 82% 30%, rgba(var(--accent-rgb),.13) 0%, transparent 70%), radial-gradient(ellipse 50% 45% at 8% 90%, rgba(var(--blue-rgb),.08) 0%, transparent 65%); }
    .hero-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(var(--ink-rgb),.13) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 75% at 70% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 75% at 70% 40%, #000 0%, transparent 75%); }
    .hero-wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }
    .hero-copy { min-width: 0; }
    #hero .lead { margin: 0 0 32px; }
    .hero-actions { justify-content: flex-start; margin-bottom: 0; }
    .hero-badge { font-size: var(--fs-4); padding: 7px 16px; margin-bottom: 24px; }

    /* Simulation card */
    .sim-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px 22px 18px; box-shadow: 0 24px 60px rgba(var(--shade-rgb),.16), 0 2px 8px rgba(var(--shade-rgb),.06); min-width: 0; }
    .sim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .sim-head strong { font-size: var(--fs-3); color: var(--ink); font-weight: 700; }
    .sim-tag { font-size: var(--fs-4); font-weight: 700; color: var(--accent-text); background: var(--accent-pale); border: 1px solid var(--border-accent); padding: 3px 12px; border-radius: 100px; }
    .sim-plot { background: linear-gradient(180deg, var(--bg-soft), var(--bg-soft2)); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
    #sim-canvas { display: block; width: 100%; height: 250px; }
    .sim-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: 12px 2px 14px; font-size: var(--fs-4); color: var(--text-dim); font-weight: 600; }
    .sim-legend .lg { display: inline-block; width: 18px; height: 0; margin-right: 7px; vertical-align: middle; border-top: 3px solid var(--accent-text); border-radius: 2px; }
    .sim-legend .lg-sp { border-top: 2px dashed var(--ink); }
    .sim-err { margin-left: auto; }
    .sim-err b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; display: inline-block; min-width: 3.2ch; text-align: right; }
    .sim-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 12px; }
    .seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 100px; padding: 3px; }
    .seg-btn { font-family: var(--font-body); font-size: var(--fs-4); font-weight: 700; border: none; background: transparent; color: var(--text-dim); padding: 8px 20px; min-height: 36px; border-radius: 100px; cursor: pointer; transition: all .2s; }
    .seg-btn:hover:not(.on) { color: var(--ink); }
    .seg-btn.on { background: var(--navy); color: #fff; box-shadow: 0 2px 8px rgba(var(--shade-rgb),.25); }
    .sim-gain { display: flex; align-items: center; gap: 12px; font-size: var(--fs-4); font-weight: 700; color: var(--text-dim); flex: 1 1 200px; min-width: 180px; }
    .sim-gain output { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 3ch; text-align: right; }
    input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 100px; background: var(--bg3); outline-offset: 6px; cursor: pointer; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(var(--shade-rgb),.35); transition: transform .15s; }
    input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
    input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(var(--shade-rgb),.35); }
    .sim-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .chip-btn { font-family: var(--font-body); font-size: var(--fs-4); font-weight: 700; color: var(--ink); background: var(--surface); border: 1.5px solid var(--border); border-radius: 100px; padding: 8px 18px; min-height: 38px; cursor: pointer; transition: all .2s; }
    .chip-btn:hover { border-color: var(--border-accent); color: var(--accent-text); background: var(--accent-pale); }
    .chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
    .sim-note { font-size: var(--fs-4); color: var(--text); background: var(--accent-pale); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px; line-height: 1.55; min-height: 3.6em; }
    .sim-cap { font-size: var(--fs-4); color: var(--text-dim); margin-top: 10px; line-height: 1.5; }

    /* Card polish */
    .hero-card, .obj-card, .dc-hl, .learn-card, .consult-card, .team-card, .contact-card, .mx-card, .quote-card, .dept-card, .stat-box, .res-btn, .app-chip, .video-card { will-change: transform; }
    .hero-card { box-shadow: 0 1px 0 rgba(var(--shade-rgb),.04); }
    .obj-card, .dc-hl { transition: border-color .2s, box-shadow .2s, transform .2s; }
    .obj-card:hover, .dc-hl:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .quote-card { position: relative; }
    .quote-card p { padding-right: 30px; }
    .quote-card::before { content: '\201C'; position: absolute; top: 4px; right: 18px; font-size: 64px; line-height: 1; color: var(--accent-mid); font-weight: 800; }
    .dept-card { transition: transform .2s; }
    .dept-card:hover { transform: translateY(-2px); }
    .dept-card { border-top-width: 3px; }

    /* Spotlight on dark cards */
    .capmac-card { position: relative; overflow: hidden; }
    .capmac-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-light-rgb),.16), transparent 60%); }
    .capmac-card:hover::before { opacity: 1; }

    /* Tabs with sliding indicator */
    .edu-tabs { position: relative; }
    .edu-tab { position: relative; z-index: 1; }
    .edu-tab.active { background: transparent; }
    .tab-ind { position: absolute; z-index: 0; background: var(--navy); border-radius: 100px; box-shadow: 0 4px 14px rgba(var(--shade-rgb),.28); transition: left .3s cubic-bezier(.3,.8,.3,1), top .3s cubic-bezier(.3,.8,.3,1), width .3s cubic-bezier(.3,.8,.3,1), height .3s cubic-bezier(.3,.8,.3,1); pointer-events: none; }
    .edu-panel.active { animation: panelIn .35s ease both; }
    @keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    /* Lightbox */
    .mx-figure a { cursor: zoom-in; }
    .lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(var(--navy-rgb),.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; animation: lbIn .2s ease both; }
    .lightbox[hidden] { display: none; }
    .lightbox img { max-width: min(1400px, 100%); max-height: 100%; width: auto; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
    .lb-close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .2s; }
    .lb-close:hover { background: rgba(255,255,255,.2); }
    @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

    /* Toast */
    #toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; font-size: var(--fs-4); font-weight: 700; padding: 12px 22px; border-radius: 100px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 350; }
    #toast.show { opacity: 1; transform: translate(-50%, 0); }

    /* Contact CTA row */
    .cta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; }

    /* Trust strip — subtle depth */
    #trust { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
    .trust-item .num { font-variant-numeric: tabular-nums; }
    .mx-num .n, .stat-box .big, .founder-nums .n { font-variant-numeric: tabular-nums; }

    /* Responsive */
    @media (max-width: 1100px) { .hero-wrap { gap: 36px; grid-template-columns: 1fr 1fr; } }
    @media (max-width: 920px) {
        #hero { padding: 104px 20px 56px; }
        .hero-wrap { grid-template-columns: 1fr; gap: 36px; }
        .hero-copy { text-align: center; }
        .hero-badge { margin-left: auto; margin-right: auto; }
        #hero .lead { margin: 0 auto 28px; }
        .hero-actions { justify-content: center; }
        .hero-dots { -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 0%, transparent 80%); mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 0%, transparent 80%); }
        .edu-tabs { width: 100%; }
    }
    @media (max-width: 600px) {
        .sim-card { padding: 16px 14px 14px; border-radius: 16px; }
        #sim-canvas { height: 210px; }
        .seg { width: 100%; }
        .seg-btn { flex: 1; }
        .sim-gain { flex-basis: 100%; }
        .cta-row .btn { width: 100%; }
        .lightbox { padding: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
        .fade-up { opacity: 1; transform: none; }
    }

    /* ═══ MULTI-PAGE v3 ═══ */
    main > section:first-child { padding-top: 140px; }
    main > section:first-child > .section-inner > .section-header:first-child { margin-top: 0; }
    @media (max-width: 920px) { main > section:first-child { padding-top: 108px; } }
    .nav-logo[aria-current] .name { color: var(--accent-text); }

    /* Footer */
    footer { background: var(--navy); padding: 60px 48px 28px; color: rgba(255,255,255,0.72); }
    .foot-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
    .foot-brand strong { display: block; color: #fff; font-size: var(--fs-3); margin-bottom: 10px; }
    .foot-brand p, .foot-col p { font-size: var(--fs-4); line-height: 1.7; color: rgba(255,255,255,0.72); margin: 0; }
    .foot-li { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--fs-4); font-weight: 700; color: rgba(255,255,255,.75); transition: color .2s; }
    .foot-li:hover { color: var(--accent-light); }
    .foot-col h5 { color: #fff; font-size: var(--fs-4); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; font-family: var(--font-body); }
    .foot-col a { display: block; font-size: var(--fs-4); color: rgba(255,255,255,0.72); padding: 4px 0; transition: color .2s; }
    .foot-col a:hover { color: var(--accent-light); }
    .foot-col p { margin-top: 8px; }
    .foot-base { max-width: 1080px; margin: 0 auto; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
    .foot-base p { font-size: var(--fs-4); color: rgba(255,255,255,0.72); margin: 0; }
    @media (max-width: 920px) { footer { padding: 44px 20px 24px; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
    @media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } }

    /* Home: MATLAB feature band + labs highlight */
    .feat { background: var(--surface); }
    .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 28px; }
    .feat-card { border-radius: var(--radius); padding: 24px 26px; color: #fff; }
    .feat-card.ai { background: linear-gradient(115deg, var(--ai-start) 0%, var(--ai-end) 100%); }
    .feat-card.ctrl { background: linear-gradient(115deg, var(--navy) 0%, var(--ctrl-end) 100%); }
    .feat-card h3 { font-size: var(--fs-2); color: #fff; margin-bottom: 6px; }
    .feat-card p { color: rgba(255,255,255,.78); font-size: var(--fs-3); }
    .feat-card .fc-n { display: block; margin-top: 14px; font-size: var(--fs-4); font-weight: 700; color: rgba(255,255,255,0.72); letter-spacing: .04em; }
    .feat-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .home-labs { background: var(--bg); }
    .home-cta { background: var(--surface); padding-top: 24px; }
    @media (max-width: 920px) { .feat-grid { grid-template-columns: 1fr; } }
    @media (max-width: 600px) { .feat-actions .btn { width: 100%; } }

    .repeat-box > * { min-width: 0; }
    .repeat-box .btn { white-space: normal; text-align: center; }
    @media (max-width: 920px) { .pillar-wrap { grid-template-columns: 1fr !important; } }
    @media (max-width: 600px) { .repeat-box .btn { width: 100%; } }

    /* Next-page strip (end of every inner page) */
    .next-page { max-width: 1080px; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
    .next-page span { font-size: var(--fs-4); color: var(--text-dim); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: block; }
    .next-page a.np { font-size: var(--fs-2); font-weight: 700; color: var(--ink); transition: color .2s; }
    .next-page a.np:hover { color: var(--accent-text); }
    .on-dark .next-page { border-top-color: rgba(255,255,255,.12); }

    /* ═══ v4 — glimpse home, about, advanced cards ═══ */

    /* Page bar (inner pages) */
    .page-bar { padding: 100px 48px 0; }
    .page-bar-in { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .back-home { padding: 9px 20px 9px 16px; min-height: 42px; font-size: var(--fs-4); box-shadow: 0 2px 10px rgba(var(--shade-rgb),.06); }
    .back-home:hover svg { transform: translateX(-3px); }
    .back-home svg { transition: transform .2s; }
    .crumbs { display: flex; gap: 8px; align-items: center; font-size: var(--fs-4); font-weight: 600; color: var(--text-dim); }
    .crumbs a:hover { color: var(--accent-text); }
    .crumbs [aria-current] { color: var(--ink); font-weight: 700; }
    .page-bar + section { padding-top: 36px; }
    @media (max-width: 920px) { .page-bar { padding: 84px 20px 0; } .page-bar + section { padding-top: 28px; } }
    .next-page { align-items: center; }
    .np-next { text-align: right; }
    @media (max-width: 600px) { .next-page { flex-direction: column-reverse; align-items: stretch; } .np-next { text-align: left; } .next-page .btn { width: 100%; } }

    /* ── Advanced card system: gradient hairline border, layered depth, cursor spotlight ── */
    .obj-card, .dc-hl, .learn-card, .consult-card, .team-card, .contact-card, .quote-card, .res-btn, .video-card,
    .mx-card, .stat-box, .app-chip, .dept-card, .fmt-card, .prod-card, .what-card, .pil-card, .ab-facts, .tile:not(.dk), .spec-table, .aimx-block {
        border: 1px solid transparent;
        background:
            radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--accent-light-rgb),.12), transparent 62%) padding-box,
            linear-gradient(165deg, var(--surface) 0%, var(--bg-soft) 100%) padding-box,
            linear-gradient(150deg, rgba(var(--accent-rgb),.40) 0%, rgba(var(--shade-rgb),.09) 40%, rgba(var(--accent-light-rgb),.32) 100%) border-box;
        box-shadow: 0 1px 2px rgba(var(--shade-rgb),.05), 0 18px 40px -20px rgba(var(--shade-rgb),.24);
        transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, opacity .55s ease;
    }
    .obj-card:hover, .dc-hl:hover, .learn-card:hover, .consult-card:hover, .team-card:hover, .contact-card:hover, .res-btn:hover, .video-card:hover,
    .mx-card:hover, .fmt-card:hover, .prod-card:hover, .what-card:hover, .pil-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 2px 4px rgba(var(--shade-rgb),.06), 0 30px 54px -22px rgba(var(--accent-rgb),.42);
        border-color: transparent;
    }
    .mx-card { background:
            radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--accent-light-rgb),.12), transparent 62%) padding-box,
            linear-gradient(165deg, var(--surface) 0%, var(--bg-soft) 100%) padding-box,
            linear-gradient(150deg, rgba(var(--accent-rgb),.40), rgba(var(--shade-rgb),.09) 40%, rgba(var(--accent-light-rgb),.32)) border-box; }
    .quote-card { border-top: 1px solid transparent; }
    .quote-card::after { content: ''; position: absolute; left: 24px; top: 0; width: 44px; height: 3px; background: var(--accent); border-radius: 0 0 4px 4px; }
    .dept-card { border-top: 1px solid transparent; padding: 16px 16px 14px; border-radius: 14px; }
    .app-chip:hover, .app-chip { transform: none; }

    /* Icon tiles */
    .pillar-icon, .res-icon, .dc-hl .icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
        background: linear-gradient(140deg, var(--accent-pale) 0%, var(--surface) 100%); border: 1px solid var(--border-accent); box-shadow: 0 6px 14px -8px rgba(var(--accent-rgb),.5); flex-shrink: 0; }
    .dc-hl .icon { margin-top: 0; }
    .obj-num { font-size: var(--fs-2); background: linear-gradient(140deg, var(--accent), var(--blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

    /* Bento: learning objectives */
    @media (min-width: 921px) {
        .objectives .obj-card:nth-child(1), .objectives .obj-card:nth-child(4), .objectives .obj-card:nth-child(5) { grid-column: span 2; }
        .objectives .obj-card:nth-child(1), .objectives .obj-card:nth-child(4) { background:
            radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--accent-light-rgb),.14), transparent 62%) padding-box,
            linear-gradient(150deg, var(--accent-tint) 0%, var(--surface) 70%) padding-box,
            linear-gradient(150deg, rgba(var(--accent-rgb),.5), rgba(var(--shade-rgb),.09) 45%, rgba(var(--accent-light-rgb),.35)) border-box; }
    }

    /* Consulting cards: dark art panel */
    .consult-top { background: linear-gradient(135deg, var(--navy) 0%, var(--ctrl-end) 100%); position: relative; overflow: hidden; border-bottom: none; }
    .consult-top::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%); mask-image: radial-gradient(circle at 70% 30%, #000, transparent 70%); }
    .consult-top svg { position: relative; stroke: var(--accent-light); }
    .consult-card { overflow: hidden; }

    /* Training: duration bar */
    .dur-bar { display: flex; gap: 4px; margin: 0 0 14px; }
    .dur-bar i { flex: 1; height: 6px; border-radius: 100px; background: var(--bg3); max-width: 34px; }
    .dur-bar i.on { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }

    /* Team avatars */
    .avatar { border: 3px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--accent), var(--blue)) border-box; }
    .team-card:hover .avatar { border-color: transparent; }

    /* Stat tiles */
    .tile { border-radius: 16px; padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
    .tile .n { font-size: 34px; font-weight: 800; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
    .tile .t { font-size: var(--fs-4); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
    .tile.dk { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
    .tile.dk .n { color: var(--accent-light); }
    .tile.dk .t { color: rgba(255,255,255,0.72); }
    .tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

    /* ── Home glimpse sections ── */
    .gl { padding: 84px 48px; }
    .gl-a { background: var(--surface); }
    .gl-b { background: var(--bg); }
    .gl-dark { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
    .gl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 36px; }
    .gl-head > div:first-child { flex: 1 1 320px; min-width: 0; }
    .gl-head .label { display: block; margin-bottom: 8px; }
    .gl .survey-note { margin-top: 22px; margin-bottom: 0; }
    .gl-head h2 { font-size: var(--fs-1); }
    .gl-more { flex-shrink: 0; }
    .gl-lead { font-size: var(--fs-3); color: var(--text); max-width: 62ch; margin-bottom: 22px; }
    .gl-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; margin-bottom: 28px; }
    .gl-dark .gl-head h2 { color: #fff; }
    .gl-dark .gl-head .label { color: var(--accent-light); }
    .gl-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,.3); }
    .gl-dark .btn-outline:hover { background: rgba(255,255,255,.1); }
    .gl-more:hover { transform: translateX(2px); }

    .team-strip { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 100px; background: var(--bg); border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s; }
    .team-strip:hover { border-color: var(--border-accent); box-shadow: var(--shadow); }
    .ts-faces { display: flex; flex-shrink: 0; }
    .ts-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); margin-left: -12px; }
    .ts-faces img:first-child { margin-left: 0; }
    .ts-text { flex: 1; font-size: var(--fs-3); color: var(--text-dim); min-width: 0; }
    .ts-text strong { display: block; color: var(--ink); font-weight: 700; }
    .ts-go { font-size: var(--fs-4); font-weight: 700; color: var(--accent-text); white-space: nowrap; }

    .prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .prod-card { border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
    .prod-img { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--bg2); }
    .prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
    .prod-card:hover .prod-img img { transform: scale(1.05); }
    .prod-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; align-items: flex-start; }
    .prod-body h3 { font-size: var(--fs-2); }
    .prod-body p { font-size: var(--fs-3); color: var(--text-dim); }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
    .chips span { font-size: var(--fs-4); font-weight: 700; color: var(--accent-text); background: var(--accent-pale); border: 1px solid var(--border-accent); border-radius: 100px; padding: 5px 13px; }
    .prod-body .btn { margin-top: auto; }

    .fmt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .fmt-card { border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
    .fmt-card .learn-dur { align-self: flex-start; }
    .fmt-card h4 { font-size: var(--fs-3); font-weight: 700; color: var(--ink); margin-bottom: 6px; font-family: var(--font-body); }
    .fmt-card p { font-size: var(--fs-3); color: var(--text-dim); }

    .ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .ind-card { display: block; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 22px; transition: all .25s; position: relative; overflow: hidden; }
    .ind-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s; }
    .ind-card:hover { background: rgba(255,255,255,.09); border-color: rgba(var(--accent-light-rgb),.5); transform: translateY(-4px); }
    .ind-card:hover::before { transform: scaleX(1); }
    .ind-card h4 { color: #fff; font-size: var(--fs-3); font-weight: 700; margin-bottom: 8px; font-family: var(--font-body); }
    .ind-card p { color: rgba(255,255,255,0.72); font-size: var(--fs-3); }
    .ind-proof { margin-top: 20px; background: rgba(var(--accent-light-rgb),.12); border: 1px solid rgba(var(--accent-light-rgb),.3); border-radius: 12px; padding: 13px 18px; font-size: var(--fs-4); color: rgba(255,255,255,.75); }
    .ind-proof strong { color: var(--accent-light); }
    .ind-cons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
    .ind-cons span { font-size: var(--fs-4); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-right: 6px; }
    .ind-cons a { font-size: var(--fs-4); font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: 7px 16px; transition: all .2s; }
    .ind-cons a:hover { border-color: var(--accent-light); background: rgba(255,255,255,.08); }

    .home-cta { padding: 24px 48px 84px; background: var(--surface); }
    #incubation { border-top: none; }

    /* Right-hand section dots (home, wide screens) */
    .dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 80; display: none; flex-direction: column; gap: 4px; }
    .dots a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 26px; height: 26px; }
    .dots a i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--shade-rgb),.28); border: 2px solid transparent; transition: all .25s; }
    .dots a::before { content: attr(data-label); position: absolute; right: 30px; background: var(--navy); color: #fff; font-size: var(--fs-4); font-weight: 700; padding: 5px 12px; border-radius: 100px; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: all .2s; pointer-events: none; }
    .dots a:hover::before, .dots a:focus-visible::before { opacity: 1; transform: none; }
    .dots a.on i { background: var(--accent); transform: scale(1.5); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18); }
    .dots .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    @media (min-width: 1280px) { .dots { display: flex; } }

    /* ── About page ── */
    .ab-intro { background: var(--surface); }
    .ab-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
    .ab-grid h2 { font-size: var(--fs-1); margin: 8px 0 16px; }
    .ab-grid .label { display: block; }
    .ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
    .ab-facts { border-radius: 20px; padding: 26px 28px; }
    .ab-facts h3 { font-size: var(--fs-2); margin-bottom: 14px; }
    .ab-facts dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); font-size: var(--fs-3); }
    .ab-facts dt { color: var(--text-dim); font-weight: 600; }
    .ab-facts dd { color: var(--ink); font-weight: 600; }
    .ab-pillars { background: var(--bg); padding: 56px 48px; }
    .pil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .pil-card { border-radius: 18px; padding: 26px; }
    .pil-card .pillar-icon { margin-bottom: 16px; }
    .pil-card h4 { font-size: var(--fs-3); font-weight: 700; color: var(--ink); margin-bottom: 6px; font-family: var(--font-body); }
    .pil-card p { font-size: var(--fs-3); color: var(--text-dim); }
    .ab-exp { background: linear-gradient(120deg, var(--navy) 0%, var(--exp-end) 100%); position: relative; overflow: hidden; }
    .ab-exp::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
    .exp-grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
    .ab-exp .label { color: var(--accent-light); display: block; margin-bottom: 10px; }
    .ab-exp h2 { color: #fff; font-size: var(--fs-1); margin-bottom: 14px; }
    .ab-exp p { color: rgba(255,255,255,.7); max-width: 52ch; }
    .exp-tiles { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .exp-tiles .tile { flex-direction: row; align-items: baseline; gap: 16px; }
    .ab-what { background: var(--surface); }
    .what-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .what-card { display: flex; flex-direction: column; border-radius: 18px; padding: 24px; }
    .what-card h4 { font-size: var(--fs-3); font-weight: 700; color: var(--ink); font-family: var(--font-body); margin-bottom: 6px; }
    .what-card p { font-size: var(--fs-3); color: var(--text-dim); margin-bottom: 18px; }
    .what-card .go { margin-top: auto; font-size: var(--fs-4); font-weight: 700; color: var(--accent-text); }
    .next-sec { background: var(--surface); padding: 0 48px 72px; }
    .next-sec .next-page { margin-top: 0; border-top: none; }

    /* Staggered entrance for card grids (only after the wrapper becomes visible) */
    @keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
    .fade-up.vis:is(.objectives, .learn-grid, .consult-grid, .dc-highlights, .team-grid, .contact-grid, .dept-grid, .quote-grid, .fmt-grid, .ind-grid, .capmac-grid, .tile-row, .exp-tiles, .res-grid, .photo-strip, .feat-grid) > * { animation: cardIn .6s cubic-bezier(.2,.8,.2,1) backwards; }
    .vis > *:nth-child(2) { animation-delay: .07s; } .vis > *:nth-child(3) { animation-delay: .14s; } .vis > *:nth-child(4) { animation-delay: .21s; }
    .vis > *:nth-child(5) { animation-delay: .28s; } .vis > *:nth-child(6) { animation-delay: .35s; }

    @media (max-width: 1100px) { .fmt-grid, .ind-grid, .what-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 920px) {
        .gl { padding: 60px 20px; }
        .home-cta { padding: 12px 20px 60px; }
        .gl-split, .ab-grid, .exp-grid, .prod-grid, .pil-grid { grid-template-columns: 1fr; }
        .ab-pillars { padding: 40px 20px; }
        .next-sec { padding: 0 20px 56px; }
        .team-strip { border-radius: 20px; flex-wrap: wrap; }
        .ts-text { flex-basis: 100%; order: 3; }
    }
    @media (max-width: 600px) {
        .fmt-grid, .ind-grid, .what-grid, .tile-row { grid-template-columns: 1fr; }
        .gl-more { width: 100%; }
        .ab-facts dl > div { grid-template-columns: 1fr; gap: 2px; }
        .ab-actions .btn { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) { .fade-up.vis > * { animation: none !important; } }

    /* ═══ v5 — hero video, new card language ═══ */
    :root { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60' viewBox='0 0 220 60'%3E%3Cpath d='M0 30C18 30 18 8 36 8S54 52 73 52 91 8 110 8 128 52 147 52 165 8 183 8 201 30 220 30' fill='none' stroke='%23007E7A' stroke-opacity='.17' stroke-width='2'/%3E%3C/svg%3E"); }

    /* Hero video */
    #hero { isolation: isolate; }
    .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
    .hero-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--bg-rgb),.94) 0%, rgba(var(--bg-rgb),.78) 42%, rgba(var(--bg-rgb),.30) 100%); }
    .hero-bg { z-index: -1; }
    .hero-dots { z-index: -1; opacity: .5; }
    @media (max-width: 920px) { .hero-veil { background: linear-gradient(180deg, rgba(var(--bg-rgb),.92) 0%, rgba(var(--bg-rgb),.7) 100%); } }

    /* Nav: a bit tighter now that Home is in the list */
    @media (max-width: 1320px) { .nav-links { gap: 13px; } .nav-links a { letter-spacing: .04em; } }

    /* ── New light-card language: floating cards, growing accent bar, waveform motif ── */
    .obj-card, .dc-hl, .learn-card, .consult-card, .contact-card, .res-btn, .video-card, .mx-card, .fmt-card, .what-card, .pil-card,
    .ab-facts, .stat-box, .dept-card, .quote-card, .spec-table, .aimx-block {
        --bar: 36px;
        border: 0; border-radius: 22px;
        background:
            radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--accent-light-rgb),.10), transparent 60%),
            linear-gradient(90deg, var(--accent), var(--accent-light)) left top / var(--bar) 4px no-repeat,
            var(--surface);
        box-shadow: 0 0 0 1px var(--ring), 0 2px 6px rgba(var(--shade-rgb),.04), 0 26px 50px -26px rgba(var(--shade-rgb),.30);
        transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background-size .5s cubic-bezier(.2,.8,.2,1), opacity .55s ease;
    }
    .obj-card:hover, .dc-hl:hover, .learn-card:hover, .consult-card:hover, .contact-card:hover, .res-btn:hover, .video-card:hover, .mx-card:hover,
    .fmt-card:hover, .what-card:hover, .pil-card:hover { --bar: 100%; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.22), 0 4px 10px rgba(var(--shade-rgb),.05), 0 34px 60px -26px rgba(var(--accent-rgb),.45); }
    .dept-card, .spec-table, .stat-box { border-radius: 16px; }
    .spec-table, .aimx-block, .stat-box { --bar: 0px; }
    .aimx-block { border-radius: 22px; }
    .quote-card::after, .quote-card::before { display: none; }
    .quote-card { padding-top: 30px; }
    .quote-card p::before { content: '\201C'; display: block; font-size: 44px; line-height: .6; font-weight: 800; color: var(--accent-text); margin-bottom: 8px; font-style: normal; }
    .tile:not(.dk) { border: 0; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--ring), 0 20px 40px -24px rgba(var(--shade-rgb),.3); }
    .app-chip { border: 0; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--ring), 0 10px 22px -14px rgba(var(--shade-rgb),.25); }

    /* Waveform watermark on the short text cards */
    .what-card, .pil-card, .fmt-card, .dc-hl {
        background:
            radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--accent-light-rgb),.10), transparent 60%),
            linear-gradient(90deg, var(--accent), var(--accent-light)) left top / var(--bar) 4px no-repeat,
            var(--wave) right -14px top 16px / 170px auto no-repeat,
            var(--surface);
    }

    /* Filled icon tiles */
    .pillar-icon, .res-icon, .dc-hl .icon { width: 48px; height: 48px; border-radius: 14px; border: 0;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); box-shadow: 0 12px 22px -10px rgba(var(--accent-rgb),.6); }
    .pillar-icon svg, .res-icon svg, .dc-hl .icon svg { stroke: #fff; }
    .pil-card .pillar-icon { margin-bottom: 18px; }

    /* Objectives: big number as a quiet corner mark */
    .obj-card { padding: 22px 22px 20px; overflow: hidden; }
    .obj-card:nth-child(1), .obj-card:nth-child(4) { background:
            radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--accent-light-rgb),.14), transparent 60%),
            linear-gradient(90deg, var(--accent), var(--accent-light)) left top / var(--bar) 4px no-repeat,
            linear-gradient(140deg, var(--accent-tint) 0%, var(--surface) 75%); }

    /* Consulting: dark art panel stays; card gets bigger radius */
    .consult-card { border-radius: 24px; }

    /* Team: photo-first cards */
    .team-grid { grid-template-columns: repeat(4, 1fr); max-width: 1080px; gap: 20px; }
    .team-card { padding: 0; overflow: hidden; text-align: left; border-radius: 24px; --bar: 0px; }
    .team-card .avatar { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; border: 0; margin: 0; background: linear-gradient(135deg, var(--bg2), var(--bg3)); font-size: 64px; position: relative; }
    .team-card .avatar::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(var(--shade-rgb),.55), transparent); pointer-events: none; }
    .team-card .avatar img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
    .team-card:hover .avatar img { transform: scale(1.07); }
    .team-card h4, .team-card .role, .team-card p { margin-left: 22px; margin-right: 22px; }
    .team-card h4 { margin-top: 18px; font-size: var(--fs-3); }
    .team-card p { margin-bottom: 24px; }
    @media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

    /* Kit cards on home: dark poster cards */
    .prod-card { --bar: 0px; background: linear-gradient(170deg, var(--prod-a) 0%, var(--navy) 60%); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -28px rgba(var(--shade-rgb),.65); border-radius: 26px; }
    .prod-card:hover { box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb),.5), 0 40px 70px -28px rgba(var(--accent-rgb),.55); }
    .prod-img { aspect-ratio: 16 / 10; background: transparent; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
    .prod-body { margin-top: -54px; position: relative; z-index: 1; }
    .prod-body h3 { color: #fff; }
    .prod-body p { color: rgba(255,255,255,.72); }
    .chips span { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); backdrop-filter: blur(6px); }

    /* Dark glass cards: spinning light-edge on hover */
    @property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    .capmac-card, .ind-card, .feat-card, .tile.dk, .repeat-stat, .deploy-box { position: relative; }
    .capmac-card::after, .ind-card::after, .feat-card::after, .tile.dk::after, .repeat-stat::after, .deploy-box::after {
        content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .35s;
        background: conic-gradient(from var(--ang), transparent 0 62%, var(--accent-light) 82%, transparent 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
        animation: edgeSpin 3.2s linear infinite; }
    .capmac-card:hover::after, .ind-card:hover::after, .feat-card:hover::after, .tile.dk:hover::after, .repeat-stat:hover::after, .deploy-box:hover::after { opacity: 1; }
    @keyframes edgeSpin { to { --ang: 360deg; } }
    .capmac-card, .ind-card, .deploy-box, .tile.dk, .repeat-stat { backdrop-filter: blur(8px); }
    .feat-card { border-radius: 24px; padding: 28px; box-shadow: 0 30px 50px -30px rgba(var(--shade-rgb),.6); }

    @media (prefers-reduced-motion: reduce) { .capmac-card::after, .ind-card::after, .feat-card::after, .tile.dk::after, .repeat-stat::after, .deploy-box::after { animation: none; } .hero-video { display: none; } }
    @media (hover: none) { .obj-card, .dc-hl, .learn-card, .consult-card, .contact-card, .res-btn, .video-card, .mx-card, .fmt-card, .what-card, .pil-card { --bar: 48px; } }
    .contact-card, .contact-card:hover { --bar: 0px; }
    .contact-top { height: 5px; }

    /* ═══ v6 — palette-ready hero video tint ═══ */
    .hero-video { filter: grayscale(1) contrast(1.08); z-index: -4; }
    .hero-tint { position: absolute; inset: 0; z-index: -3; background: var(--accent); mix-blend-mode: color; pointer-events: none; }
    .hero-veil { z-index: -2; }
    @media (prefers-reduced-motion: reduce) { .hero-tint { display: none; } }
    /* Gradient headings on dark sections: keep to the light accent so they stay readable in every palette */
    .gl-dark .gradient-text, #capmac .gradient-text, .ab-exp .gradient-text { background: linear-gradient(110deg, var(--accent-light), color-mix(in srgb, var(--accent-light) 55%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

    /* ═══ v7 — dark theme (html[data-theme="dark"]); colours per palette live in css/palettes.css ═══ */
    html[data-theme="dark"] {
        color-scheme: dark;
        --ink-rgb: 255,255,255; --shade-rgb: 0,0,0;
        --ring: rgba(255,255,255,.09);
        --border: rgba(255,255,255,.11);
        --border-accent: rgba(var(--accent-light-rgb), .38);
        --shadow: 0 2px 20px rgba(0,0,0,.35);
        --shadow-lg: 0 10px 44px rgba(0,0,0,.55);
        --accent-pale: color-mix(in srgb, var(--accent) 15%, var(--surface));
        --accent-tint: color-mix(in srgb, var(--accent) 20%, var(--surface));
        --accent-tint2: color-mix(in srgb, var(--accent) 10%, var(--surface));
        --bg-soft: var(--bg); --bg-soft2: var(--sec-a);
    }
    html[data-theme="dark"] body { background: var(--bg); }

    /* section backgrounds that used the white "surface" in light mode */
    html[data-theme="dark"] :is(#about, #matlab, #labs, #contact, .feat, .home-cta, .gl-a, .ab-intro, .ab-what, .next-sec) { background: var(--sec-a); }
    html[data-theme="dark"] .ab-pillars { background: var(--bg); }

    /* nav */
    html[data-theme="dark"] #navbar { background: rgba(var(--bg-rgb), .78); }
    html[data-theme="dark"] #navbar.scrolled { background: rgba(var(--bg-rgb), .94); }
    html[data-theme="dark"] .mobile-menu { background: rgba(var(--bg-rgb), .98); }
    html[data-theme="dark"] .hamburger span { background: var(--ink); }

    /* gradient headings: keep to the light accent so they stay readable */
    html[data-theme="dark"] .gradient-text { background: linear-gradient(110deg, var(--accent-light), color-mix(in srgb, var(--accent-light) 55%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

    /* hero video: invert to a dark clip, still tinted by the palette */
    html[data-theme="dark"] .hero-video { filter: grayscale(1) invert(1) contrast(1.1) brightness(.85); }
    html[data-theme="dark"] .hero-dots { opacity: .35; }

    /* inline svg icons that use var(--accent) as their stroke */
    html[data-theme="dark"] [stroke="var(--accent)"] { stroke: var(--accent-text); }

    /* buttons and controls that were "navy on light" */
    html[data-theme="dark"] .btn-navy { background: var(--navy-light); border: 1px solid rgba(255,255,255,.16); }
    html[data-theme="dark"] .btn-navy:hover { background: color-mix(in srgb, var(--navy-light) 80%, #fff); }
    html[data-theme="dark"] .btn-primary { box-shadow: 0 8px 22px rgba(var(--accent-rgb), .35); }
    html[data-theme="dark"] .btn-primary:hover { background: var(--accent-light); color: var(--navy); }
    html[data-theme="dark"] #back-top { border: 1px solid rgba(255,255,255,.2); }
    html[data-theme="dark"] .seg-btn.on, html[data-theme="dark"] .tab-ind { border: 1px solid rgba(255,255,255,.14); }
    html[data-theme="dark"] .edu-tab.active { color: #fff; }
    html[data-theme="dark"] .chip-btn[aria-pressed="true"] { color: #fff; }

    /* images that were designed on white */
    html[data-theme="dark"] .logo-card:not(.cert-card) { background: #fff; }
    html[data-theme="dark"] .mx-figure img, html[data-theme="dark"] .prod-img img, html[data-theme="dark"] .kit-img img { filter: brightness(.9) contrast(1.02); }
    html[data-theme="dark"] .quote-card p::before { color: var(--accent-text); }

    /* small fixes */
    html[data-theme="dark"] .sim-plot { background: linear-gradient(180deg, var(--bg), var(--sec-a)); }
    html[data-theme="dark"] .sim-note { background: var(--accent-pale); }
    html[data-theme="dark"] .chips span, html[data-theme="dark"] .prod-body p { color: rgba(255,255,255,.82); }
    html[data-theme="dark"] .hero-badge { background: var(--surface); }
    html[data-theme="dark"] .dept-card, html[data-theme="dark"] .pill { background: var(--surface); }
    html[data-theme="dark"] .toast, html[data-theme="dark"] #toast { background: var(--navy-light); border: 1px solid rgba(255,255,255,.16); }
    html[data-theme="dark"] .skip-link { background: var(--navy-light); }
    html[data-theme="dark"] .dur-bar i:not(.on) { background: var(--bg3); }
    html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }

    /* Logo looks the same in every theme: dark line-art on a white plate */
    .nav-logo img { background: #fff; border-radius: 12px; padding: 4px 8px; height: 46px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
    @media (max-width: 600px) { .nav-logo img { height: 38px; padding: 3px 6px; } }

    /* ═══ v8 — typography: Fraunces (headings) + Inter (body). Fonts are bundled in /fonts (css/fonts.css). ═══ */
    h1, h2 { font-weight: 700; letter-spacing: -0.012em; line-height: 1.12; }
    h3, h4, h5 { font-weight: 600; }
    #hero h1 { letter-spacing: -0.02em; line-height: 1.08; }
    .nav-logo-text .name { font-family: var(--font-body); font-weight: 700; letter-spacing: .02em; }
    .cert-card .ct, .tier-name { font-family: var(--font-body); font-weight: 700; }
    /* stat numbers in the serif */
    .trust-item .num, .mx-num .n, .labs-num .n, .repeat-stat .n, .tile .n, .founder-nums .n, .stat-box .big { font-family: var(--font-head); font-weight: 700; }
    /* testimonials in serif italic */
    .quote-card p { font-family: var(--font-head); font-style: italic; font-weight: 400; }
    .mx-body em, .mx-lead em { font-style: italic; }

    /* Gradient headings: dark stops in light mode so they never fade; light stops on dark sections and in dark mode */
    html[data-theme="light"] .gradient-text { background: linear-gradient(110deg, var(--accent-text) 0%, var(--accent) 55%, var(--navy-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    html[data-theme="light"] :is(.gl-dark, #capmac, .ab-exp) .gradient-text { background: linear-gradient(110deg, var(--accent-light), color-mix(in srgb, var(--accent-light) 55%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

    /* Text on the gradient feature cards: near-white so it never fades */
    .feat-card .fc-n, .mx-eyebrow, .mx-tag { color: rgba(255,255,255,.94); }
    .feat-card p, .mx-top p { color: rgba(255,255,255,.9); }
    .ind-proof, .capmac-badge { color: rgba(255,255,255,.88); }
    .aimx-header p { color: rgba(255,255,255,.92); }
    .capmac-badge strong { color: color-mix(in srgb, var(--accent-light) 70%, #fff); }
    .repeat-stat .n, .tile.dk .n, .ab-exp .label, .repeat-stat .t { color: color-mix(in srgb, var(--accent-light) 68%, #fff); }
    .repeat-stat .t, .tile.dk .t { color: rgba(255,255,255,.85); }

    /* ═══ v11 — translucent nav, icon fix, even logo grid, ML Kit ecosystem explorer ═══ */

    /* Navigation: glass bar, serif brand, sentence-case links */
    #navbar { background: rgba(255,255,255,.52); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border-bottom: 1px solid rgba(var(--ink-rgb), .09); }
    #navbar.scrolled { background: rgba(255,255,255,.76); box-shadow: 0 10px 30px -18px rgba(var(--shade-rgb), .5); }
    html[data-theme="dark"] #navbar { background: rgba(var(--bg-rgb), .40); border-bottom-color: rgba(255,255,255,.09); }
    html[data-theme="dark"] #navbar.scrolled { background: rgba(var(--bg-rgb), .62); }
    .nav-logo-text .name { font-family: var(--font-head); font-weight: 700; text-transform: none; letter-spacing: -0.005em; font-size: var(--fs-3); }
    .nav-logo-text .sub { font-family: var(--font-head); font-style: italic; font-weight: 400; letter-spacing: .01em; text-transform: none; font-size: var(--fs-4); }
    .nav-links a:not(.btn) { font-family: var(--font-body); font-size: var(--fs-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
    .nav-links a.active { font-weight: 600; }
    .nav-links { gap: 26px; }
    @media (max-width: 1320px) { .nav-links { gap: 18px; } .nav-links a:not(.btn) { letter-spacing: 0; } }

    /* icon tiles: white glyph in both themes (the dark-mode stroke rule was overriding it) */
    html[data-theme="dark"] :is(.pillar-icon, .res-icon, .dc-hl .icon) svg,
    html[data-theme="dark"] :is(.pillar-icon, .res-icon, .dc-hl .icon) svg * { stroke: #fff; }
    :is(.pillar-icon, .res-icon, .dc-hl .icon) svg { stroke: #fff; }

    /* small card titles stay in the body font */
    h5, .res-text h5 { font-family: var(--font-body); }

    /* incubation logos: even grid — one line of six, then 3×2, then 2×3 */
    .logo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; max-width: 1080px; margin: 28px auto 0; }
    .logo-card { min-width: 0; width: 100%; height: 84px; padding: 12px 14px; }
    .cert-card .ct { font-size: var(--fs-3); }
    .cert-card .ct small { letter-spacing: .06em; line-height: 1.35; }
    @media (max-width: 1000px) { .logo-strip { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 560px) { .logo-strip { grid-template-columns: repeat(2, 1fr); } }

    /* ── ML Kit ecosystem explorer ── */
    @keyframes ecoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    @keyframes ecoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes ecoFlow { to { stroke-dashoffset: -28; } }
    @keyframes ecoSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
    .eco { margin-bottom: 44px; }
    .eco-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .eco-hint { display: flex; align-items: center; gap: 8px; font-size: var(--fs-4); font-weight: 600; color: var(--text-dim); }
    .eco-stage { --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 1080 / 780; border-radius: 28px; overflow: hidden; isolation: isolate; border: 1px solid var(--border);
        background: radial-gradient(58% 52% at 50% 56%, rgba(var(--accent-rgb), .20), transparent 72%), linear-gradient(160deg, var(--surface), var(--bg));
        box-shadow: 0 30px 60px -34px rgba(var(--shade-rgb), .6); }
    .eco-stage::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(var(--ink-rgb), .13) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent); }
    .eco-orbit { position: absolute; left: 50%; top: 58%; width: 54%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(var(--accent-rgb), .42); transform: translate(-50%, -50%); animation: ecoSpin 70s linear infinite; z-index: 0; }
    .eco-orbit.o2 { width: 40%; border-style: solid; border-color: rgba(var(--accent-rgb), .18); animation-direction: reverse; animation-duration: 50s; }
    .eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
    .eco-line { fill: none; stroke: rgba(var(--accent-rgb), .6); stroke-width: 1.6; stroke-dasharray: 6 8; animation: ecoFlow 1.6s linear infinite; transition: stroke .2s; }
    .eco-line.on { stroke: var(--accent-text); stroke-width: 2.6; }
    .eco-dot { fill: var(--accent-light); filter: drop-shadow(0 0 6px var(--accent-light)); }
    .eco-core { position: absolute; left: 50%; top: 58%; width: 36%; transform: translate(-50%, -50%); z-index: 2; text-align: center; pointer-events: none; }
    .eco-core-in { animation: ecoBob 6.5s ease-in-out infinite; }
    .eco-core img { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 26px rgba(var(--shade-rgb), .5)); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .18s ease-out; }
    .eco-title { margin-top: 14px; }
    .eco-title strong { display: block; font-family: var(--font-head); font-size: var(--fs-2); font-weight: 700; color: var(--ink); line-height: 1.15; }
    .eco-title span { display: block; margin-top: 4px; font-size: var(--fs-4); font-weight: 600; letter-spacing: .06em; color: var(--text-dim); }
    .eco-node { position: absolute; left: var(--x); top: var(--y); width: clamp(205px, 24%, 262px); transform: translate(-50%, -50%); z-index: 3; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; outline: none; }
    .eco-node.anim { transition: left .7s cubic-bezier(.2, .8, .2, 1), top .7s cubic-bezier(.2, .8, .2, 1); }
    .eco-node.drag { cursor: grabbing; z-index: 6; }
    .eco-card { animation: ecoFloat 7s ease-in-out infinite; animation-delay: var(--d, 0s); border-radius: 20px; padding: 14px 16px 15px; border: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        box-shadow: 0 22px 40px -24px rgba(var(--shade-rgb), .65); transition: border-color .2s, box-shadow .2s; }
    .eco-node:hover .eco-card, .eco-node:focus-visible .eco-card { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18), 0 26px 46px -22px rgba(var(--shade-rgb), .7); }
    .eco-node.drag .eco-card { animation-play-state: paused; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3), 0 34px 56px -20px rgba(var(--shade-rgb), .8); }
    .eco-top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
    .eco-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--nc) 55%, var(--accent)), color-mix(in srgb, var(--nc) 30%, var(--accent))); box-shadow: 0 10px 18px -10px rgba(var(--shade-rgb), .8); }
    .eco-ico svg { width: 21px; height: 21px; stroke: #fff; }
    .eco-card h4 { font-family: var(--font-body); font-size: var(--fs-3); font-weight: 700; color: var(--ink); line-height: 1.2; }
    .eco-tag { display: inline-block; margin-top: 3px; font-size: var(--fs-4); font-weight: 700; color: var(--accent-text); }
    .eco-card ul { list-style: none; display: grid; gap: 4px; margin: 0 0 10px; padding: 0; }
    .eco-card li { position: relative; padding-left: 14px; font-size: var(--fs-4); line-height: 1.4; color: var(--text); }
    .eco-card li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--nc) 45%, var(--accent-text)); }
    .eco-tl { font-size: var(--fs-4); font-weight: 700; line-height: 1.4; color: var(--accent-text); border-top: 1px solid var(--border); padding-top: 9px; }
    .eco-foot { text-align: center; margin: 26px 0 16px; }
    .eco-line1 { font-family: var(--font-head); font-size: var(--fs-2); font-weight: 700; color: var(--ink); }
    .eco-line2 { font-size: var(--fs-3); color: var(--text-dim); margin-top: 4px; }
    .eco-uses { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; }
    .eco-uses li { border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--surface); }
    .eco-uses strong { display: block; font-size: var(--fs-3); color: var(--ink); font-weight: 700; }
    .eco-uses span { font-size: var(--fs-4); color: var(--text-dim); }
    @media (max-width: 920px) {
        .eco-hint, .eco-reset, .eco-lines, .eco-orbit { display: none; }
        .eco-bar { display: none; }
        .eco-stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; }
        .eco-stage::before { display: none; }
        .eco-core { position: static; transform: none; width: min(440px, 100%); margin: 0 auto 6px; grid-column: 1 / -1; }
        .eco-node { position: static; transform: none; width: auto; cursor: default; touch-action: auto; }
        .eco-card { animation: none; }
        .eco-uses { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) { .eco-stage { grid-template-columns: 1fr; } .eco-uses { grid-template-columns: 1fr; } }
    @media (prefers-reduced-motion: reduce) { .eco-core-in, .eco-card, .eco-orbit, .eco-line { animation: none !important; } }

    /* Home: kit photo on the ML Kit card */
    .prod-img.kit { display: grid; place-items: center; background: radial-gradient(58% 60% at 50% 46%, rgba(var(--accent-light-rgb), .30), transparent 72%); }
    .prod-img.kit img { width: 100%; height: 100%; object-fit: contain; padding: 8% 9% 14%; filter: drop-shadow(0 22px 22px rgba(0,0,0,.45)); animation: ecoBob 6.5s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .prod-img.kit img { animation: none; } }
    html[data-theme="dark"] .eco-line { stroke: rgba(var(--accent-light-rgb), .6); }
    html[data-theme="dark"] .eco-orbit { border-color: rgba(var(--accent-light-rgb), .30); }
    html[data-theme="dark"] .eco-orbit.o2 { border-color: rgba(var(--accent-light-rgb), .14); }

    /* ═══ v12 — centred kit tabs, footer logo, serif nav links ═══ */
    .edu-tabs { margin-left: auto; margin-right: auto; }
    @media (max-width: 920px) { .edu-tabs { width: 100%; } }

    .foot-logo-link { display: inline-block; margin-bottom: 16px; }
    .foot-logo { display: block; width: 132px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); transition: transform .25s; }
    .foot-logo-link:hover .foot-logo { transform: translateY(-2px) scale(1.03); }

    /* nav links in the same serif as the brand name */
    .nav-links a:not(.btn) { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-3); letter-spacing: 0; }
    .nav-links a.active { font-weight: 700; }

    /* ═══ v13 — same nav/brand colour on every page; DC Motor Kit explorer bits ═══ */
    .nav-logo[aria-current] .name, .nav-logo .name { color: var(--ink); }
    .nav-links a:not(.btn), .nav-links a.active { color: var(--ink); }
    .nav-links a:not(.btn):hover { color: var(--accent-text); }
    .mobile-menu a, .mobile-menu a.active { color: var(--ink); }
    .mobile-menu a.active { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }
    .mobile-menu a:hover { color: var(--accent-text); }

    .eco-badge { display: table; margin: 5px 0 1px; padding: 1px 9px; border-radius: 100px; font-style: normal; font-family: var(--font-body); font-size: var(--fs-4); font-weight: 700; color: var(--accent-text); background: var(--accent-pale); border: 1px solid var(--border-accent); }
    .eco + .resources-box, .edu-panel > .eco:last-child { margin-top: 44px; }
    .eco-dcmk .eco-tag sup { font-size: .7em; }

    /* ═══ v14 — kit photo fills its column (no blank space); original-colour logos ═══ */
    .kit-hero { align-items: stretch; grid-template-columns: minmax(0, 45%) 1fr; }
    .kit-hero-rev { grid-template-columns: 1fr minmax(0, 45%); }
    .kit-hero .kit-img { height: auto; min-height: 300px; position: relative; align-self: stretch; }
    .kit-hero .kit-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
    #panel-mlk .kit-img img { object-position: 74% 50%; }
    .kit-hero .kit-info { display: flex; flex-direction: column; justify-content: center; }
    @media (max-width: 920px) {
        .kit-hero, .kit-hero-rev { grid-template-columns: 1fr; }
        .kit-hero .kit-img { height: 260px; min-height: 0; }
        .kit-hero-rev .kit-img { order: -1; }
    }

    /* Incubation logos: always their real colours — no grey/colour transition */
    .logo-card img, .logo-card:hover img { filter: none; opacity: 1; transition: none; }
    .logo-card:hover { transform: none; }

    /* ═══ v15 — kit photos zoomed out to show the whole product ═══ */
    .kit-hero .kit-img { background: linear-gradient(to bottom, var(--ft, var(--bg2)), var(--fb, var(--bg2))); }
    .kit-hero .kit-img img, #panel-mlk .kit-img img {
        object-fit: contain; object-position: center;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
        mask-composite: intersect;
    }
/* Final palette: Sea Mist */
:root {
  --navy: #1A374D;
  --navy-light: #406882;
  --accent: #406882;
  --accent-light: #B1D0E0;
  --blue: #6998AB;
  --bg: #EAF0F3;
  --bg2: #DDE7EC;
  --bg3: #CCDCE3;
  --text: #232C34;
  --text-dim: #3E4C56;
  --accent-text: #325166;
  --navy-rgb: 26,55,77;
  --accent-rgb: 64,104,130;
  --accent-light-rgb: 177,208,224;
  --blue-rgb: 105,152,171;
  --bg-rgb: 234,240,243;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60' viewBox='0 0 220 60'%3E%3Cpath d='M0 30C18 30 18 8 36 8S54 52 73 52 91 8 110 8 128 52 147 52 165 8 183 8 201 30 220 30' fill='none' stroke='%23406882' stroke-opacity='.17' stroke-width='2'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --navy: #122634;
  --bg: #0B141B;
  --sec-a: #0F1B24;
  --surface: #152632;
  --bg2: #1C3040;
  --bg3: #223D50;
  --text: #D3DCE3;
  --text-dim: #A0AFBA;
  --ink: #F2F5F7;
  --accent-text: #B1D0E0;
  --bg-rgb: 11,20,27;
}

    /* ═══ v16 — final palette (Sea Mist) is baked into :root above; theme switch lives in the bottom-left corner ═══ */
    .theme-toggle { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 90; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
        color: var(--ink); background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border);
        opacity: .5; transition: opacity .2s, transform .2s, box-shadow .2s; }
    .theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; transform: scale(1.07); box-shadow: 0 8px 22px -10px rgba(var(--shade-rgb), .6); }
    .theme-toggle svg { width: 18px; height: 18px; }
    .theme-toggle .ic-sun { display: none; }
    html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
    html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
    @media (pointer: coarse) { .theme-toggle { width: 44px; height: 44px; } }

    /* ═══ v17 — phone compatibility ═══ */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    a, button, input, select, textarea, summary { touch-action: manipulation; }
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    #navbar { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
    @media (min-width: 921px) { #navbar { padding-left: max(48px, env(safe-area-inset-left)); padding-right: max(48px, env(safe-area-inset-right)); } }
    #hero { min-height: 100vh; min-height: 100svh; }
    .mobile-menu { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
    #back-top { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }

    /* hero poster: the still frame behind the video (and the only background on phones, data-saver and reduced motion) */
    .hero-poster { position: absolute; inset: 0; z-index: -5; background: url(../video/hero-poster.jpg) center / cover no-repeat; filter: grayscale(1) contrast(1.08); }
    html[data-theme="dark"] .hero-poster { filter: grayscale(1) invert(1) contrast(1.1) brightness(.85); }
    @media (prefers-reduced-motion: reduce) { .hero-tint { display: block; } }

    /* slider with a real touch target */
    input[type=range] { height: 28px; background: transparent; }
    input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 100px; background: var(--bg3); }
    input[type=range]::-webkit-slider-thumb { margin-top: -7px; }
    input[type=range]::-moz-range-track { height: 6px; border-radius: 100px; background: var(--bg3); }

    /* touch screens: every control at least 44px */
    @media (pointer: coarse) {
        .btn, .chip-btn, .seg-btn, .edu-tab, .res-btn { min-height: 44px; }
        .hamburger { min-width: 44px; min-height: 44px; display: none; align-items: center; justify-content: center; }
        .nav-logo { min-height: 44px; }
        .ind-cons a, .foot-li, .email-link, .back-home { min-height: 44px; display: inline-flex; align-items: center; }
        .foot-col a { padding: 11px 0; }
        .next-page .np { display: inline-block; padding: 10px 0; }
        .crumbs a { padding: 12px 4px; }
        input[type=range] { height: 44px; }
        input[type=range]::-webkit-slider-thumb { margin-top: -7px; }
    }
    @media (max-width: 1080px) and (pointer: coarse) { .hamburger { display: flex; } }
    @media (max-width: 1080px) { .hamburger { min-width: 44px; min-height: 44px; } }

    /* phones */
    @media (max-width: 600px) {
        :root { --fs-4: 14px; }
        body { font-size: 16px; }
        .sim-note, .sim-cap { line-height: 1.55; }
        #sim-canvas { height: 220px; }
        .eco-core { width: min(360px, 82%); }
        input, select, textarea { font-size: 16px; }
    }
    /* short landscape phones: don't force a full-height hero */
    @media (max-height: 520px) and (orientation: landscape) { #hero { min-height: 0; padding-top: 96px; padding-bottom: 48px; } .gl, section { scroll-margin-top: 72px; } }

    /* ═══ v18 — brochure request gate ═══ */
    :root { --err: #B3261E; }
    html[data-theme="dark"] { --err: #FF9A91; }
    body.bm-lock { overflow: hidden; }
    .bm { position: fixed; inset: 0; z-index: 450; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(var(--shade-rgb), .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: bmFade .2s ease both; }
    .bm[hidden] { display: none; }
    @keyframes bmFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes bmRise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
    .bm-card { position: relative; width: min(480px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 30px 28px 26px; border-radius: 26px;
        background: var(--surface); border: 1px solid var(--border); box-shadow: 0 40px 90px -30px rgba(var(--shade-rgb), .85); animation: bmRise .28s cubic-bezier(.2, .8, .2, 1) both; }
    .bm-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
    .bm-x:hover { background: var(--bg2); color: var(--ink); }
    .bm-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-light)); box-shadow: 0 12px 22px -10px rgba(var(--accent-rgb), .7); }
    .bm-ico svg { width: 22px; height: 22px; stroke: #fff; }
    .bm-card h3 { font-family: var(--font-head); font-size: var(--fs-2); font-weight: 700; color: var(--ink); line-height: 1.2; padding-right: 36px; }
    .bm-sub { margin: 6px 0 18px; font-size: var(--fs-3); color: var(--text-dim); }
    .bm-field { margin-bottom: 14px; }
    .bm-field label { display: block; margin-bottom: 6px; font-size: var(--fs-4); font-weight: 700; color: var(--text); }
    .bm-field input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); color: var(--ink); font: 400 16px var(--font-body); transition: border-color .2s, box-shadow .2s; }
    .bm-field input::placeholder { color: var(--text-dim); opacity: .75; }
    .bm-field input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22); }
    .bm-field input[aria-invalid="true"] { border-color: var(--err); }
    .bm-err { display: block; min-height: 0; margin-top: 5px; font-size: var(--fs-4); font-weight: 600; color: var(--err); }
    .bm-err:empty { display: none; }
    .bm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .bm-note { margin: 4px 0 16px; font-size: var(--fs-4); color: var(--text-dim); line-height: 1.5; }
    .bm-error { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--err); color: var(--err); font-size: var(--fs-4); font-weight: 600; line-height: 1.5; }
    .bm-submit, .bm-dl { width: 100%; justify-content: center; }
    .bm-ok { text-align: center; padding: 8px 0 2px; }
    .bm-ok .bm-ico { margin: 0 auto 14px; }
    .bm-ok p { margin: 8px 0 20px; color: var(--text-dim); font-size: var(--fs-3); }
    .bm-close2 { margin-top: 10px; background: none; border: 0; color: var(--text-dim); font: 600 var(--fs-4) var(--font-body); cursor: pointer; min-height: 44px; padding: 0 12px; }
    .bm-close2:hover { color: var(--ink); }
    @media (max-width: 600px) {
        .bm { align-items: flex-end; padding: 0; }
        .bm-card { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 26px 26px 0 0; padding: 26px 20px max(22px, env(safe-area-inset-bottom)); animation-name: bmSheet; }
    }
    @keyframes bmSheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .bm, .bm-card { animation: none; } }

/* ---- Page pager: shows at the bottom of every page — Home on the left, next page on the right ---- */
.pager { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 18px calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.pager.show { opacity: 1; transform: none; }
.pager a { pointer-events: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 100px; background: var(--navy); color: #fff; font-weight: 700; font-size: var(--fs-4); text-decoration: none; box-shadow: var(--shadow); white-space: nowrap; }
.pager.show a { pointer-events: auto; }
.pager a:hover, .pager a:focus-visible { filter: brightness(1.12); }
.pager a:focus-visible { outline: 3px solid var(--accent-light, #7fd6d1); outline-offset: 2px; }
.pager .pg-next { margin-left: auto; }
.pager svg { width: 16px; height: 16px; flex: none; }
body.pager-on #back-top { bottom: 84px; }
body.pager-on footer { padding-bottom: 76px; }
@media (max-width: 480px) { .pager { padding-left: 12px; padding-right: 12px; } .pager a { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .pager { transition: none; } }