/* ==========================================================================
   Hubix Technologies: the site's one stylesheet (the 3D design, dark only).
   Palette and type are the Luminescent Emerald dark tokens of the earlier
   site, kept as plain values. Pages are generated by _src/build.mjs.
   ========================================================================== */

:root {
    color-scheme: dark only;

    --bg: #00161a;
    --surface-lowest: #001114;
    --surface-low: #001f24;
    --surface: #002429;
    --surface-high: #002f36;
    --surface-highest: #0a3a41;
    --on-surface: #beeaf3;
    --on-variant: #bccac0;
    --primary: #63dca6;
    --secondary: #4ddad3;
    --tertiary: #87da7f;
    --on-primary: #003824;
    --outline-variant: #3d4a42;

    --primary-rgb: 99 220 166;
    --secondary-rgb: 77 218 211;
    --on-surface-rgb: 190 234 243;

    --glass: rgb(0 36 41 / 0.55);
    --glass-strong: rgb(0 31 36 / 0.82);
    --glass-border: rgb(var(--on-surface-rgb) / 0.10);

    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --radius: 1.5rem;
    --radius-sm: 1rem;
    --max: 1280px;
    --gutter: clamp(1rem, 3vw, 2rem);
    --header-h: 72px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 8px);
}

/* Lenis takes over smooth scrolling; native smooth would fight it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    margin: 0;
    /* No background here: html carries it. A body background would paint over the
       fixed glow and canvas layers, which sit at negative z-index. */
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
    border-radius: 6px;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.container {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Fixed background layers ---------- */

.bg-glow {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(40vmax 40vmax at 78% 18%, rgb(var(--secondary-rgb) / 0.13), transparent 70%),
        radial-gradient(45vmax 45vmax at 12% 70%, rgb(var(--primary-rgb) / 0.10), transparent 70%),
        radial-gradient(30vmax 30vmax at 60% 110%, rgb(135 218 127 / 0.08), transparent 70%),
        var(--bg);
}

#scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -2;
    pointer-events: none;
    display: block;
}
.no-webgl #scene { display: none; }

/* 3D canvases fade in once their first frame is drawn (scene.js / scene-page.js
   add .is-on), so the 3D never pops in when three.js finishes downloading. */
#scene, .hero3d { opacity: 0; transition: opacity 0.9s ease; }
#scene.is-on, .hero3d.is-on { opacity: 1; }

.bg-grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type ---------- */

.eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 0.9rem;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; color: var(--on-surface); }

h2 {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin-bottom: 1rem;
}

h3 { font-size: 1.25rem; line-height: 1.3; }

.lead {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.7;
    color: var(--on-variant);
    max-width: 40rem;
}

.nowrap { white-space: nowrap; }

.text-gradient,
.text-gradient .wi {
    background: linear-gradient(100deg, var(--primary), var(--secondary) 60%, var(--tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inline-link {
    color: var(--secondary);
    border-bottom: 1px solid rgb(var(--secondary-rgb) / 0.4);
    transition: border-color 0.2s, color 0.2s;
}
.inline-link:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0 1.75rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    white-space: nowrap;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.25s, border-color 0.25s;
    will-change: transform;
}
.btn .material-symbols-outlined { font-size: 18px; transition: transform 0.35s var(--ease-out); }
.btn:hover .material-symbols-outlined { transform: translateX(4px); }

.btn-primary {
    background: linear-gradient(100deg, var(--primary), var(--secondary));
    color: var(--on-primary);
    box-shadow: 0 10px 30px -12px rgb(var(--primary-rgb) / 0.6);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -10px rgb(var(--primary-rgb) / 0.75);
}

.btn-ghost {
    border: 1px solid rgb(var(--on-surface-rgb) / 0.28);
    color: var(--on-surface);
    background: rgb(0 22 26 / 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: rgb(var(--secondary-rgb) / 0.6); background: rgb(var(--on-surface-rgb) / 0.06); }

.btn-sm { min-height: 42px; padding: 0 1.15rem; font-size: 11px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-high);
    transition: background-color 0.2s;
}
.icon-btn:hover { background: var(--surface-highest); }

/* ---------- Header ---------- */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding-top: env(safe-area-inset-top);
    transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
    border-bottom: 1px solid transparent;
}
.site-header.scrolled {
    background: rgb(0 22 26 / 0.72);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-bottom-color: rgb(61 74 66 / 0.35);
}

/* The hub network from the main site's navbar (mesh-solid.svg, used as a mask).
   A soft band of light travels through its lines. The band is its own layer
   (::before) moved with transform, so the header is never repainted for it;
   it was a background-position animation, a repaint every frame on every page.
   -80% to 80% of the band's 300% width is the old 120% to -120% position. */
.header-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.5;
    background: rgb(var(--primary-rgb) / 0.55);
    /* --mesh-solid-img comes from css/mesh.css (generated, embedded SVG). */
    -webkit-mask: var(--mesh-solid-img) center / cover no-repeat;
    mask: var(--mesh-solid-img) center / cover no-repeat;
}
.header-mesh::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 300%;
    background: linear-gradient(100deg, transparent 0%, transparent 38%, rgb(var(--secondary-rgb) / 0.95) 50%, transparent 62%, transparent 100%);
    animation: mesh-sweep 9s linear infinite;
}
@keyframes mesh-sweep {
    from { transform: translateX(-80%); }
    to { transform: translateX(80%); }
}

.header-inner {
    position: relative;
    z-index: 1;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-high);
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    color: var(--on-surface);
    transition: border-color 0.3s, transform 0.6s var(--ease-out);
}
.brand:hover .brand-mark { border-color: rgb(var(--primary-rgb) / 0.7); transform: rotate(90deg); }
.brand-mark svg { width: 22px; height: 22px; }
.diamond { fill: var(--primary); }

.logo-lockup { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.logo-word { font-weight: 800; font-size: 1.25rem; letter-spacing: 0.18em; text-transform: uppercase; }
.logo-sub { font-weight: 600; font-size: 0.475rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--primary); margin-top: 0.6em; }

.nav-desktop { display: none; gap: clamp(1.1rem, 2vw, 2rem); align-items: center; }
.nav-desktop > a,
.nav-drop > a {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--on-variant);
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.2s;
}
.nav-desktop > a::after,
.nav-drop > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-out);
}
.nav-desktop > a:hover, .nav-desktop > a.active,
.nav-drop > a:hover, .nav-drop > a.active { color: var(--on-surface); }
.nav-desktop > a:hover::after, .nav-desktop > a.active::after,
.nav-drop > a:hover::after, .nav-drop > a.active::after { transform: scaleX(1); }

