/* ═══════════════════════════════════════════════════════════════════
   GALAXY SMART SYSTEM — PREMIUM DESIGN LAYER  v3.0  "Aurora Obsidian"
   Loaded LAST. Owns the visual language: tokens, type, motion,
   components and the full responsive scale (320px → 4K).
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ───────────────────────────────────────────────────────────────────
   1. TOKEN BRIDGE
   The --p-* tokens live in tokens.css (loaded first, on every page).
   This block maps main.css's legacy variable names onto them, so all
   the CSS this layer doesn't touch still inherits the new palette.
   It must come after main.css to win the cascade.
   ─────────────────────────────────────────────────────────────────── */
:root,
body.dark-theme {
    --bg-primary: var(--p-bg);
    --bg-secondary: var(--p-bg-alt);
    --bg-card: var(--p-panel);
    --bg-card-hover: var(--p-panel-hover);
    --bg-glass: var(--p-panel);
    --text-primary: var(--p-text);
    --text-secondary: var(--p-text-2);
    --text-muted: var(--p-text-3);
    --border-glass: var(--p-line);
    --border-hover: var(--p-line-hot);
    --accent-cyan: var(--p-cyan);
    --accent-blue: var(--p-blue);
    --accent-purple: var(--p-violet);
    --accent-grad: var(--p-grad);
    --accent-grad3: var(--p-grad);
    --accent-grad45: var(--p-grad);
    --font-main: var(--p-font-body);
    --font-display: var(--p-font-display);
    --container-max: var(--p-max);
    --section-py: var(--p-section-y);
    --nav-height: var(--p-nav-h);
    --radius: var(--p-r);
    --radius-lg: var(--p-r-lg);
    --radius-xl: var(--p-r-xl);
    --transition: var(--p-t);
    --glow-blue: var(--p-glow);
    --glow-purple: var(--p-glow);
    --glow-strong: var(--p-glow);
}

/* ───────────────────────────────────────────────────────────────────
   2. BASE / TYPOGRAPHY
   ─────────────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    /* keep anchored sections clear of the fixed navbar on every device */
    scroll-padding-top: calc(var(--p-nav-h) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--p-font-body);
    background: var(--p-bg);
    color: var(--p-text);
    line-height: 1.65;
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .nav-logo,
.preloader-logo, .stat-number {
    font-family: var(--p-font-display);
    letter-spacing: -.025em;
    line-height: 1.14;
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

/* Never let long strings blow out a narrow viewport */
h1, h2, h3, h4, p, span, a, li, td {
    overflow-wrap: break-word;
}

::selection {
    background: rgba(0, 217, 255, .28);
    color: var(--p-text);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--p-bg-alt);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--p-cyan), var(--p-violet));
    border-radius: var(--p-r-pill);
    border: 3px solid var(--p-bg-alt);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--p-violet), var(--p-cyan));
}

/* main.css sets `display: inline-block` on some components, which beats the
   UA rule for [hidden] and leaves them visible. Restore the contract. */
[hidden] {
    display: none !important;
}

/* Accessible focus ring — visible for keyboard users only */
:focus-visible {
    outline: 2px solid var(--p-cyan);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ───────────────────────────────────────────────────────────────────
   3. AMBIENT BACKDROP — dot grid + drifting aurora blobs
   ─────────────────────────────────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(59, 130, 246, .08) 1px, transparent 1px),
        radial-gradient(rgba(124, 92, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: 0 0, 22px 22px;
    opacity: 1;
}

body.dark-theme::before {
    background-image:
        radial-gradient(rgba(0, 217, 255, .09) 1px, transparent 1px),
        radial-gradient(rgba(124, 92, 255, .07) 1px, transparent 1px);
}

body::after {
    content: '';
    position: fixed;
    top: -25%;
    left: -15%;
    width: 135vw;
    height: 145vh;
    z-index: -1;
    pointer-events: none;
    filter: blur(90px);
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 217, 255, .10) 0%, transparent 42%),
        radial-gradient(circle at 82% 68%, rgba(124, 92, 255, .10) 0%, transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(0, 255, 194, .06) 0%, transparent 45%);
    animation: p-bg-drift 26s var(--p-ease-io) infinite alternate;
}

body.dark-theme::after {
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 217, 255, .16) 0%, transparent 42%),
        radial-gradient(circle at 82% 68%, rgba(124, 92, 255, .18) 0%, transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(0, 255, 194, .08) 0%, transparent 45%);
}

@keyframes p-bg-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3%, 4%, 0) scale(1.05); }
    100% { transform: translate3d(-2%, -3%, 0) scale(.97); }
}

/* Floating orb decorations (existing .orb elements get real motion) */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    animation: p-orb-drift 22s var(--p-ease-io) infinite alternate;
}

.orb:nth-of-type(2) { animation-duration: 28s; animation-delay: -6s; }
.orb:nth-of-type(3) { animation-duration: 34s; animation-delay: -12s; }

@keyframes p-orb-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(6%, -7%, 0) scale(1.14); }
    100% { transform: translate3d(-5%, 6%, 0) scale(.9); }
}

/* ───────────────────────────────────────────────────────────────────
   4. LAYOUT PRIMITIVES
   ─────────────────────────────────────────────────────────────────── */
.container,
.hero-container {
    width: 100%;
    max-width: var(--p-max);
    margin-inline: auto;
    padding-inline: var(--p-gutter);
}

section {
    padding-block: var(--p-section-y);
    position: relative;
    /* clip decorative overflow so no section can create a horizontal scrollbar */
    overflow-x: clip;
}

#hero {
    overflow: hidden;
}

.section-gradient-divider {
    height: 1px;
    border: 0;
    background: var(--p-grad-line);
    opacity: .5;
}

/* ───────────────────────────────────────────────────────────────────
   5. SECTION HEADERS
   ─────────────────────────────────────────────────────────────────── */
.section-header,
.team-section-head {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(38px, 5vw, 68px);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-radius: var(--p-r-pill);
    background: var(--p-grad-soft);
    border: 1px solid var(--p-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--p-font-display);
    font-size: clamp(.65rem, 1.4vw, .72rem);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--p-blue);
    margin-bottom: 18px;
    -webkit-text-fill-color: currentColor;
}

body.dark-theme .section-label {
    color: var(--p-cyan);
}

.section-label::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--p-grad);
    flex-shrink: 0;
}

.section-title {
    font-size: clamp(1.9rem, 5.2vw, 3.35rem);
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 16px;
    color: var(--p-text);
}

.section-desc {
    color: var(--p-text-2);
    font-size: clamp(.94rem, 1.9vw, 1.08rem);
    line-height: 1.8;
    max-width: 620px;
}

.section-header .section-desc,
.team-section-head .section-desc {
    margin-inline: auto;
}

