/* ==========================================================================
   Nano Byte Tech Co., Ltd. — public site
   Palette taken from the company seal: deep navy body, circuit-blue accent.
   ========================================================================== */

:root {
    --navy-950: #050f22;
    --navy-900: #08192f;
    --navy-800: #0e2647;
    --navy-700: #143560;
    --navy-600: #1b4a83;

    --blue-600: #1f6fc4;
    --blue-500: #2b83e0;
    --blue-400: #4fa3f0;
    --blue-300: #86c4fb;
    --cyan-400: #48d6e8;
    --blue-50: #eef6fe;

    --ink: #101a28;
    --ink-soft: #4b5c72;
    --ink-faint: #8496ac;
    --line: #e2e9f2;
    --line-soft: #eff4f9;
    --surface: #ffffff;
    --canvas: #f6f9fc;

    --radius-lg: 22px;
    --radius: 15px;
    --radius-sm: 10px;

    --shadow-xs: 0 1px 2px rgba(8, 25, 47, .05);
    --shadow-sm: 0 2px 4px rgba(8, 25, 47, .04), 0 6px 16px rgba(8, 25, 47, .05);
    --shadow-md: 0 8px 20px rgba(8, 25, 47, .08), 0 24px 48px rgba(8, 25, 47, .07);
    --shadow-lg: 0 20px 50px rgba(8, 25, 47, .14), 0 40px 90px rgba(8, 25, 47, .1);

    /* No generic family inside these: a generic always matches, which would
       short-circuit the fallback before Myanmar glyphs ever reach Padauk.
       The generic is appended at each point of use instead. */
    --font-en: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
    --font-mm: 'Padauk', 'Noto Sans Myanmar', 'Myanmar Text', 'Pyidaungsu';

    --maxw: 1180px;
    --gutter: clamp(1.15rem, 4vw, 2.5rem);
    --section-y: clamp(66px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-en), var(--font-mm), sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Myanmar glyphs stack vertically — they need more room to breathe. */
html[data-lang="my"] body { font-family: var(--font-mm), var(--font-en), sans-serif; line-height: 1.95; }

img, svg { max-width: 100%; display: block; }
a { color: var(--blue-600); text-underline-offset: 3px; }

h1, h2, h3, h4 { margin: 0 0 .55em; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; }
html[data-lang="my"] :is(h1, h2, h3, h4) { line-height: 1.55; letter-spacing: 0; font-weight: 700; }
p { margin: 0 0 1.05em; }

.container { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
.section { padding: var(--section-y) 0; }
.section--surface { background: var(--surface); }

/* Gradient accent on a single word inside a heading. */
.grad {
    background: linear-gradient(102deg, var(--blue-400), var(--cyan-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue-600);
    margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
html[data-lang="my"] .eyebrow { letter-spacing: .02em; text-transform: none; font-size: .82rem; }

.section-head { max-width: 620px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head h2 { font-size: clamp(1.85rem, 3.8vw, 2.65rem); margin-bottom: .35em; }
.section-head p { color: var(--ink-soft); font-size: 1.04rem; margin: 0; }

/* ============================================================== buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: .94rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #fff;
    box-shadow: 0 4px 14px rgba(31, 111, 196, .34);
}
.btn--primary:hover { box-shadow: 0 10px 26px rgba(31, 111, 196, .42); }

.btn--glass {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }

.btn--outline { background: var(--surface); color: var(--navy-700); border-color: var(--line); box-shadow: var(--shadow-xs); }
.btn--outline:hover { border-color: var(--blue-300); color: var(--blue-600); box-shadow: var(--shadow-sm); }

.btn--sm { padding: 9px 18px; font-size: .86rem; }

/* =============================================================== header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(8, 25, 47, .05); }

.site-header__inner { display: flex; align-items: center; gap: 18px; min-height: 76px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-inline-end: auto; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand__name { display: block; font-weight: 800; font-size: 1.06rem; letter-spacing: -.03em; line-height: 1.1; }
.brand__name span { color: var(--blue-600); }
.brand__tag { display: block; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
html[data-lang="my"] .brand__tag { letter-spacing: .02em; text-transform: none; font-size: 11px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
    position: relative;
    padding: 9px 15px;
    border-radius: 9px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 600;
    transition: color .16s ease, background .16s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy-800); background: var(--blue-50); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang-toggle { display: inline-flex; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-toggle button {
    border: 0; background: transparent; padding: 5px 13px; border-radius: 999px;
    font: inherit; font-size: .81rem; font-weight: 700; color: var(--ink-faint); cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.lang-toggle button[aria-pressed="true"] { background: var(--navy-800); color: #fff; }

.nav-toggle {
    display: none; width: 42px; height: 42px; padding: 0;
    border: 1px solid var(--line); background: var(--surface); border-radius: 11px;
    cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; transition: background .16s ease; }
.nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 17px; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform .2s ease, top .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ================================================================= hero */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(1100px 620px at 82% -12%, rgba(72, 214, 232, .22), transparent 62%),
        radial-gradient(900px 520px at 8% 8%, rgba(43, 131, 224, .28), transparent 60%),
        linear-gradient(165deg, var(--navy-950) 0%, var(--navy-800) 52%, var(--navy-600) 100%);
}

/* Faint circuit grid echoing the traces in the seal. */
.hero__grid {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(78% 70% at 50% 36%, #000 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(78% 70% at 50% 36%, #000 20%, transparent 100%);
}
.hero__glow {
    position: absolute; z-index: -1; pointer-events: none;
    width: 620px; height: 620px; border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 163, 240, .3), transparent 68%);
    top: -180px; right: -160px;
    filter: blur(30px);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(34px, 5vw, 68px);
    align-items: center;
    padding: clamp(62px, 9vw, 116px) 0 clamp(84px, 11vw, 140px);
}

.hero__pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 16px 6px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: .8rem; font-weight: 600;
    margin-bottom: 24px;
    backdrop-filter: blur(6px);
}
.hero__pill i {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-400), var(--cyan-400));
    display: grid; place-items: center; flex: none;
}
.hero__pill i svg { width: 12px; height: 12px; color: var(--navy-900); }