/* Services mega menu: opens on hover or keyboard focus. */
.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 0.15rem; }
.nav-drop > a .material-symbols-outlined { font-size: 18px; transition: transform 0.3s var(--ease-out); }
.nav-drop:hover > a .material-symbols-outlined,
.nav-drop:focus-within > a .material-symbols-outlined { transform: rotate(180deg); }
.mega {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    width: 560px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.85rem;
    border-radius: var(--radius);
    background: rgb(0 27 31 / 0.96);
    border: 1px solid var(--glass-border);
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(var(--primary-rgb) / 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.25s, transform 0.35s var(--ease-out), visibility 0.25s;
}
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-drop:hover .mega,
.nav-drop:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.mega-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.85rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--on-variant);
    transition: background-color 0.2s, color 0.2s;
}
.mega-item:hover, .mega-item.active { background: rgb(var(--primary-rgb) / 0.08); color: var(--on-surface); }
.mega-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    background: rgb(var(--primary-rgb) / 0.12);
    border: 1px solid rgb(var(--primary-rgb) / 0.2);
}
.mega-icon .material-symbols-outlined { font-size: 19px; }
.mega-all {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    padding: 0.7rem;
    border-radius: 0.85rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--on-primary);
    background: linear-gradient(100deg, var(--primary), var(--secondary));
}
.mega-all .material-symbols-outlined { font-size: 16px; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem var(--gutter) 1.25rem;
    background: rgb(0 22 26 / 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgb(61 74 66 / 0.35);
}
.mobile-menu.open { display: flex; }
.mobile-menu {
    position: relative;
    z-index: 1;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mobile-menu a {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    color: var(--on-variant);
}
.mobile-menu a:hover { background: rgb(var(--on-surface-rgb) / 0.05); color: var(--on-surface); }
.mobile-menu a.active { color: var(--primary); }
.mobile-menu a.sub {
    padding: 0.55rem 1rem 0.55rem 2rem;
    font-size: 14px;
    font-weight: 500;
    border-left: 1px solid rgb(var(--primary-rgb) / 0.2);
    margin-left: 1rem;
    border-radius: 0 0.75rem 0.75rem 0;
}

@media (min-width: 1024px) {
    .nav-desktop { display: flex; }
    .menu-btn { display: none; }
    .mobile-menu { display: none !important; }
}

/* As on the live site: the header shows the full lockup from 768px, and the
   "Hubix" wordmark alone below that. The footer always shows both lines. */
.logo-text-mobile { display: none; }
@media (max-width: 767px) {
    .site-header .logo-text { display: none; }
    .site-header .logo-text-mobile { display: flex; }
    .site-footer .logo-sub { font-size: 9px; letter-spacing: 0.24em; }
}
@media (max-width: 480px) {
    .header-inner { gap: 0.5rem; }
    .brand { gap: 0.55rem; }
    .brand-mark { width: 36px; height: 36px; }
    .site-header .logo-word { font-size: 1rem; letter-spacing: 0.12em; }
    .header-actions { gap: 0.4rem; }
    .header-actions .btn-sm { min-height: 40px; padding: 0 0.8rem; font-size: 10px; letter-spacing: 0.08em; }
}
@media (max-width: 340px) {
    .header-actions .btn-sm { display: none; }
}

/* ---------- Sections ---------- */

/* clip (not hidden) so the tilted marquee can't widen the page and pinning still works. */
main { position: relative; overflow-x: clip; }

.section {
    position: relative;
    padding-block: clamp(5rem, 12vh, 9rem);
}

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head.center .lead { margin-inline: auto; }

.glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border-radius: var(--radius);
}

/* Two-column layout: one column for content, one empty "stage" column that the
   3D logo flies into. The stage collapses on narrow screens. */
.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.stage-col { display: none; }
.logo-slot { position: relative; width: 100%; aspect-ratio: 1; }

@media (min-width: 1024px) {
    .split-left { grid-template-columns: 5fr 7fr; }
    .split-right { grid-template-columns: 7fr 5fr; }
    .stage-col { display: block; }
}

.icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.22), rgb(var(--secondary-rgb) / 0.10));
    border: 1px solid rgb(var(--primary-rgb) / 0.25);
    color: var(--primary);
    margin-bottom: 1.1rem;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tags span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgb(var(--on-surface-rgb) / 0.06);
    border: 1px solid rgb(var(--on-surface-rgb) / 0.08);
    color: var(--on-variant);
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--primary);
    transition: gap 0.3s var(--ease-out), color 0.2s;
}
.card-link .material-symbols-outlined { font-size: 16px; }
.card-link:hover { gap: 0.7rem; color: var(--secondary); }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 1rem);
    padding-bottom: 4rem;
    /* Nothing in the hero is drawn outside it (the 3D logo is the fixed canvas).
       Without this the looping callouts, pulsing dot and scroll cue counted as
       possibly overlapping everything after them, so while the hero was on screen
       the rest of the page was lifted onto one 8,600px layer. */
    contain: paint;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}

.hero-stage { order: -1; display: flex; justify-content: center; }
.hero-stage .logo-slot { width: min(64vw, 300px); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgb(0 47 54 / 0.7);
    border: 1px solid rgb(var(--primary-rgb) / 0.22);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--primary);
    margin-bottom: 1.4rem;
}
/* The ring is a scaled, fading disc (transform + opacity, no repaint) rather than
   an animated box-shadow; 3.5x the 8px dot is the old 10px spread. */
.pulse-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}
.pulse-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(var(--primary-rgb) / 0.55);
    animation: pulse 2.2s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(3.5); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

.hero-title {
    font-size: clamp(2.15rem, 5.4vw, 4.75rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 800;
    margin-bottom: 1.4rem;
    text-wrap: balance;
}
/* Words are wrapped by main.js for the entrance; the mask hides them until they rise. */
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .wi { display: inline-block; will-change: transform; }

.hero .lead { margin-bottom: 2rem; }

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin-top: 1.6rem;
}
.trust-row li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--on-variant);
}
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-primary { background: var(--primary); }
.dot-secondary { background: var(--secondary); }
.dot-tertiary { background: var(--tertiary); }

/* Clipped to its own box: the letters stay inside it (radius 46 of 100), but
   browsers size SVG text's bounds generously, and with overflow visible the
   spinning layer came out about five times the ring's size (2820px square),
   which also pushed the sections below onto huge layers of their own. */
.orbit-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: spin 40s linear infinite;
    pointer-events: none;
}
.orbit-text text {
    font-family: var(--font);
    font-size: 4.1px;
    font-weight: 700;
    letter-spacing: 1.05px;
    fill: rgb(var(--on-surface-rgb) / 0.5);
}
@keyframes spin { to { transform: rotate(360deg); } }

.webgl-fallback {
    display: none;
    position: absolute;
    inset: 22%;
    width: 56%;
    height: 56%;
    color: var(--on-surface);
    filter: drop-shadow(0 0 30px rgb(var(--primary-rgb) / 0.45));
}
.no-webgl .webgl-fallback { display: block; }