.gradient-text {
    background: var(--p-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Animated shimmer sweep across gradient headlines */
.gradient-text {
    background-size: 220% 100%;
    animation: p-grad-flow 9s linear infinite;
}

@keyframes p-grad-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

/* ───────────────────────────────────────────────────────────────────
   6. BUTTONS — shine sweep + magnetic + ripple
   ─────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border: 1px solid transparent;
    border-radius: var(--p-r-sm);
    font-family: var(--p-font-display);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: transform var(--p-t), box-shadow var(--p-t),
                background var(--p-t), border-color var(--p-t), color var(--p-t);
    will-change: transform;
}

/* diagonal light sweep */
.btn::after {
    content: '';
    position: absolute;
    inset-block: 0;
    left: -60%;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
    z-index: 2;
}

.btn:hover::after {
    left: 160%;
    transition: left .9s var(--p-ease);
}

/* neutralise the legacy circle-grow pseudo so it can't fight the sweep */
.btn::before {
    background: rgba(255, 255, 255, .10) !important;
}

.btn-primary {
    background: var(--p-grad);
    background-size: 180% 180%;
    color: #fff;
    box-shadow: 0 8px 24px rgba(59, 130, 246, .28);
    animation: p-btn-grad 7s var(--p-ease-io) infinite alternate;
}

@keyframes p-btn-grad {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 217, 255, .38), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

.btn-outline {
    background: var(--p-panel);
    color: var(--p-blue);
    border-color: var(--p-line-hot);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.dark-theme .btn-outline {
    color: var(--p-cyan);
}

.btn-outline:hover {
    background: rgba(0, 217, 255, .10);
    border-color: var(--p-cyan);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 217, 255, .2);
}

.btn-ghost {
    background: transparent;
    color: var(--p-text-2);
    border-color: var(--p-line);
}

.btn-ghost:hover {
    color: var(--p-text);
    border-color: var(--p-line-hot);
    background: var(--p-panel);
}

.btn-sm {
    padding: 10px 20px;
    font-size: .82rem;
    border-radius: var(--p-r-xs);
}

.btn-lg {
    padding: 17px 38px;
    font-size: 1rem;
}

.btn:disabled,
.btn[disabled] {
    opacity: .55;
    pointer-events: none;
}

/* Arrow nudge */
.btn .arrow-icon,
.btn-arrow {
    display: inline-block;
    transition: transform var(--p-t);
}

.btn:hover .arrow-icon,
.btn:hover .btn-arrow {
    transform: translateX(5px);
}

/* Click ripple injected by premium.js */
.p-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    animation: p-ripple-out .6s var(--p-ease) forwards;
    z-index: 3;
}

@keyframes p-ripple-out {
    to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* ───────────────────────────────────────────────────────────────────
   7. GLASS CARDS — spotlight, shine sweep, gradient hairline
   ─────────────────────────────────────────────────────────────────── */
.glass-card,
.p-card {
    position: relative;
    isolation: isolate;
    background: var(--p-panel);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--p-line);
    border-radius: var(--p-r);
    padding: clamp(20px, 3vw, 30px);
    box-shadow: var(--p-shadow-sm);
    overflow: hidden;
    transition: transform var(--p-t), box-shadow var(--p-t), border-color var(--p-t), background var(--p-t);
    will-change: transform;
}

/* mouse-tracked spotlight (coords set by premium.js) */
.glass-card::before,
.p-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--p-t);
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                rgba(0, 217, 255, .14), transparent 62%);
    /* override legacy mask-based border trick */
    mask: none;
    -webkit-mask: none;
    padding: 0;
    border-radius: inherit;
}

.glass-card:hover::before,
.p-card:hover::before {
    opacity: 1;
}

/* travelling shine */
.glass-card::after,
.p-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 55%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
    transform: skewX(-24deg);
}

.glass-card:hover::after,
.p-card:hover::after {
    left: 160%;
    transition: left 1.1s var(--p-ease);
}

.glass-card > *,
.p-card > * {
    position: relative;
    z-index: 2;
}

.glass-card:hover,
.p-card:hover {
    transform: translateY(-7px);
    border-color: var(--p-line-hot);
    box-shadow: var(--p-shadow-lg), var(--p-glow);
    background: var(--p-panel-hover);
}

/* Accent rail variant — a nod to the reference sites' left-border cards */
.p-card--rail::before,
.glass-card.p-card--rail::before {
    content: '';
}

.p-card--rail {
    border-left: 3px solid transparent;
    border-image: var(--p-grad) 1;
    border-image-slice: 1;
}

/* Bordered gradient halo on hover for feature cards */
.p-card--halo {
    background-clip: padding-box;
}

/* ───────────────────────────────────────────────────────────────────
   8. NAVBAR
   ─────────────────────────────────────────────────────────────────── */
#navbar {
    height: var(--p-nav-h);
    padding-inline: clamp(16px, 3.5vw, 44px);
    gap: 14px;
    transition: height .4s var(--p-ease), background .4s var(--p-ease),
                box-shadow .4s var(--p-ease), border-color .4s var(--p-ease),
                backdrop-filter .4s var(--p-ease);
}

#navbar.scrolled {
    height: 62px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--p-line);
    box-shadow: 0 8px 32px rgba(10, 21, 51, .07);
}

body.dark-theme #navbar.scrolled {
    background: rgba(5, 7, 15, .72);
    border-bottom: 1px solid rgba(0, 217, 255, .14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.nav-logo {
    font-family: var(--p-font-display);
    font-weight: 800;
    font-size: clamp(.98rem, 2.2vw, 1.16rem);
    letter-spacing: -.03em;
    color: var(--p-text);
    gap: 11px;
    transition: color var(--p-t);
}

.nav-logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    padding: 3px;
    background: var(--p-grad-soft);
    border: 1px solid var(--p-line);
    transition: transform .5s var(--p-ease), box-shadow .5s var(--p-ease);
}

.nav-logo:hover .nav-logo-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 22px rgba(0, 217, 255, .4);
}

.nav-links {
    gap: 2px;
}

.nav-links a {
    position: relative;
    padding: 9px 15px;
    border-radius: var(--p-r-xs);
    font-family: var(--p-font-display);
    font-size: .875rem;
    font-weight: 500;
    color: var(--p-text-2);
    transition: color var(--p-t-fast), background var(--p-t-fast);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 15px;
    right: 15px;
    height: 2px;
    border-radius: 2px;
    background: var(--p-grad);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .4s var(--p-ease);
    width: auto;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--p-text);
    background: var(--p-panel);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
    transform-origin: left center;
    width: auto;
    box-shadow: 0 0 10px rgba(0, 217, 255, .6);
}

.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--p-panel);
    border: 1px solid var(--p-line);
    color: var(--p-text);
    transition: transform var(--p-t), background var(--p-t), border-color var(--p-t), color var(--p-t);
}

.theme-toggle-btn:hover {
    transform: rotate(25deg) scale(1.1);
    border-color: var(--p-line-hot);
    color: var(--p-cyan);
    background: rgba(0, 217, 255, .1);
}

#scroll-progress {
    height: 3px;
    background: var(--p-grad-aurora);
    background-size: 250% 100%;
    animation: p-grad-flow 6s linear infinite;
    box-shadow: 0 0 14px rgba(0, 217, 255, .7);
}