.hero h1 {
    font-size: clamp(2.3rem, 5.4vw, 3.9rem);
    letter-spacing: -.035em;
    margin-bottom: .3em;
}
html[data-lang="my"] .hero h1 { font-size: clamp(1.85rem, 4.2vw, 3rem); letter-spacing: 0; }

.hero__lead {
    font-size: clamp(1rem, 1.4vw, 1.14rem);
    color: rgba(255, 255, 255, .76);
    max-width: 50ch;
    margin-bottom: 34px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__chips span {
    font-size: .78rem; font-weight: 600;
    padding: 5px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .8);
}

/* ---- hero visual: a node mesh built from the logo's motif -------------- */
.hero__visual { position: relative; display: grid; place-items: center; }
.hero__orb {
    position: relative;
    width: min(100%, 430px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.hero__orb::before {
    content: "";
    position: absolute; inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(79, 163, 240, .32), rgba(8, 25, 47, 0) 62%);
    filter: blur(6px);
}
.hero__ring {
    position: absolute; inset: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}
.hero__ring--2 { inset: 11%; border-color: rgba(255, 255, 255, .09); }
.hero__ring--3 { inset: 22%; border-color: rgba(255, 255, 255, .07); }
.hero__mesh { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__mesh line { stroke: rgba(134, 196, 251, .34); stroke-width: 1; }
.hero__mesh circle { fill: var(--blue-300); }
.hero__mesh .node-lg { fill: var(--cyan-400); }
/* The mark's navy blue is almost invisible against the navy hero, so lift its
   luminance rather than knocking it out to white — that keeps the brand colour
   and the blue→cyan gradient baked into the artwork. */
.hero__logo {
    position: relative;
    width: 46%;
    filter: brightness(2.6) saturate(1.25) drop-shadow(0 10px 30px rgba(72, 214, 232, .4));
}

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes pulse-node { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hero__ring--spin { animation: orbit 42s linear infinite; }
.hero__ring--spin-rev { animation: orbit 58s linear infinite reverse; }
.hero__mesh circle { animation: pulse-node 3.6s ease-in-out infinite; }
.hero__mesh circle:nth-child(3n) { animation-delay: -1.2s; }
.hero__mesh circle:nth-child(3n+1) { animation-delay: -2.4s; }

/* ---- stats strip riding the hero seam --------------------------------- */
.stats {
    position: relative;
    z-index: 4;
    margin-top: clamp(-72px, -6vw, -52px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.stat { padding: clamp(20px, 2.6vw, 30px) clamp(16px, 2vw, 26px); text-align: center; border-inline-start: 1px solid var(--line-soft); }
.stat:first-child { border-inline-start: 0; }
.stat b {
    display: block;
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--navy-800);
    line-height: 1.15;
    margin-bottom: 3px;
}
html[data-lang="my"] .stat b { letter-spacing: 0; }
.stat span { font-size: .84rem; color: var(--ink-soft); }

/* ============================================================= services */

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(16px, 2vw, 24px); }

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(24px, 2.6vw, 32px);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform .24s cubic-bezier(.2, .8, .3, 1), box-shadow .24s ease, border-color .24s ease;
}
/* Gradient hairline that wipes in on hover. */
.card::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #cfe0f2; }
.card:hover::before { transform: scaleX(1); }

.card__icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--navy-700), var(--blue-600));
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 6px 16px rgba(20, 53, 96, .24);
}
.card__icon svg { width: 25px; height: 25px; }
.card h3 { font-size: 1.14rem; margin-bottom: .4em; }
.card > p { color: var(--ink-soft); font-size: .93rem; margin: 0 0 16px; }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.card ul li { position: relative; padding-inline-start: 21px; font-size: .875rem; color: var(--ink-soft); }
.card ul li::before {
    content: "";
    position: absolute; inset-inline-start: 2px; top: .58em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--blue-400);
    box-shadow: 0 0 0 3px rgba(79, 163, 240, .16);
}