.callout {
    position: absolute;
    z-index: 2;
    animation: bob 6s ease-in-out infinite;
}
.callout-big {
    top: 2%;
    left: -4%;
    width: clamp(96px, 30%, 168px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    background: radial-gradient(circle at 30% 25%, rgb(var(--primary-rgb) / 0.30), rgb(0 36 41 / 0.85) 70%);
    border: 1px solid rgb(var(--primary-rgb) / 0.45);
    box-shadow: 0 20px 50px -20px rgb(var(--primary-rgb) / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.callout-num {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, var(--on-surface), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.callout-label {
    margin-top: 0.35rem;
    font-size: clamp(9px, 0.9vw, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--on-surface);
}
.callout-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: rgb(0 36 41 / 0.78);
    border: 1px solid rgb(var(--secondary-rgb) / 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px -16px rgb(0 0 0 / 0.6);
}
.callout-pill .material-symbols-outlined { font-size: 18px; color: var(--secondary); }
.callout-a { right: -6%; top: 44%; animation-delay: -2s; }
.callout-b { left: 4%; bottom: 4%; animation-delay: -4s; }

@keyframes bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    translate: -50% 0;
    color: rgb(var(--on-surface-rgb) / 0.55);
    animation: cue 2.4s ease-in-out infinite;
}
.scroll-cue .material-symbols-outlined { font-size: 34px; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

@media (max-width: 1023px) {
    .callout-big { width: 92px; left: -10%; top: -2%; padding: 0.4rem; }
    .callout-big .callout-num { font-size: 2.1rem; }
    .callout-big .callout-label { font-size: 8px; letter-spacing: 0.05em; }
    .callout-pill { font-size: 10.5px; padding: 0.4rem 0.7rem; }
    .callout-pill .material-symbols-outlined { font-size: 15px; }
    .callout-a { right: -14%; top: 52%; }
    .callout-b { left: -8%; bottom: -2%; }
    .scroll-cue { display: none; }
}

@media (max-width: 380px) {
    .hero-stage .logo-slot { width: 220px; }
    .btn { padding: 0 1.2rem; font-size: 11px; }
}

@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 6fr 5fr; gap: 3rem; }
    .hero-stage { order: 0; }
    .hero-stage .logo-slot { width: min(100%, 560px); }
}

/* ---------- Proof ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.stat-card {
    padding: clamp(1.1rem, 2.4vw, 2rem);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    inset: auto -30% -60% auto;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--primary-rgb) / 0.18), transparent 70%);
    pointer-events: none;
}
.stat-num {
    font-size: clamp(3.4rem, 8.4vw, 7rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--on-surface) 10%, var(--primary) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.6rem;
}
.stat-card:nth-child(2) .stat-num { background-image: linear-gradient(180deg, var(--on-surface) 10%, var(--secondary) 95%); }
.stat-card:nth-child(3) .stat-num { background-image: linear-gradient(180deg, var(--on-surface) 10%, var(--tertiary) 95%); }
.stat-label { font-size: clamp(0.85rem, 1.1vw, 1rem); font-weight: 600; line-height: 1.4; color: var(--on-surface); }
.stat-note { margin-top: 0.35rem; font-size: 12px; color: var(--on-variant); }

/* ---------- Services ---------- */

.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.service-card {
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    min-height: 100%;
    /* Lighter than the other cards so the broken-apart 3D mark shows through, blurred. */
    background: rgb(0 31 36 / 0.68);
}
.service-card:hover { border-color: rgb(var(--primary-rgb) / 0.4); }
.service-card h3 { margin-bottom: 0.6rem; }
.service-card p { color: var(--on-variant); font-size: 0.95rem; margin-bottom: 1.1rem; }
.service-card .tags { margin-bottom: 1.4rem; }
.service-card .card-link { margin-top: auto; }

.service-all {
    justify-content: space-between;
    border-radius: var(--radius);
    background: linear-gradient(140deg, rgb(var(--primary-rgb) / 0.95), rgb(var(--secondary-rgb) / 0.9));
    color: var(--on-primary);
    border: 1px solid transparent;
    min-height: 220px;
}
.service-all .all-num { font-size: clamp(5rem, 9vw, 7.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; }
.service-all .all-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
.service-all .material-symbols-outlined { transition: transform 0.35s var(--ease-out); }
.service-all:hover .material-symbols-outlined { transform: translateX(6px); }

/* ---------- Why ---------- */

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why-item {
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    transition: border-color 0.3s, translate 0.4s var(--ease-out);
}
/* `translate`, not `transform`: GSAP leaves an inline transform after the scroll-in,
   which would cancel a transform-based hover. */
.why-item:hover { border-color: rgb(var(--secondary-rgb) / 0.35); translate: 0 -4px; }
.why-item h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.why-item p { color: var(--on-variant); font-size: 0.95rem; }

/* ---------- Process ---------- */

.process { padding-block: clamp(5rem, 10vh, 7rem); }
.process-pin { position: relative; }
.process-head { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.process-track-wrap { overflow: hidden; }
.process-track {
    display: grid;
    gap: 1rem;
    padding-inline: var(--gutter);
    max-width: var(--max);
    margin-inline: auto;
    counter-reset: stage;
}
.stage-card {
    position: relative;
    padding: 1.6rem 1.6rem 1.8rem;
    background: var(--glass-strong);
    overflow: hidden;
    transition: border-color 0.4s, box-shadow 0.4s;
}
.stage-card.is-active { border-color: rgb(var(--primary-rgb) / 0.55); box-shadow: 0 30px 60px -30px rgb(var(--primary-rgb) / 0.5); }
.stage-num {
    display: block;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(var(--primary-rgb) / 0.7);
    margin-bottom: 1rem;
}
.stage-card.is-active .stage-num { color: rgb(var(--primary-rgb) / 0.18); }
.stage-card h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.stage-card p { color: var(--on-variant); }

.process-foot {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}
.progress {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgb(var(--on-surface-rgb) / 0.1);
    overflow: hidden;
    display: none;
}
.progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

@media (min-width: 1024px) {
    .process-head { grid-template-columns: 7fr 4fr; }
    .process-stage .logo-slot { width: min(100%, 320px); margin-left: auto; }
    .process-head .section-head { margin-bottom: 0; }
    .process-track-wrap { margin-top: 2.5rem; }
}

/* Horizontal mode is switched on by main.js only on wide screens with a mouse
   or trackpad and motion allowed. */
.process.is-horizontal { padding-block: 0; }
.process.is-horizontal .process-pin {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(var(--header-h) + 1.5rem) 2rem;
}
.process.is-horizontal .process-track {
    display: flex;
    width: max-content;
    max-width: none;
    margin-inline: 0;
    padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    gap: 1.25rem;
}
.process.is-horizontal .stage-card { width: clamp(300px, 30vw, 420px); flex-shrink: 0; }
.process.is-horizontal .stage-num { font-size: clamp(2.8rem, 8vh, 5.5rem); }
.process.is-horizontal .process-stage .logo-slot { width: min(100%, 300px, 30vh); }
.process.is-horizontal .process-track-wrap { margin-top: clamp(1rem, 3vh, 2.5rem); }
.process.is-horizontal .process-foot { margin-top: clamp(1rem, 3vh, 2rem); }
.process.is-horizontal .progress { display: block; }

/* The stacked layout: phones, tablets (iPads too: no pinned track on touch) and reduced motion. */
@media (min-width: 640px) {
    .process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .process-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Marquee ---------- */

.marquee {
    position: relative;
    padding-block: clamp(2.5rem, 7vh, 5rem);
    overflow: hidden;
    border-block: 1px solid rgb(var(--on-surface-rgb) / 0.08);
    background: linear-gradient(180deg, rgb(0 17 20 / 0.5), rgb(0 17 20 / 0.8), rgb(0 17 20 / 0.5));
    transform: rotate(-2deg) scale(1.04);
    margin-block: 2rem;
}
/* The tilted .marquee already clips; a second rotated clip per row only cost
   the compositor work. main.js wraps each row's text and its copy in a track
   and slides the track (one layer per row). */
.marquee-row { display: flex; white-space: nowrap; }
.marquee-track { display: flex; flex-shrink: 0; will-change: transform; }
.marquee-row + .marquee-row { margin-top: 0.4rem; }
.marquee-inner {
    display: inline-flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-right: clamp(1.25rem, 3vw, 2.5rem);
    flex-shrink: 0;
}
.marquee-inner span {
    font-size: clamp(2.6rem, 8vw, 7.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    background: linear-gradient(180deg, var(--on-surface), rgb(var(--primary-rgb) / 0.85));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.marquee-outline .marquee-inner span {
    background: none;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(var(--secondary-rgb) / 0.55);
}
.m-diamond {
    width: clamp(14px, 1.8vw, 26px);
    height: clamp(14px, 1.8vw, 26px);
    background: var(--primary);
    transform: rotate(45deg);
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 24px rgb(var(--primary-rgb) / 0.6);
}

/* ---------- Included ---------- */

.include-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 700px) { .include-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.include-list li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    background: var(--glass-strong);
    border-radius: var(--radius-sm);
    color: var(--on-variant);
    font-size: 0.95rem;
    transition: border-color 0.3s, translate 0.4s var(--ease-out);
}
.include-list li:hover { border-color: rgb(var(--primary-rgb) / 0.35); translate: 4px 0; }
.include-list .material-symbols-outlined { color: var(--primary); margin-top: 2px; }
.include-list strong { display: block; color: var(--on-surface); font-weight: 700; margin-bottom: 0.15rem; }

/* ---------- Tech ---------- */

.tech-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tech-card { padding: 1.5rem; background: var(--glass-strong); }
.tech-card h3 { margin-bottom: 0.9rem; }

/* ---------- Testimonials ---------- */

.quote-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote-card {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--glass-strong);
}
/* format_quote draws a closing mark (”); turned half way it opens the quote (“).
   align-self keeps the box glyph-wide so the turn doesn't move it across the card. */
.quote-icon { font-size: 36px; color: var(--primary); align-self: flex-start; transform: rotate(180deg); }
.quote-card blockquote { font-size: 1.05rem; color: var(--on-surface); flex: 1; }
.quote-card figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--on-variant); }
.quote-card figcaption strong { display: block; color: var(--on-surface); }
.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-highest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--on-variant);
}

/* ---------- FAQ ---------- */

.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
    border-radius: var(--radius-sm);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    transition: border-color 0.3s;
}
.faq-item:has([aria-expanded="true"]) { border-color: rgb(var(--primary-rgb) / 0.35); }
.faq-item h3 { font-size: 1rem; }
.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 1.15rem 1.3rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.45;
}
.faq-trigger .material-symbols-outlined { color: var(--primary); transition: transform 0.4s var(--ease-out); }
.faq-trigger[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease-out);
}
.faq-panel > div { overflow: hidden; }
.faq-panel p { padding: 0 1.3rem 1.25rem; color: var(--on-variant); }
.faq-item.open .faq-panel { grid-template-rows: 1fr; }

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

.cta-panel {
    padding: clamp(2rem, 5vw, 3.5rem);
    background: linear-gradient(160deg, rgb(0 47 54 / 0.85), rgb(0 31 36 / 0.85));
    position: relative;
    overflow: hidden;
}
.cta-panel::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -160px;
    top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--primary-rgb) / 0.25), transparent 70%);
    pointer-events: none;
}
.cta-panel h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.cta-panel .lead { margin-bottom: 2rem; }
.cta-mail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--on-variant);
    word-break: break-all;
    transition: color 0.2s;
}
.cta-mail .material-symbols-outlined { color: var(--primary); font-size: 20px; }
.cta-mail:hover { color: var(--primary); }
.callout-cta { left: auto; right: -2%; top: 6%; }

/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgb(0 22 26 / 0.92), rgb(0 14 17 / 0.98) 40%);
    padding-block: 5rem 0;
    margin-top: 2rem;
    isolation: isolate;
}
/* Emerald hairline and a soft glow rising off the top edge (from the main site). */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--primary-rgb) / 0.6), transparent);
    z-index: 2;
}
/* A softer, larger gradient in place of the old 820x300 one with filter: blur(30px):
   same glow to within 8 of 255 at 390, 768 and 1366 wide (compared on screenshots),
   without a blur filter, which Safari draws slowly on the processor. */
