/* KO-LAB INC. — minimal custom CSS.
 * Everything else is Tailwind via CDN. This file holds only what Tailwind
 * utility classes can't express cleanly: the dot-grid hero accent, a soft
 * glow effect for the accent rule, and a fix for the Tailwind/CDN flash. */

/* Hide content briefly until Tailwind CDN finishes applying its config,
 * so the user never sees a white flash on the dark page. */
html { background-color: #0a0d18; }
body { background-color: #0a0d18; }

/* Hero dot-grid backdrop — used as ::before / ::after on sections that opt
 * in via the .kolab-dotgrid class. Inspired by the brand mockup's
 * scattered-particle visual. The mask creates a soft radial fade so the
 * grid never reaches the edges and never competes with the headline. */
.kolab-dotgrid {
    position: relative;
    isolation: isolate;
}
.kolab-dotgrid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(91, 180, 214, 0.18) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 35%, transparent 85%);
            mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 35%, transparent 85%);
    pointer-events: none;
}

/* Subtle glowing edge under hero — picks up the accent color */
.kolab-glow-bottom {
    position: relative;
}
.kolab-glow-bottom::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: min(40rem, 80%);
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(91, 180, 214, 0.55), transparent);
    pointer-events: none;
}

/* Card hover lift — slight, restrained, premium feel */
.kolab-card {
    transition: transform 240ms ease, border-color 240ms ease, background-color 240ms ease;
}
.kolab-card:hover {
    transform: translateY(-2px);
}

/* Number+title stack used in service cards — keeps the index number tight */
.kolab-number {
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.04em;
}

/* Hero "particle wave" — concentric arcs of fine dots fading off both sides,
 * matching the decorative band beneath the hero in the brand mockup.
 * Built as a single repeating-radial-gradient masked to a thin curved band. */
.kolab-wave {
    position: absolute;
    inset: auto 0 -1px 0;
    height: 180px;
    pointer-events: none;
    opacity: 0.6;
    background-image:
        radial-gradient(circle at center 220%, transparent 250px, rgba(91,180,214,0.55) 251px, transparent 253px),
        radial-gradient(circle at center 220%, transparent 290px, rgba(91,180,214,0.45) 291px, transparent 293px),
        radial-gradient(circle at center 220%, transparent 330px, rgba(91,180,214,0.35) 331px, transparent 333px),
        radial-gradient(circle at center 220%, transparent 370px, rgba(91,180,214,0.25) 371px, transparent 373px);
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, #000 25%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, #000 25%, transparent 75%);
}

/* Right-side scattered particles — small dots fanning out on the hero's right
 * edge, echoing the mockup's "data" speckling around the production grid. */
.kolab-particles-right {
    position: absolute;
    inset: 0 0 0 auto;
    width: 38%;
    pointer-events: none;
    background-image: radial-gradient(rgba(91, 180, 214, 0.55) 1px, transparent 1.4px);
    background-size: 18px 18px;
    background-position: top right;
    -webkit-mask-image: linear-gradient(to left, #000 5%, transparent 85%);
            mask-image: linear-gradient(to left, #000 5%, transparent 85%);
    opacity: 0.5;
}

/* Stylized hero mosaic tile — used in the 4-quadrant production grid stand-in
 * until real photos are added. Each tile gets a subtle gradient + an inline
 * SVG icon overlay, so the grid reads as "physical fabrication" rather than
 * "empty placeholder." */
.kolab-mosaic-tile {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    isolation: isolate;
    background: linear-gradient(135deg, #1a2032 0%, #0f1422 60%, #050810 100%);
}
.kolab-mosaic-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 25%, rgba(91,180,214,0.20), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(91,180,214,0.10), transparent 60%);
    z-index: 0;
}
.kolab-mosaic-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 22px);
    z-index: 0;
}
.kolab-mosaic-tile > * { position: relative; z-index: 1; }

/* Service-tile accent line at top of each tile, visible on hover */
.kolab-service-tile {
    position: relative;
    transition: border-color 240ms ease, background-color 240ms ease, transform 240ms ease;
}
.kolab-service-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(91,180,214,0.6), transparent);
    opacity: 0;
    transition: opacity 240ms ease;
}
.kolab-service-tile:hover::before { opacity: 1; }
.kolab-service-tile:hover { transform: translateY(-2px); }

/* Reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
    .kolab-card { transition: none; }
    html { scroll-behavior: auto; }
}

/* Smooth focus ring inside the dark palette */
:focus-visible {
    outline: 2px solid #5bb4d6;
    outline-offset: 2px;
    border-radius: 2px;
}