/* =============================================================== split */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 68px);
    align-items: center;
}
.split__text h2 { font-size: clamp(1.8rem, 3.5vw, 2.45rem); }
.split__text > p { color: var(--ink-soft); font-size: 1.02rem; }

.feature-list { display: grid; gap: 20px; margin-top: 30px; }
.feature { display: flex; gap: 15px; align-items: flex-start; }
.feature__ic {
    flex: none; width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--blue-50);
    color: var(--blue-600);
}
.feature__ic svg { width: 19px; height: 19px; }
.feature b { display: block; font-size: 1rem; margin-bottom: 2px; }
.feature span { font-size: .9rem; color: var(--ink-soft); }

.panel-dark {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, var(--navy-900), var(--navy-700));
    border-radius: var(--radius-lg);
    padding: clamp(28px, 3.4vw, 42px);
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.panel-dark::after {
    content: "";
    position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 214, 232, .2), transparent 68%);
    top: -120px; right: -110px;
    pointer-events: none;
}
.panel-dark h3 { font-size: 1.1rem; color: var(--blue-300); margin-bottom: 20px; }

.kv-list { list-style: none; margin: 0; padding: 0; position: relative; }
.kv-list li {
    display: grid; grid-template-columns: 1fr auto; gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: .93rem;
}
.kv-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-list .k { color: rgba(255, 255, 255, .58); }
.kv-list .v { font-weight: 700; text-align: end; }

/* ============================================================== process */

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.4vw, 30px);
    position: relative;
}
/* Connecting rail behind the step numbers. */
.steps::before {
    content: "";
    position: absolute;
    top: 21px;
    inset-inline: 12%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-300), var(--cyan-400), var(--blue-300));
    opacity: .4;
    z-index: 0;
}
.step { position: relative; z-index: 1; }
.step__n {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--blue-400);
    color: var(--blue-600);
    font-weight: 800;
    font-size: .95rem;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(43, 131, 224, .18);
}
.step h4 { font-size: 1.03rem; margin-bottom: .3em; }
.step p { font-size: .89rem; color: var(--ink-soft); margin: 0; }

/* ================================================================== CTA */

.cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, var(--navy-900), var(--navy-700) 62%, var(--navy-600));
    border-radius: var(--radius-lg);
    padding: clamp(32px, 4.4vw, 56px);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    box-shadow: var(--shadow-lg);
}
.cta::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(70% 90% at 80% 20%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 90% at 80% 20%, #000, transparent 75%);
}
.cta > * { position: relative; }
.cta h3 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); margin-bottom: .3em; }
.cta p { margin: 0; color: rgba(255, 255, 255, .74); max-width: 46ch; }

/* ============================================================== contact */