.site-footer::after {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    width: min(960px, 100%);
    height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgb(var(--primary-rgb) / 0.15), rgb(var(--primary-rgb) / 0.12) 18%, rgb(var(--primary-rgb) / 0.06) 38%, rgb(var(--primary-rgb) / 0.015) 56%, transparent 66%);
    pointer-events: none;
    z-index: 0;
}
.footer-mesh {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 460px;
    z-index: 0;
    pointer-events: none;
    background-color: rgb(var(--primary-rgb));
    opacity: 0.35;
    -webkit-mask: var(--mesh-img) top center / cover no-repeat;
    mask: var(--mesh-img) top center / cover no-repeat;
}
.net-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.7) 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.7) 55%, transparent 100%);
}
.footer-inner { position: relative; z-index: 1; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
.footer-word {
    position: relative;
    z-index: 0;
    margin-top: -0.5rem;
    text-align: center;
    font-size: clamp(5rem, 24vw, 22rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 0.78;
    color: transparent;
    -webkit-text-stroke: 1px rgb(var(--primary-rgb) / 0.22);
    background: linear-gradient(180deg, rgb(var(--primary-rgb) / 0.16), transparent 75%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}
.site-footer h3 { color: var(--secondary) !important; }
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgb(61 74 66 / 0.25);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-brand p { margin: 1rem 0 1.5rem; max-width: 22rem; font-size: 0.9rem; color: var(--on-variant); }
.socials { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.socials a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-high);
    color: var(--on-variant);
    transition: background-color 0.25s, color 0.25s, transform 0.35s var(--ease-out);
}
.socials a { border: 1px solid rgb(var(--on-surface-rgb) / 0.1); }
.socials a:hover {
    background: var(--surface-high);
    color: var(--primary);
    border-color: rgb(var(--secondary-rgb) / 0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -8px rgb(var(--primary-rgb) / 0.55);
}
.socials .material-symbols-outlined { font-size: 19px; }
.site-footer h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--on-variant); margin-bottom: 1rem; }
.site-footer ul { display: flex; flex-direction: column; gap: 0.7rem; }
.site-footer ul a, .site-footer li { font-size: 0.9rem; color: var(--on-variant); transition: color 0.2s; }
.site-footer ul a:hover { color: var(--primary); }
.with-icon { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.with-icon .material-symbols-outlined { color: var(--primary); font-size: 19px; }
.break { word-break: break-all; }
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-top: 1.75rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--on-variant);
}
.footer-bottom div { display: flex; gap: 1.5rem; }
.footer-bottom a:hover { color: var(--on-surface); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ---------- WhatsApp ---------- */

.wa-widget {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}
.wa-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: #fff;
    box-shadow: 0 12px 30px -10px rgb(37 211 102 / 0.6);
    transition: transform 0.35s var(--ease-out);
}
.wa-toggle:hover { transform: scale(1.06); }
.wa-toggle svg { width: 30px; height: 30px; }
.wa-panel {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    width: 250px;
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.wa-widget.open .wa-panel { display: flex; }
.wa-head { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; }
.wa-option {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    background: rgb(var(--on-surface-rgb) / 0.05);
    transition: background-color 0.2s;
}
.wa-option:hover { background: rgb(37 211 102 / 0.15); }
.wa-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #25d366; }
.wa-num { font-size: 0.9rem; color: var(--on-surface); }

/* ==========================================================================
   Inner pages
   ========================================================================== */

.container.narrow { max-width: 880px; }
.btn-block { width: 100%; }
.btn-row.center { justify-content: center; }
.muted { color: var(--on-variant); }

/* Page transitions: a quick fade between pages (main.js adds .is-leaving). */
main, .site-footer { transition: opacity 0.28s ease, transform 0.28s ease; }
body.is-leaving main, body.is-leaving .site-footer { opacity: 0; transform: translateY(-10px); }

/* ---------- Dot grid (the main site's Tech Stack treatment, drawn by main.js) ---------- */
.dotgrid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, rgb(0 0 0 / 0.55) 60%, transparent 92%);
    mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, rgb(0 0 0 / 0.55) 60%, transparent 92%);
}

/* ---------- Page hero ---------- */
.page-hero {
    position: relative;
    padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(1.5rem, 5vh, 3.5rem));
    padding-bottom: clamp(3rem, 8vh, 6rem);
    min-height: min(92vh, 860px);
    display: flex;
    align-items: center;
}
.page-hero.compact, .page-hero.no-stage { min-height: 0; }
.page-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.page-hero-copy { max-width: 46rem; }
.page-hero .lead + .lead { margin-top: 1rem; }
.page-hero .lead { margin-bottom: 0; }
.page-title {
    font-size: clamp(2.3rem, 5.2vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}
.page-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.page-title .wi { display: inline-block; will-change: transform; }
.hero-tags { margin-top: 1.5rem; }
.page-hero .btn-row { margin-top: 2rem; }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1.25rem; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 13px; font-weight: 600; color: var(--on-variant); }
.crumbs li + li::before { content: ''; width: 5px; height: 5px; border-radius: 1px; background: var(--primary); transform: rotate(45deg); opacity: 0.7; }
.crumbs a { transition: color 0.2s; }
.crumbs a:hover { color: var(--primary); }
.crumbs [aria-current] { color: var(--on-surface); }

.page-hero-stage { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1; }
.hero3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-fallback {
    display: none;
    position: absolute;
    inset: 24%;
    color: var(--on-surface);
    filter: drop-shadow(0 0 30px rgb(var(--primary-rgb) / 0.45));
}
.stage-fallback svg { width: 100%; height: 100%; }
.no-webgl .hero3d { display: none; }
.no-webgl .stage-fallback { display: block; }

@media (max-width: 1023px) {
    .page-hero-stage { max-width: 340px; order: 2; }
}
@media (min-width: 1024px) {
    .page-hero-grid { grid-template-columns: 7fr 5fr; gap: 3rem; }
    .page-hero.no-stage .page-hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Sticky table of contents (service + legal pages) ---------- */
.svc-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.svc-toc { display: none; }
@media (min-width: 1024px) {
    .svc-layout { grid-template-columns: 260px 1fr; gap: 3rem; }
    .svc-toc { display: block; position: sticky; top: calc(var(--header-h) + 2rem); }
}
.toc-inner { position: relative; padding-left: 1.1rem; }
.svc-toc ol { display: flex; flex-direction: column; gap: 0.2rem; }
.svc-toc a {
    display: flex;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.6rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--on-variant);
    transition: color 0.2s, background-color 0.2s;
}
.svc-toc a span { color: rgb(var(--primary-rgb) / 0.6); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 1px; }
.svc-toc a:hover { color: var(--on-surface); }
.svc-toc a.active { color: var(--on-surface); background: rgb(var(--primary-rgb) / 0.08); }
.svc-toc a.active span { color: var(--primary); }
.toc-progress {
    position: absolute;
    left: 0;
    top: 2.2rem;
    bottom: 0;
    width: 2px;
    border-radius: 2px;
    background: rgb(var(--on-surface-rgb) / 0.08);
    overflow: hidden;
}
.toc-progress span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
}

/* ---------- Service sections ---------- */
.svc-sections { display: flex; flex-direction: column; gap: 1.1rem; }
.svc-card {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: var(--glass-strong);
    overflow: hidden;
    /* On top of html's scroll-padding (the header): lands 1.5rem below the header.
       Smooth scrolling (Lenis) measures its own jumps; touch screens jump natively. */
    scroll-margin-top: calc(1.5rem - 8px);
}
.svc-card::before {
    content: '';
    position: absolute;
    left: 0; top: 1.6rem; bottom: 1.6rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    opacity: 0.55;
}
.svc-num {
    position: absolute;
    right: 1.4rem;
    top: 0.6rem;
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgb(var(--primary-rgb) / 0.22);
    line-height: 1;
    pointer-events: none;
}
.svc-card h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 0.9rem; padding-right: 4.5rem; }
.svc-card p { color: var(--on-variant); }
.svc-card p + p { margin-top: 0.9rem; }

/* ---------- How the work runs ---------- */
.how-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: linear-gradient(150deg, rgb(0 47 54 / 0.8), rgb(0 27 31 / 0.85));
}
.how-copy p { color: var(--on-variant); }
.how-copy p + p { margin-top: 1rem; }
.how-copy a, .svc-card a, .cta-panel .lead a, .prose a { color: var(--secondary); border-bottom: 1px solid rgb(var(--secondary-rgb) / 0.4); }
.how-copy a:hover, .svc-card a:hover, .cta-panel .lead a:hover, .prose a:hover { color: var(--primary); border-color: var(--primary); }
.mini-stages { display: flex; flex-direction: column; gap: 0.6rem; counter-reset: ms; position: relative; }
.mini-stages li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: 0.9rem;
    background: rgb(0 22 26 / 0.55);
    border: 1px solid var(--glass-border);
}
.ms-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--on-primary);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    flex-shrink: 0;
}
.ms-name { font-weight: 700; }
@media (min-width: 900px) { .how-panel { grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; } }

/* ---------- CTA band (inner pages) ---------- */
.cta-band .cta-panel { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-band .cta-panel .lead { margin-inline: auto; }
.cta-band .cta-panel .btn-row { justify-content: center; }
.cta-orbit { position: absolute; inset: 0; pointer-events: none; }
.cta-orbit span {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid rgb(var(--primary-rgb) / 0.14);
    transform: translate(-50%, -50%);
    animation: orbit-pulse 6s ease-in-out infinite;
}
.cta-orbit span:nth-child(1) { width: 260px; height: 260px; }
.cta-orbit span:nth-child(2) { width: 460px; height: 460px; animation-delay: -2s; }
.cta-orbit span:nth-child(3) { width: 680px; height: 680px; animation-delay: -4s; }
@keyframes orbit-pulse {
    0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.96); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}
