/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #5A5A7A;
    background-color: #FFFFFF;
    overflow-x: hidden;
}

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

/* ============================================================
   DESIGN TOKENS
   ------------------------------------------------------------
   One flat-cartoon system for the whole site. Two rules carry it:
   every shape gets the SAME ink weight (--line), and every raised
   surface sits on a HARD shadow (--shelf) rather than a blurred one.
   Break either and the page stops looking drawn.
   ============================================================ */
:root {
    /* ink & paper */
    --ink: #14102E;
    --paper: #FFF6E4;
    --paper-2: #E7F2FF;
    --sky: #5560E4;
    --sky-deep: #3B3FA6;

    /* brand — blue and violet lead, the rest are accents */
    --cyan: #4FC8F5;
    --cyan-lt: #A9E7FF;
    --violet: #9B6DFF;
    --violet-lt: #C9B2FF;
    --pink: #FF7BB0;
    --mint: #5CE1A6;
    --yellow: #FFD24D;
    --cream: #FFF6E4;

    /* the constants that make it cohere */
    --line: 3px;
    --shelf: 6px;
    --radius: 22px;
    --boing: cubic-bezier(.34, 1.5, .5, 1);

    /* legacy aliases — the pre-cartoon stylesheet still refers to these */
    --deep-indigo: #3B3FA6;
    --bright-cyan: #4FC8F5;
    --soft-violet: #9B6DFF;
    --slate-gray: #4A4470;
    --white: #FFFFFF;
    --midnight-navy: #14102E;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(20, 16, 46, 0.94);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
    padding: 15px 0;
}

.navbar.scrolled {
    background: rgba(20, 16, 46, 0.99);
    padding: 10px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.planet-icon {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Clean Cyan Ring */
.planet-icon::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--bright-cyan);
    border-radius: 50%;
    z-index: 2;
    box-shadow:
        0 0 8px rgba(38, 209, 243, 0.5),
        inset 0 0 8px rgba(38, 209, 243, 0.2);
    animation: elegant-glow 2s ease-in-out infinite alternate;
}

/* Diagonal Line */
.planet-icon::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--bright-cyan) 15%,
            var(--bright-cyan) 85%,
            transparent 100%);
    transform: rotate(-15deg);
    z-index: 3;
    box-shadow: 0 0 6px rgba(38, 209, 243, 0.6);
    animation: line-pulse 3s ease-in-out infinite;
}

/* Dark Core */
.planet-icon {
    background: radial-gradient(circle at center,
            rgba(13, 13, 43, 0.9) 0%,
            rgba(44, 47, 128, 0.7) 40%,
            transparent 70%);
    border-radius: 50%;
    filter: drop-shadow(0 0 12px rgba(38, 209, 243, 0.3));
}

@keyframes elegant-glow {
    0% {
        box-shadow:
            0 0 8px rgba(38, 209, 243, 0.5),
            inset 0 0 8px rgba(38, 209, 243, 0.2);
        border-color: var(--bright-cyan);
    }

    100% {
        box-shadow:
            0 0 16px rgba(38, 209, 243, 0.8),
            inset 0 0 12px rgba(38, 209, 243, 0.4);
        border-color: rgba(38, 209, 243, 0.9);
    }
}

@keyframes line-pulse {

    0%,
    100% {
        opacity: 0.8;
        box-shadow: 0 0 6px rgba(38, 209, 243, 0.6);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(38, 209, 243, 0.9);
    }
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(135deg, var(--bright-cyan), var(--soft-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    gap: 30px;
}

.nav-link {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--bright-cyan);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--bright-cyan);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* ============================================================
   HERO — "Saturday morning"
   ------------------------------------------------------------
   Flat cartoon in the late-90s Cartoon Network manner: every shape
   carries the same heavy ink outline, every fill is flat, and there
   is not a single blur or soft gradient anywhere in the artwork.
   Blue and violet do the work; pink, mint and yellow are guests.

   Two things make it read as cartoon rather than as a diagram:
   the ink outline is one constant weight on everything, and the
   easing overshoots — nothing here arrives without bouncing.

   Depth without shading: the accretion ring's back arc is painted
   under the core and its front arc over it, and orbiting planets
   swap z-index at the sides of their ellipse.
   ============================================================ */
.hero {
    --void: var(--sky);

    /* the orbital system is laid out at a fixed 760x340 so the SVG
       rings and the offset-path orbits share one coordinate space;
       this scales the whole assembly instead of re-deriving it. */
    --cosmos-scale: 1;

    min-height: 100vh;
    min-height: 100svh;
    padding: 88px 0 96px;
    background: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* An ink rule, not a glow — the same line weight as the artwork. */
.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--ink);
    z-index: 3;
}

/* ── Sky ─────────────────────────────────────────────────────── */
.hero-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Generated flat-vector plate: outlined cloud banks in two corners,
   clean sky through the middle. Inset past the edges so the pointer
   parallax can never expose a border. */
.sky-nebula {
    position: absolute;
    inset: -5%;
    background: url('./img/hero/nebula.webp?v=4') center center / cover no-repeat;
    transform: translate3d(var(--sky-x, 0px), var(--sky-y, 0px), 0);
    will-change: transform;
}

/* Sunburst rays behind the hole. Hard stops only — a soft ray would
   be the one gradient in the whole picture. Oversized and rotated so
   the spin never exposes a corner. */
.sky-burst {
    position: absolute;
    left: 50%;
    top: 34%;
    width: 240vmax;
    height: 240vmax;
    margin: -120vmax 0 0 -120vmax;
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, .09) 0deg 7deg,
            transparent 7deg 14deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, .55) 18%, transparent 34%);
    mask-image: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, .55) 18%, transparent 34%);
    animation: burst-spin 90s linear infinite;
}