.contact { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 52px); align-items: start; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contact-list li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 15px;
    border-radius: var(--radius-sm);
    transition: background .16s ease;
}
.contact-list li:hover { background: var(--surface); box-shadow: var(--shadow-xs); }
.contact-list .ic {
    flex: none; width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--blue-50);
    color: var(--blue-600);
}
.contact-list .ic svg { width: 19px; height: 19px; }
.contact-list b {
    display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .11em;
    color: var(--ink-faint); font-weight: 800; margin-bottom: 2px;
}
html[data-lang="my"] .contact-list b { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.contact-list span, .contact-list a { font-size: .96rem; color: var(--ink); text-decoration: none; word-break: break-word; }
.contact-list a:hover { color: var(--blue-600); }

.form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(24px, 3vw, 34px);
    box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; color: var(--ink-soft); }
.field input, .field textarea, .field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .94rem;
    background: var(--canvas);
    color: var(--ink);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field textarea { min-height: 122px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    background: #fff;
    border-color: var(--blue-400);
    box-shadow: 0 0 0 4px rgba(79, 163, 240, .15);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-note { font-size: .82rem; color: var(--ink-faint); margin: 14px 0 0; text-align: center; }

/* =============================================================== footer */

.site-footer {
    background: var(--navy-950);
    color: rgba(255, 255, 255, .66);
    padding: clamp(48px, 6vw, 74px) 0 26px;
    margin-top: var(--section-y);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(26px, 3.4vw, 48px); }
.site-footer .brand { margin-inline-end: 0; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__name span { color: var(--blue-400); }
.site-footer .brand__tag { color: rgba(255, 255, 255, .42); }
.site-footer p { font-size: .89rem; margin: 16px 0 0; max-width: 34ch; }
.site-footer h4 {
    color: #fff; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: 16px; font-weight: 800;
}
html[data-lang="my"] .site-footer h4 { letter-spacing: 0; text-transform: none; font-size: .88rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer ul a { color: rgba(255, 255, 255, .66); text-decoration: none; font-size: .89rem; transition: color .16s ease; }
.site-footer ul a:hover { color: var(--blue-300); }
.footer-bottom {
    margin-top: clamp(34px, 4vw, 50px);
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
    font-size: .82rem; color: rgba(255, 255, 255, .46);
}

/* ========================================================== about page */

.page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(800px 460px at 78% -20%, rgba(72, 214, 232, .18), transparent 62%),
        linear-gradient(165deg, var(--navy-950), var(--navy-700));
    padding: clamp(56px, 7vw, 96px) 0 clamp(60px, 8vw, 104px);
}
.page-hero__inner { position: relative; max-width: 720px; }
.page-hero .eyebrow { color: var(--blue-300); }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -.035em; }
html[data-lang="my"] .page-hero h1 { letter-spacing: 0; font-size: clamp(1.7rem, 3.8vw, 2.5rem); }
.page-hero p { font-size: 1.06rem; color: rgba(255, 255, 255, .76); margin: 0; max-width: 56ch; }

.reg-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.reg-table th, .reg-table td { text-align: start; padding: 15px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.reg-table th { font-weight: 600; color: var(--ink-soft); width: 42%; }
.reg-table td { font-weight: 700; }
.reg-table tr:last-child th, .reg-table tr:last-child td { border-bottom: 0; }

.doc-card {
    display: flex; align-items: center; gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-xs);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.doc-card__ic {
    flex: none; width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--navy-700), var(--blue-600));
    color: #fff;
}
.doc-card__ic svg { width: 22px; height: 22px; }
.doc-card b { display: block; font-size: .98rem; }
.doc-card span { font-size: .85rem; color: var(--ink-soft); }

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.value { padding-inline-start: 18px; border-inline-start: 3px solid var(--blue-400); }
.value b { display: block; font-size: 1rem; margin-bottom: 3px; }
.value span { font-size: .9rem; color: var(--ink-soft); }

/* ============================================================== MOTION
   Everything here is transform/opacity only so it stays on the compositor,
   and every rule is switched off wholesale by the reduced-motion block at
   the bottom of this file.
   ==================================================================== */

/* ---- scroll progress rail ---------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
    z-index: 90;
    pointer-events: none;
}

/* ---- scroll reveal ----------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* ---- hero entrance ----------------------------------------------- */
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.hero-anim { opacity: 0; animation: hero-rise .85s cubic-bezier(.16, 1, .3, 1) forwards; }
.hero-anim[data-seq="1"] { animation-delay: .10s; }
.hero-anim[data-seq="2"] { animation-delay: .46s; }
.hero-anim[data-seq="3"] { animation-delay: .58s; }
.hero-anim[data-seq="4"] { animation-delay: .70s; }