.cta-panel > *:not(.cta-orbit) { position: relative; }

/* ---------- Other services strip ---------- */
.other-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .other-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .other-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.other-svc {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-sm);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    font-weight: 700;
    transition: border-color 0.3s;
}
.other-svc .material-symbols-outlined:first-child { color: var(--primary); }
.other-svc .go { margin-left: auto; color: var(--on-variant); transition: transform 0.35s var(--ease-out), color 0.2s; }
.other-svc:hover { border-color: rgb(var(--primary-rgb) / 0.4); }
.other-svc:hover .go { transform: translateX(4px); color: var(--primary); }

/* ---------- Legal prose ---------- */
.prose { padding: clamp(1.5rem, 4vw, 3rem); background: var(--glass-strong); }
.legal-sec { scroll-margin-top: calc(1.5rem - 8px); } /* plus html's scroll-padding, as .svc-card */
.legal-sec + .legal-sec { margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid rgb(var(--on-surface-rgb) / 0.07); }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 0.9rem; }
.prose h3 { font-size: 1.1rem; margin: 1.4rem 0 0.6rem; }
.prose p, .prose li { color: var(--on-variant); }
.prose p + p, .prose ul + p, .prose p + ul, .prose ol + p, .prose p + ol { margin-top: 0.9rem; }
.prose ul, .prose ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.3rem; }
.prose ul li::before { content: ''; position: absolute; left: 0.2rem; top: 0.62em; width: 6px; height: 6px; border-radius: 1px; background: var(--primary); transform: rotate(45deg); }
.prose ol { list-style: decimal; }
.prose strong { color: var(--on-surface); }
.toc-plain a { font-size: 13px; }

/* ---------- Services overview: stacking cards ---------- */
.stack-cards { display: flex; flex-direction: column; gap: 1.25rem; }
.stack-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    /* Opaque so the cards underneath never show through as they stack. */
    background: linear-gradient(155deg, rgb(0 47 54), rgb(0 25 29));
    transform-origin: 50% 0%;
    box-shadow: 0 -20px 60px -30px rgb(0 0 0 / 0.8);
}
.stack-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.stack-top .icon-badge { margin-bottom: 0; }
.stack-num { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgb(var(--primary-rgb) / 0.5); }
.stack-card h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0.75rem 0 0.9rem; }
.stack-main p { color: var(--on-variant); margin-bottom: 1.4rem; }
.stack-side { display: flex; flex-direction: column; gap: 1.25rem; justify-content: center; }
.check-list { display: flex; flex-direction: column; gap: 0.55rem; }
.check-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.8rem;
    background: rgb(0 22 26 / 0.5);
    border: 1px solid var(--glass-border);
    font-weight: 600;
    font-size: 0.95rem;
}
.check-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: var(--primary);
    box-shadow: 0 0 10px rgb(var(--primary-rgb) / 0.7);
    flex-shrink: 0;
}
@media (min-width: 900px) {
    .stack-card { grid-template-columns: 1.35fr 1fr; gap: 3rem; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .stack-card { position: sticky; top: calc(var(--header-h) + 1.5rem + var(--i) * 18px); }
}

.every-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 700px) { .every-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .every-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .every-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Sticky 3D stage beside a list (Process, Tech Stack) ---------- */
.steps-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.steps-stage { position: relative; }
.sticky-stage { position: relative; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 1; }
.stage-counter {
    position: absolute;
    left: 50%;
    bottom: 0.25rem;
    transform: translateX(-50%);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--on-variant);
    background: rgb(0 27 31 / 0.8);
    border: 1px solid var(--glass-border);
}
.stage-counter span { color: var(--primary); }
@media (max-width: 1023px) {
    .sticky-stage { max-width: 260px; }
}
@media (min-width: 1024px) {
    .steps-layout { grid-template-columns: 5fr 7fr; gap: 4rem; }
    .steps-stage { position: sticky; top: calc(var(--header-h) + 2rem); }
    .sticky-stage { max-width: none; height: calc(100vh - var(--header-h) - 4rem); aspect-ratio: auto; max-height: 620px; }
}

.steps { display: flex; flex-direction: column; gap: 1.25rem; }
.step-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--glass-strong);
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.5s var(--ease-out);
}
.step-card.is-active { border-color: rgb(var(--primary-rgb) / 0.5); box-shadow: 0 30px 60px -30px rgb(var(--primary-rgb) / 0.45); }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.step-top .icon-badge { margin-bottom: 0; }
.step-num { font-size: clamp(3rem, 5vw, 4.25rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgb(var(--primary-rgb) / 0.55); transition: color 0.4s; }
.step-card.is-active .step-num { color: rgb(var(--primary-rgb) / 0.2); }
.step-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.6rem; }
.step-card p { color: var(--on-variant); }

.handover {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: linear-gradient(150deg, rgb(0 47 54 / 0.85), rgb(0 27 31 / 0.85));
}
.handover p { color: var(--on-variant); }
.handover p + p { margin-top: 1rem; }
.icon-badge.big { width: 72px; height: 72px; border-radius: 22px; }
.icon-badge.big .material-symbols-outlined { font-size: 34px; }
@media (min-width: 900px) { .handover { grid-template-columns: auto 1fr; gap: 2.5rem; } }

/* ---------- About: chapters ---------- */
.chapters { display: flex; flex-direction: column; }
.chapter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 3rem;
    padding-block: clamp(2rem, 5vw, 3.5rem);
    border-top: 1px solid rgb(var(--on-surface-rgb) / 0.08);
}
.chapter:last-child { border-bottom: 1px solid rgb(var(--on-surface-rgb) / 0.08); }
.chapter-num { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; color: var(--primary); margin-bottom: 0.6rem; }
.chapter-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin: 0; }
.chapter-body p { color: var(--on-variant); font-size: clamp(1rem, 1.25vw, 1.1rem); }
.chapter-body p + p { margin-top: 1rem; }
@media (min-width: 900px) {
    .chapter { grid-template-columns: 5fr 7fr; }
    .chapter-head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* ---------- Tech stack ---------- */
.tech-cats { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4.5rem); }
.tech-cat h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.tech-cat .lead { margin-bottom: 1.5rem; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-card { padding: 1.2rem; background: var(--glass-strong); }
.tool-card .material-symbols-outlined { font-size: 28px; color: var(--primary); margin-bottom: 0.7rem; }
.tool-card h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.tool-card p { font-size: 13px; color: var(--on-variant); }

/* ---------- Contact ---------- */
.reply-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    background: rgb(var(--primary-rgb) / 0.08);
    border: 1px solid rgb(var(--primary-rgb) / 0.25);
}
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.6fr 1fr; gap: 1.5rem; } }
.contact-form { padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--glass-strong); display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.25rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--on-variant); }
input, select, textarea {
    font: inherit;
    color: var(--on-surface);
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 0.85rem;
    background: rgb(0 22 26 / 0.7);
    border: 1px solid rgb(var(--on-surface-rgb) / 0.14);
    transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: rgb(var(--primary-rgb) / 0.7); box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.12); }
textarea { resize: vertical; min-height: 120px; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select-wrap select option { background: #002429; }
.select-wrap .material-symbols-outlined { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--primary); }
.form-status {
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    background: rgb(var(--primary-rgb) / 0.08);
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
}
.form-note { font-size: 13px; color: var(--on-variant); }
.contact-side { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--glass-strong); display: flex; flex-direction: column; gap: 1.5rem; }
.contact-side h3 { font-size: 1.3rem; }
.contact-lines { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-lines li { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.95rem; }
.contact-lines .icon-badge { margin-bottom: 0; width: 42px; height: 42px; flex-shrink: 0; }
.contact-lines a:hover { color: var(--primary); }
.next-steps { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .next-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.next-steps .why-item { position: relative; }
.next-num { position: absolute; right: 1.25rem; top: 1rem; font-size: 2.6rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgb(var(--primary-rgb) / 0.3); line-height: 1; }

/* Feedback drawer (contact page) */
.feedback-tab {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 45;
    transform: translateY(-50%) rotate(-90deg) translateY(-50%);
    transform-origin: right center;
    padding: 0.6rem 1.1rem;
    border-radius: 0.75rem 0.75rem 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-primary);
    background: linear-gradient(100deg, var(--primary), var(--secondary));
    display: none;
    overflow: hidden;
    box-shadow: 0 -8px 24px -10px rgb(var(--primary-rgb) / 0.6);
    transition: translate 0.35s var(--ease-out), box-shadow 0.35s;
}
/* A band of light sweeps across the tab every few seconds; it pulls out on hover. */
.feedback-tab::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%);
    translate: -120% 0;
    animation: tab-shine 4.5s ease-in-out infinite;
    pointer-events: none;
}
.feedback-tab span { position: relative; }
/* `translate` acts in screen space, so this slides the rotated tab out to the left. */
.feedback-tab:hover { translate: -6px 0; box-shadow: 0 -12px 30px -8px rgb(var(--primary-rgb) / 0.8); }
@keyframes tab-shine { 0%, 62% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }
@media (min-width: 768px) { .feedback-tab { display: block; } .feedback-open { display: none; } }
.feedback-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgb(0 10 12 / 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}
.feedback-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: min(400px, 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, rgb(0 36 41 / 0.98), rgb(0 22 26 / 0.99) 45%);
    border-left: 1px solid rgb(var(--primary-rgb) / 0.25);
    box-shadow: -30px 0 80px -20px rgb(0 0 0 / 0.7);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
}
body.feedback-on .feedback-backdrop { opacity: 1; visibility: visible; }
body.feedback-on .feedback-panel { transform: none; visibility: visible; }