@keyframes burst-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Halftone — the other thing that says "printed cartoon". */
.sky-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(20, 16, 46, .3) 1.7px, transparent 1.8px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 46%, transparent 38%, #000 100%);
    mask-image: radial-gradient(70% 60% at 50% 46%, transparent 38%, #000 100%);
    opacity: .5;
}

.sky-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Just enough to keep white type off the brightest cloud shapes.
   Kept violet rather than black so it tints instead of dimming. */
.sky-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(76% 60% at 50% 46%, rgba(52, 46, 156, .66) 0%, rgba(52, 46, 156, .34) 58%, transparent 100%),
        linear-gradient(180deg, rgba(30, 26, 96, .5) 0%, transparent 22%, transparent 62%, rgba(30, 26, 96, .42) 100%);
}

.hero-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.hero-logo {
    margin-bottom: 14px;
}

/* ── The orbital system ──────────────────────────────────────── */
/* `.cosmos` is 760x340 at every breakpoint — one set of path
   coordinates serves them all — and is scaled as a whole.
   It is taken out of flow on purpose: as an in-flow child its 760px
   forced .hero-container that wide too, which pushed the Thai copy
   off both edges of a phone. */
.cosmos-stage {
    position: relative;
    width: 100%;
    height: calc(296px * var(--cosmos-scale));
    animation: hero-pop .8s var(--boing) both;
}

.cosmos {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 760px;
    height: 340px;
    margin: -170px 0 0 -380px;
    transform: scale(var(--cosmos-scale));
}

.cosmos-orbits {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
    stroke: var(--ink);
    stroke-width: 3;
    opacity: .5;
}

.orbit-dashed {
    animation: orbit-dash 44s linear infinite;
}

@keyframes orbit-dash {
    to {
        stroke-dashoffset: -240;
    }
}

/* ── The hole ────────────────────────────────────────────────── */
.blackhole-container {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    z-index: 4;
}

.blackhole {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: blackhole-bob 4.5s ease-in-out infinite;
}

/* One ink weight throughout, ~4px of line on either side of every fill —
   the disk is heavier than the lensed arcs only because it is nearer. */
.bh-ink {
    stroke: var(--ink);
    stroke-linecap: round;
}

.bh-fill {
    stroke-linecap: round;
}

.bh-arc .bh-ink {
    stroke-width: 21;
}

.bh-arc .bh-fill {
    stroke-width: 13;
}

.bh-lens .bh-ink {
    stroke-width: 15;
}

.bh-lens .bh-fill {
    stroke-width: 7;
}

.bh-cyan {
    stroke: var(--cyan);
}

.bh-violet {
    stroke: var(--violet);
}

.bh-lilac {
    stroke: #DED2FF;
}

/* the gas moving round the disk — dashes rather than a blur */
.bh-flow {
    stroke: rgba(255, 255, 255, .8);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 2.5 24;
    animation: bh-flow 2.4s linear infinite;
}

.bh-arc-back .bh-flow {
    animation-direction: reverse;
}

@keyframes bh-flow {
    to {
        stroke-dashoffset: -66;
    }
}

/* Brightest thing in the picture, and the only pure highlight —
   it belongs at the horizon, not on the sphere. */
.bh-photon-ink {
    stroke: var(--ink);
    stroke-width: 15;
}

.bh-photon {
    stroke: var(--cream);
    stroke-width: 7;
}

/* Drawn in the same ink as every outline, so it reads as a hole
   punched through the sky rather than as a dark ball sitting on it. */
.bh-core {
    fill: var(--ink);
}

@keyframes blackhole-bob {

    0%,
    100% {
        transform: translateY(0) scale(1, 1);
    }

    45% {
        transform: translateY(-7px) scale(.985, 1.015);
    }

    70% {
        transform: translateY(2px) scale(1.015, .985);
    }
}

/* ── Planets ─────────────────────────────────────────────────── */
/* Four bodies for the four practices — quietly, without labels
   competing with the headline for the eye. Cel-shaded: the hard
   colour stop IS the terminator, no soft shading anywhere. */
.planet {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    border: 3px solid var(--ink);
    offset-path: var(--orbit);
    offset-rotate: 0deg;
    background: radial-gradient(circle at 34% 30%,
            var(--c1) 0 56%,
            var(--c2) 56% 100%);
    animation:
        orbit-ride var(--dur) linear var(--phase) infinite,
        orbit-depth var(--dur) ease-in-out var(--phase) infinite;
}

/* chunky specular blob, the cartoon shorthand for "shiny" */
.planet::before {
    content: '';
    position: absolute;
    left: 18%;
    top: 14%;
    width: 30%;
    height: 22%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    transform: rotate(-28deg);
}

/* Orbit A — inner, fast */
.planet-1 {
    --orbit: path("M 604,170 A 224,84 0 1 1 156,170 A 224,84 0 1 1 604,170");
    --d: 26px;
    --c1: var(--cyan);
    --c2: #2A9BD4;
    --dur: 21s;
    --phase: -4s;
}

/* Orbit B — two bodies, half a period apart */
.planet-2 {
    --orbit: path("M 670,170 A 290,100 0 1 1 90,170 A 290,100 0 1 1 670,170");
    --d: 40px;
    --c1: var(--violet-lt);
    --c2: var(--violet);
    --dur: 38s;
    --phase: -6s;
}

.planet-3 {
    --orbit: path("M 670,170 A 290,100 0 1 1 90,170 A 290,100 0 1 1 670,170");
    --d: 30px;
    --c1: var(--mint);
    --c2: #2FB783;
    --dur: 38s;
    --phase: -25s;
}

/* Orbit C — outer, slow, ringed */
.planet-4 {
    --orbit: path("M 744,170 A 364,126 0 1 1 16,170 A 364,126 0 1 1 744,170");
    --d: 34px;
    --c1: var(--pink);
    --c2: #E0508C;
    --dur: 58s;
    --phase: -21s;
}