/* Mobile drawer */
.nav-mobile {
    top: var(--p-nav-h);
    background: var(--p-bg);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border-bottom: 1px solid var(--p-line);
    padding: 10px var(--p-gutter) 22px;
    box-shadow: var(--p-shadow-lg);
    max-height: calc(100dvh - var(--p-nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.dark-theme .nav-mobile {
    background: rgba(5, 7, 15, .96);
}

.nav-mobile.open a {
    animation: p-drawer-in .45s var(--p-ease) backwards;
}

.nav-mobile.open a:nth-child(1) { animation-delay: .03s; }
.nav-mobile.open a:nth-child(2) { animation-delay: .06s; }
.nav-mobile.open a:nth-child(3) { animation-delay: .09s; }
.nav-mobile.open a:nth-child(4) { animation-delay: .12s; }
.nav-mobile.open a:nth-child(5) { animation-delay: .15s; }
.nav-mobile.open a:nth-child(6) { animation-delay: .18s; }
.nav-mobile.open a:nth-child(7) { animation-delay: .21s; }
.nav-mobile.open a:nth-child(8) { animation-delay: .24s; }

@keyframes p-drawer-in {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: none; }
}

.nav-mobile a {
    padding: 15px 10px;
    border-radius: var(--p-r-xs);
    border-bottom: 1px solid var(--p-line-soft);
    font-family: var(--p-font-display);
    font-weight: 500;
    color: var(--p-text-2);
    transition: color var(--p-t-fast), background var(--p-t-fast), padding-left var(--p-t-fast);
}

.nav-mobile a:hover,
.nav-mobile a:active {
    color: var(--p-text);
    background: var(--p-panel);
    padding-left: 18px;
}

.hamburger span {
    background: var(--p-text);
    transition: transform .4s var(--p-ease), opacity .3s var(--p-ease), background .3s;
}

/* ───────────────────────────────────────────────────────────────────
   9. HERO
   ─────────────────────────────────────────────────────────────────── */
#hero {
    min-height: 100svh;
    padding-top: calc(var(--p-nav-h) + clamp(24px, 5vw, 48px));
    padding-bottom: clamp(48px, 8vw, 90px);
    display: flex;
    align-items: center;
}

.hero-split-grid {
    gap: clamp(32px, 5vw, 72px);
}

.hero-badge {
    padding: 8px 20px 8px 12px;
    font-family: var(--p-font-display);
    font-size: clamp(.66rem, 1.5vw, .76rem);
    letter-spacing: .16em;
    background: var(--p-grad-soft);
    border: 1px solid var(--p-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--p-blue);
    margin-bottom: clamp(20px, 3vw, 32px);
    animation: p-badge-glow 4s var(--p-ease-io) infinite;
}

body.dark-theme .hero-badge {
    color: var(--p-cyan);
}

@keyframes p-badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 217, 255, .18); }
    50%      { box-shadow: 0 0 22px 2px rgba(0, 217, 255, .22); }
}

.hero-title {
    font-size: clamp(2.15rem, 6.4vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.03;
    margin-bottom: clamp(16px, 2.5vw, 24px);
}

.hero-title .line2 {
    background: var(--p-grad-aurora);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: p-grad-flow 8s linear infinite;
}

.hero-tagline {
    font-size: clamp(.98rem, 2.1vw, 1.2rem);
    color: var(--p-text-2);
    margin-bottom: clamp(26px, 4vw, 42px);
    min-height: 2.4em;
}

.typing-cursor {
    background: var(--p-cyan);
    box-shadow: 0 0 10px var(--p-cyan);
}

.hero-ctas {
    gap: 14px;
}

/* Hero trust row (added by premium markup) */
.hero-trust {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 34px);
    margin-top: clamp(28px, 4vw, 44px);
    flex-wrap: wrap;
}

.hero-trust-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-trust-num {
    font-family: var(--p-font-display);
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    font-weight: 800;
    line-height: 1;
    background: var(--p-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-trust-lbl {
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--p-text-3);
}

.hero-trust-sep {
    width: 1px;
    height: 34px;
    background: var(--p-line);
}

/* The hero artwork ships with its own pale backdrop. Framing it as a
   deliberate product panel reads far better than a bare light rectangle
   floating on the dark canvas. */
.hero-img-graphic {
    border-radius: var(--p-r-lg);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-lg);
}

body.dark-theme .hero-img-graphic {
    border-color: rgba(0, 217, 255, .18);
    box-shadow: var(--p-shadow-lg), 0 0 70px rgba(0, 217, 255, .12);
}

/* Floating hero cards.
   These overlap the hero artwork, which has a LIGHT background even in dark
   mode. A 3.5%-opacity glass panel let that artwork show through and the
   white label text disappeared. They need a genuinely opaque surface so the
   text is legible over whatever happens to sit behind them. */
.hero-float-card {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--p-line);
    border-radius: var(--p-r);
    box-shadow: var(--p-shadow-lg);
    padding: 13px 18px;
    transition: transform var(--p-t), box-shadow var(--p-t), border-color var(--p-t);
}

body.dark-theme .hero-float-card {
    background: rgba(11, 17, 34, .90);
    border-color: rgba(255, 255, 255, .12);
}

/* Pin the label colours to the card's own surface, not the page theme. */
.float-card-title {
    color: var(--p-text) !important;
    font-weight: 700;
}

.float-card-desc {
    color: var(--p-text-2) !important;
}

.hero-float-card:hover {
    transform: translateY(-6px) scale(1.04);
    border-color: var(--p-line-hot);
    box-shadow: var(--p-shadow-lg), var(--p-glow);
}

.hero-scroll-hint {
    color: var(--p-text-3);
    font-family: var(--p-font-display);
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
}

/* ───────────────────────────────────────────────────────────────────
   10. MARQUEE / TRUSTED STRIP
   ─────────────────────────────────────────────────────────────────── */
.trusted-section {
    padding-block: clamp(32px, 5vw, 54px);
    border-block: 1px solid var(--p-line-soft);
    background: var(--p-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.trusted-label {
    text-align: center;
    font-family: var(--p-font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--p-text-3);
    margin-bottom: 26px;
}

.trusted-marquee-wrap {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.trusted-marquee {
    display: flex;
    align-items: center;
    gap: clamp(32px, 6vw, 72px);
    width: max-content;
    animation: p-marquee 34s linear infinite;
}

.trusted-marquee-wrap:hover .trusted-marquee {
    animation-play-state: paused;
}

@keyframes p-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.trusted-logo {
    font-family: var(--p-font-display);
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--p-text-3);
    white-space: nowrap;
    opacity: .6;
    transition: opacity var(--p-t), color var(--p-t), transform var(--p-t);
}

.trusted-logo:hover {
    opacity: 1;
    color: var(--p-text);
    transform: scale(1.06);
}

/* Tech marquee pills */
.tech-card {
    background: var(--p-panel) !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r-pill) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform var(--p-t), border-color var(--p-t), box-shadow var(--p-t), background var(--p-t) !important;
}

.tech-card:hover {
    transform: translateY(-4px) scale(1.04);
    border-color: var(--p-line-hot) !important;
    background: var(--p-panel-hover) !important;
    box-shadow: 0 10px 28px rgba(0, 217, 255, .18) !important;
}

.tech-name {
    font-family: var(--p-font-display);
    font-weight: 600;
    color: var(--p-text);
}

/* ───────────────────────────────────────────────────────────────────
   11. STATS
   ─────────────────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(14px, 2.2vw, 24px);
}

.stat-card {
    text-align: center;
    padding: clamp(24px, 3.4vw, 38px) clamp(16px, 2.4vw, 26px);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: var(--p-r-sm);
    background: var(--p-grad-soft);
    border: 1px solid var(--p-line);
    color: var(--p-blue);
    transition: transform var(--p-t), box-shadow var(--p-t);
}

body.dark-theme .stat-icon { color: var(--p-cyan); }

.stat-card:hover .stat-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.08);
    box-shadow: 0 10px 26px rgba(0, 217, 255, .25);
}

.stat-svg-icon {
    width: 26px;
    height: 26px;
}

.stat-number {
    font-family: var(--p-font-display);
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
    margin-bottom: 6px;
}

.stat-label {
    font-size: clamp(.78rem, 1.7vw, .88rem);
    font-weight: 500;
    color: var(--p-text-2);
    letter-spacing: .01em;
}

/* ───────────────────────────────────────────────────────────────────
   12. SCROLL-REVEAL / STAGGER SYSTEM
   ─────────────────────────────────────────────────────────────────── */
/* Opacity + transform only — no blur. A filtered reveal left whole
   sections looking out of focus until they happened to intersect. */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    transition: opacity .7s var(--p-ease), transform .7s var(--p-ease);
    will-change: opacity, transform;
    filter: none !important;
}