/* Cursor light on the panel, same as the cards (main.js feeds --mx/--my). */
.cursor-light::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 30%), rgb(var(--primary-rgb) / 0.08), transparent 60%);
}

/* 3D mark band at the top of the drawer */
.fb-stage {
    position: relative;
    height: 200px;
    border-bottom: 1px solid rgb(var(--on-surface-rgb) / 0.07);
    background: radial-gradient(60% 80% at 50% 55%, rgb(var(--primary-rgb) / 0.14), transparent 70%);
}
/* Without WebGL: a flat line drawing of the diamond in place of the 3D one. */
.fb-stage .diamond-fallback { inset: 22% 32%; }
.diamond-fallback svg { width: 100%; height: 100%; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.fb-close { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; background: rgb(0 47 54 / 0.8); }
.fb-close .material-symbols-outlined { transition: transform 0.4s var(--ease-out); }
.fb-close:hover .material-symbols-outlined { transform: rotate(90deg); }
.fb-body { position: relative; z-index: 1; padding: 1.25rem 1.5rem 1.75rem; }

/* Drawer items rise in one by one when it opens; they leave instantly when it closes. */
.fb-item { opacity: 0; translate: 0 16px; transition: opacity 0.45s ease, translate 0.6s var(--ease-out); }
body.feedback-on .fb-item { opacity: 1; translate: 0 0; transition-delay: calc(var(--i, 0) * 55ms + 180ms); }

.fb-head { margin-bottom: 0.5rem; font-weight: 800; font-size: 1.25rem; }
.fb-note { font-size: 13px; color: var(--on-variant); margin-bottom: 1.25rem; }
.fb-label { font-size: 13px; font-weight: 600; margin-bottom: 0.75rem; }
.feedback-panel form { display: flex; flex-direction: column; gap: 0.75rem; }
.rating { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.5rem; }
.rating-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 600; }
.rating-scale div { display: flex; justify-content: space-between; font-size: 11px; color: var(--on-variant); font-weight: 600; }
.rating-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.rating-cell { position: relative; }
.rating-cell input { position: absolute; opacity: 0; inset: 0; cursor: pointer; padding: 0; }
.rating-cell span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 0.6rem;
    font-weight: 700;
    background: rgb(0 22 26 / 0.7);
    border: 1px solid rgb(var(--on-surface-rgb) / 0.14);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.rating-cell input:checked + span { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.rating-cell input:focus-visible + span { outline: 2px solid var(--secondary); outline-offset: 2px; }
.rating-cell input:hover + span { border-color: rgb(var(--primary-rgb) / 0.55); }
.rating-cell input:checked + span { animation: cell-pop 0.4s var(--ease-out); box-shadow: 0 0 18px -4px rgb(var(--primary-rgb) / 0.8); }
@keyframes cell-pop { 0% { scale: 0.85; } 60% { scale: 1.08; } 100% { scale: 1; } }

/* Fields glow while you type */
.feedback-panel textarea:focus { box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.12), 0 0 28px -8px rgb(var(--primary-rgb) / 0.7); }

/* Animated submit: a short sending state, then a check that draws itself. */
.fb-submit { position: relative; gap: 0.6rem; }
.fb-spinner, .fb-check { display: none; }
.fb-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgb(0 56 36 / 0.3);
    border-top-color: var(--on-primary);
    animation: fb-spin 0.7s linear infinite;
}
.fb-check { width: 20px; height: 20px; fill: none; stroke: var(--on-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fb-check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.fb-submit.is-sending { pointer-events: none; }
.fb-submit.is-sending .fb-submit-label { opacity: 0.75; }
.fb-submit.is-sending .fb-spinner { display: inline-block; }
.fb-submit.is-done .fb-check { display: block; }
.fb-submit.is-done .fb-check path { animation: fb-draw 0.5s 0.05s var(--ease-out) forwards; }
.fb-submit.is-done { box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.18), 0 16px 40px -12px rgb(var(--primary-rgb) / 0.8); }
@keyframes fb-spin { to { rotate: 360deg; } }
@keyframes fb-draw { to { stroke-dashoffset: 0; } }
.feedback-panel .form-status:not([hidden]) { animation: fb-status 0.5s var(--ease-out); }
@keyframes fb-status { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ---------- 404 ---------- */
.notfound {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--header-h) + 2rem) 3rem;
    text-align: center;
    overflow: hidden;
}
.notfound-stage { position: absolute; inset: 0; z-index: 0; opacity: 0.85; }
.notfound-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.nf-code {
    font-size: clamp(6rem, 22vw, 15rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 2px rgb(var(--primary-rgb) / 0.6);
    background: linear-gradient(180deg, rgb(var(--primary-rgb) / 0.25), transparent);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 1rem;
}
.notfound .lead { margin: 0 auto 2rem; }
.nf-jump { margin-top: 2.5rem; }
.nf-jump h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-variant); margin-bottom: 0.9rem; }
.nf-jump div { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.nf-jump a { padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--glass-border); background: rgb(0 27 31 / 0.7); transition: border-color 0.2s, color 0.2s; }
.nf-jump a:hover { border-color: rgb(var(--primary-rgb) / 0.5); color: var(--primary); }

/* ---------- Interactive cards (.tilt) ----------
   The card stays flat so text is always sharp. On hover it lifts a little, and a
   soft light plus a lit edge follow the cursor (main.js feeds --mx/--my).
   Kept after the card styles so its transition wins. */
.tilt {
    position: relative;
    transition: translate 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s;
}
.tilt::after,
.tilt::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s;
}
/* Light inside the card */
.tilt::after {
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--primary-rgb) / 0.12), transparent 50%);
}
/* Lit edge: a 1px ring masked out of the same gradient */
.tilt::before {
    padding: 1px;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--secondary-rgb) / 0.95), rgb(var(--primary-rgb) / 0.35) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.tilt:hover { translate: 0 -4px; box-shadow: 0 26px 50px -28px rgb(var(--primary-rgb) / 0.5); }
.tilt:hover::after, .tilt:hover::before { opacity: 1; }
.service-all.tilt::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.22), transparent 50%); }

/* Services stack: a dark veil that grows only as the next card covers this one
   (main.js sets --cover from 0 to 1). At most about a third darker. */
.stack-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(0 10 12);
    opacity: calc(var(--cover, 0) * 0.35);
    pointer-events: none;
}
.stack-card { scale: calc(1 - var(--cover, 0) * 0.05); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .marquee { transform: none; }
}

/* =====================================================================
   Overhaul additions (Oct 2026): what the live site had that the mockup
   didn't, now in the 3D design. Copy itself comes from _src/content.
   ===================================================================== */

/* Text the design shows in capitals is written in its original case in the
   HTML; CSS does the capitals (overhaul rule 4). */
.orbit-text text, .fb-submit-label, .footer-word, .mobile-cta { text-transform: uppercase; }

/* Links inside copied paragraphs carry no class of their own. */
.section-head .lead a, .why-item p a, .chapter-body a, .form-note a, .stack-main p a {
    color: var(--secondary);
    border-bottom: 1px solid rgb(var(--secondary-rgb) / 0.4);
    transition: color 0.2s, border-color 0.2s;
}
.section-head .lead a:hover, .why-item p a:hover, .chapter-body a:hover, .form-note a:hover, .stack-main p a:hover { color: var(--primary); border-color: var(--primary); }