/* One ringed world. Reads as "planet" instantly, where a bare circle
   reads as "dot". */
.planet-4::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190%;
    height: 190%;
    margin: -95% 0 0 -95%;
    border-radius: 50%;
    border: 4px solid var(--ink);
    border-left-color: transparent;
    border-right-color: transparent;
    transform: rotateX(72deg) rotateZ(-16deg);
}

/* The goofy bit, and the only face in the design: planet 3 blinks.
   Small enough to miss, which is the point. */
.planet-3 .eye {
    position: absolute;
    top: 38%;
    width: 20%;
    height: 26%;
    border-radius: 50%;
    background: var(--ink);
    animation: blink-eye 6.4s steps(1, end) infinite;
}

.planet-3 .eye:first-child {
    left: 24%;
}

.planet-3 .eye:last-child {
    right: 20%;
}

@keyframes blink-eye {

    0%,
    92%,
    96%,
    100% {
        transform: scaleY(1);
    }

    93%,
    95% {
        transform: scaleY(.12);
    }
}

@keyframes orbit-ride {
    to {
        offset-distance: 100%;
    }
}

/* 0% right vertex · 25% nearest the viewer · 50% left vertex ·
   75% behind the hole. Scale carries the depth; the z-index flip is
   what lets the far half actually pass behind. No fading — a cartoon
   planet does not go translucent when it is further away. */
@keyframes orbit-depth {
    0% {
        transform: scale(1);
        z-index: 6;
    }

    25% {
        transform: scale(1.2);
        z-index: 6;
    }

    49.9% {
        transform: scale(1);
        z-index: 6;
    }

    50% {
        transform: scale(1);
        z-index: 2;
    }

    75% {
        transform: scale(.72);
        z-index: 2;
    }

    100% {
        transform: scale(1);
        z-index: 2;
    }
}

/* ── Rockets ─────────────────────────────────────────────────── */
/* Two, crossing on long cycles — ambient traffic, not a parade.
   Transform-only so they never trigger layout. */
.probes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.probe {
    position: absolute;
    left: 0;
    top: var(--y);
    width: var(--w);
    opacity: 0;
}

.probe svg {
    display: block;
    width: 100%;
    height: auto;
}

.probe-1 {
    --y: 20%;
    --w: 150px;
    --tilt: -8deg;
    animation: probe-out 24s linear 3s infinite;
}

.probe-2 {
    --y: 70%;
    --w: 112px;
    --tilt: 187deg;
    animation: probe-home 36s linear 15s infinite;
}

@keyframes probe-out {
    0% {
        transform: translate3d(-18vw, 0, 0) rotate(var(--tilt));
        opacity: 0;
    }

    7%,
    88% {
        opacity: 1;
    }

    100% {
        transform: translate3d(116vw, -12vh, 0) rotate(var(--tilt));
        opacity: 0;
    }
}

@keyframes probe-home {
    0% {
        transform: translate3d(116vw, 0, 0) rotate(var(--tilt));
        opacity: 0;
    }

    7%,
    88% {
        opacity: 1;
    }

    100% {
        transform: translate3d(-18vw, -9vh, 0) rotate(var(--tilt));
        opacity: 0;
    }
}

/* ── Type ────────────────────────────────────────────────────── */
@keyframes hero-pop {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scale(.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Fredoka for display only. The Thai quote stays on Inter — Fredoka
   has no Thai, and a fallback mid-sentence is worse than a mismatch
   between the headline and the body. */
.hero-title {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: clamp(2.5rem, 7.6vw, 5.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.01em;
    margin-bottom: 20px;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    /* Eight offsets ring the glyph, the ninth is the drop shadow. This
       beats -webkit-text-stroke, which centres on the outline and eats
       into the letterform. */
    text-shadow:
        4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink),
        3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
        .1em .115em 0 var(--violet), .135em .155em 0 var(--ink);
    animation: title-drop 1s var(--boing) .2s both;
}

/* It falls in and squashes on landing. */
@keyframes title-drop {
    0% {
        opacity: 0;
        transform: translateY(-38px) scale(.9, 1.12);
    }

    62% {
        opacity: 1;
    }

    78% {
        transform: translateY(0) scale(1.06, .93);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.hero-subtitle {
    font-family: 'Fredoka', 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.4vw, 20px);
    font-size: clamp(1.05rem, 2.3vw, 1.4rem);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--yellow);
    margin-bottom: 30px;
    text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
        1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink);
    animation: hero-pop .8s var(--boing) .5s both;
}

.hero-subtitle::before,
.hero-subtitle::after {
    content: '';
    height: 4px;
    width: clamp(24px, 9vw, 92px);
    flex: none;
    border-radius: 4px;
    background: var(--ink);
}

.hero-description {
    margin-bottom: 34px;
    animation: hero-pop .8s var(--boing) .65s both;
}

.hero-quote {
    font-size: clamp(1.02rem, 2vw, 1.26rem);
    line-height: 1.85;
    color: #FFFFFF;
    max-width: 40em;
    margin: 0 auto 18px;
    font-weight: 600;
    text-shadow: 0 2px 0 rgba(20, 16, 46, .55);
}

.english-subtitle {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: clamp(.72rem, 1.5vw, .86rem);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 2px 0 rgba(20, 16, 46, .5);
    min-height: 3.2em;
    max-width: 34em;
    margin: 0 auto;
}

.cursor {
    display: inline-block;
    margin-left: 3px;
    color: var(--yellow);
    animation: blink .9s steps(1, end) infinite;
}

@keyframes blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.cta-button {
    background: linear-gradient(135deg, var(--bright-cyan), var(--soft-violet));
    color: var(--white);
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(38, 209, 243, 0.4);
}

.cta-button:focus-visible {
    outline: 2px solid var(--bright-cyan);
    outline-offset: 3px;
}

.cta-button.secondary {
    background: transparent;
    border: 2px solid var(--bright-cyan);
    color: var(--bright-cyan);
}

.cta-button.secondary:hover {
    background: var(--bright-cyan);
    color: var(--white);
}

/* Sits on a hard ink shelf and presses down into it — the shadow is
   solid, not blurred, so the press reads as physical. */
.hero .cta-button {
    position: relative;
    overflow: hidden;
    font-family: 'Fredoka', 'Inter', sans-serif;
    padding: 16px 46px;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .1em;
    background: var(--yellow);
    color: var(--ink);
    border: 4px solid var(--ink);
    border-radius: 50px;
    box-shadow: 0 7px 0 var(--ink);
    transition: transform .12s ease-out, box-shadow .12s ease-out, background .2s ease;
    animation: hero-pop .8s var(--boing) .8s both;
}

.hero .cta-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .7) 48%, transparent 62%);
    transform: translateX(-115%);
    transition: transform .7s var(--boing);
}