.reveal        { transform: translate3d(0, 38px, 0); }
.reveal-left   { transform: translate3d(-44px, 0, 0); }
.reveal-right  { transform: translate3d(44px, 0, 0); }
.reveal-scale  { transform: scale(.94) translate3d(0, 22px, 0); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
    opacity: 1;
    transform: none;
    filter: none;
}

.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }
.delay-5 { transition-delay: .40s; }
.delay-6 { transition-delay: .48s; }

/* Index-driven stagger — premium.js sets --order on grid children */
.p-stagger > * {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity .75s var(--p-ease), transform .75s var(--p-ease);
    transition-delay: calc(var(--order, 0) * .07s);
}

.p-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

/* Masked line reveal for headlines */
.p-line-mask {
    display: block;
    overflow: hidden;
    padding-bottom: .08em;
}

.p-line-mask > span {
    display: block;
    transform: translateY(105%);
    transition: transform .95s var(--p-ease);
    transition-delay: calc(var(--line, 0) * .09s);
}

.is-visible .p-line-mask > span,
.p-line-mask.is-visible > span {
    transform: none;
}

/* ───────────────────────────────────────────────────────────────────
   13. ABOUT
   ─────────────────────────────────────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.about-img-box {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    max-width: 440px;
    margin-inline: auto;
}

.about-img-orbit {
    position: absolute;
    inset: 6%;
    border: 1px dashed var(--p-line-hot);
    border-radius: 50%;
    animation: p-spin 26s linear infinite;
    opacity: .5;
}

.about-img-orbit::after {
    content: '';
    position: absolute;
    inset: 12%;
    border: 1px solid var(--p-line);
    border-radius: 50%;
}

.orbit-dot {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--p-cyan);
    box-shadow: 0 0 16px var(--p-cyan);
    transform: translateX(-50%);
}

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

/* Sits on top of the about artwork, so it needs its own opaque surface
   for the same reason the hero float cards do. */
.about-float-badge {
    position: absolute;
    right: 4%;
    bottom: 6%;
    display: grid;
    place-items: center;
    padding: 16px 22px;
    border-radius: var(--p-r);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--p-line-hot);
    box-shadow: var(--p-shadow-lg);
    text-align: center;
    animation: p-float 6s var(--p-ease-io) infinite;
}

body.dark-theme .about-float-badge {
    background: rgba(11, 17, 34, .90);
}

.about-float-badge .number {
    font-family: var(--p-font-display);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    background: var(--p-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-float-badge .label {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--p-text-3);
    margin-top: 4px;
}

@keyframes p-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.float-anim,
.floating-effect {
    animation: p-float 6s var(--p-ease-io) infinite;
}

.about-text .section-header,
.about-text .section-desc {
    text-align: left;
    margin-inline: 0;
    max-width: none;
}

.about-mvp {
    display: grid;
    gap: 14px;
    margin-top: clamp(24px, 3.5vw, 34px);
}

.mvp-card {
    padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 24px);
    border-radius: var(--p-r-sm);
}

.mvp-card h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--p-text);
}

.mvp-card p {
    font-size: .9rem;
    line-height: 1.72;
    color: var(--p-text-2);
    margin: 0;
}

.icon-accent {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--p-grad-soft);
    border: 1px solid var(--p-line);
    font-size: .95rem;
    flex-shrink: 0;
}

.stats-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: var(--p-panel) !important;
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-r) !important;
    padding: clamp(18px, 2.6vw, 26px) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-top: clamp(30px, 4vw, 48px) !important;
}

.stats-strip .stat-item {
    text-align: center;
    position: relative;
}

.stats-strip .stat-item + .stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--p-line);
}

.stats-strip .stat-num {
    font-family: var(--p-font-display);
    font-size: clamp(1.4rem, 3.6vw, 2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em;
}

/* ───────────────────────────────────────────────────────────────────
   14. SERVICES
   ─────────────────────────────────────────────────────────────────── */
/* Deterministic bento: a 3-track grid where cards 1 and 4 span two
   tracks. auto-fit was producing ragged, unpredictable spans here. */
.services-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 26px);
}

.services-bento .service-card:nth-child(1),
.services-bento .service-card:nth-child(4) {
    grid-column: span 2;
}

@media (max-width: 1100px) {
    .services-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .services-bento .service-card:nth-child(1),
    .services-bento .service-card:nth-child(4) {
        grid-column: span 1;
    }
}

.service-card {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3.2vw, 34px);
    border-radius: var(--p-r-lg);
}

.service-num {
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--p-font-display);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    opacity: .10;
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--p-t), transform var(--p-t);
}

.service-card:hover .service-num {
    opacity: .22;
    transform: translateY(-4px) scale(1.06);
}

.service-icon-container {
    display: inline-grid !important;
    place-items: center;
    width: 58px;
    height: 58px;
    padding: 0 !important;
    border-radius: var(--p-r-sm) !important;
    background: var(--p-grad-soft) !important;
    border: 1px solid var(--p-line);
    color: var(--p-blue);
    margin-bottom: 20px !important;
    transition: transform var(--p-t), box-shadow var(--p-t), background var(--p-t);
}

body.dark-theme .service-icon-container { color: var(--p-cyan); }

.service-card:hover .service-icon-container {
    transform: translateY(-4px) rotate(-7deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(0, 217, 255, .28);
}

.svc-svg-icon {
    width: 26px;
    height: 26px;
}

.service-title {
    font-family: var(--p-font-display);
    font-size: clamp(1.08rem, 2.3vw, 1.24rem);
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--p-text);
}

.service-desc {
    font-size: .92rem;
    line-height: 1.75;
    color: var(--p-text-2);
    margin-bottom: 4px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 22px;
    display: grid;
    gap: 9px;
}

/* main.css already draws the tick via ::before — restyle it here rather
   than adding a second marker element (that produced a duplicate ✓). */
.feature-list li {
    position: relative;
    padding-left: 27px;
    margin-bottom: 0;
    font-size: .86rem;
    color: var(--p-text-2);
    line-height: 1.6;
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: .18em;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 217, 255, .14);
    border: 1px solid rgba(0, 217, 255, .28);
    color: var(--p-cyan);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
}

/* If a renderer still emits an explicit tick span, don't double up. */
.feature-list li .cyan-check {
    display: none;
}

.service-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ───────────────────────────────────────────────────────────────────
   15. PROJECTS
   ─────────────────────────────────────────────────────────────────── */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(18px, 2.6vw, 28px);
}

.project-card {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    border-radius: var(--p-r-lg) !important;
    overflow: hidden;
    transform-style: preserve-3d;
}

.project-img {
    position: relative;
    aspect-ratio: 16 / 10;
    height: auto !important;
    overflow: hidden;
    background: var(--p-bg-alt);
}

.project-img-inner,
.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-img img {
    transition: transform .9s var(--p-ease), filter .5s var(--p-ease);
}

.project-card:hover .project-img img {
    transform: scale(1.09);
}

.project-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(18px, 2.6vw, 24px) !important;
}

.project-title {
    font-family: var(--p-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--p-text);
}

.project-desc {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--p-text-2);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-tags {
    margin-bottom: 18px !important;
}