/* Mobile menu: the live site's START A PROJECT link closes the list. */
.mobile-menu a.mobile-cta {
    margin-top: 0.6rem;
    justify-content: center;
    text-align: center;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    color: #00161a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    border-radius: 999px;
}
.mobile-menu a.mobile-cta:hover { color: #00161a; filter: brightness(1.05); }

/* ---------- Home: the delivery pipeline card (desktop only, as before) ---------- */
.hero-stage { position: relative; }
.pipeline-card { display: none; }
@media (min-width: 1024px) {
    .hero-stage { flex-direction: column; align-items: center; }
    .pipeline-card {
        display: block;
        position: relative;
        z-index: 3;
        width: min(92%, 430px);
        margin-top: -4.5rem;
        margin-left: auto;
        padding: 1.15rem 1.25rem;
        background: rgb(0 36 41 / 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.75);
    }
    /* The card sits where this pill was; move it up the left side. */
    .hero .callout-b { bottom: auto; top: 64%; left: -8%; }
}
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pl-title { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--on-variant); }
.pl-scope { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--secondary); }
.pl-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.pl-stage { display: flex; flex-direction: column; gap: 0.45rem; font-size: 12px; font-weight: 700; color: var(--on-surface); }
.pl-bar { height: 4px; border-radius: 4px; background: rgb(var(--on-surface-rgb) / 0.12); }
.pl-stage.done .pl-bar { background: linear-gradient(90deg, var(--primary), var(--secondary)); }
.pl-contact {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.9rem;
    background: rgb(0 22 26 / 0.7);
    border: 1px solid rgb(var(--on-surface-rgb) / 0.08);
}
.pl-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(var(--primary-rgb) / 0.14); color: var(--primary); flex-shrink: 0; }
.pl-contact-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.pl-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--on-variant); }
.pl-value { font-size: 1.05rem; font-weight: 700; color: var(--on-surface); }
.pl-bolt { color: var(--secondary); }

/* ---------- Home: stat cards that hold a word ("1-Stop", "Full-Stack") ---------- */
.stat-num.stat-word { font-size: clamp(1.6rem, 3.6vw, 2.9rem); letter-spacing: -0.03em; }

/* What's included: the live headings are h3. */
.include-list h3 { font-size: 1rem; font-weight: 700; color: var(--on-surface); margin-bottom: 0.15rem; }
.include-list p { margin: 0; }

/* Testimonial name and role are two lines, as on the live site. */
.quote-card .who { display: flex; flex-direction: column; }
.quote-card .who-name { display: block; color: var(--on-surface); font-weight: 700; }
.quote-card .who-role { display: block; }

/* Tech Stack principles: titles that are not headings, as on the live site. */
.why-title { font-size: 1.1rem; font-weight: 700; color: var(--on-surface); margin-bottom: 0.5rem; }

/* Service pages: answers always open, as on the live site (placement P4). */
.faq-open .faq-static { padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.6vw, 1.6rem); }
.faq-open .faq-static h3 { font-size: 1.05rem; margin-bottom: 0.55rem; color: var(--on-surface); }
.faq-open .faq-static p { color: var(--on-variant); }

/* ---------- Contact: the "new message" card under the globe (placement P2) ----------
   It sat over the globe's foot until the owner asked for the globe uncovered
   (23 Oct 2026). The globe fills its square to within about 11% of the edge, so
   the card tucks 1.25rem into that empty strip and no further. The wrapper takes
   the stage's place in the hero grid (below the text on narrower screens). */