.hero .cta-button:hover {
    background: #FFDF7A;
    transform: translateY(5px);
    box-shadow: 0 2px 0 var(--ink);
}

.hero .cta-button:active {
    transform: translateY(7px);
    box-shadow: 0 0 0 var(--ink);
}

.hero .cta-button:hover::after {
    transform: translateX(115%);
}

.hero .cta-button:focus-visible {
    outline: 4px solid var(--cyan);
    outline-offset: 4px;
}

/* ── Scroll cue ──────────────────────────────────────────────── */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 1.5px 0 var(--ink), 0 -1.5px 0 var(--ink);
    transition: color .3s ease;
    animation: hero-pop .9s var(--boing) 1.3s both;
}

.hero-scroll:hover,
.hero-scroll:focus-visible {
    color: var(--yellow);
}

.hero-scroll-rail {
    position: relative;
    display: block;
    width: 14px;
    height: 26px;
    border-radius: 8px;
    border: 3px solid var(--ink);
    background: rgba(255, 255, 255, .55);
    overflow: hidden;
}

.hero-scroll-rail i {
    position: absolute;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 7px;
    border-radius: 2px;
    background: var(--ink);
    animation: rail-fall 1.7s var(--boing) infinite;
}

@keyframes rail-fall {
    0% {
        top: 1px;
        opacity: 0;
    }

    25%,
    62% {
        opacity: 1;
    }

    100% {
        top: 12px;
        opacity: 0;
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */
/* Nothing moves, but the composition still has to hold: the planets
   are parked at four distinct points on their orbits rather than all
   snapping to the same vertex. */
@media (prefers-reduced-motion: reduce) {

    .hero-sky .sky-nebula,
    .sky-burst,
    .cosmos-stage,
    .hero-title,
    .hero-subtitle,
    .hero-description,
    .hero .cta-button,
    .hero-scroll,
    .blackhole,
    .bh-flow,
    .orbit-dashed,
    .hero-scroll-rail i,
    .planet-3 .eye,
    .cursor {
        animation: none !important;
    }

    .hero-title,
    .hero-subtitle,
    .hero-description,
    .hero .cta-button,
    .hero-scroll,
    .cosmos-stage {
        opacity: 1;
        transform: none;
    }

    .probes {
        display: none;
    }

    .planet {
        animation: none;
    }

    .planet-1 {
        offset-distance: 18%;
    }

    .planet-2 {
        offset-distance: 33%;
    }

    .planet-3 {
        offset-distance: 78%;
        transform: scale(.75);
    }

    .planet-4 {
        offset-distance: 62%;
    }
}

/* Section Styles */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: var(--deep-indigo);
    position: relative;
}

.section-title.white {
    color: var(--white);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, var(--bright-cyan), var(--soft-violet));
    border-radius: 2px;
}

/* About Section */


/* Products Section */


.product-features .feature-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bright-cyan);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    width: 100%;
}

.product-features .feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
}

.product-features .feature-tag {
    background: rgba(38, 209, 243, 0.1);
    border: 1px solid rgba(38, 209, 243, 0.3);
    color: var(--bright-cyan);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.product-features .feature-tag:hover {
    background: rgba(38, 209, 243, 0.2);
    border-color: var(--bright-cyan);
    transform: translateY(-2px);
}


/* Services Section */


.feature-title {
    font-weight: 600;
    color: var(--bright-cyan);
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    width: 100%;
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
}

.feature-tag {
    background: rgba(38, 209, 243, 0.15);
    border: 1px solid rgba(38, 209, 243, 0.3);
    color: rgba(255, 255, 255, 0.9);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.feature-tag:hover {
    background: rgba(38, 209, 243, 0.25);
    border-color: rgba(38, 209, 243, 0.5);
    transform: translateY(-2px);
    color: var(--white);
}

/* Contact Section */
.contact {
    padding: 100px 0;
    background: var(--white);
}

/* Contact Form Styles */
.contact-form-section {
    margin-top: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--deep-indigo);
    text-align: center;
    margin-bottom: 40px;
}

.contact-form {
    background: linear-gradient(135deg, rgba(44, 47, 128, 0.05), rgba(161, 118, 241, 0.05));
    border: 1px solid rgba(44, 47, 128, 0.1);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 500;
    color: var(--deep-indigo);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(44, 47, 128, 0.2);
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background: var(--white);
    color: var(--slate-gray);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--bright-cyan);
    box-shadow: 0 0 0 3px rgba(38, 209, 243, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .cta-button {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    font-size: 1.1rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.contact-card {
    text-align: center;
    padding: 40px 20px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(44, 47, 128, 0.05), rgba(161, 118, 241, 0.05));
    border: 1px solid rgba(44, 47, 128, 0.1);
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(44, 47, 128, 0.1);
}

.contact-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bright-cyan), var(--soft-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.contact-icon svg {
    width: 30px;
    height: 30px;
    fill: white;
}

.contact-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.contact-link:hover .contact-title,
.contact-link:hover .contact-info {
    color: var(--bright-cyan);
}

.contact-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--deep-indigo);
    margin-bottom: 10px;
}