/* Headline lines slide up from behind their own mask. */
.hero__title { display: grid; gap: .04em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
@keyframes line-rise {
    from { transform: translateY(115%); }
    to   { transform: translateY(0); }
}
.hero__title .line > * {
    display: inline-block;
    transform: translateY(115%);
    animation: line-rise .95s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero__title .line:nth-child(1) > * { animation-delay: .16s; }
.hero__title .line:nth-child(2) > * { animation-delay: .28s; }

/* Slow sheen across the gradient word. */
.grad { background-size: 220% auto; }
@keyframes grad-drift { to { background-position: 220% center; } }
.hero__title .grad { animation: grad-drift 7s linear infinite; }

/* ---- rotating headline word -------------------------------------- */
.rotator { display: inline-block; position: relative; white-space: nowrap; }
@keyframes word-in {
    from { opacity: 0; transform: translateY(70%) rotateX(-45deg); }
    to   { opacity: 1; transform: none; }
}
@keyframes word-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-70%) rotateX(45deg); }
}
.rotator__word { display: inline-block; transform-origin: 50% 100%; backface-visibility: hidden; }
.rotator__word.is-in  { animation: word-in .55s cubic-bezier(.16, 1, .3, 1) forwards; }
.rotator__word.is-out { animation: word-out .4s cubic-bezier(.6, 0, .8, .2) forwards; }
/* Reserve the widest phrase's width so the layout never jumps mid-rotation. */
.rotator__sizer { display: block; height: 0; overflow: hidden; visibility: hidden; }

/* ---- hero visual ------------------------------------------------- */
@keyframes orb-in {
    from { opacity: 0; transform: scale(.86); }
    to   { opacity: 1; transform: scale(1); }
}
.hero__orb { animation: orb-in 1.1s cubic-bezier(.16, 1, .3, 1) .3s both; }
@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
.hero__logo { animation: logo-float 6.5s ease-in-out infinite; }

/* Nodes draw themselves in, then keep breathing. */
@keyframes mesh-draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.hero__mesh line { stroke-dasharray: 300; animation: mesh-draw 1.6s ease-out .35s both; }

/* ---- chips ------------------------------------------------------- */
.hero__chips span {
    transition: transform .2s cubic-bezier(.2, .8, .3, 1), background .2s ease, border-color .2s ease;
}
.hero__chips span:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(134, 196, 251, .5);
}

/* ---- primary button sheen ---------------------------------------- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .65s cubic-bezier(.2, .8, .3, 1);
    z-index: -1;
}
.btn--primary:hover::after { transform: translateX(120%); }

/* ---- service cards ----------------------------------------------- */
.card { will-change: transform; }
.card__icon { transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease; }
.card:hover .card__icon { transform: translateY(-2px) scale(1.06) rotate(-4deg); box-shadow: 0 10px 22px rgba(20, 53, 96, .32); }
.card ul li::before { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover ul li::before { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(79, 163, 240, .2); }

/* Pointer-following tilt, set from JS as CSS custom properties. */
.card.is-tilting {
    transform: translateY(-5px) perspective(900px)
               rotateX(calc(var(--ty, 0) * -3.2deg))
               rotateY(calc(var(--tx, 0) * 3.2deg));
    transition: transform .12s linear, box-shadow .24s ease, border-color .24s ease;
}

/* ---- eyebrow rule draws in --------------------------------------- */
.eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.16, 1, .3, 1) .15s; }
.reveal.is-in .eyebrow::before,
.section-head.is-in .eyebrow::before { transform: scaleX(1); }
.hero .eyebrow::before, .page-hero .eyebrow::before { transform: scaleX(1); }