.page-hero-visual { display: flex; flex-direction: column; align-items: center; min-width: 0; }
@media (max-width: 1023px) { .page-hero-visual { order: 2; } .page-hero-visual .page-hero-stage { order: 0; } }
.page-hero-visual .msg-card {
    position: relative;
    z-index: 3;
    margin-top: -1.25rem;
    width: min(92%, 360px);
    padding: 1rem 1.1rem;
    background: rgb(0 36 41 / 0.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.75);
}
.msg-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.msg-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(var(--primary-rgb) / 0.14); color: var(--primary); flex-shrink: 0; }
.msg-text { display: flex; flex-direction: column; gap: 0.15rem; }
.msg-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--on-variant); }
.msg-to { font-size: 0.98rem; font-weight: 700; color: var(--on-surface); }
.msg-lines { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; }
.msg-lines span { height: 6px; border-radius: 6px; background: rgb(var(--on-surface-rgb) / 0.1); }
.msg-lines span:nth-child(2) { width: 82%; }
.msg-lines span:nth-child(3) { width: 58%; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.msg-status { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--on-variant); }
.msg-send {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.8rem; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: #00161a;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.msg-send .material-symbols-outlined { font-size: 15px; }

/* Contact form: the form sits inside the glass card; its parts stack. */
.contact-form form { display: flex; flex-direction: column; gap: 1.25rem; }
/* Formspree honeypot: off screen for people, still in the form for bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status.is-error { color: #ffb4ab; background: rgb(255 180 171 / 0.08); border-color: rgb(255 180 171 / 0.35); }
.form-status a { color: inherit; border-bottom: 1px solid currentColor; }
.contact-form form[aria-busy="true"] button[type="submit"] { opacity: 0.7; pointer-events: none; }

/* Phones: the drawer opens from a button at the end of the page (the tab is desktop only). */
.rate-row { display: flex; justify-content: center; margin-top: 2.5rem; }
@media (min-width: 768px) { .rate-row { display: none; } }

/* The drawer's close button is the text character it always was. It follows the
   heading in the markup (the live site's order) but sits in the panel's top
   corner, over the 200px 3D stage above the body. */
.fb-close { font-size: 18px; line-height: 1; font-weight: 600; color: var(--on-surface); }
.fb-body > .fb-close { top: calc(0.9rem - 200px); }
.fb-close:hover { color: var(--primary); }

/* ---------- Hidden blog (question 2): same look as the other inner pages ---------- */
.blog-band { padding-top: clamp(1rem, 3vw, 2rem); }
.post-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-card.featured { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 900px) { .post-card.featured { flex-direction: row; } .post-card.featured .post-thumb { flex: 0 0 46%; min-height: 260px; } }
.post-thumb {
    display: flex; align-items: center; justify-content: center;
    min-height: 170px;
    background: radial-gradient(circle at 30% 20%, rgb(var(--primary-rgb) / 0.18), transparent 60%), rgb(0 36 41 / 0.6);
    color: rgb(var(--on-surface-rgb) / 0.35);
}
.post-thumb .material-symbols-outlined { font-size: 44px; }
.post-body { display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.2rem, 2.6vw, 1.75rem); flex: 1; }
.post-body h2, .post-body h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; }
.post-body p { color: var(--on-variant); }
.post-body .card-link { margin-top: auto; margin-bottom: 0; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; font-size: 12px; font-weight: 600; color: var(--on-variant); }
.post-tag { padding: 0.25rem 0.65rem; border-radius: 999px; background: rgb(var(--primary-rgb) / 0.14); color: var(--primary); font-weight: 700; letter-spacing: 0.04em; }
.post-more { text-align: center; margin-top: 2rem; color: var(--on-variant); font-size: 14px; }
.article-band { padding-top: 0; }
.article { padding: clamp(1.4rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1.5rem; }
.article-head { display: flex; flex-direction: column; gap: 1rem; }
.article-title { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; }
.article-cover { border-radius: 1.1rem; min-height: 220px; }
.article .card-link.back { margin-bottom: 0; align-self: flex-start; }
.article-body blockquote { border-left: 3px solid var(--primary); padding-left: 1.1rem; color: var(--on-surface); font-style: italic; }
.article-body code { font-size: 0.92em; padding: 0.1rem 0.35rem; border-radius: 0.35rem; background: rgb(var(--on-surface-rgb) / 0.08); }

/* ---------- Analytics consent banner (copied logic and text, js/main.js) ---------- */
.consent-banner {
    position: fixed;
    z-index: 90;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    translate: -50% 0;
    width: min(calc(100% - 2rem), 640px);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1.25rem;
    background: rgb(0 30 35 / 0.92);
    border: 1px solid rgb(var(--primary-rgb) / 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.8);
    animation: consent-in 0.5s var(--ease-out);
}
@media (min-width: 640px) { .consent-banner { flex-direction: row; align-items: center; } }
@keyframes consent-in { from { opacity: 0; translate: -50% 16px; } }
.consent-text { font-size: 14px; line-height: 1.55; color: var(--on-variant); flex: 1; }
.consent-text a { color: var(--secondary); border-bottom: 1px solid rgb(var(--secondary-rgb) / 0.4); }
.consent-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.consent-btn {
    flex: 1;
    min-width: 104px;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s, background-color 0.2s, border-color 0.2s;
}
.consent-decline { background: transparent; color: var(--on-surface); border: 1px solid rgb(var(--on-surface-rgb) / 0.3); }
.consent-decline:hover { border-color: var(--secondary); background: rgb(var(--on-surface-rgb) / 0.06); }
.consent-accept { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: #00161a; border: 0; }
.consent-accept:hover { filter: brightness(1.06); }
/* The privacy page's "change cookie settings" button sits in the legal text. */
.prose [data-consent-open] { margin-top: 0.5rem; }

/* ---------- Lighter rendering: touch screens and slowed-down devices ----------
   Frosted glass re-blurs whatever is behind it, and behind it is the 3D canvas,
   which changes every frame: on phones and tablets (iPads included) that blur
   is the most expensive thing on the page. Here the cards go a little more solid
   instead. The header keeps its blur (it is small). The .q-* classes come from
   the 3D quality governor (_src/3d/three-kit.js) when a computer can't keep up. */
@media (pointer: coarse) {
    :root { --glass: rgb(0 33 38 / 0.9); --glass-strong: rgb(0 30 35 / 0.94); }
    .service-card { background: rgb(0 31 36 / 0.88); } /* the 3D mark still shows through, faintly */
    body *:not(.site-header) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    /* The film grain becomes the top layer of the background glow (the same tile at
       the same 5%, baked into the image) instead of a screen-sized layer of its own
       above the 3D, which the tablet had to blend again on every frame of a scroll.
       Only the moving 3D logo loses its 5% grain. */
    .bg-grain { display: none; }
    .bg-glow {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") 0 0 / 160px 160px,
            radial-gradient(40vmax 40vmax at 78% 18%, rgb(var(--secondary-rgb) / 0.13), transparent 70%),
            radial-gradient(45vmax 45vmax at 12% 70%, rgb(var(--primary-rgb) / 0.10), transparent 70%),
            radial-gradient(30vmax 30vmax at 60% 110%, rgb(135 218 127 / 0.08), transparent 70%),
            var(--bg);
    }
}
:root.q-medium, :root.q-low, :root.q-off { --glass: rgb(0 33 38 / 0.9); --glass-strong: rgb(0 30 35 / 0.94); }
:root:is(.q-medium, .q-low, .q-off) .service-card { background: rgb(0 31 36 / 0.88); }
:root:is(.q-medium, .q-low, .q-off) body *:not(.site-header) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- Scroll reveals (main.js) ----------
   Elements rise and fade in once as they reach the lower part of the screen.
   main.js adds .rv-wait (hidden) and, when it's time, .rv-44 or .rv-40 with a
   staggered delay, then removes both when the animation ends. These run in the
   browser's compositor; they used to be GSAP tweens, written by a script every
   frame, which halved the frame rate while scrolling on tablets. Same moves:
   44px over 1.1s (single elements), 40px over 0.9s (groups), power3.out. */
.rv-wait { opacity: 0; }
.rv-44 { animation: rv-44 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.rv-40 { animation: rv-40 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
@keyframes rv-44 { from { opacity: 0; transform: translate3d(0, 44px, 0); } }
@keyframes rv-40 { from { opacity: 0; transform: translate3d(0, 40px, 0); } }

/* ---------- Endless decorations pause off screen ----------
   main.js puts .anim-off on a section with looping decorations (hero callouts and
   text ring, the CTA rings) while it is off screen. A running animation keeps its
   own layer and forces the content above it onto layers too, on screen or not. */
.anim-off *, .anim-off *::before, .anim-off *::after { animation: none !important; }

/* Touch screens: the active Process / step card changes colour at once instead
   of fading its border and shadow, which repainted the card every frame. */
@media (pointer: coarse) {
    .stage-card, .stage-num { transition: none; }
    .step-card { transition: transform 0.5s var(--ease-out); }
    .step-num { transition: none; }
}

/* ---------- Spin the hero logo by hand (scene.js) ----------
   Sideways drags on the hero's 3D turn the mark; up and down still scroll. */
.hero .logo-slot { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (hover: hover) and (pointer: fine) {
    .hero .logo-slot { cursor: grab; }
    .hero .logo-slot:active { cursor: grabbing; }
}

/* ---------- Phones (up to 767px): the mobile layout (owner, 23 Oct 2026) ----------
   Tablets and computers keep the layout above. */
.swipe-dots { display: none; }
@media (max-width: 767px) {
    /* Swipe rows: the homepage's Services, Why Hubix, Tech Stack and Testimonials
       cards sit side by side and snap one at a time, with the next card peeking in
       from the right edge. main.js adds the dots under each row. */
    .swipe-row {
        display: flex;
        gap: 0.85rem;
        margin-inline: calc(-1 * var(--gutter));
        padding: 0.35rem var(--gutter) 0.6rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .swipe-row::-webkit-scrollbar { display: none; }
    .swipe-row > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
    /* A grid column grows to fit its widest content, which for a row is all the
       cards side by side; let the column stay screen-wide so the row scrolls. */
    .split > .content-col { min-width: 0; }
    .swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: 0.9rem; }
    .swipe-dots span {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: rgb(var(--on-surface-rgb) / 0.22);
        transition: width 0.3s var(--ease-out), background-color 0.3s;
    }
    .swipe-dots span.on { width: 18px; background: var(--primary); }

    /* The logo's own spaces: three sections (Why Hubix, Process, FAQ) show their
       empty stage as a small band, so the 3D mark flies into clear space there
       instead of sitting faintly behind the text. */
    .stage-col.band { display: block; }
    .stage-col.band .logo-slot { width: min(56vw, 220px); margin-inline: auto; }

    /* The delivery pipeline card, compact, under the hero's buttons: the stage's
       box steps aside (display: contents) so the logo can stay on top and the card
       can follow the text. */
    .hero-stage { display: contents; }
    .hero-stage .logo-slot { order: -1; justify-self: center; }
    .pipeline-card {
        display: block;
        order: 1;
        padding: 0.95rem 1rem;
        background: rgb(0 36 41 / 0.72);
        box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.75);
    }
    .pipeline-card .pl-head, .pipeline-card .pl-stages { margin-bottom: 0.8rem; }
    .pipeline-card .pl-stage { font-size: 11px; }
    .pipeline-card .pl-contact { padding: 0.65rem 0.75rem; gap: 0.7rem; }
    .pipeline-card .pl-icon { width: 32px; height: 32px; }
    .pipeline-card .pl-value { font-size: 0.95rem; }

    /* Service pages: the "On this page" list becomes a row of section links that
       sticks under the header and lights up the section being read (main.js keeps
       the lit one in view). */
    .page-service .svc-toc {
        display: block;
        position: sticky;
        top: calc(var(--header-h) + env(safe-area-inset-top));
        z-index: 20;
        margin-inline: calc(-1 * var(--gutter));
        background: rgb(0 22 26 / 0.94);
        border-block: 1px solid rgb(var(--on-surface-rgb) / 0.08);
    }
    /* As with the swipe rows: the layout's one column must not grow to the row's full length. */
    .page-service .svc-layout > * { min-width: 0; }
    .page-service .toc-inner { padding: 0; }
    .page-service .svc-toc .eyebrow, .page-service .toc-progress { display: none; }
    .page-service .svc-toc ol {
        flex-direction: row;
        gap: 0.4rem;
        padding: 0.55rem var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .page-service .svc-toc ol::-webkit-scrollbar { display: none; }
    .page-service .svc-toc li { flex: 0 0 auto; }
    .page-service .svc-toc a {
        white-space: nowrap;
        padding: 0.4rem 0.8rem;
        border-radius: 999px;
        border: 1px solid rgb(var(--on-surface-rgb) / 0.1);
        font-size: 13px;
    }
    .page-service .svc-toc a.active { border-color: rgb(var(--primary-rgb) / 0.45); }
    /* A link jump lands just below the header (html's scroll-padding) and the row. */
    .page-service .svc-card { scroll-margin-top: 4.25rem; }
}

/* ---------- Process and Tech Stack: the step-following 3D as a background (below 1024px) ----------
   The 3D beside these lists follows the step or layer being read. Computers keep
   it in a sticky side column; on narrower screens it used to sit above the list
   and scroll away before it could change. Here it stays centred on screen behind
   the list (a sticky, screen-tall layer the list is drawn over) until the list
   ends. It is dimmed and the cards let a little of it through, so it reads as
   part of the background and the text stays easy to read. Stage and list share
   one grid cell, so the stage stops sticking exactly where the list ends. */
@media (max-width: 1023px) {
    .steps-layout { gap: 0; }
    .steps-layout > * { grid-row: 1; grid-column: 1; }
    .steps-stage {
        position: sticky;
        top: 0;
        z-index: 0;
        align-self: start;
        height: 100vh;
        height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    .sticky-stage { width: min(96vw, 560px); max-width: none; opacity: 0.55; }
    .stage-counter { display: none; }
    .steps-layout > .steps, .steps-layout > .tech-cats { position: relative; z-index: 1; }
    .steps-layout .step-card, .steps-layout .tool-card { background: rgb(0 30 35 / 0.8); }
    /* The process path is thin lines and nodes behind full-width cards: let more through. */
    .page-process .sticky-stage { opacity: 0.8; }
    .page-process .steps-layout .step-card { background: rgb(0 30 35 / 0.62); }
}

/* ---------- WhatsApp number: footer and contact card ----------
   The WhatsApp glyph sits where the other lines have a Material icon; the footer
   entry is the number with "WhatsApp chat and calls" under it. */
.with-icon > svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--primary); }
.wa-line { align-items: flex-start; }
.wa-line > svg { margin-top: 0.15rem; }
.wa-line-num, .wa-line-note { display: block; }
.wa-line-note { font-size: 12px; color: var(--on-variant); }
.contact-lines .icon-badge svg { width: 22px; height: 22px; }