.contact-info {
    font-size: 1.1rem;
    color: var(--slate-gray);
    font-weight: 500;
}

.contact-cta {
    text-align: center;
}

/* Footer */
.footer {
    background: var(--midnight-navy);
    padding: 60px 0 30px;
    text-align: center;
}

.footer-content {
    margin-bottom: 30px;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

/* Mobile Hamburger Menu */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.nav-hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(26, 26, 46, 0.98);
    backdrop-filter: blur(20px);
    padding: 20px;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.mobile-menu.active {
    display: flex;
}

.mobile-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.mobile-link:last-child {
    border-bottom: none;
}

.mobile-link:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    padding-left: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    /* hero type is fluid via clamp() — nothing to override here */

    

    

    

    

    .section-title {
        font-size: 2rem;
    }

    

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    

    /* the whole orbital assembly scales as one — see .cosmos */
    .hero {
        --cosmos-scale: .72;
        padding: 84px 0 68px;
    }

    .hero-subtitle::before,
    .hero-subtitle::after {
        width: 34px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form {
        padding: 30px 20px;
    }

    

    
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .cta-button {
        padding: 12px 30px;
        font-size: 1rem;
    }

    .hero .cta-button {
        padding: 14px 34px;
    }

    

    

    .product-icon {
        width: 80px;
        height: 80px;
    }

    .icon-illustration {
        width: 50px;
        height: 50px;
    }

    .hero {
        --cosmos-scale: .5;
        padding: 78px 0 84px;
    }

    /* 52 KB instead of 148 KB — a phone crops the plate to its middle
       third anyway, so the extra resolution is never seen. */
    .sky-nebula {
        background-image: url('./img/hero/nebula-sm.webp?v=4');
    }

    .hero-quote {
        line-height: 1.75;
    }

    .hero-subtitle::before,
    .hero-subtitle::after {
        width: 22px;
    }
}

/* Between the two: the assembly is 760px wide at scale 1, so it wants
   easing down before the tablet breakpoint or it clips its outer orbit. */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero {
        --cosmos-scale: .88;
    }
}

/* Short viewports — a 1280x800 laptop, or any window in split view. The
   hero is 100vh, so when height is the binding constraint it is the
   assembly that gives way, never the type or the CTA. Ordered after the
   width queries so height wins when both match. */
@media (min-width: 769px) and (max-height: 889px) {
    .hero {
        --cosmos-scale: .7;
        padding: 74px 0 62px;
    }
}

@media (min-width: 769px) and (max-height: 759px) {
    .hero {
        --cosmos-scale: .52;
        padding: 72px 0 56px;
    }

    /* nothing left to point at — the fold is already past the CTA */
    .hero-scroll {
        display: none;
    }
}

/* Popup Modal Styles */


.popup-overlay.show {
    opacity: 1;
    visibility: visible;
}


.popup-overlay.show .popup-content {
    transform: scale(1);
}


@keyframes checkmark-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* File Input Styles */
input[type="file"] {
    padding: 12px;
    border: 2px dashed rgba(44, 47, 128, 0.3);
    border-radius: 10px;
    background: rgba(44, 47, 128, 0.02);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--slate-gray);
}

input[type="file"]:hover {
    border-color: var(--bright-cyan);
    background: rgba(38, 209, 243, 0.05);
}

input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--bright-cyan), var(--soft-violet));
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    margin-right: 15px;
    transition: all 0.3s ease;
}

input[type="file"]::file-selector-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(38, 209, 243, 0.3);
}

.form-help-text {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: rgba(90, 90, 122, 0.7);
    font-style: italic;
}

/* ============================================================
   SITE THEME — the flat-cartoon system beyond the hero
   ------------------------------------------------------------
   The hero is a dark sky; the rest of the site is paper. Both obey
   the same two rules: one ink weight on every shape, and a hard
   shelf shadow under anything raised. Nothing here is blurred.

   Long-form copy sits on cream and pale sky rather than on the
   hero's blue — a page of Thai body text on saturated violet is
   unreadable, and the theme survives the change intact.
   ============================================================ */

body {
    background: var(--paper);
    color: var(--ink);
}

/* ── Bands ───────────────────────────────────────────────────── */
.band {
    position: relative;
    padding: clamp(60px, 8vw, 104px) 0;
    border-bottom: var(--line) solid var(--ink);
}

.band--paper {
    background: var(--paper);
}

.band--sky {
    background: var(--paper-2);
}

.band--violet {
    background: var(--violet-lt);
}

.band--dark {
    background: var(--sky);
    color: #FFFFFF;
}

/* halftone, the same tile as the hero, so the bands read as one drawing */
.band--dots::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(20, 16, 46, .16) 1.7px, transparent 1.8px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 42%);
    mask-image: linear-gradient(180deg, #000, transparent 42%);
}

.band > .container {
    position: relative;
    z-index: 1;
}

/* ── Headings ────────────────────────────────────────────────── */
.section-title {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-align: center;
    color: var(--ink);
    margin-bottom: 14px;
}

/* on dark bands the heading needs the hero's outline treatment */
.band--dark .section-title,
.page-header .section-title {
    color: #FFFFFF;
    text-shadow:
        3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
        2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
        .07em .085em 0 var(--violet);
}

/* The rule under a heading is a drawn object, not a hairline. */
.section-title::after {
    content: '';
    display: block;
    width: 74px;
    height: 8px;
    margin: 16px auto 0;
    border-radius: 8px;
    background: var(--yellow);
    border: 2.5px solid var(--ink);
}