/* ---- process rail draws across ----------------------------------- */
.steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.steps.is-in::before { transform: scaleX(1); }
.step__n { transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, background .3s ease, color .3s ease; }
.step:hover .step__n { transform: scale(1.1); background: var(--blue-500); color: #fff; box-shadow: 0 8px 20px rgba(43, 131, 224, .38); }

/* ---- nav scrollspy ----------------------------------------------- */
.nav a { position: relative; }
.nav a::after {
    content: "";
    position: absolute;
    left: 15px; right: 15px; bottom: 4px;
    height: 2px; border-radius: 2px;
    background: var(--blue-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.nav a.is-current::after { transform: scaleX(1); }

/* ---- stats ------------------------------------------------------- */
.stat { transition: background .25s ease; }
.stat:hover { background: var(--blue-50); }

/* ---- contact rows ------------------------------------------------ */
.contact-list li { transition: background .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease; }
.contact-list li:hover { transform: translateX(4px); }
.contact-list .ic { transition: transform .25s cubic-bezier(.2, .8, .3, 1), background .25s ease, color .25s ease; }
.contact-list li:hover .ic { transform: scale(1.08); background: var(--blue-500); color: #fff; }

/* ---- doc card (about) -------------------------------------------- */
.doc-card__ic { transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.doc-card:hover .doc-card__ic { transform: translateY(2px) scale(1.06); }

/* =========================================================== responsive */

@media (max-width: 1000px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { order: -1; }
    .hero__orb { width: min(72%, 320px); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .steps::before { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; }
    .contact { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(3) { border-inline-start: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 760px) {
    .nav-toggle { display: inline-flex; }
    .site-header__inner { position: relative; }
    .nav {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 10px;
        box-shadow: var(--shadow-md);
        display: none;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: 12px 14px; }
    .header-actions .btn { display: none; }
    .field-row { grid-template-columns: 1fr; }
    .cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .stats { grid-template-columns: 1fr; margin-top: -40px; }
    .stat { border-inline-start: 0; }
    .stat:nth-child(n+2) { border-top: 1px solid var(--line-soft); }
    .steps { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .brand__tag { display: none; }
    .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    /* Anything that starts hidden or displaced must be forced back into
       its resting state, or the page simply never becomes visible. */
    .reveal,
    .hero-anim,
    .hero__title .line > *,
    .hero__orb { opacity: 1 !important; transform: none !important; }
    .eyebrow::before,
    .steps::before { transform: scaleX(1) !important; }
    .hero__mesh line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
    .scroll-progress { display: none; }
    .card.is-tilting { transform: translateY(-5px) !important; }
}

/* ==========================================================================
   Rack build

   The cabinet fills itself when the section scrolls into view: each unit
   slides onto its rail in turn, the patch leads draw in behind them, and the
   indicator lights carry on afterwards so the finished cabinet still looks
   powered rather than frozen.

   Everything keys off `.is-in`, which the reveal observer adds — so the
   sequence starts when it is actually on screen, and runs once.
   ========================================================================== */

.split--rack { align-items: center; }

.rack-figure { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rack-figure__caption {
    font-size: .82rem;
    color: var(--ink-faint);
    text-align: center;
}

.rack {
    width: min(100%, 340px);
    height: auto;
    display: block;
    filter: drop-shadow(0 26px 50px rgba(10, 30, 60, .22));
}

/* ---- the cabinet ---- */
.rack__shell { fill: var(--navy-900); stroke: var(--navy-700); stroke-width: 2; }
.rack__inner { fill: var(--navy-950); }
.rack__rail rect { fill: var(--navy-700); }

/* ---- a mounted unit ---- */
.unit__body { fill: #16233c; stroke: rgba(134, 196, 251, .28); stroke-width: 1.2; }
.unit__ports rect { fill: var(--navy-950); stroke: rgba(134, 196, 251, .35); stroke-width: .8; }
.unit__bays rect { fill: #0e1a2e; stroke: rgba(134, 196, 251, .3); stroke-width: .9; }
.unit__vent { stroke: rgba(134, 196, 251, .22); stroke-width: 1.6; stroke-linecap: round; }
.ups__screen { fill: #0b1a30; stroke: rgba(134, 196, 251, .35); stroke-width: .9; }
/* The blanking plate is trim, not equipment — quieter than the rest. */
.unit--blank .unit__body { fill: #111d33; stroke: rgba(134, 196, 251, .16); }
.unit__tag {
    fill: rgba(180, 209, 240, .62);
    font-family: var(--font-en), sans-serif;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: .12em;
}

.led { fill: var(--blue-300); }
.led--pwr { fill: #48d08a; }
.led--wan { fill: #ffc65c; }

/* ---- patch leads and the uplink ---- */
.patch__lead {
    stroke: var(--blue-400);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .85;
    fill: none;
}
.uplink { stroke: rgba(134, 196, 251, .38); stroke-width: 1.6; fill: none; }
.pulse { fill: var(--blue-300); opacity: 0; }

/* ---- resting state, before the section is reached ---------------------
   Units wait off to the right of their slot and the leads are undrawn, so
   the build has somewhere to start from. */
.rack .unit { opacity: 0; transform: translateX(34px); }
.rack .patch__lead { stroke-dasharray: 46; stroke-dashoffset: 46; }
.rack .led { opacity: .2; }

/* ---- the build, once it is on screen ---- */
.rack-figure.is-in .unit {
    animation: unit-seat .62s cubic-bezier(.22, 1, .32, 1) forwards;
    animation-delay: calc(var(--u) * .16s);
}
@keyframes unit-seat {
    from { opacity: 0; transform: translateX(34px); }
    70%  { opacity: 1; transform: translateX(-3px); }
    to   { opacity: 1; transform: none; }
}

.rack-figure.is-in .patch__lead {
    animation: lead-draw .8s ease-out forwards;
    /* after the last unit is seated */
    animation-delay: calc(1.05s + var(--c) * .12s);
}
@keyframes lead-draw { to { stroke-dashoffset: 0; } }

.rack-figure.is-in .led {
    animation: led-blink 2.4s steps(1, end) infinite;
    animation-delay: calc(1.5s + var(--l) * .19s);
}
@keyframes led-blink {
    0%, 44%  { opacity: 1; }
    46%, 58% { opacity: .18; }
    60%      { opacity: 1; }
    72%      { opacity: .3; }
    74%, 100%{ opacity: 1; }
}
/* Power lights sit steady — they are not traffic. */
.rack-figure.is-in .led--pwr { animation: led-breathe 3.2s ease-in-out infinite; }
@keyframes led-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }

.rack-figure.is-in .pulse {
    offset-path: path('M266 122 C 276 134, 276 150, 266 160');
    animation: pulse-run 1.9s ease-in-out 2s infinite;
}
@keyframes pulse-run {
    0%   { offset-distance: 0%;   opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* A browser without offset-path simply never shows the travelling dot; the
   rest of the build is unaffected. */
@supports not (offset-path: path('M0 0 L1 1')) {
    .rack .pulse { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    /* Show the finished cabinet rather than building it. */
    .rack .unit { opacity: 1; transform: none; }
    .rack .patch__lead { stroke-dashoffset: 0; }
    .rack .led { opacity: 1; }
    .rack-figure.is-in .unit,
    .rack-figure.is-in .patch__lead,
    .rack-figure.is-in .led,
    .rack-figure.is-in .led--pwr,
    .rack-figure.is-in .pulse { animation: none; }
}

@media (max-width: 900px) {
    .rack { width: min(100%, 300px); }
}

/* ==========================================================================
   Light theme

   The page was built dark-first: a navy hero, a navy engagement panel, a navy
   CTA band and a navy footer, all of them assuming white text. This block
   turns those four over to a light palette.

   It is scoped to `.theme-light` on <body> rather than rewritten in place,
   because the same components are shared with about.html — which keeps its
   original treatment until it is converted too. Removing the class on <body>
   restores the dark page exactly.
   ========================================================================== */

/* The muted tone was picked against a dark page. On white it lands at 3:1 —
   under the 4.5:1 that body text needs — so it is darkened just enough to
   clear AA on every surface this page uses (white, #f6f9fc and the footer's
   #f4f7fb) while still reading as the quiet colour. */
.theme-light { --ink-faint: #5f6e84; }

/* ---------------------------------------------------------------- hero */

.theme-light .hero {
    color: var(--ink);
    background:
        radial-gradient(1100px 620px at 84% -14%, rgba(72, 214, 232, .20), transparent 62%),
        radial-gradient(900px 520px at 6% 4%, rgba(43, 131, 224, .16), transparent 62%),
        linear-gradient(168deg, #fbfdff 0%, #f0f6fe 48%, #e4eefb 100%);
    border-bottom: 1px solid var(--line-soft);
}

/* The circuit grid has to darken the page now, not lighten it. */
.theme-light .hero__grid {
    background-image:
        linear-gradient(rgba(16, 26, 40, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 26, 40, .05) 1px, transparent 1px);
}
.theme-light .hero__glow { background: radial-gradient(circle, rgba(79, 163, 240, .26), transparent 68%); }

.theme-light .hero__pill {
    background: rgba(255, 255, 255, .82);
    border-color: rgba(31, 111, 196, .18);
    color: var(--navy-700);
    box-shadow: var(--shadow-xs);
}
.theme-light .hero__pill i svg { color: #fff; }

.theme-light .hero__lead { color: var(--ink-soft); }

/* The accent word was a pale blue-to-cyan sweep chosen to glow on navy. The
   same sweep on a pale background reads as washed out, so it starts from the
   deeper blue and keeps the cyan only as the highlight it runs into. */
.theme-light .hero__title .grad {
    /* Every stop has to clear 3:1 against the hero, or the tail of the word
       goes unreadable — the original cyan measures 1.6:1 on this background,
       so the sweep runs blue into a deeper teal instead. */
    background-image: linear-gradient(102deg, var(--blue-600), var(--blue-500) 52%, #1795a8);
}

.theme-light .hero__chips span {
    background: rgba(255, 255, 255, .8);
    border-color: var(--line);
    color: var(--ink-soft);
}

/* The glass button was drawn for a dark backdrop; on light it needs a real
   edge or it disappears into the gradient. */
.theme-light .btn--glass {
    background: rgba(255, 255, 255, .9);
    color: var(--navy-700);
    border-color: rgba(31, 111, 196, .22);
    box-shadow: var(--shadow-xs);
}
.theme-light .btn--glass:hover {
    background: #fff;
    border-color: var(--blue-300);
    color: var(--blue-600);
    box-shadow: var(--shadow-sm);
}

/* ---- the orb ---- */
.theme-light .hero__orb::before {
    background: radial-gradient(circle at 32% 28%, rgba(79, 163, 240, .22), rgba(255, 255, 255, 0) 64%);
}
.theme-light .hero__ring { border-color: rgba(31, 111, 196, .16); }
.theme-light .hero__ring--2 { border-color: rgba(31, 111, 196, .12); }
.theme-light .hero__ring--3 { border-color: rgba(31, 111, 196, .09); }
.theme-light .hero__mesh line { stroke: rgba(31, 111, 196, .30); }
.theme-light .hero__mesh circle { fill: var(--blue-500); }
.theme-light .hero__mesh .node-lg { fill: var(--blue-600); }
/* On a pale background the mark reads as drawn — no need to lift it. */
.theme-light .hero__logo {
    filter: drop-shadow(0 12px 28px rgba(31, 111, 196, .22));
}

/* ------------------------------------------------------ engagement panel */

.theme-light .panel-dark {
    background: linear-gradient(155deg, #ffffff, #f4f8fe);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.theme-light .panel-dark::after {
    background: radial-gradient(circle, rgba(43, 131, 224, .12), transparent 68%);
}
.theme-light .panel-dark h3 { color: var(--blue-600); }
.theme-light .kv-list li { border-bottom-color: var(--line); }
.theme-light .kv-list .k { color: var(--ink-faint); }
.theme-light .kv-list .v { color: var(--ink); }

/* ------------------------------------------------------------------ CTA */

.theme-light .cta {
    background: linear-gradient(140deg, #f3f8ff, #e8f1fd 62%, #dfeafb);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.theme-light .cta::before {
    background-image:
        linear-gradient(rgba(16, 26, 40, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 26, 40, .045) 1px, transparent 1px);
}
.theme-light .cta p { color: var(--ink-soft); }

/* --------------------------------------------------------------- buttons */

/* White on the lighter half of the original sweep measures 3.9:1 — under the
   4.5:1 label text needs. Deepening the range keeps the same blue while
   putting the whole button over the line. */
.theme-light .btn--primary {
    background: linear-gradient(135deg, var(--blue-600), #1a63b3);
}

/* --------------------------------------------------------------- footer */

.theme-light .site-footer {
    background: #f4f7fb;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
}
.theme-light .site-footer .brand__name { color: var(--ink); }
/* The accent half of the wordmark was the pale blue that suited a navy
   footer; on the light one it needs the deeper tone to stay readable. */
.theme-light .site-footer .brand__name span { color: var(--blue-600); }
.theme-light .site-footer .brand__tag { color: var(--ink-faint); }
.theme-light .site-footer h4 { color: var(--ink); }
.theme-light .site-footer ul a { color: var(--ink-soft); }
.theme-light .site-footer ul a:hover { color: var(--blue-600); }
.theme-light .footer-bottom {
    border-top-color: var(--line);
    color: var(--ink-faint);
}