.project-tag,
.glass-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px !important;
    border-radius: var(--p-r-pill) !important;
    background: var(--p-grad-soft) !important;
    border: 1px solid var(--p-line);
    font-size: .72rem !important;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--p-text-2);
    transition: transform var(--p-t-fast), border-color var(--p-t-fast), color var(--p-t-fast);
}

.project-tag:hover {
    transform: translateY(-2px);
    border-color: var(--p-line-hot);
    color: var(--p-text);
}

.project-footer {
    margin-top: auto;
    padding-top: 4px;
}

/* ───────────────────────────────────────────────────────────────────
   16. TEAM
   ─────────────────────────────────────────────────────────────────── */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: clamp(18px, 2.6vw, 28px);
}

.team-card {
    text-align: center;
    padding: clamp(26px, 3.4vw, 34px) clamp(20px, 2.8vw, 26px) !important;
    border-radius: var(--p-r-lg) !important;
}

.team-card-accent {
    height: 3px !important;
    background: var(--p-grad) !important;
    opacity: .85;
}

.team-avatar {
    width: clamp(88px, 12vw, 104px) !important;
    height: clamp(88px, 12vw, 104px) !important;
    padding: 3px !important;
    background: var(--p-grad) !important;
    transition: transform var(--p-t), box-shadow var(--p-t);
}

.team-card:hover .team-avatar {
    transform: scale(1.06);
    box-shadow: 0 0 30px rgba(0, 217, 255, .35);
}

.team-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.team-role-badge {
    background: var(--p-grad-soft) !important;
    border: 1px solid var(--p-line);
    color: var(--p-text-2) !important;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .66rem !important;
}

.team-card-name {
    font-family: var(--p-font-display);
    font-size: 1.16rem !important;
    font-weight: 700;
    color: var(--p-text);
}

.team-card-title {
    color: var(--p-text-3) !important;
    font-size: .84rem !important;
}

.team-card-tagline {
    color: var(--p-text-2);
    line-height: 1.65;
}

.team-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--p-line-soft);
}

.team-stat {
    display: grid;
    gap: 2px;
}

.team-stat-val {
    font-family: var(--p-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    background: var(--p-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.team-stat-lbl {
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* --p-text-3 only reached 2.75:1 against the card surface */
    color: var(--p-text-2);
}

.team-skill-chip {
    font-size: .7rem !important;
    padding: 4px 11px !important;
    border-radius: var(--p-r-pill) !important;
    background: var(--p-grad-soft) !important;
    border: 1px solid var(--p-line);
    color: var(--p-text-2) !important;
}

.team-card-contact span {
    font-size: .72rem;
    color: var(--p-text-3);
}

.team-loading,
.team-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 20px;
    color: var(--p-text-3);
}

/* ───────────────────────────────────────────────────────────────────
   17. CONTACT
   ─────────────────────────────────────────────────────────────────── */
.contact-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.6vw, 48px) !important;
    align-items: start;
}

.contact-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2vw, 18px) !important;
}

.contact-link {
    padding: clamp(18px, 2.6vw, 24px) !important;
    border-radius: var(--p-r) !important;
    background: var(--p-panel) !important;
    border: 1px solid var(--p-line) !important;
    text-align: center;
}

.contact-link-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: var(--p-r-sm) !important;
    background: var(--p-grad-soft) !important;
    border: 1px solid var(--p-line);
    transition: transform var(--p-t), box-shadow var(--p-t);
}

.contact-link:hover .contact-link-icon {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 24px rgba(0, 217, 255, .25);
}

.contact-link span {
    color: var(--p-text-2);
    font-size: .84rem !important;
    line-height: 1.5;
}

.contact-form {
    padding: clamp(24px, 3.4vw, 36px) !important;
    border-radius: var(--p-r-lg) !important;
    background: var(--p-panel) !important;
    border: 1px solid var(--p-line) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--p-font-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--p-text-2);
}

/* Own the inputs completely — the renderers' inline colours are overridden */
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 13px 15px !important;
    border-radius: var(--p-r-xs) !important;
    background: var(--p-bg-alt) !important;
    border: 1px solid var(--p-line) !important;
    color: var(--p-text) !important;
    font-family: var(--p-font-body);
    font-size: .93rem;
    line-height: 1.5;
    transition: border-color var(--p-t-fast), box-shadow var(--p-t-fast), background var(--p-t-fast) !important;
}

body.dark-theme .contact-form input,
body.dark-theme .contact-form textarea {
    background: rgba(255, 255, 255, .03) !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--p-text-3);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--p-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 255, .16) !important;
}

.form-group.has-error input,
.form-group.has-error textarea,
input.error,
textarea.error {
    border-color: var(--p-rose) !important;
    box-shadow: 0 0 0 3px rgba(255, 93, 143, .14) !important;
}

.form-group.has-error .error-msg {
    display: block !important;
    color: var(--p-rose) !important;
    font-size: .78rem;
    margin-top: 6px;
}

.spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: p-spin .7s linear infinite;
}

/* ───────────────────────────────────────────────────────────────────
   18. MODALS
   ─────────────────────────────────────────────────────────────────── */
.modal-overlay,
.proj-modal-overlay {
    background: rgba(4, 7, 18, .72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    padding: var(--p-gutter);
}

.modal-box,
.proj-modal-box {
    background: var(--p-panel-solid);
    border: 1px solid var(--p-line);
    border-radius: var(--p-r-lg);
    box-shadow: var(--p-shadow-lg);
    max-height: calc(100dvh - 2 * var(--p-gutter));
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: p-modal-in .5s var(--p-ease);
}

@keyframes p-modal-in {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.modal-title,
.proj-modal-title {
    font-family: var(--p-font-display);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--p-text);
}

.modal-close,
.proj-modal-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--p-panel);
    border: 1px solid var(--p-line);
    color: var(--p-text-2);
    cursor: pointer;
    transition: transform var(--p-t-fast), background var(--p-t-fast), color var(--p-t-fast);
}

.modal-close:hover,
.proj-modal-close:hover {
    transform: rotate(90deg);
    background: rgba(255, 93, 143, .14);
    color: var(--p-rose);
}

/* ───────────────────────────────────────────────────────────────────
   19. FOOTER
   ─────────────────────────────────────────────────────────────────── */
footer {
    background: var(--p-bg-alt);
    border-top: 1px solid var(--p-line);
    padding-top: 0;
}

footer .container {
    padding-block: clamp(44px, 6vw, 76px) clamp(20px, 3vw, 28px);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr !important;
    gap: clamp(28px, 4vw, 52px);
}

.footer-brand p {
    color: var(--p-text-2);
    font-size: .9rem;
    line-height: 1.75;
    margin-block: 16px 20px;
    max-width: 340px;
}

.footer-col h5 {
    font-family: var(--p-font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--p-text);
    margin-bottom: 18px;
}

.footer-col ul {
    list-style: none;
    display: grid;
    gap: 11px;
}

.footer-col a {
    color: var(--p-text-2);
    font-size: .89rem;
    display: inline-block;
    transition: color var(--p-t-fast), transform var(--p-t-fast);
}

.footer-col a:hover {
    color: var(--p-cyan);
    transform: translateX(5px);
}

.footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--p-r-xs);
    background: var(--p-panel);
    border: 1px solid var(--p-line);
    font-size: 1rem;
    transition: transform var(--p-t), border-color var(--p-t), box-shadow var(--p-t), background var(--p-t);
}