.section-lede {
    max-width: 44em;
    margin: 0 auto clamp(40px, 5vw, 62px);
    text-align: center;
    font-size: clamp(1rem, 1.7vw, 1.14rem);
    line-height: 1.8;
    color: var(--slate-gray);
}

.band--dark .section-lede {
    color: rgba(255, 255, 255, .92);
}

.eyebrow {
    display: inline-block;
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 7px 16px;
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    box-shadow: 0 3px 0 var(--ink);
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
    position: relative;
    background: #FFFFFF;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 var(--shelf) 0 var(--ink);
    overflow: hidden;
    transition: transform .18s var(--boing), box-shadow .18s var(--boing);
}

a.card,
.card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card:hover,
.card--link:hover {
    transform: translateY(-5px);
    box-shadow: 0 calc(var(--shelf) + 5px) 0 var(--ink);
}

.card:focus-within {
    outline: 4px solid var(--cyan);
    outline-offset: 3px;
}

.card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--paper-2);
    border-bottom: var(--line) solid var(--ink);
    overflow: hidden;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-body {
    padding: clamp(20px, 2.4vw, 28px);
}

.card-title {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: 1.24rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 10px;
}

.card-text {
    font-size: .98rem;
    line-height: 1.75;
    color: var(--slate-gray);
}

/* A colour chip in the corner is how a card announces its pillar
   without a legend. */
.card--cyan .card-media { background: var(--cyan-lt); }
.card--violet .card-media { background: var(--violet-lt); }
.card--pink .card-media { background: #FFD5E7; }
.card--mint .card-media { background: #BFF3DD; }

/* ── Tags ────────────────────────────────────────────────────── */
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.tag {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    padding: 8px 13px;
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    background: var(--cyan-lt);
    color: var(--ink);
}

.tag--violet { background: var(--violet-lt); }
.tag--pink   { background: #FFD5E7; }
.tag--mint   { background: #BFF3DD; }
.tag--yellow { background: var(--yellow); }

/* ── Buttons ─────────────────────────────────────────────────── */
/* The shelf is the whole idea: the button sits on a solid ink ledge
   and presses down into it. A blurred shadow kills the effect. */
.btn {
    display: inline-block;
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    padding: 14px 32px;
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    box-shadow: 0 var(--shelf) 0 var(--ink);
    transition: transform .12s ease-out, box-shadow .12s ease-out, background .2s ease;
}

.btn:hover {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--ink);
    background: #FFDF7A;
}

.btn:active {
    transform: translateY(var(--shelf));
    box-shadow: 0 0 0 var(--ink);
}

.btn:focus-visible {
    outline: 4px solid var(--cyan);
    outline-offset: 4px;
}

.btn--cyan   { background: var(--cyan); }
.btn--cyan:hover { background: #6FD6F8; }
.btn--violet { background: var(--violet-lt); }
.btn--violet:hover { background: #D8C6FF; }
.btn--ghost  { background: #FFFFFF; }
.btn--ghost:hover { background: var(--paper); }

/* ── Page header (every page but home) ───────────────────────── */
.page-header {
    position: relative;
    background: var(--sky);
    border-bottom: 5px solid var(--ink);
    padding: clamp(130px, 15vw, 180px) 0 clamp(52px, 7vw, 78px);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.page-header::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 10%;
    width: 180vmax;
    height: 180vmax;
    margin: -90vmax 0 0 -90vmax;
    z-index: -1;
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, .085) 0deg 7deg,
            transparent 7deg 14deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 22%, transparent 40%);
    mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 22%, transparent 40%);
    animation: burst-spin 90s linear infinite;
}

.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(20, 16, 46, .22) 1.7px, transparent 1.8px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(66% 62% at 50% 46%, transparent 34%, #000 100%);
    mask-image: radial-gradient(66% 62% at 50% 46%, transparent 34%, #000 100%);
}

.page-header .section-title {
    margin-bottom: 0;
}

.page-header .section-title::after {
    display: none;
}

.page-header .section-lede {
    margin: 20px auto 0;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 2px 0 rgba(20, 16, 46, .5);
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

.crumbs a {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, .45);
}

.crumbs a:hover {
    border-bottom-color: var(--yellow);
    color: var(--yellow);
}

.crumbs li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.crumbs li + li::before {
    content: '›';
    opacity: .65;
}

/* ── Grids ───────────────────────────────────────────────────── */
.grid {
    display: grid;
    gap: clamp(20px, 2.6vw, 30px);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
    .grid--3,
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: 1fr; }
}

/* ── Prose (product / case detail bodies) ────────────────────── */
.prose {
    max-width: 46em;
    margin: 0 auto;
    font-size: clamp(1rem, 1.6vw, 1.08rem);
    line-height: 1.9;
    color: var(--slate-gray);
}

.prose h2 {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.8rem);
    font-weight: 600;
    color: var(--ink);
    margin: 44px 0 14px;
}

.prose h3 {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--ink);
    margin: 30px 0 10px;
}

.prose p + p { margin-top: 16px; }

.prose ul {
    margin: 14px 0 14px 0;
    padding: 0;
    list-style: none;
}

.prose li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

/* a drawn bullet, not a typographic one */
.prose li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .62em;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--cyan);
    border: 2.5px solid var(--ink);
}

.prose strong { color: var(--ink); }

/* ── Stat tiles ──────────────────────────────────────────────── */
.stat {
    text-align: center;
    padding: 24px 16px;
    background: #FFFFFF;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 var(--shelf) 0 var(--ink);
}

.stat-num {
    display: block;
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

.stat-label {
    display: block;
    margin-top: 8px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--slate-gray);
}


/* ============================================================
   CHROME — nav, footer, and the pieces the page templates need
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--yellow);
    color: var(--ink);
    border: var(--line) solid var(--ink);
    border-radius: 0 0 14px 0;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
}

/* ── Nav ─────────────────────────────────────────────────────── */
.navbar {
    background: var(--ink);
    border-bottom: var(--line) solid var(--ink);
    backdrop-filter: none;
}

.navbar.scrolled {
    background: var(--ink);
    box-shadow: 0 4px 0 rgba(20, 16, 46, .25);
}

.nav-logo {
    text-decoration: none;
}

.logo-mark {
    width: 42px;
    height: 44px;
    flex: none;
    display: block;
    /* the mark is drawn in ink; on the ink-coloured bar it needs a light plate */
    filter: drop-shadow(0 0 0 transparent);
}

.navbar .logo-mark {
    background: var(--cyan-lt);
    border: 2.5px solid #FFFFFF;
    border-radius: 50%;
    padding: 2px;
}

.logo-text {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: #FFFFFF;
    background: none;
    -webkit-text-fill-color: #FFFFFF;
}

.nav-link {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1rem;
}

.nav-link::after {
    height: 4px;
    border-radius: 3px;
    bottom: -7px;
    background: var(--yellow);
}

.nav-link:hover {
    color: var(--yellow);
}

.nav-link.is-current {
    color: var(--yellow);
}

.nav-link.is-current::after {
    width: 100%;
}

.nav-link:focus-visible,
.nav-logo:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
    border-radius: 6px;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .82);
    padding: clamp(48px, 6vw, 72px) 0 28px;
    border-top: 5px solid var(--ink);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
}

.footer .nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.footer .logo-mark {
    background: var(--cyan-lt);
    border: 2.5px solid #FFFFFF;
    border-radius: 50%;
    padding: 2px;
}

.footer-tagline {
    font-family: 'Fredoka', 'Inter', sans-serif;
    color: var(--yellow);
    font-size: 1.02rem;
    margin-bottom: 10px;
}

.footer-blurb {
    font-size: .93rem;
    line-height: 1.75;
    max-width: 34em;
}

.footer-heading {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 9px;
}

.footer-col a,
.footer-blurb a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-size: .94rem;
}

.footer-col a:hover {
    color: var(--yellow);
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--violet);
    border: 2.5px solid #FFFFFF;
    color: #FFFFFF;
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-weight: 600;
    font-size: .82rem;
    text-decoration: none;
    transition: transform .15s var(--boing), background .2s ease;
}

.footer-social a:hover {
    transform: translateY(-3px);
    background: var(--cyan);
    color: var(--ink);
}

.footer-cta {
    margin-top: 16px;
    font-size: .92rem;
    padding: 11px 22px;
}

.footer-bottom {
    margin-top: clamp(32px, 4vw, 52px);
    padding-top: 22px;
    border-top: 2px solid rgba(255, 255, 255, .18);
    text-align: center;
    font-size: .86rem;
    color: rgba(255, 255, 255, .62);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Page pieces ─────────────────────────────────────────────── */
.band-cta {
    text-align: center;
    margin-top: clamp(30px, 4vw, 44px);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.inline-link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid var(--yellow);
}

.inline-link:hover {
    border-bottom-color: var(--cyan);
}

.lede-para {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--ink);
    font-weight: 500;
}

/* detail pages: illustration beside the summary */
.detail-lead {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.4vw, 48px);
    align-items: start;
}

.detail-figure {
    margin: 0;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 var(--shelf) 0 var(--ink);
    overflow: hidden;
    background: var(--sky);
}

.detail-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.detail-who {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--paper-2);
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    font-size: .97rem;
    line-height: 1.7;
}

.detail-cta {
    margin-top: 22px;
}

@media (max-width: 820px) {
    .detail-lead {
        grid-template-columns: 1fr;
    }
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 62em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.feature-list li {
    position: relative;
    padding: 15px 18px 15px 48px;
    background: #FFFFFF;
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    font-size: .98rem;
    line-height: 1.6;
    box-shadow: 0 4px 0 var(--ink);
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mint);
    border: 2.5px solid var(--ink);
}

@media (max-width: 700px) {
    .feature-list {
        grid-template-columns: 1fr;
    }
}

/* gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.gallery-item {
    margin: 0;
    border: var(--line) solid var(--ink);
    border-radius: 18px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 5px 0 var(--ink);
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* contact */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(24px, 3.4vw, 48px);
    align-items: start;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.contact-list li {
    padding: 14px 0;
    border-bottom: 2px dashed rgba(20, 16, 46, .22);
}

.contact-key {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-gray);
    margin-bottom: 5px;
}

.contact-list a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--cyan);
}

.contact-list .footer-social {
    margin-top: 6px;
}

.contact-form .form-group {
    margin-bottom: 16px;
}

.contact-form label {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: 6px;
    color: var(--ink);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    padding: 12px 14px;
    border: 2.5px solid var(--ink);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--ink);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 3px solid var(--cyan);
    outline-offset: 2px;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-help-text {
    font-size: .86rem;
    color: var(--slate-gray);
    margin-bottom: 16px;
}

.form-status {
    margin-top: 14px;
    font-weight: 600;
    font-size: .94rem;
    min-height: 1.4em;
}