.social-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon {
    color: var(--p-text-2);
}

.social-icon:hover {
    transform: translateY(-4px) scale(1.06);
    border-color: var(--p-line-hot);
    background: var(--p-grad-soft);
    color: var(--p-cyan);
    box-shadow: 0 10px 22px rgba(0, 217, 255, .22);
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: .86rem;
    color: var(--p-text-2);
}

.footer-contact-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--p-grad-soft);
    border: 1px solid var(--p-line);
    color: var(--p-cyan);
}

.footer-contact-icon svg {
    width: 17px;
    height: 17px;
}

/* The mission / vision / values markers sit in a fixed square — give the
   glyph room so it isn't clipped. */
.icon-accent {
    font-size: 1rem;
    line-height: 1;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: clamp(20px, 3vw, 28px);
    border-top: 1px solid var(--p-line-soft);
    font-size: .84rem;
    color: var(--p-text-3);
}

.footer-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--p-r-pill);
    background: rgba(0, 255, 194, .1);
    border: 1px solid rgba(0, 255, 194, .28);
    color: var(--p-mint);
    font-size: .76rem;
    font-weight: 600;
}

.footer-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--p-mint);
    box-shadow: 0 0 10px var(--p-mint);
    animation: p-pulse 2s var(--p-ease-io) infinite;
}

@keyframes p-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.8); }
}

/* ───────────────────────────────────────────────────────────────────
   20. UTILITY / MISC
   ─────────────────────────────────────────────────────────────────── */
#back-to-top {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--p-grad);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    box-shadow: 0 10px 30px rgba(0, 217, 255, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.85);
    transition: opacity var(--p-t), transform var(--p-t), visibility var(--p-t), box-shadow var(--p-t);
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#back-to-top:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 16px 40px rgba(0, 217, 255, .5);
}

#preloader {
    background: var(--p-bg);
}

.preloader-logo {
    font-family: var(--p-font-display);
    font-weight: 800;
    letter-spacing: -.03em;
    background: var(--p-grad-aurora);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: p-grad-flow 3s linear infinite;
}

.preloader-bar {
    background: var(--p-grad-aurora);
}

.preloader-text {
    font-family: var(--p-font-display);
    color: var(--p-text-3);
}

#toast-container {
    position: fixed;
    right: var(--p-gutter);
    bottom: calc(var(--p-gutter) + env(safe-area-inset-bottom, 0px));
    z-index: 100000;
    display: grid;
    gap: 10px;
    max-width: min(360px, calc(100vw - 2 * var(--p-gutter)));
}

.toast {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    border-radius: var(--p-r-sm);
    background: var(--p-panel-solid);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-lg);
    font-size: .88rem;
    color: var(--p-text);
    border-left: 3px solid var(--p-cyan);
}

.toast.error {
    border-left-color: var(--p-rose);
}

/* The tech pills live inside an `overflow: hidden` marquee track, so any
   floating tooltip gets sliced in half. The description is exposed via the
   native `title` attribute instead, which renders above the page. */
.tech-tooltip {
    display: none !important;
}

.tech-card {
    position: relative;
}

/* ───────────────────────────────────────────────────────────────────
   20b. COMPONENT DETAIL — classes emitted by the section renderers
   ─────────────────────────────────────────────────────────────────── */

/* Collapsible grids — long Firestore collections stay browsable
   without turning the home page into an endless scroll. */
.is-collapsed {
    display: none !important;
}

.grid-expand-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(24px, 3.5vw, 38px);
}

.grid-expand-btn {
    position: relative;
}

.grid-expand-btn .btn-arrow {
    transition: transform var(--p-t);
}

.grid-expand-btn:hover .btn-arrow {
    transform: translateY(3px);
}

.grid-expand-btn[aria-expanded="true"]:hover .btn-arrow {
    transform: translateY(-3px);
}

/* Empty / loading / error states inside grids */
.grid-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(44px, 7vw, 76px) 20px;
    color: var(--p-text-3);
    font-size: .94rem;
    border: 1px dashed var(--p-line);
    border-radius: var(--p-r);
    background: var(--p-panel);
}

.grid-empty-state.is-loading::after {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    margin: 16px auto 0;
    border: 2px solid var(--p-line);
    border-top-color: var(--p-cyan);
    border-radius: 50%;
    animation: p-spin .8s linear infinite;
}

.grid-empty-state.is-error {
    color: var(--p-rose);
    border-color: rgba(255, 93, 143, .35);
}

/* ── Project card detail ── */
.project-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--p-r-pill);
    /* Sits over an arbitrary project thumbnail, so keep it dark enough for
       white text regardless of how bright that image is. */
    background: rgba(4, 7, 18, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 217, 255, .38);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.project-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--p-cyan);
    box-shadow: 0 0 9px var(--p-cyan);
    animation: p-pulse 1.9s var(--p-ease-io) infinite;
}

.project-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    background: linear-gradient(to top, rgba(4, 7, 18, .88), rgba(4, 7, 18, .1) 55%, transparent);
    opacity: 0;
    transition: opacity var(--p-t);
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-overlay-text {
    color: #fff;
    font-family: var(--p-font-display);
    font-weight: 600;
    font-size: .92rem;
    transform: translateY(12px);
    transition: transform var(--p-t);
}

.project-card:hover .project-overlay-text {
    transform: none;
}

.project-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.project-live-link {
    font-size: .8rem;
    font-weight: 600;
    color: var(--p-cyan);
    transition: transform var(--p-t-fast), color var(--p-t-fast);
}

.project-live-link:hover {
    transform: translateX(3px);
    color: var(--p-violet);
}

/* ── Modal content helpers ── */
.modal-lead {
    color: var(--p-text-2);
    line-height: 1.85;
    font-size: .95rem;
    margin-bottom: 22px;
}

.modal-block {
    margin-bottom: 22px;
}

.modal-block-label {
    font-family: var(--p-font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--p-text-3);
    margin-bottom: 11px;
}

.modal-block .project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Contact detail ── */
.contact-intro {
    grid-column: 1 / -1;
    margin-bottom: 6px;
}

.contact-intro h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--p-text);
}

.contact-intro p {
    color: var(--p-text-2);
    font-size: .94rem;
    line-height: 1.8;
}

.contact-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.contact-link-icon {
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    color: var(--p-cyan);
}

.contact-link-icon[data-accent="violet"] { color: var(--p-violet); }
.contact-link-icon[data-accent="mint"]   { color: var(--p-mint); }
.contact-link-icon[data-accent="amber"]  { color: var(--p-amber); }

.contact-svg-icon {
    width: 22px;
    height: 22px;
}

.contact-link-label {
    font-family: var(--p-font-display);
    font-size: .68rem !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--p-text-3) !important;
}

.contact-link-value {
    font-size: .87rem !important;
    font-weight: 500;
    color: var(--p-text) !important;
    word-break: break-word;
}

.btn-block {
    width: 100%;
}

.btn.is-loading {
    pointer-events: none;
}

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

.error-msg {
    display: none;
}

/* ── Tech marquee ── */
.tech-slider-wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.tech-slider-wrap:last-of-type {
    margin-bottom: 0;
}

.tech-slider {
    display: flex;
    gap: 16px;
    width: max-content;
    padding-block: 6px;
    animation: p-marquee 36s linear infinite;
}

.tech-slider.reverse {
    animation-direction: reverse;
    animation-duration: 44s;
}

.tech-slider-wrap:hover .tech-slider {
    animation-play-state: paused;
}

/* main.css renders these as 140×120 stacked tiles; the marquee reads far
   better as horizontal pills, so the box model is reset here. */
.tech-card {
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tech-logo {
    font-size: 1.4rem;
    line-height: 1;
}

/* ── Team detail ── */
.team-card {
    position: relative;
    overflow: hidden;
}

.team-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.team-card-header {
    text-align: center;
    margin-bottom: 14px;
}

.team-avatar {
    margin: 0 auto 15px;
    border-radius: 50%;
}

.team-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--p-bg-alt);
}

.team-role-badge {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 9px;
}

.team-card-name {
    margin: 0;
}

.team-card-title {
    margin: 4px 0 0;
}

.team-card-tagline {
    font-style: italic;
    font-size: .87rem;
    text-align: center;
    color: var(--p-text-2);
    margin-top: 4px;
}

.team-card-highlight {
    margin-top: 12px;
    padding: 9px 14px;
    border-radius: var(--p-r-xs);
    background: var(--p-grad-soft);
    border: 1px solid var(--p-line);
    font-size: .8rem;
    text-align: center;
    color: var(--p-text-2);
}

.team-card-bio {
    font-size: .86rem;
    line-height: 1.7;
    text-align: center;
    color: var(--p-text-2);
    margin-top: 10px;
}

.team-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 16px;
}

.team-card-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--p-line-soft);
}

.team-social {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--p-r-xs);
    background: var(--p-panel);
    border: 1px solid var(--p-line);
    font-size: .9rem;
    transition: transform var(--p-t), border-color var(--p-t), background var(--p-t);
}

.team-social:hover {
    transform: translateY(-3px);
    border-color: var(--p-line-hot);
    background: var(--p-grad-soft);
}

/* ── About detail ── */
.about-img {
    position: relative;
    z-index: 1;
    width: 74%;
    height: 74%;
    object-fit: contain;
    filter: drop-shadow(0 18px 40px rgba(59, 130, 246, .22));
}

.about-desc-secondary {
    margin-top: 14px;
    opacity: .85;
}

.stats-strip .stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-item-lbl {
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--p-text-3);
}

/* ───────────────────────────────────────────────────────────────────
   20c. STATUS BOARD & PROGRESS MODAL — theme-aware colour
   These components were authored for a dark canvas only: hardcoded
   `color: #fff` plus neon hexes over ~10% tints. On the light theme the
   tint went near-white while the text stayed white/neon, so labels
   disappeared. Everything below is remapped onto the --st-* tokens,
   which carry darkened values in light mode and neon values in dark.
   ─────────────────────────────────────────────────────────────────── */

/* Tone helpers: one rule per status, driven by [data-tone]. */
[data-tone="info"]   { --tone: var(--st-info);   --tone-bg: var(--st-info-bg);   --tone-line: var(--st-info-line); }
[data-tone="warn"]   { --tone: var(--st-warn);   --tone-bg: var(--st-warn-bg);   --tone-line: var(--st-warn-line); }
[data-tone="ok"]     { --tone: var(--st-ok);     --tone-bg: var(--st-ok-bg);     --tone-line: var(--st-ok-line); }
[data-tone="violet"] { --tone: var(--st-violet); --tone-bg: var(--st-violet-bg); --tone-line: var(--st-violet-line); }

/* ── Card shell (inline styles removed from the renderer) ── */
.pstatus-card {
    border-radius: var(--p-r-lg) !important;
    padding: clamp(20px, 2.8vw, 26px) !important;
}

.pstatus-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pstatus-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--p-r-pill);
    font-size: .8rem;
    font-weight: 700;
    background: var(--tone-bg) !important;
    border: 1px solid var(--tone-line);
    color: var(--tone) !important;
}

.pstatus-tech {
    font-size: .78rem;
    color: var(--p-text-3);
    background: var(--p-panel);
    border: 1px solid var(--p-line);
    padding: 5px 11px;
    border-radius: var(--p-r-pill);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pstatus-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.pstatus-title {
    margin: 0;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    font-weight: 700;
    color: var(--p-text);
}

.pstatus-desc {
    color: var(--p-text-2);
    font-size: .92rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* Progress ring */
.pstatus-ring-track {
    stroke: var(--p-line);
}

.pstatus-ring-value {
    stroke: var(--tone, var(--p-cyan));
    transition: stroke-dashoffset 1s var(--p-ease);
}

.pstatus-ring-val {
    color: var(--p-text);
    font-weight: 700;
}

/* ── Filter tabs ──
   The renderer used to inline a background and inject a <style> block that
   forced a 20%-opacity tint with `color: #fff`, which vanished on the light
   theme. The active pill now uses the full-strength brand gradient. */
.pstatus-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: clamp(22px, 3vw, 32px);
    flex-wrap: wrap;
    justify-content: center;
}

.pstatus-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--p-r-pill);
    font-family: var(--p-font-display);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--p-panel);
    border: 1px solid var(--p-line);
    color: var(--p-text-2);
    transition: transform var(--p-t-fast), background var(--p-t-fast),
                border-color var(--p-t-fast), color var(--p-t-fast), box-shadow var(--p-t-fast);
}

.pstatus-tab:hover {
    background: var(--p-grad-soft);
    border-color: var(--p-line-hot);
    color: var(--p-text);
    transform: translateY(-2px);
}

.pstatus-tab.active {
    background: var(--p-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(59, 130, 246, .3);
}

.pstatus-tab-count {
    background: rgba(255, 255, 255, .2);
    border-radius: var(--p-r-pill);
    padding: 2px 8px;
    font-size: .72rem;
    font-weight: 700;
}

.pstatus-tab:not(.active) .pstatus-tab-count {
    background: var(--p-grad-soft);
    color: var(--p-text-2);
}

/* ── Task rows: readable body text on the tint ── */
.task-row,
.task-row.task-locked,
.task-row.task-done,
.pstatus-active-hero,
.pm-active-hero,
.pm-upcoming-card,
.pm-done-card {
    color: var(--st-on-tint) !important;
}

.task-row.task-locked,
.pm-upcoming-card {
    background: var(--st-warn-bg) !important;
    border-color: var(--st-warn-line) !important;
}

.pstatus-active-hero,
.pm-active-hero {
    background: var(--st-info-bg) !important;
    border-color: var(--st-info-line) !important;
}

.pm-done-card,
.task-row.task-done {
    background: var(--st-ok-bg) !important;
    border-color: var(--st-ok-line) !important;
}

.task-title {
    flex: 1;
    color: var(--st-on-tint);
}

/* main.css had `color: var(--blue)` here — a variable that is never
   defined anywhere, so the declaration dropped out and the label just
   inherited whatever the row set (white). The label sits on a warm tint,
   so it needs the on-tint colour, not the dim muted grey. */
.task-cat {
    color: var(--st-on-tint) !important;
    opacity: .72;
    font-weight: 700;
    font-size: .68rem;
}

.task-icon {
    color: var(--st-warn) !important;
}

.task-row.task-done .task-icon {
    color: var(--st-ok) !important;
}

/* Progress bar shimmer + percentage (previously in the injected <style>). */
.pstatus-progress-bar {
    position: relative;
    overflow: hidden;
}

.pstatus-progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-100%);
    animation: p-bar-shimmer 2.4s var(--p-ease-io) infinite;
}

@keyframes p-bar-shimmer {
    100% { transform: translateX(100%); }
}