.form-status.is-ok { color: #1F7A54; }
.form-status.is-err { color: #B3225B; }

@media (max-width: 820px) {
    .contact-layout,
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   LANGUAGE, LOGO STRIPS, TECHNOLOGY, LINE
   ============================================================ */
/* ── Language switch ─────────────────────────────────────────── */
/* Segmented: the lit segment is the language you are ON. Highlighting the
   destination instead reads as backwards to almost everyone. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 10px;
    padding: 3px;
    border: 2.5px solid #FFFFFF;
    border-radius: 999px;
}

.lang-opt {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: rgba(255, 255, 255, .62);
    transition: color .2s ease, background .2s ease;
}

a.lang-opt:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .16);
}

a.lang-opt:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 3px;
}

.lang-opt.is-current {
    background: var(--yellow);
    color: var(--ink);
    cursor: default;
}

.mobile-lang {
    color: var(--yellow) !important;
    font-weight: 600;
}

/* ── Customer / partner marks ────────────────────────────────── */




.logo-strip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* Every mark gets the same white tile and ink frame. Left loose they clash —
   these arrive as crops with wildly different aspect ratios and backgrounds. */
.logo-strip li {
    display: grid;
    place-items: center;
    width: 168px;
    height: 92px;
    padding: 14px 18px;
    background: #FFFFFF;
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--ink);
    transition: transform .16s var(--boing);
}

.logo-strip li:hover {
    transform: translateY(-3px);
}

.logo-strip img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (max-width: 560px) {
    .logo-strip li {
        width: 132px;
        height: 76px;
        padding: 10px 12px;
    }
}

/* ── Technology marks ────────────────────────────────────────── */
.tech-strip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    box-shadow: 0 4px 0 var(--ink);
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
}

.band--sky .tech-badge,
.band--dark .tech-badge {
    background: #FFFFFF;
}

.tech-mark {
    width: 20px;
    height: 20px;
    flex: none;
    fill: var(--ink);
}

/* Two entries carry no mark on purpose — see partials/tech-strip.html. */
.tech-item.is-nameonly .tech-badge::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--violet-lt);
    border: 2.5px solid var(--ink);
}

/* ── LINE ────────────────────────────────────────────────────── */
.line-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    background: #FFFFFF;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 var(--shelf) 0 var(--ink);
    text-decoration: none;
    color: inherit;
    transition: transform .16s var(--boing), box-shadow .16s var(--boing);
}

.line-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 calc(var(--shelf) + 4px) 0 var(--ink);
}

.line-card:focus-visible {
    outline: 4px solid var(--cyan);
    outline-offset: 3px;
}

/* The QR needs its own quiet white border to stay scannable — the card's
   padding alone is not a quiet zone once the ink frame sits against it. */
.line-qr {
    flex: none;
    width: 128px;
    height: 128px;
    padding: 8px;
    background: #FFFFFF;
    border: 2.5px solid var(--ink);
    border-radius: 12px;
}

.line-qr img {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
}

.line-text {
    min-width: 0;
}

.line-title {
    font-family: 'Fredoka', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.line-badge {
    display: inline-grid;
    place-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #06C755;
    border: 2.5px solid var(--ink);
    color: #FFFFFF;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.line-id {
    font-weight: 700;
    color: var(--ink);
}

.line-hint {
    margin-top: 6px;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--slate-gray);
}

@media (max-width: 480px) {
    .line-card {
        flex-direction: column;
        text-align: center;
    }
}

/* The home page leads with English: an English eyebrow sits above each Thai
   heading. Suppressed on /en, where it would only repeat the heading. */
.band-eyebrow {
    text-align: center;
    margin-bottom: 12px;
}

.team-figure {
    margin: 0 auto;
    max-width: 860px;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 var(--shelf) 0 var(--ink);
    overflow: hidden;
    background: var(--paper-2);
}

.team-figure img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   BRAND MARKS IN THEIR OWN COLOUR
   ------------------------------------------------------------
   Social and technology marks were flat ink, which read as missing
   icons rather than as brands. Each now carries its own hex via a
   --brand custom property set inline on the element.
   ============================================================ */
.footer-social a {
    background: #FFFFFF;
    border: 2.5px solid var(--ink);
    color: var(--brand, var(--ink));
    padding: 0;
}

.footer-social a svg {
    width: 19px;
    height: 19px;
    fill: var(--brand, var(--ink));
}

.footer-social a:hover {
    background: var(--brand, var(--cyan));
    transform: translateY(-3px);
}

.footer-social a:hover svg {
    fill: #FFFFFF;
}

.contact-list .footer-social a {
    width: 42px;
    height: 42px;
}

.tech-mark {
    fill: var(--brand, var(--ink));
}

/* Azure and Power BI carry no mark; the dot stands in for one so the row
   keeps its rhythm. */
.tech-item.is-nameonly .tech-badge::before {
    content: none;
}

.tech-dot {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 4px;
    background: var(--brand, var(--violet-lt));
    border: 2.5px solid var(--ink);
}

/* ── One logo wall ───────────────────────────────────────────── */
/* The supplied logos are transparent PNGs fitted to a common box, so the
   tile no longer has to hide a screenshot's white rectangle. */
.logo-strip li {
    width: 176px;
    height: 96px;
    padding: 12px 16px;
}

.logo-strip img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ── LINE on the home page ───────────────────────────────────── */
.line-home {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.line-home .line-card {
    max-width: 420px;
}

.btn--line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #06C755;
    color: #FFFFFF;
}

.btn--line svg {
    width: 22px;
    height: 22px;
    fill: #FFFFFF;
}

.btn--line:hover {
    background: #05A948;
}

/* ── Photography beside the cartoon ──────────────────────────── */
/* The illustrations carry the personality; one real photograph of the team
   is what stops the page reading as a pitch with no people behind it. */
.team-figure {
    position: relative;
}

.team-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: calc(var(--radius) - 3px);
    box-shadow: inset 0 0 0 3px rgba(20, 16, 46, .12);
}

/* The Thai pull-quote runs on the English page too: an English reader should
   see this is a Thai company before they read a word of the copy. The English
   rendering sits under it, quieter, so nothing is actually lost. */
.hero-quote-en {
    font-size: clamp(.92rem, 1.7vw, 1.05rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
    max-width: 44em;
    margin: 0 auto 18px;
    font-weight: 500;
    text-shadow: 0 2px 0 rgba(20, 16, 46, .5);
}

/* Azure and Power BI arrive as multi-path coloured SVGs, so --brand must not
   repaint them. */
.tech-mark.is-colour,
.tech-mark.is-colour * {
    fill: revert-layer;
}

.tech-mark.is-colour {
    fill: none;
}