.pstatus-pct {
    font-family: var(--p-font-display);
    font-weight: 800;
    background: var(--p-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Status badges ── */
.badge-active,
.pm-task-status-badge.badge-active {
    background: var(--st-info-bg) !important;
    border-color: var(--st-info-line) !important;
    color: var(--st-info) !important;
}

.badge-locked,
.pm-task-status-badge.badge-locked {
    background: var(--st-warn-bg) !important;
    border-color: var(--st-warn-line) !important;
    color: var(--st-warn) !important;
}

.badge-done,
.pm-task-status-badge.badge-done {
    background: var(--st-ok-bg) !important;
    border-color: var(--st-ok-line) !important;
    color: var(--st-ok) !important;
}

.pstatus-upcoming-label,
.pm-upcoming-title,
.pm-done-title,
.pm-active-label {
    color: var(--st-warn) !important;
}

.pm-active-label {
    color: var(--st-info) !important;
}

.pm-done-title {
    color: var(--st-ok) !important;
}

/* ── Chips ── */
.pstatus-chip-eta {
    background: var(--st-violet-bg) !important;
    border-color: var(--st-violet-line) !important;
    color: var(--st-violet) !important;
}

.pstatus-chip-priority {
    background: var(--st-warn-bg) !important;
    border-color: var(--st-warn-line) !important;
    color: var(--st-warn) !important;
}

.pstatus-chip-done,
.pstatus-chip-start,
.pstatus-history-item.is-start {
    background: var(--st-ok-bg) !important;
    border-color: var(--st-ok-line) !important;
    color: var(--st-ok) !important;
}

.premium-pct-badge.category-bar-val {
    color: var(--p-text-2) !important;
    border-color: var(--p-line) !important;
    background: var(--p-panel) !important;
}

/* ── Glass panels inside the board / modal ── */
.premium-glass-panel {
    background: var(--p-panel);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-sm);
    color: var(--p-text);
}

body.dark-theme .premium-glass-panel {
    box-shadow: var(--p-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Footer "all systems operational" pill needs the same treatment. */
.footer-status-badge {
    background: var(--st-ok-bg);
    border-color: var(--st-ok-line);
    color: var(--st-ok);
}

.footer-status-dot {
    background: var(--st-ok);
    box-shadow: 0 0 10px var(--st-ok);
}

/* Team card socials are <a> elements with no colour set, so they fell
   back to the browser default link blue on a dark card. */
.team-social,
.team-social:visited {
    color: var(--p-text-2);
}

.team-social:hover {
    color: var(--p-cyan);
}

/* ───────────────────────────────────────────────────────────────────
   21. RESPONSIVE — full ladder, 4K down to 320px
   ─────────────────────────────────────────────────────────────────── */

/* ≥1600px — widen the canvas on large displays */
@media (min-width: 1600px) {
    :root {
        --p-max: 1400px;
        --p-section-y: 148px;
    }
}

@media (min-width: 2200px) {
    :root {
        --p-max: 1560px;
    }
    html { font-size: 17.5px; }
}

/* ≤1200px */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr !important;
    }
    .footer-col:last-of-type {
        grid-column: 1 / -1;
    }
}

/* ≤1080px — tablet landscape: collapse two-column layouts */
@media (max-width: 1080px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: clamp(30px, 5vw, 46px);
    }
    .about-text .section-desc {
        max-width: none;
    }
    .about-img-box {
        max-width: 360px;
    }
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ≤1024px — the desktop→mobile nav switch.
   main.css already flips the navbar here; matching that breakpoint keeps
   the two layers in agreement (they disagreed at 992–1024 before). */
@media (max-width: 1024px) {
    .nav-links,
    .nav-auth {
        display: none !important;
    }
    .hamburger {
        display: flex !important;
    }
}

@media (max-width: 991px) {
    .hero-split-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-left-content {
        align-items: center;
    }
    .hero-title,
    .hero-tagline {
        text-align: center;
    }
    .hero-ctas,
    .hero-trust {
        justify-content: center;
    }
    .about-text {
        text-align: center;
    }
    .about-text .section-desc,
    .about-text .section-header {
        text-align: center;
        margin-inline: auto;
    }
    .about-text .section-label {
        margin-inline: auto;
    }
    .mvp-card {
        text-align: left;
    }
    .about-mvp {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* ≤840px */
@media (max-width: 840px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-col:last-of-type {
        grid-column: 1 / -1;
    }
}

/* ≤768px — phones landscape / small tablets */
@media (max-width: 768px) {
    :root {
        --p-nav-h: 64px;
    }

    .services-bento,
    .projects-grid,
    .team-grid,
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .contact-info {
        grid-template-columns: 1fr 1fr;
    }

    .hero-float-card {
        display: none;
    }

    .stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .stats-strip .stat-item + .stat-item::before {
        display: none;
    }

    .service-num {
        font-size: 2.6rem;
    }

    /* Tap targets: never smaller than 44px */
    .btn {
        min-height: 46px;
    }
    .btn-sm {
        min-height: 42px;
    }

    /* Hover-only affordances are noise on touch */
    .glass-card:hover,
    .p-card:hover,
    .project-card:hover,
    .team-card:hover {
        transform: none;
    }
}

/* ≤600px */
@media (max-width: 600px) {
    .services-bento,
    .projects-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .hero-trust-sep {
        display: none;
    }
    .hero-trust {
        gap: 20px 28px;
    }
}

/* ≤480px — mainstream phones */
@media (max-width: 480px) {
    :root {
        --p-gutter: 16px;
        --p-r: 14px;
        --p-r-lg: 18px;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    .section-label {
        letter-spacing: .16em;
        padding: 6px 13px;
    }

    .hero-ctas {
        width: 100%;
        flex-direction: column;
    }
    .hero-ctas .btn {
        width: 100%;
    }

    .team-card-stats {
        gap: 4px;
    }

    .about-float-badge {
        right: 0;
        bottom: 0;
        padding: 12px 16px;
    }
    .about-float-badge .number {
        font-size: 1.5rem;
    }

    #back-to-top {
        width: 44px;
        height: 44px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ≤360px — small/older phones, keeps everything legible */
@media (max-width: 360px) {
    html {
        font-size: 15px;
    }
    :root {
        --p-gutter: 13px;
    }
    .btn {
        padding-inline: 20px;
        font-size: .87rem;
    }
    .nav-logo span {
        font-size: .9rem;
    }
    .stats-strip {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

/* Short landscape phones — don't force a 100vh hero */
@media (max-height: 560px) and (orientation: landscape) {
    #hero {
        min-height: auto;
        padding-block: calc(var(--p-nav-h) + 28px) 48px;
    }
    .hero-scroll-hint {
        display: none;
    }
}

/* Touch / coarse pointers: no custom cursor, restore native one */
@media (hover: none), (pointer: coarse) {
    body,
    .btn,
    .hamburger,
    a,
    button {
        cursor: auto;
    }
    #cursor-dot,
    #cursor-ring {
        display: none !important;
    }
    /* remove sweep animations that can't be triggered without hover */
    .glass-card::after,
    .p-card::after,
    .btn::after {
        display: none;
    }
}

/* Fine pointers keep the custom cursor */
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: none;
    }
    a, button, .btn, .hamburger {
        cursor: none;
    }
}

/* ───────────────────────────────────────────────────────────────────
   22. REDUCED MOTION & PRINT
   ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .p-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .p-line-mask > span {
        transform: none !important;
    }
}

@media print {
    #navbar, .nav-mobile, #preloader, #back-to-top, .mob-tabbar,
    #cursor-dot, #cursor-ring, #scroll-progress, .orb,
    body::before, body::after {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}