/* =============================================================
   Aurum AI — v3 Styles
   Aurum Solutions Sdn Bhd
   Imports design tokens from colors_and_type.css
   ============================================================= */

@import url('colors_and_type.css');

/* Lucide icon sizing */
.lucide {
    width: 18px; height: 18px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
    vertical-align: middle;
}
.lucide-lg { width: 24px; height: 24px; }

/* Icon wrapper circles */
.icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--gold);
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
}
.icon-wrap.sm  { width: 32px; height: 32px; }
.icon-wrap.sm  .lucide { width: 14px; height: 14px; }
.icon-wrap.md  { width: 44px; height: 44px; }
.icon-wrap.md  .lucide { width: 20px; height: 20px; }
.icon-wrap.lg  { width: 56px; height: 56px; }
.icon-wrap.lg  .lucide { width: 26px; height: 26px; }

/* =============================================================
   CCTV VIEWER FRAME
   Premium frame that wraps detection screenshots (or animates
   beautifully empty). Reusable across capability cards, hero,
   and case-study sections.
   ============================================================= */

.cctv-viewer {
    width: 100%;
    margin-top: 18px;
    perspective: 800px;
}

.cctv-bezel {
    position: relative;
    background: linear-gradient(180deg, #141210 0%, #0A0A0A 100%);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 10px;
    padding: 8px 8px 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.cap-card:hover .cctv-bezel {
    border-color: rgba(201, 168, 76, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 14px 36px rgba(0, 0, 0, 0.65),
        0 0 32px rgba(201, 168, 76, 0.08);
}

/* Top status bar */
.cctv-statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 8px;
    font-family: var(--font-heading);
    font-size: 9.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.cctv-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--gold);
    font-weight: var(--fw-medium);
}
.cctv-live .pulse-dot {
    width: 5px; height: 5px;
    background: #ff3030;
    box-shadow: 0 0 6px rgba(255, 48, 48, 0.8);
}
.cctv-cam-id {
    color: rgba(255, 255, 255, 0.42);
}
.cctv-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
}
.cctv-ai-badge {
    background: var(--gold);
    color: var(--black);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 8.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.2px;
}

/* Screen area */
.cctv-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 5px;
    overflow: hidden;
    background: #0A0A0A;
    isolation: isolate;
}

/* Feed: either an <img> or the empty-state synthetic feed */
.cctv-feed {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cctv-feed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(0.85);
}

/* Empty state — synthetic "surveillance feed" so the frame looks
   alive even when no real screenshot is slotted in yet. */
.cctv-feed-empty {
    background:
        radial-gradient(ellipse at 50% 60%, rgba(201, 168, 76, 0.06) 0%, transparent 65%),
        linear-gradient(135deg, #0a0a0a 0%, #0A0A0A 100%);
}
.cctv-feed-empty::before {
    /* faint perspective grid — "warehouse floor" hint */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: center 70%;
    mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
    transform: perspective(400px) rotateX(55deg) translateY(20%);
    transform-origin: center bottom;
    opacity: 0.55;
}
.cctv-feed-empty::after {
    /* subtle noise / static dust */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: screen;
    opacity: 0.7;
}

/* Scanlines overlay (sits above feed, below bbox) */
.cctv-scanlines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.18) 0px,
        rgba(0, 0, 0, 0.18) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.55;
}
.cctv-scanlines::after {
    /* slow gold sweep */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(201, 168, 76, 0.08) 48%,
        rgba(201, 168, 76, 0.14) 50%,
        rgba(201, 168, 76, 0.08) 52%,
        transparent 100%
    );
    transform: translateY(-100%);
    animation: cctv-sweep 6s linear infinite;
}
@keyframes cctv-sweep {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}
.cap-card:hover .cctv-scanlines::after {
    animation-duration: 2.4s;
}

/* Vignette + edge glow */
.cctv-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 8%);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.8);
}

/* AI bounding box — corner brackets, not full borders.
   Animations only fire when the parent .cap-card receives .show
   from the scroll-reveal observer. Sequence: scanner sweep →
   corners snap in (TL/TR/BL/BR staggered) → label slides up →
   steady pulse takes over. */
.cctv-bbox {
    position: absolute;
    z-index: 3;
    /* default position; per-card variants nudge this */
    left: 28%;
    top: 22%;
    width: 44%;
    height: 50%;
    pointer-events: none;
}

/* Scanner sweep — gold horizontal line travelling top→bottom
   before the AI "locks on". */
.cctv-scanner {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.cctv-scanner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 168, 76, 0.5) 30%,
        var(--gold) 50%,
        rgba(201, 168, 76, 0.5) 70%,
        transparent 100%);
    box-shadow:
        0 0 14px rgba(201, 168, 76, 0.7),
        0 0 28px rgba(201, 168, 76, 0.35);
    opacity: 0;
}
.cctv-scanner::after {
    /* trailing glow tint as the line passes */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(201, 168, 76, 0.06) 45%,
        rgba(201, 168, 76, 0.10) 50%,
        rgba(201, 168, 76, 0.06) 55%,
        transparent 100%);
    transform: translateY(-100%);
    opacity: 0;
}

/* Corner brackets — hidden by default, fire individually on .show */
.cctv-bbox-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--gold);
    filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.6));
    opacity: 0;
}
.cctv-bbox-corner.tl { top: 0;    left: 0;    border-right: none;  border-bottom: none; transform-origin: top left; }
.cctv-bbox-corner.tr { top: 0;    right: 0;   border-left: none;   border-bottom: none; transform-origin: top right; }
.cctv-bbox-corner.bl { bottom: 0; left: 0;    border-right: none;  border-top: none;    transform-origin: bottom left; }
.cctv-bbox-corner.br { bottom: 0; right: 0;   border-left: none;   border-top: none;    transform-origin: bottom right; }

/* Label — hidden by default */
.cctv-bbox-label {
    position: absolute;
    top: -10px;
    left: 0;
    transform: translateY(-100%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: var(--gold);
    color: var(--black);
    font-family: var(--font-heading);
    font-size: 9.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35);
    white-space: nowrap;
    opacity: 0;
}
.cctv-bbox-label .lucide {
    width: 10px; height: 10px;
    stroke-width: 2.5;
}

/* === SCROLL-LOCKED LOCK-ON SEQUENCE ===
   Triggered by .cap-card.show (added by IntersectionObserver in main.js).
   Total choreography: ~2.4s from scanner start to label settled.
*/

/* 1. Scanner line travels down (0.3s → 1.5s) */
.cap-card.show .cctv-scanner::before {
    animation: cctv-scan-line 1.2s linear 0.3s both;
}
.cap-card.show .cctv-scanner::after {
    animation: cctv-scan-glow 1.2s linear 0.3s both;
}
@keyframes cctv-scan-line {
    0%   { top: -2px;  opacity: 0; }
    8%   {             opacity: 1; }
    92%  {             opacity: 1; }
    100% { top: 100%;  opacity: 0; }
}
@keyframes cctv-scan-glow {
    0%   { transform: translateY(-100%); opacity: 0; }
    20%  {                                opacity: 1; }
    80%  {                                opacity: 1; }
    100% { transform: translateY(100%);  opacity: 0; }
}

/* 2. Corner brackets snap in one by one (1.5s → 1.9s) */
.cap-card.show .cctv-bbox-corner.tl { animation: cctv-corner-in 0.30s var(--ease-soft) 1.50s both; }
.cap-card.show .cctv-bbox-corner.tr { animation: cctv-corner-in 0.30s var(--ease-soft) 1.60s both; }
.cap-card.show .cctv-bbox-corner.bl { animation: cctv-corner-in 0.30s var(--ease-soft) 1.70s both; }
.cap-card.show .cctv-bbox-corner.br { animation: cctv-corner-in 0.30s var(--ease-soft) 1.80s both; }
@keyframes cctv-corner-in {
    0%   { opacity: 0; transform: scale(2.4); filter: drop-shadow(0 0 14px rgba(201, 168, 76, 1)); }
    55%  { opacity: 1; transform: scale(0.82); filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.9)); }
    100% { opacity: 1; transform: scale(1);    filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.6)); }
}

/* 3. Label slides up + fades in, then settles into the pulse (2.0s+) */
.cap-card.show .cctv-bbox-label {
    animation:
        cctv-label-in 0.45s var(--ease-soft) 2.00s both,
        cctv-label-pulse 2.6s ease-in-out 2.45s infinite;
}
@keyframes cctv-label-in {
    0%   { opacity: 0; transform: translateY(-92%); }
    100% { opacity: 1; transform: translateY(-100%); }
}
@keyframes cctv-label-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35); }
    50%      { box-shadow: 0 4px 22px rgba(201, 168, 76, 0.65); }
}

/* Reduced-motion fallback — show the lock-on state immediately, no animation */
@media (prefers-reduced-motion: reduce) {
    .cap-card .cctv-bbox-corner,
    .cap-card .cctv-bbox-label { opacity: 1; }
    .cap-card .cctv-bbox-label { transform: translateY(-100%); }
    .cap-card .cctv-scanner { display: none; }
}

/* Per-card bbox position variants — tuned to frame the real subject in
   each capability image. Each `top` is kept >= 28% so the floating label
   (which sits 10px above the bbox) never clips off the viewer's top edge. */
.cctv-viewer--v1 .cctv-bbox { left: 24%; top: 16%; width: 22%; height: 38%; } /* Smoking — tight on face + cigarette (label below) */
.cctv-viewer--v2 .cctv-bbox { left: 44%; top: 45%; width: 36%; height: 45%; } /* Sleep — guard slumped (nudged left) */
.cctv-viewer--v3 .cctv-bbox { left: 24%; top: 15%; width: 26%; height: 55%; } /* Phone — worker (up + left, label below) */

/* For viewers where the bbox sits very high, place the label BELOW the box
   instead of above so the wording never clips off the top of the viewer. */
.cctv-viewer--v1 .cctv-bbox-label,
.cctv-viewer--v3 .cctv-bbox-label {
    top: auto;
    bottom: -10px;
    transform: translateY(100%);
}
.cap-card.show .cctv-viewer--v1 .cctv-bbox-label,
.cap-card.show .cctv-viewer--v3 .cctv-bbox-label {
    animation:
        cctv-label-in-bottom 0.45s var(--ease-soft) 2.00s both,
        cctv-label-pulse 2.6s ease-in-out 2.45s infinite;
}
@keyframes cctv-label-in-bottom {
    0%   { opacity: 0; transform: translateY(92%); }
    100% { opacity: 1; transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .cctv-viewer--v1 .cctv-bbox-label,
    .cctv-viewer--v3 .cctv-bbox-label { transform: translateY(100%); }
}
.cctv-viewer--v4 .cctv-bbox { left: 26%; top: 41%; width: 38%; height: 38%; } /* Fall — centered on fallen person */
.cctv-viewer--v5 .cctv-bbox { left: 35%; top: 40%; width: 30%; height: 50%; } /* Fire — electrical cabinet mid */
.cctv-viewer--v6 .cctv-bbox { left: 15%; top: 50%; width: 48%; height: 42%; } /* Absence — empty desk area */

/* Aurum AI watermark */
.cctv-watermark {
    position: absolute;
    bottom: 8px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.cctv-watermark .pulse-dot {
    width: 4px; height: 4px;
}

/* Slightly smaller status bar font on small viewers */
@media (max-width: 600px) {
    .cctv-statusbar { font-size: 9px; gap: 8px; padding: 6px 8px; }
    .cctv-bbox-corner { width: 11px; height: 11px; }
    .cctv-bbox-label { font-size: 8.5px; padding: 3px 6px; }
}


/* =============================================================
   GLASS CARD
   ============================================================= */

.glass-card {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: border-color var(--ease), box-shadow var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    overflow: hidden;
}
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
    opacity: 0;
    transition: opacity var(--ease);
}
.glass-card:hover {
    border-color: rgba(201, 168, 76, 0.28);
    box-shadow: 0 12px 48px rgba(201, 168, 76, 0.06), 0 0 0 1px rgba(201, 168, 76, 0.08);
}
.glass-card:hover::before { opacity: 1; }

/* Card icon */
.card-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--gold);
}
.card-icon { width: 22px; height: 22px; }
.glass-card h3 {
    font-size: var(--fs-h3);
    margin-bottom: 10px;
    color: var(--white);
}
.glass-card p {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
}


/* =============================================================
   NAVIGATION
   ============================================================= */

.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 20px 0;
    transition: background var(--ease), padding var(--ease), border-color var(--ease);
    border-bottom: 1px solid transparent;
}
.site-nav.scrolled {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: var(--blur-nav);
    -webkit-backdrop-filter: var(--blur-nav);
    padding: 14px 0;
    border-bottom-color: var(--glass-border);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0; padding: 0;
}
.nav-links a {
    color: var(--text-soft);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    padding: 8px 14px;
    border-radius: var(--radius);
    transition: color var(--ease), background var(--ease);
    white-space: nowrap; /* v4.3 rev3: prevent "How It Works" wrapping in tight nav */
}
.nav-links a:hover { color: var(--white); background: var(--gold-faint); }
.nav-links .nav-cta {
    background: var(--gold);
    color: var(--black);
    font-weight: var(--fw-medium);
    padding: 9px 18px;
}
.nav-links .nav-cta:hover { opacity: 0.88; background: var(--gold); }
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.burger span {
    display: block;
    width: 22px; height: 1.5px;
    background: var(--white);
    border-radius: 2px;
    transition: transform var(--ease), opacity var(--ease);
}


/* =============================================================
   HERO
   2-column layout: text left, 3D camera visual right.
   ============================================================= */

#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

/* =============================================================
   v4.12 HIGGSFIELD VIDEO BACKGROUND
   Video sits at z-index -1 (behind everything).
   Overlay at z-index 0 dims it for text readability.
   Particle canvas and all content layers remain above.
   Respects prefers-reduced-motion: video pauses via JS.
============================================================= */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    pointer-events: none;
    /* Fade in once loaded so there's no flash */
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-video-bg.is-loaded {
    opacity: 1;
}

/* Dark overlay on top of the video — keeps text readable
   Adjust the alpha (0.60) lighter/darker to taste.
   Lower = more video visible. Higher = more contrast for text. */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(10, 10, 10, 0.60);
    pointer-events: none;
}

/* Faint grid pattern across hero background */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
    opacity: 0.9;
}

/* Soft gold radial glow on right side, behind the 3D visual */
.hero-glow {
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%);
    width: 820px;
    height: 820px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.18) 0%, rgba(201, 168, 76, 0.06) 35%, transparent 65%);
    filter: blur(20px);
}

/* Gradient fade to next section */
.hero-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent, var(--black));
    z-index: 1;
    pointer-events: none;
}

/* 2-column grid */
.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-content {
    max-width: 600px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    margin-bottom: 28px;
}

.hero-title {
    color: var(--white);
    margin-bottom: 24px;
    line-height: 1.08;
}

.hero-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.65;
    color: var(--text-soft);
    margin-bottom: 36px;
    max-width: 540px;
}

.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 52px;
}

.hero-trust {
    border-top: 1px solid var(--glass-border);
    padding-top: 24px;
}

/* RIGHT column — Live Monitor (4-camera mosaic) */
.hero-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
}

.hero-monitor {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #141210 0%, #0A0A0A 100%);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 24px 60px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(201, 168, 76, 0.22);
    animation: heroFloat 6s ease-in-out infinite;
    z-index: 2;
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* Header bar */
.hero-monitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 6px 12px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.12);
    margin-bottom: 12px;
}
.hero-monitor-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--white);
}
.hero-monitor-title .pulse-dot {
    width: 6px; height: 6px;
    background: #ff3030;
    box-shadow: 0 0 8px rgba(255, 48, 48, 0.8);
}
.hero-monitor-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.hero-monitor-ai-badge {
    background: var(--gold);
    color: var(--black);
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.2px;
}

/* Mosaic grid */
.hero-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Individual camera tile */
.hero-tile {
    position: relative;
    background: #0A0A0A;
    border: 1px solid rgba(201, 168, 76, 0.10);
    border-radius: 6px;
    overflow: hidden;
    padding-top: 22px;
    transition: border-color 0.4s ease;
}
.hero-tile-label {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.4));
    font-family: var(--font-heading);
    font-size: 8.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.hero-tile-label .pulse-dot {
    width: 4px; height: 4px;
    background: var(--gold);
}
.hero-tile-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    isolation: isolate;
}

/* Synthetic feed for each tile — varied so they don't look identical */
.hero-tile-feed {
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* Real video feed sits underneath the synthetic grid/noise overlays so the
   pseudo-element CCTV grain still tints the footage. */
.hero-tile-feed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: contrast(1.05) saturate(0.85);
}
.hero-tile-feed::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center 70%;
    mask-image: linear-gradient(180deg, transparent 0%, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 55%, transparent 100%);
    transform: perspective(300px) rotateX(58deg) translateY(18%);
    transform-origin: center bottom;
    opacity: 0.55;
}
.hero-tile-feed::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    mix-blend-mode: screen;
    opacity: 0.6;
}
/* Vary backgrounds per tile so the 4 feeds don't look identical */
.hero-tile--1 .hero-tile-feed { background: radial-gradient(ellipse at 35% 65%, rgba(201,168,76,0.07), transparent 60%), linear-gradient(135deg, #0a0a0a, #0A0A0A); }
.hero-tile--2 .hero-tile-feed { background: radial-gradient(ellipse at 65% 60%, rgba(201,168,76,0.05), transparent 60%), linear-gradient(160deg, #0a0a0a, #0A0A0A); }
.hero-tile--3 .hero-tile-feed { background: radial-gradient(ellipse at 45% 55%, rgba(201,168,76,0.08), transparent 65%), linear-gradient(120deg, #141210, #0A0A0A); }
.hero-tile--4 .hero-tile-feed { background: radial-gradient(ellipse at 55% 70%, rgba(201,168,76,0.06), transparent 60%), linear-gradient(145deg, #141210, #0A0A0A); }

/* Per-tile scanlines (dim by default, bright when active) */
.hero-tile-scanlines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(0,0,0,0.18) 0px,
        rgba(0,0,0,0.18) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.5;
}
.hero-tile-screen::after {
    /* vignette per tile */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.7);
}

/* Bounding box — hidden by default, fires only on active tile */
.hero-tile-bbox {
    position: absolute;
    z-index: 3;
    left: 24%; top: 22%; width: 50%; height: 52%;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.92);
}
.hero-tile--1 .hero-tile-bbox { left: 18%; top: 28%; width: 50%; height: 46%; }
.hero-tile--2 .hero-tile-bbox { left: 36%; top: 20%; width: 44%; height: 56%; }
.hero-tile--3 .hero-tile-bbox { left: 28%; top: 26%; width: 46%; height: 50%; }
.hero-tile--4 .hero-tile-bbox { left: 14%; top: 32%; width: 52%; height: 46%; }

.hero-tile .cctv-bbox-corner {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid var(--gold);
    filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.7));
}
.hero-tile .cctv-bbox-corner.tl { top: 0;    left: 0;    border-right: none;  border-bottom: none; }
.hero-tile .cctv-bbox-corner.tr { top: 0;    right: 0;   border-left: none;   border-bottom: none; }
.hero-tile .cctv-bbox-corner.bl { bottom: 0; left: 0;    border-right: none;  border-top: none; }
.hero-tile .cctv-bbox-corner.br { bottom: 0; right: 0;   border-left: none;   border-top: none; }

.hero-tile-bbox-label {
    position: absolute;
    top: -8px;
    left: 0;
    transform: translateY(-100%);
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    background: var(--gold);
    color: var(--black);
    font-family: var(--font-heading);
    font-size: 8.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(201, 168, 76, 0.4);
    white-space: nowrap;
}

/* The detection sequence — each tile fires for ~2.5s on a 10s loop */
@keyframes hero-tile-fire {
    0%   { opacity: 0; transform: scale(0.88); }
    6%   { opacity: 1; transform: scale(1); }
    24%  { opacity: 1; transform: scale(1); }
    30%  { opacity: 0; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(0.88); }
}
@keyframes hero-tile-active {
    0%, 100% { border-color: rgba(201,168,76,0.10); box-shadow: none; }
    6%, 24%  { border-color: var(--gold); box-shadow: 0 0 18px rgba(201,168,76,0.30), inset 0 0 8px rgba(201,168,76,0.10); }
    30%      { border-color: rgba(201,168,76,0.10); box-shadow: none; }
}
@keyframes hero-tile-sweep {
    0%, 30%, 100% { opacity: 0.5; }
    6%, 24%       { opacity: 0.9; }
}

.hero-tile-bbox      { animation: hero-tile-fire  10s linear infinite; }
.hero-tile           { animation: hero-tile-active 10s linear infinite; }
.hero-tile-scanlines { animation: hero-tile-sweep 10s linear infinite; }

.hero-tile--1 .hero-tile-bbox,
.hero-tile--1,
.hero-tile--1 .hero-tile-scanlines { animation-delay: 0s; }

.hero-tile--2 .hero-tile-bbox,
.hero-tile--2,
.hero-tile--2 .hero-tile-scanlines { animation-delay: 2.5s; }

.hero-tile--3 .hero-tile-bbox,
.hero-tile--3,
.hero-tile--3 .hero-tile-scanlines { animation-delay: 5s; }

.hero-tile--4 .hero-tile-bbox,
.hero-tile--4,
.hero-tile--4 .hero-tile-scanlines { animation-delay: 7.5s; }

/* Footer */
.hero-monitor-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 6px 4px;
    margin-top: 12px;
    border-top: 1px solid rgba(201, 168, 76, 0.12);
}
.hero-monitor-stat-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hero-monitor-stat-block--right { align-items: flex-end; text-align: right; }
.hero-monitor-stat-label {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.hero-monitor-stat {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 24px;
    letter-spacing: 0.5px;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}
.hero-monitor-stat--sm { font-size: 18px; color: var(--white); text-shadow: none; }

/* Soft ambient pulse rings — under the monitor */
.hero-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: pulseRing 4.5s ease-out infinite;
}
.hero-pulse-ring.r2 { animation-delay: 2.2s; }
@keyframes pulseRing {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.4); }
    10%  { opacity: 0.35; }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(4); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-monitor,
    .hero-pulse-ring,
    .hero-tile-bbox,
    .hero-tile,
    .hero-tile-scanlines { animation: none; }
    .hero-tile-bbox { opacity: 1; transform: scale(1); }
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .hero-monitor { padding: 10px; }
    .hero-monitor-title { font-size: 11px; }
    .hero-monitor-meta { font-size: 9px; }
    .hero-monitor-stat { font-size: 20px; }
    .hero-tile-label { font-size: 8px; }
    .hero-tile-bbox-label { font-size: 8px; padding: 2px 6px; }
}

/* Tablet / mobile — stack vertically, smaller canvas */
@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-top: 110px;
        padding-bottom: 64px;
    }
    .hero-content { max-width: 100%; order: 1; }
    .hero-visual {
        order: 2;
        max-width: 420px;
        margin: 0 auto;
    }
    .hero-glow { right: 50%; transform: translate(50%, -50%); width: 500px; height: 500px; }
}
.trust-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    color: var(--text-soft);
}


/* =============================================================
   SECTION HEADER (reused)
   ============================================================= */

.sec-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 64px;
}
.sec-header h2 { margin: 12px 0 16px; }
.sec-header p { font-size: var(--fs-body-md); }


/* =============================================================
   PROBLEM
   ============================================================= */

#problem { background: var(--surface); }

.prob-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

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


/* =============================================================
   SOLUTION
   ============================================================= */

.sol-layout { display: flex; flex-direction: column; gap: 56px; }
.sol-header { max-width: 560px; }
.sol-header h2 { margin: 12px 0 14px; }

.sol-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pillar-card {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--ease), transform var(--ease);
}
.pillar-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0.5;
}
.pillar-card:hover {
    border-color: var(--gold-border);
    transform: var(--lift-md);
}
.pillar-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: var(--fw-medium);
    color: rgba(201, 168, 76, 0.15);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -2px;
}
.pillar-card h3 { margin-bottom: 10px; font-size: 18px; }
.pillar-card p  { font-size: var(--fs-body-sm); }

.sol-stats {
    display: block;
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-xl);
    padding: 24px 40px 28px;
    overflow: hidden;
}
.stat-block {
    flex: 1;
    text-align: center;
    padding: 8px 16px;
}
.stat-val {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: var(--fw-medium);
    color: var(--gold);
    line-height: 1;
    margin-bottom: 8px;
}
.stat-lbl {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}
.stat-divider {
    width: 1px;
    height: 48px;
    background: var(--glass-border);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .sol-pillars { grid-template-columns: 1fr; }
    .sol-stats { flex-wrap: wrap; gap: 24px; padding: 28px 24px; }
    .stat-block { min-width: 40%; }
    .stat-divider { display: none; }
}


/* =============================================================
   CAPABILITIES
   ============================================================= */

#capabilities { background: var(--surface); }

.cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.cap-card {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: border-color var(--ease), box-shadow var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
    overflow: hidden;
    /* Flex column so CCTV viewer sits at the bottom and all cards line up */
    display: flex;
    flex-direction: column;
    text-align: center;
}
.cap-card:hover {
    border-color: rgba(201, 168, 76, 0.3);
    box-shadow: 0 8px 40px rgba(201, 168, 76, 0.07);
}
.cap-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    margin: 0 auto 18px;
    color: var(--gold);
}
.cap-icon { width: 28px; height: 28px; }
.cap-card h3 { margin-bottom: 8px; font-size: 17px; }
.cap-card > p { font-size: var(--fs-body-sm); margin-bottom: 0; }
/* Push viewer to the bottom so all 6 cards align across the grid row */
.cap-card .cctv-viewer { margin-top: auto; }

@media (max-width: 900px)  { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cap-grid { grid-template-columns: 1fr; } }


/* =============================================================
   HOW IT WORKS
   ============================================================= */

.flow-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: 8px;
}
.flow-step {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    text-align: center;
    transition: border-color var(--ease), transform var(--ease);
    position: relative;
}
.flow-step:hover {
    border-color: var(--gold-border);
    transform: var(--lift-md);
}
.flow-num {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--gold);
    margin-bottom: 14px;
    text-transform: uppercase;
}
.flow-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    border-radius: 50%;
    margin: 0 auto 14px;
    color: var(--gold);
}
.flow-icon { width: 22px; height: 22px; }
.flow-step h3 { font-size: 15px; margin-bottom: 8px; }
.flow-step p  { font-size: 13px; line-height: 1.55; }

.flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201, 168, 76, 0.3);
    padding-top: 60px;
    flex-shrink: 0;
}
.flow-arrow .lucide { width: 20px; height: 20px; }

@media (max-width: 1100px) {
    .flow-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
    .flow-arrow {
        padding-top: 0;
        transform: rotate(90deg);
        justify-content: center;
        height: 32px;
    }
}


/* =============================================================
   ARCHITECTURE
   ============================================================= */

#architecture { background: var(--surface); }

.arch-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}
.arch-text h2 { margin: 12px 0 16px; }
.arch-text > p { margin-bottom: 40px; }
.arch-pts { display: flex; flex-direction: column; gap: 28px; }
.arch-pt {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.arch-pt h4 { margin-bottom: 4px; color: var(--white); }
.arch-pt p  { font-size: var(--fs-body-sm); }

.arch-visual {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-xl);
    padding: 36px;
}
.compat-pill {
    display: inline-block;
    background: var(--gold-subtle);
    border: var(--border-default);
    color: var(--gold);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.arch-visual h3 { margin-bottom: 10px; }
.arch-visual > p { font-size: var(--fs-body-sm); margin-bottom: 20px; }
.compat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ctag {
    background: var(--surface);
    border: 1px solid rgba(201, 168, 76, 0.15);
    color: var(--text-soft);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    transition: border-color var(--ease), color var(--ease);
}
.ctag:hover { border-color: var(--gold-border); color: var(--gold); }

@media (max-width: 900px) {
    .arch-layout { grid-template-columns: 1fr; gap: 40px; }
}


/* =============================================================
   INDUSTRIES
   ============================================================= */

.ind-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ind-card {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--ease), box-shadow var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
}
.ind-card:hover {
    border-color: var(--gold-border);
    box-shadow: 0 12px 48px rgba(201, 168, 76, 0.07);
}
.ind-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ind-body h3 { font-size: 17px; color: var(--white); margin: 0; }
.ind-body p  { font-size: var(--fs-body-sm); }

@media (max-width: 900px) { .ind-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }


/* =============================================================
   TRUST
   ============================================================= */

#trust { background: var(--surface); }

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
.trust-card {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 36px;
    transition: border-color var(--ease), box-shadow var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    overflow: hidden;
}
.trust-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.trust-card:hover {
    border-color: var(--gold-border);
    box-shadow: 0 12px 48px rgba(201, 168, 76, 0.07);
}
.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--gold-subtle);
    border: var(--border-default);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    color: var(--gold);
    margin-bottom: 18px;
}
.trust-pill-dot {
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.trust-card h3 { margin-bottom: 12px; }
.trust-card p  { font-size: var(--fs-body-sm); line-height: var(--lh-snug); }

.partners { text-align: center; }
.partners-lbl {
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.partners-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.partner-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    color: var(--text-soft);
}
.partner-chip-dot {
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0.7;
}

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


/* =============================================================
   CONTACT
   ============================================================= */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 72px;
    align-items: start;
}
.contact-left h3 { margin-bottom: 10px; }
.contact-left > p { margin-bottom: 36px; }
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.contact-info { display: flex; flex-direction: column; gap: 3px; }
.contact-lbl {
    font-family: var(--font-heading);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label-sm);
    text-transform: uppercase;
    color: var(--text-muted);
}
.contact-info a {
    color: var(--gold);
    text-decoration: none;
    font-size: var(--fs-body-sm);
    transition: opacity var(--ease);
}
.contact-info a:hover { opacity: 0.75; }
.contact-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Form */
.contact-form {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-xl);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-grp {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-grp label {
    font-family: var(--font-heading);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label-sm);
    text-transform: uppercase;
    color: var(--text-muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--radius);
    padding: 12px 15px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    outline: none;
    transition: border-color var(--ease);
    width: 100%;
    box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--gold); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-muted-dim); }
.contact-form select { appearance: none; cursor: pointer; }
.contact-form select option { background: var(--surface); }

.contact-form-status {
    margin: 0 0 16px;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    min-height: 1.5em;
}
.contact-form-status.is-success { color: #6dd68a; }
.contact-form-status.is-error { color: #f08080; }
.contact-form button[type="submit"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 48px; }
}


/* =============================================================
   FOOTER
   ============================================================= */

footer {
    background: var(--surface);
    border-top: var(--border-glass);
    padding: 48px 0;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
.footer-left { display: flex; flex-direction: column; gap: 16px; }
.footer-addr {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    line-height: 1.8;
}
.footer-addr a { color: var(--text-muted); text-decoration: none; transition: color var(--ease); }
.footer-addr a:hover { color: var(--gold); }
.footer-right { text-align: right; display: flex; flex-direction: column; gap: 6px; }
.footer-right p { font-size: var(--fs-caption); color: var(--text-muted); }
.footer-sub { font-size: var(--fs-micro) !important; opacity: 0.6; }

@media (max-width: 700px) {
    .footer-inner { flex-direction: column; }
    .footer-right { text-align: left; }
}


/* =============================================================
   WHATSAPP FLOAT
   ============================================================= */

.wa-float {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 52px; height: 52px;
    background: var(--whatsapp);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    box-shadow: var(--glow-whatsapp);
    transition: transform var(--ease), box-shadow var(--ease);
}
.wa-float svg { width: 26px; height: 26px; fill: #fff; }
.wa-float:hover {
    transform: scale(1.1);
    box-shadow: var(--glow-whatsapp-hover);
}


/* =============================================================
   MOBILE RESPONSIVE — NAV
   ============================================================= */

@media (max-width: 860px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(10, 10, 10, 0.97);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        z-index: 99;
    }
    .nav-links.open { display: flex; }
    .nav-links a { font-size: 20px; padding: 12px 24px; }
    .burger { display: flex; z-index: 100; }
    .burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .burger.open span:nth-child(2) { opacity: 0; }
    .burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}


/* =============================================================
   AURUM AI DASHBOARD MOCKUP
   Live operations console — sales-ready screenshot replacement.
   Sits below "How It Works" where the dashboard placeholder was.
   ============================================================= */

.ap-dashboard {
    width: 100%;
    max-width: 1000px;
    margin: 64px auto 0;
    background: linear-gradient(180deg, #141210 0%, #0A0A0A 100%);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(201, 168, 76, 0.08);
}

/* Header */
.ap-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.12);
    background: rgba(0, 0, 0, 0.4);
}
.ap-dash-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--white);
}
.ap-dash-title .pulse-dot {
    width: 7px; height: 7px;
    background: #ff3030;
    box-shadow: 0 0 8px rgba(255, 48, 48, 0.8);
}
.ap-dash-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.ap-dash-meta-divider {
    width: 1px; height: 12px;
    background: rgba(255, 255, 255, 0.12);
}
.ap-dash-ai-badge {
    background: var(--gold);
    color: var(--black);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.2px;
}

/* Body: left sidebar (summary) + main (alert feed) */
.ap-dash-body {
    display: grid;
    grid-template-columns: 200px 1fr;
}

/* Sidebar */
.ap-dash-side {
    padding: 22px 18px;
    border-right: 1px solid rgba(201, 168, 76, 0.10);
    background: rgba(0, 0, 0, 0.25);
}
.ap-dash-side-eyebrow {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 18px;
}
.ap-dash-stat {
    margin-bottom: 18px;
}
.ap-dash-stat:last-child { margin-bottom: 0; }
.ap-dash-stat-label {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
}
.ap-dash-stat-val {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 22px;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.3);
}
.ap-dash-stat-val.is-muted { color: var(--white); text-shadow: none; }

/* Main: alert feed */
.ap-dash-main { padding: 18px 20px; }
.ap-dash-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.ap-dash-main-title {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.ap-dash-filter {
    font-family: var(--font-heading);
    font-size: 9.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(201, 168, 76, 0.25);
    padding: 3px 10px;
    border-radius: 100px;
}

.ap-dash-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ap-dash-row {
    display: grid;
    grid-template-columns: 56px 1.6fr 0.9fr 0.6fr 0.7fr 0.9fr;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(201, 168, 76, 0.06);
    border-radius: 6px;
    transition: background var(--ease), border-color var(--ease);
}
.ap-dash-row:hover {
    background: rgba(201, 168, 76, 0.04);
    border-color: rgba(201, 168, 76, 0.18);
}
.ap-dash-row.is-active {
    background: rgba(201, 168, 76, 0.06);
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(201, 168, 76, 0.15);
}

/* Row thumbnail (mini CCTV frame) */
.ap-dash-thumb {
    position: relative;
    width: 56px;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #0a0a0a, #0A0A0A);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 4px;
    overflow: hidden;
}
.ap-dash-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.06) 1px, transparent 1px);
    background-size: 8px 8px;
    mask-image: linear-gradient(180deg, transparent 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 60%, transparent 100%);
    transform: perspective(120px) rotateX(58deg) translateY(20%);
    transform-origin: center bottom;
    opacity: 0.6;
}
.ap-dash-thumb::after {
    content: "";
    position: absolute;
    inset: 22% 30% 22% 30%;
    border: 1.5px solid var(--gold);
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.55);
}

/* Row text columns */
.ap-dash-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 12.5px;
    color: var(--white);
}
.ap-dash-sev {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ap-dash-sev.is-high  { background: #ff5a3c; box-shadow: 0 0 6px rgba(255, 90, 60, 0.7); }
.ap-dash-sev.is-med   { background: var(--gold); box-shadow: 0 0 6px rgba(201, 168, 76, 0.6); }
.ap-dash-sev.is-low   { background: #c0c0c0; opacity: 0.6; }

.ap-dash-cell {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}
.ap-dash-conf {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 11.5px;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* Status pills */
.ap-dash-pill {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    padding: 3px 9px;
    border-radius: 100px;
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ap-dash-pill.is-pending  { background: rgba(201, 168, 76, 0.12); color: var(--gold); border: 1px solid rgba(201, 168, 76, 0.35); }
.ap-dash-pill.is-verified { background: rgba(37, 211, 102, 0.10); color: #4dd383; border: 1px solid rgba(37, 211, 102, 0.32); }
.ap-dash-pill.is-dismissed{ background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.10); }

@media (max-width: 800px) {
    .ap-dash-body { grid-template-columns: 1fr; }
    .ap-dash-side { display: flex; flex-wrap: wrap; gap: 20px; border-right: none; border-bottom: 1px solid rgba(201, 168, 76, 0.10); padding: 16px; }
    .ap-dash-side-eyebrow { width: 100%; margin-bottom: 0; }
    .ap-dash-stat { margin-bottom: 0; }
    .ap-dash-row { grid-template-columns: 48px 1fr auto; row-gap: 4px; }
    .ap-dash-row > .ap-dash-cell:nth-of-type(2),
    .ap-dash-row > .ap-dash-cell:nth-of-type(3) { display: none; }
}


/* =============================================================
   ARCHITECTURE DIAGRAM (CSS/SVG)
   Shows: cameras → Edge AI → outputs,
   all inside "Your Premises" boundary. Cloud node sits outside,
   crossed out. Gold "signal" dots flow along connector lines.
   ============================================================= */

.ap-arch {
    position: relative;
    margin-top: 24px;
    padding: 22px 18px 28px;
    background: rgba(255, 255, 255, 0.015);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(201, 168, 76, 0.10);
}
.ap-arch-boundary {
    position: relative;
    border: 1.5px dashed rgba(201, 168, 76, 0.35);
    border-radius: 12px;
    padding: 28px 16px 20px;
}
.ap-arch-boundary-label {
    position: absolute;
    top: 0;
    left: 18px;
    transform: translateY(-50%);
    background: var(--surface);
    padding: 2px 10px;
    font-family: var(--font-heading);
    font-size: 9.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold);
}
#architecture .ap-arch-boundary-label { background: var(--black); }

.ap-arch-grid {
    position: relative;          /* anchor for SVG connector overlay */
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items: center;
    gap: 24px;
    min-height: 260px;
}

/* Side stacks (cameras / outputs) */
.ap-arch-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ap-arch-node {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(201, 168, 76, 0.20);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    letter-spacing: 0.8px;
    color: var(--white);
    min-width: 130px;
}
.ap-arch-node .lucide {
    width: 14px; height: 14px;
    color: var(--gold);
    flex-shrink: 0;
}

/* Centre — the Edge AI unit */
.ap-arch-center {
    display: flex;
    justify-content: center;
}
.ap-arch-core {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 22px;
    background: linear-gradient(180deg, #1a1200 0%, #0a0700 100%);
    border: 1.5px solid var(--gold);
    border-radius: 10px;
    box-shadow:
        0 0 0 4px rgba(201, 168, 76, 0.08),
        0 8px 28px rgba(0, 0, 0, 0.6),
        0 0 36px rgba(201, 168, 76, 0.20);
    min-width: 140px;
}
.ap-arch-core-icon {
    width: 28px; height: 28px;
    color: var(--gold);
}
.ap-arch-core-label {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--white);
}
.ap-arch-core-sub {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--gold);
}

/* Connector lines + flowing signal dots — anchored to .ap-arch-grid */
.ap-arch-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
.ap-arch-grid > .ap-arch-stack,
.ap-arch-grid > .ap-arch-center { position: relative; z-index: 1; }

/* Cloud (outside boundary, marked "Not used") */
.ap-arch-cloud {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.ap-arch-cloud-node {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 90, 60, 0.6);
    text-decoration-thickness: 1.5px;
}
.ap-arch-cloud-note {
    margin-top: 8px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 90, 60, 0.7);
}

/* Flowing signal dot keyframes */
@keyframes ap-arch-flow {
    0%   { offset-distance: 0%;  opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

@media (max-width: 700px) {
    .ap-arch-grid { grid-template-columns: 1fr; gap: 14px; min-height: auto; }
    .ap-arch-stack { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .ap-arch-node { min-width: 0; }
    .ap-arch-lines { display: none; }
}


/* =============================================================
   INDUSTRY SCENE CARDS
   Replaces dashed photo placeholders with on-brand CSS scenes.
   Each industry gets a unique perspective grid + glow + huge icon.
   ============================================================= */

.industry-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a 0%, #0A0A0A 100%);
    border-bottom: 1px solid rgba(201, 168, 76, 0.10);
}
.industry-scene::before {
    /* perspective grid floor */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.10) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: center 75%;
    mask-image: linear-gradient(180deg, transparent 0%, black 55%, black 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 55%, black 100%);
    transform: perspective(450px) rotateX(60deg) translateY(20%);
    transform-origin: center bottom;
    opacity: 0.7;
}
.industry-scene::after {
    /* atmospheric glow */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 65%, rgba(201, 168, 76, 0.16) 0%, transparent 60%);
}

/* Real-photo industry banner — when an <img> sits inside the scene,
   hide the CSS abstractions (grid, glow, skyline, big icon) and let the
   photo carry the visual. Brackets and "Live" tag still overlay on top. */
.industry-scene img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: contrast(1.05) saturate(0.85);
}
.industry-scene:has(img) { background: #000; }
.industry-scene:has(img)::before,
.industry-scene:has(img)::after,
.industry-scene:has(img) .industry-scene-skyline,
.industry-scene:has(img) .industry-scene-icon { display: none; }
/* Subtle dark vignette over the photo so the gold brackets + "Live" tag
   keep their contrast at the edges. */
.industry-scene:has(img) .industry-scene-bracket { z-index: 2; }
.industry-scene:has(img) .industry-scene-tag { z-index: 2; }

/* =============================================================
   SITE BACKGROUND — Surveillance Mesh Atmosphere
   Fixed-position layer behind all content. Five stacked layers:
     1. Drifting gold ambient orbs (aurora)
     2. Perspective grid floor (surveillance vibe)
     3. SVG network mesh (pulsing nodes + connector lines)
     4. Diagonal scan beam (radar sweep)
     5. Edge vignette (focuses content)
   Sections with their own background hide it locally — creates
   rhythm between "live atmosphere" and "stable surface" sections.
   ============================================================= */

.site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

/* Ensure all content sits above the bg layer */
section { position: relative; z-index: 1; }
.site-nav { z-index: 100; }

/* ---- Layer 1: Ambient orbs (aurora) ---- */
.site-bg-orb {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    filter: blur(60px);
    will-change: transform;
    pointer-events: none;
}
.site-bg-orb--1 {
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.18) 0%, transparent 65%);
    animation: orbDrift1 55s ease-in-out infinite;
}
.site-bg-orb--2 {
    top: 35%;
    right: -12%;
    width: 820px;
    height: 820px;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.14) 0%, transparent 60%);
    animation: orbDrift2 70s ease-in-out infinite;
}
.site-bg-orb--3 {
    bottom: -15%;
    left: 28%;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.16) 0%, transparent 65%);
    animation: orbDrift3 62s ease-in-out infinite;
}
@keyframes orbDrift1 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(80px, 60px); }
}
@keyframes orbDrift2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-90px, -50px); }
}
@keyframes orbDrift3 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(70px, -80px); }
}

/* ---- Layer 2: Perspective grid floor ---- */
.site-bg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 100% 70% at 50% 65%, black 0%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 65%, black 0%, transparent 90%);
    opacity: 0.55;
}

/* ---- Layer 3: SVG network mesh — pulsing nodes + connector lines ---- */
.site-bg-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.85;
}
.site-bg-mesh .mesh-line {
    stroke: rgba(201, 168, 76, 0.12);
    stroke-width: 1;
    fill: none;
}
.site-bg-mesh .mesh-node {
    fill: #C9A84C;
    filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.7));
    transform-box: fill-box;
    transform-origin: center;
    animation: meshPulse 3.2s ease-in-out infinite;
}
.site-bg-mesh .mesh-node-glow {
    fill: rgba(201, 168, 76, 0.12);
    transform-box: fill-box;
    transform-origin: center;
    animation: meshPulseGlow 3.2s ease-in-out infinite;
}
@keyframes meshPulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.3); }
}
@keyframes meshPulseGlow {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(2.2); }
}

/* ---- Layer 4: Diagonal scan beam ---- */
.site-bg-scan {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(201, 168, 76, 0.04) 47%,
        rgba(201, 168, 76, 0.10) 50%,
        rgba(201, 168, 76, 0.04) 53%,
        transparent 60%);
    transform: translateX(-100%);
    animation: scanSweep 14s linear infinite;
    will-change: transform;
}
@keyframes scanSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(50%); }
}

/* ---- Layer 5: Edge vignette ---- */
.site-bg-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
}

/* Reduced motion: kill animations, keep static layers */
@media (prefers-reduced-motion: reduce) {
    .site-bg-orb,
    .site-bg-scan,
    .site-bg-mesh .mesh-node,
    .site-bg-mesh .mesh-node-glow { animation: none; }
}

/* Mobile: lighter orbs to keep things fast */
@media (max-width: 700px) {
    .site-bg-orb { filter: blur(40px); }
    .site-bg-orb--1 { width: 480px; height: 480px; }
    .site-bg-orb--2 { width: 540px; height: 540px; }
    .site-bg-orb--3 { width: 420px; height: 420px; }
    .site-bg-grid { background-size: 36px 36px; }
}


/* =============================================================
   HARDWARE SHOWCASE — CSS 3D Edge AI Unit
   A pure-CSS rotating 3D appliance. No library. Rectangular box
   form factor (like a Mac mini / Intel NUC) with branded front,
   heat-fin top, ventilation slats on the sides, port outlines
   on the back. Slowly rotates with a slight X-tilt for a 3/4 view.
   Right column: spec cards.
   ============================================================= */

#hardware { background: var(--surface); position: relative; overflow: hidden; }

.hw-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ---- LEFT: 3D stage ---- */
.hw-visual { position: relative; }
.hw-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    perspective: 1400px;
    perspective-origin: 50% 38%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floor reflection — soft gold ellipse glow under the unit */
.hw-floor {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(201, 168, 76, 0.30) 0%,
        rgba(201, 168, 76, 0.12) 30%,
        transparent 70%);
    filter: blur(14px);
    z-index: 0;
}

/* Ambient pulse rings — centered on the unit so the glow ring
   and the 3D box share the same visual center. */
.hw-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: hwPulse 4s ease-out infinite;
}
.hw-pulse.r2 { animation-delay: 1.5s; }
.hw-pulse.r3 { animation-delay: 3s; }
@keyframes hwPulse {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
    15%  { opacity: 0.4; }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(4.5); }
}

/* The 3D unit — preserve-3d so children render as real 3D faces */
.hw-unit {
    --uw: 280px;     /* unit width  (X) */
    --uh: 76px;      /* unit height (Y) */
    --ud: 200px;     /* unit depth  (Z) */
    position: relative;
    width: var(--uw);
    height: var(--uh);
    transform-style: preserve-3d;
    transform: rotateX(-14deg) rotateY(-25deg);
    animation: hwRotate 32s linear infinite;
    z-index: 1;
}
@keyframes hwRotate {
    from { transform: rotateX(-14deg) rotateY(0deg); }
    to   { transform: rotateX(-14deg) rotateY(360deg); }
}

/* Common face styling */
.hw-face {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1300 0%, #0a0700 100%);
    border: 1px solid rgba(201, 168, 76, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Six faces positioned in 3D space */
.hw-face--front  { transform: translateZ(calc(var(--ud) / 2)); }
.hw-face--back   { transform: translateZ(calc(var(--ud) / -2)) rotateY(180deg); }
.hw-face--right  {
    width: var(--ud);
    left: calc((var(--uw) - var(--ud)) / 2);
    transform: rotateY(90deg) translateZ(calc(var(--uw) / 2));
}
.hw-face--left   {
    width: var(--ud);
    left: calc((var(--uw) - var(--ud)) / 2);
    transform: rotateY(-90deg) translateZ(calc(var(--uw) / 2));
}
.hw-face--top    {
    height: var(--ud);
    top: calc((var(--uh) - var(--ud)) / 2);
    transform: rotateX(90deg) translateZ(calc(var(--uh) / 2));
}
.hw-face--bottom {
    height: var(--ud);
    top: calc((var(--uh) - var(--ud)) / 2);
    transform: rotateX(-90deg) translateZ(calc(var(--uh) / 2));
}

/* FRONT face — branded panel */
.hw-face--front {
    display: flex;
    align-items: center;
    padding: 0 22px;
    gap: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.4) 100%),
        linear-gradient(135deg, #1a1300 0%, #0a0700 100%);
}
.hw-led {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.9), 0 0 16px rgba(201, 168, 76, 0.5);
    animation: pulse 2s infinite;
    flex-shrink: 0;
}
.hw-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hw-brand-name {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 13px;
    letter-spacing: 1.4px;
    color: var(--white);
}
.hw-brand-sub {
    font-family: var(--font-heading);
    font-size: 8.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}
.hw-face--front::after {
    /* gold accent strip along the bottom of the front face */
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.7;
}
.hw-ai-badge {
    margin-left: auto;
    background: var(--gold);
    color: var(--black);
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 8.5px;
    letter-spacing: 1.2px;
    padding: 2px 7px;
    border-radius: 3px;
}

/* BACK face — port outlines */
.hw-face--back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 20px;
}
.hw-port {
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.5);
}
.hw-port--hdmi { width: 18px; height: 8px; }
.hw-port--eth  { width: 16px; height: 10px; }
.hw-port--usb  { width: 14px; height: 6px; }
.hw-port--pwr  {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.45);
}

/* TOP face — heat-fin grille */
.hw-face--top {
    background:
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.55) 0px,
            rgba(0, 0, 0, 0.55) 2px,
            transparent 2px,
            transparent 6px),
        linear-gradient(180deg, #1a1300 0%, #0a0700 100%);
}
.hw-face--top::after {
    /* subtle Aurum AI logo on top, very faint */
    content: 'Aurum AI';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 11px;
    letter-spacing: 4px;
    color: rgba(201, 168, 76, 0.32);
    text-transform: uppercase;
    white-space: nowrap;
}

/* BOTTOM face — flat dark with rubber feet hint */
.hw-face--bottom {
    background:
        radial-gradient(circle at 12% 18%, rgba(201,168,76,0.18) 0 5px, transparent 6px),
        radial-gradient(circle at 88% 18%, rgba(201,168,76,0.18) 0 5px, transparent 6px),
        radial-gradient(circle at 12% 82%, rgba(201,168,76,0.18) 0 5px, transparent 6px),
        radial-gradient(circle at 88% 82%, rgba(201,168,76,0.18) 0 5px, transparent 6px),
        linear-gradient(135deg, #0c0900, #050300);
}

/* LEFT + RIGHT faces — ventilation slats */
.hw-face--left,
.hw-face--right {
    background:
        repeating-linear-gradient(180deg,
            rgba(0, 0, 0, 0.6) 0px,
            rgba(0, 0, 0, 0.6) 3px,
            rgba(201, 168, 76, 0.04) 3px,
            rgba(201, 168, 76, 0.04) 7px),
        linear-gradient(135deg, #1a1300, #0a0700);
}

/* ---- RIGHT: copy + spec cards ---- */
.hw-content { max-width: 540px; }
.hw-content h2 { margin: 14px 0 16px; }
.hw-content > p {
    margin-bottom: 28px;
    font-size: var(--fs-body-lg);
    line-height: 1.6;
}

.hw-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.hw-spec {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius);
    transition: border-color var(--ease), background var(--ease);
}
.hw-spec:hover {
    border-color: rgba(201, 168, 76, 0.30);
    background: rgba(201, 168, 76, 0.03);
}
.hw-spec-icon {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    color: var(--gold);
    flex-shrink: 0;
}
.hw-spec-icon .lucide { width: 18px; height: 18px; }
.hw-spec-body { display: flex; flex-direction: column; gap: 2px; }
.hw-spec-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 13px;
    color: var(--white);
    letter-spacing: 0.3px;
}
.hw-spec-detail {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 980px) {
    .hw-layout { grid-template-columns: 1fr; gap: 40px; }
    .hw-content { max-width: 100%; order: 2; }
    .hw-visual { order: 1; max-width: 480px; margin: 0 auto; }
    .hw-unit { --uw: 240px; --uh: 64px; --ud: 170px; }
}

@media (max-width: 600px) {
    .hw-specs { grid-template-columns: 1fr; }
    .hw-unit { --uw: 200px; --uh: 56px; --ud: 142px; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-unit { animation: none; transform: rotateX(-14deg) rotateY(-30deg); }
    .hw-pulse { animation: none; opacity: 0; }
}


/* =============================================================
   PROBLEM CARDS (challenge section) — centered layout
   Stat badge stays at the top, icon + title + paragraph centered.
   ============================================================= */

.prob-grid .glass-card {
    text-align: center;
    /* Flex column so we can push the stat badge to the bottom via `order`,
       and so every card stays the same height regardless of paragraph length. */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.prob-grid .glass-card .card-icon-wrap {
    margin-left: auto;
    margin-right: auto;
}
/* Move the stat badge to the bottom of each card, below the paragraph. */
.prob-grid .prob-stat-strip {
    order: 99;
    margin-top: auto;   /* pushes badge to the bottom edge */
    margin-bottom: 0;
    padding-top: 0;
}
.prob-grid .glass-card > p {
    margin-bottom: 22px;  /* clearance between paragraph and the badge below */
}

.prob-stat-strip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    margin-bottom: 22px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 100px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    letter-spacing: 1px;
}
.prob-stat-strip .prob-sev {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.prob-stat-strip .prob-sev.is-high { background: #ff5a3c; box-shadow: 0 0 6px rgba(255, 90, 60, 0.65); }
.prob-stat-strip .prob-sev.is-med  { background: var(--gold); box-shadow: 0 0 6px rgba(201, 168, 76, 0.55); }
.prob-stat-strip .prob-sev.is-low  { background: #c0c0c0; opacity: 0.6; }

.prob-stat-num {
    color: var(--white);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
}
.prob-stat-lbl {
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-size: 9.5px;
}


/* =============================================================
   SOLUTION STATS — control panel readout lift
   Adds a "● LIVE BASELINE" header + accent underline under each
   stat value to match the dashboard visual language.
   ============================================================= */

.sol-stats {
    position: relative;
}
.sol-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
    opacity: 0.6;
}
.sol-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 8px 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
.sol-stats-header-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.sol-stats-header-title .pulse-dot {
    width: 6px; height: 6px;
    background: var(--gold);
}
.sol-stats-header-meta {
    font-family: var(--font-heading);
    font-size: 9.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}
.sol-stats-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.stat-block {
    position: relative;
    padding: 8px 16px 14px;
}
.stat-val {
    position: relative;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(201, 168, 76, 0.25);
}
.stat-block::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    opacity: 0.55;
}

@media (max-width: 900px) {
    .sol-stats-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .sol-stats-row    { flex-wrap: wrap; justify-content: center; }
}


/* =============================================================
   HOW IT WORKS — animated data pipeline lift
   Each flow-arrow becomes a rail with a gold "signal packet"
   travelling through it. Staggered delays create a wave effect
   moving left-to-right across all 5 stages.
   ============================================================= */

/* Replace the static chevron with the animated rail */
.flow-arrow {
    position: relative;
    padding-top: 70px;
    min-width: 32px;
    width: 100%;
}
.flow-arrow svg { display: none; }
.flow-arrow::before {
    /* the rail */
    content: '';
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(201, 168, 76, 0.03) 0%,
        rgba(201, 168, 76, 0.30) 50%,
        rgba(201, 168, 76, 0.03) 100%);
}
.flow-arrow::after {
    /* the travelling packet */
    content: '';
    position: absolute;
    top: 78px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow:
        0 0 10px rgba(201, 168, 76, 0.9),
        0 0 22px rgba(201, 168, 76, 0.45);
    animation: flowPacket 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    animation-delay: var(--flow-delay, 0s);
}
@keyframes flowPacket {
    0%   { left: -3px;  opacity: 0; transform: scale(0.6); }
    15%  {              opacity: 1; transform: scale(1); }
    85%  {              opacity: 1; transform: scale(1); }
    100% { left: 100%;  opacity: 0; transform: scale(0.6); }
}

/* Flow step polish — live indicator + glow on icon */
.flow-num {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 100px;
    margin-bottom: 16px;
}
.flow-num::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulse 2s infinite;
}
.flow-icon-wrap {
    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.30);
    animation: flowIconPulse 3.5s ease-in-out infinite;
    animation-delay: var(--flow-delay, 0s);
}
@keyframes flowIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0); }
}

@media (max-width: 1100px) {
    /* In stacked mobile layout, hide the rail since arrows rotate 90deg */
    .flow-arrow::before,
    .flow-arrow::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .flow-arrow::after,
    .flow-icon-wrap { animation: none; }
}


/* =============================================================
   INDUSTRY SCENE — per-industry tints (continued)
   ============================================================= */

/* Industry-specific tints */
.industry-scene--factory  { background: linear-gradient(135deg, #0b0a08 0%, #050403 100%); }
.industry-scene--hospital { background: linear-gradient(160deg, #0a0a0b 0%, #050506 100%); }
.industry-scene--office   { background: linear-gradient(125deg, #141210 0%, #0A0A0A 100%); }

/* Skyline silhouette — different shape per industry */
.industry-scene-skyline {
    position: absolute;
    bottom: 35%;
    left: 0;
    right: 0;
    height: 30%;
    z-index: 1;
}
/* Factory: jagged industrial silhouette with chimneys */
.industry-scene--factory .industry-scene-skyline {
    background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
    clip-path: polygon(
        0% 100%, 0% 70%, 8% 70%, 8% 50%, 12% 50%, 12% 70%, 20% 70%,
        20% 30%, 24% 30%, 24% 0%, 26% 0%, 26% 30%, 30% 30%, 30% 70%,
        45% 70%, 45% 55%, 60% 55%, 60% 70%, 72% 70%, 72% 45%, 80% 45%,
        80% 70%, 92% 70%, 92% 60%, 100% 60%, 100% 100%
    );
}
/* Hospital: cleaner blocks with a cross silhouette */
.industry-scene--hospital .industry-scene-skyline {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
    clip-path: polygon(
        0% 100%, 0% 65%, 12% 65%, 12% 50%, 28% 50%, 28% 65%, 40% 65%,
        40% 30%, 45% 30%, 45% 18%, 48% 18%, 48% 10%, 52% 10%, 52% 18%,
        55% 18%, 55% 30%, 60% 30%, 60% 65%, 72% 65%, 72% 45%, 88% 45%,
        88% 65%, 100% 65%, 100% 100%
    );
}
/* Office: tall corporate towers */
.industry-scene--office .industry-scene-skyline {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
    clip-path: polygon(
        0% 100%, 0% 55%, 10% 55%, 10% 30%, 18% 30%, 18% 55%, 26% 55%,
        26% 10%, 34% 10%, 34% 55%, 44% 55%, 44% 40%, 56% 40%, 56% 55%,
        66% 55%, 66% 20%, 74% 20%, 74% 55%, 82% 55%, 82% 35%, 92% 35%,
        92% 55%, 100% 55%, 100% 100%
    );
}

/* Floating big icon */
.industry-scene-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 64px;
    height: 64px;
    color: var(--gold);
    opacity: 0.85;
    filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.45));
}

/* Corner brackets — frame the scene like a viewfinder */
.industry-scene-bracket {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(201, 168, 76, 0.5);
    z-index: 3;
}
.industry-scene-bracket.tl { top: 10px;    left: 10px;    border-right: none;  border-bottom: none; }
.industry-scene-bracket.tr { top: 10px;    right: 10px;   border-left: none;   border-bottom: none; }
.industry-scene-bracket.bl { bottom: 10px; left: 10px;    border-right: none;  border-top: none; }
.industry-scene-bracket.br { bottom: 10px; right: 10px;   border-left: none;   border-top: none; }

/* Live LIVE pill in the corner */
.industry-scene-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 100px;
    font-family: var(--font-heading);
    font-size: 8.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold);
}
.industry-scene-tag .pulse-dot {
    width: 4px; height: 4px;
    background: var(--gold);
}


/* =============================================================
   INDUSTRIES — EXPANDABLE ACCORDION
   Click an industry row to reveal the detection bundle + offer.
   ============================================================= */

.ind-accordion {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
}

.ind-item {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.ind-item:hover {
    border-color: var(--gold-border);
    box-shadow: 0 12px 48px rgba(201, 168, 76, 0.07);
}
.ind-item.is-open {
    border-color: var(--gold);
    box-shadow: 0 16px 60px rgba(201, 168, 76, 0.12);
}

/* Header (clickable row) */
.ind-head {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    padding: 18px;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.ind-head:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
}

.ind-head-scene {
    height: 130px;
    border-radius: calc(var(--radius-lg) - 6px);
}

.ind-head-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
.ind-head-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ind-head-title-row h3 {
    font-size: 19px;
    color: var(--white);
    margin: 0;
}
.ind-head-text p {
    font-size: var(--fs-body-sm);
    color: var(--text-soft);
    margin: 0;
    line-height: 1.55;
}

.ind-head-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--gold);
    font-family: var(--font-heading);
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.ind-head-cta .lucide {
    width: 16px;
    height: 16px;
    transition: transform 0.35s var(--ease);
}
.ind-item.is-open .ind-head-cta .ind-chevron {
    transform: rotate(180deg);
}

/* Expandable panel */
.ind-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.45s var(--ease);
    border-top: 1px solid transparent;
}
.ind-item.is-open .ind-panel {
    max-height: 1200px;
    border-top: 1px solid rgba(201, 168, 76, 0.18);
}
.ind-panel[hidden] {
    display: block;       /* override default to allow CSS-driven animation */
}

.ind-panel-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    padding: 26px 22px 28px;
}

.ind-panel-eyebrow {
    display: block;
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.ind-challenge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ind-challenge-list li {
    position: relative;
    padding-left: 18px;
    font-size: var(--fs-body-sm);
    color: var(--text-soft);
    line-height: 1.55;
}
.ind-challenge-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.85;
}

.ind-detect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ind-detect-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 100px;
    background: rgba(201, 168, 76, 0.06);
    color: var(--white);
    font-size: 12.5px;
    line-height: 1;
    transition: background var(--ease), border-color var(--ease);
}
.ind-detect-chip:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: var(--gold);
}
.ind-detect-chip .lucide {
    width: 13px;
    height: 13px;
    color: var(--gold);
    flex-shrink: 0;
}

.ind-offer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ind-offer-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-body-sm);
    color: var(--text-soft);
    line-height: 1.55;
}
.ind-offer-list .lucide {
    width: 16px;
    height: 16px;
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 3px;
}

/* Responsive */
@media (max-width: 860px) {
    .ind-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ind-head-scene {
        height: 110px;
    }
    .ind-panel-inner {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 22px 18px 24px;
    }
}


/* =============================================================
   FAQ — Expandable accordion
   Same interaction pattern as Industries, but simpler markup:
   no scene image, no detection chips, just question + answer.
   ============================================================= */

#faq { background: var(--surface); }

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
}

.faq-item {
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.faq-item:hover {
    border-color: var(--gold-border);
    box-shadow: 0 8px 32px rgba(201, 168, 76, 0.05);
}
.faq-item.is-open {
    border-color: var(--gold);
    box-shadow: 0 12px 48px rgba(201, 168, 76, 0.10);
}

/* Clickable question row */
.faq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.faq-head:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
}

.faq-q {
    font-size: 16px;
    font-weight: var(--fw-medium);
    color: var(--white);
    line-height: 1.4;
}

.faq-chevron {
    width: 20px;
    height: 20px;
    color: var(--gold);
    flex-shrink: 0;
    transition: transform 0.35s var(--ease);
}
.faq-item.is-open .faq-chevron {
    transform: rotate(180deg);
}

/* Expandable panel */
.faq-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.45s var(--ease);
}
.faq-item.is-open .faq-panel {
    max-height: 600px;
    border-top: 1px solid rgba(201, 168, 76, 0.18);
}
.faq-panel[hidden] {
    display: block;
}

.faq-panel-inner {
    padding: 18px 24px 24px;
}
.faq-panel-inner p {
    font-size: var(--fs-body-sm);
    color: var(--text-soft);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 640px) {
    .faq-head { padding: 16px 18px; }
    .faq-q { font-size: 14.5px; }
    .faq-panel-inner { padding: 14px 18px 20px; }
}


/* =============================================================
   MID-PAGE CTA — catches prospects mid-scroll
   ============================================================= */

#cta-mid { padding-top: 40px; padding-bottom: 40px; }

.cta-mid-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 36px 40px;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, rgba(201, 168, 76, 0.02) 100%);
    border: 1px solid rgba(201, 168, 76, 0.20);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.cta-mid-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 320px; height: 320px;
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.15) 0%, transparent 60%);
    pointer-events: none;
    transform: translate(40%, -40%);
}
.cta-mid-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.cta-mid-text .label { margin-bottom: 10px; }
.cta-mid-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    color: var(--white);
    margin: 0 0 10px;
}
.cta-mid-text p {
    font-size: var(--fs-body-sm);
    color: var(--text-soft);
    line-height: 1.55;
    margin: 0;
    max-width: 600px;
}

.cta-mid-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 820px) {
    .cta-mid-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 28px 22px;
    }
    .cta-mid-actions { flex-wrap: wrap; }
}


/* =============================================================
   HONEYPOT — hidden anti-spam field
   Must be visually hidden but still focusable enough that bots
   detect and fill it. Real users never see or interact with it.
   ============================================================= */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =============================================================
   v4.2 TYPOGRAPHY LIFT  (2026-06-11)
   -----------------------------------------------------------------
   Trigger: $10K Checklist criterion #2 — "neither Inter nor Roboto."
   v4 used Outfit (heading) + Inter (body). Both retired here.

   New system:
   - Geist Sans (Vercel, free) for body + section headings.
   - Instrument Serif (Stripe Press / Resend, free Google Fonts) for
     the hero h1 ONLY — the signature typographic moment.
   - "Now Intelligent." gold span gets italic Instrument Serif.

   Principle: "Spend your boldness in one place." (frontend-design skill)
   The hero h1 is the bold typographic moment. Everything else is
   disciplined Geist Sans throughout.
   ============================================================= */

/* -----------------------------------------------------------------
   HERO H1 — Geist Sans 700 + Geist Mono italic gold accent
   The signature typographic moment: heavy sans roman headline with
   a mono italic gold accent on the second line. Reads as "AI system
   output / control terminal" - the right surveillance brand signal.
   ----------------------------------------------------------------- */

.hero-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: clamp(42px, 5.8vw, 68px);
    letter-spacing: -2px;
    line-height: 1.05;
}

/* "Now Intelligent." gold span — Geist Mono italic.
   Italic mono signals "AI / system / terminal", not editorial fashion.
   Lighter weight (500) gives breathing room against the bold sans above. */
.hero-title .gold {
    font-family: var(--font-mono);
    font-style: italic;
    font-weight: var(--fw-medium);
    letter-spacing: -1.5px;
    /* Slight optical size adjustment - mono looks larger than sans
       at the same px value because of its wider characters. */
    font-size: 0.94em;
}

/* -----------------------------------------------------------------
   SECTION HEADINGS — Geist 600 for stronger hierarchy
   Without Outfit, default Geist 500 reads slightly flatter at h2 size.
   Bumping section h2s to 600 restores the hierarchy weight.
   ----------------------------------------------------------------- */

h2, .h2,
.sec-header h2 {
    font-weight: var(--fw-semibold);
    letter-spacing: -0.5px;
}

h3, .h3 {
    font-weight: var(--fw-medium);
    letter-spacing: -0.3px;
}

/* -----------------------------------------------------------------
   LABELS & EYEBROWS — Geist 500 uppercase, slightly wider tracking
   Geist's geometric forms need a touch more letter-spacing at
   small uppercase sizes for legibility than Outfit needed.
   ----------------------------------------------------------------- */

.label {
    letter-spacing: 4.5px;
    font-weight: var(--fw-medium);
}

/* -----------------------------------------------------------------
   BODY — Geist 400 is slightly wider than Inter; tune line-height
   for the long-form paragraphs in problem/solution/how-it-works.
   ----------------------------------------------------------------- */

p {
    line-height: 1.65;
}

/* -----------------------------------------------------------------
   ACCESSIBILITY (v4.2 carry-over fix from $10K Checklist #8)
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* Disable hero monitor float, scanline sweeps, pulse rings for
       users who request reduced motion. */
    .hero-monitor { animation: none !important; }
    .pulse-dot { animation: none !important; }
    .cctv-scanlines::after { animation: none !important; }
    .hero-pulse-ring { animation: none !important; opacity: 0 !important; }
    .up { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* =============================================================
   v4.3 HERO POLISH  (2026-06-11)
   -----------------------------------------------------------------
   Trigger: Reference shadcn hero design Arsyad shared. Goal: steal
   the BEST polish elements (gradient text, stats row, refined pill)
   while keeping the live 4-camera monitor as the brand signature.

   Three changes:
   1. Gradient text on "Now Intelligent." gold accent (subtle fade)
   2. Pill badge refinement (softer premium feel, inset shadow)
   3. Trust badges replaced with stats row (3 stats, vertical dividers)
   ============================================================= */

/* -----------------------------------------------------------------
   1. GRADIENT TEXT — "Now Intelligent." gold accent
   Diagonal gradient from full gold to faded gold. Combined with
   the mono italic from v4.2, the result reads as "AI system
   output fading to background" — premium surveillance signal.
   ----------------------------------------------------------------- */

.hero-title .gold {
    background: linear-gradient(135deg,
        var(--gold) 0%,
        var(--gold) 40%,
        rgba(201, 168, 76, 0.45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* -----------------------------------------------------------------
   2. PILL BADGE REFINEMENT (.hero-eyebrow)
   Softer "frosted glass" feel via inset shadow + subtle outer warm
   glow. Bumped background gold opacity 5% to 8% for slightly more
   visibility, matching the reference's softer pill style.
   ----------------------------------------------------------------- */

.hero-eyebrow {
    background: var(--gold-subtle);
    box-shadow:
        inset 0 0 0 1px rgba(201, 168, 76, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 16px rgba(201, 168, 76, 0.08);
    padding: 9px 18px;
}

/* -----------------------------------------------------------------
   3. STATS ROW — removed 2026-06-11 evening per Arsyad's feedback.
   Reverted to original hero-trust badges. CSS removed from this block
   to keep the file clean. If we want to bring stats back, the markup
   and CSS are in git history (or in deleted v4.2 Section Anchors).
   ----------------------------------------------------------------- */


/* =============================================================
   v4.4 ALIVENESS  (2026-06-11)
   -----------------------------------------------------------------
   Trigger: Arsyad's feedback that the site feels plain after load —
   scroll-reveals fire once, then nothing breathes. $10K Checklist
   criterion #6 ("motion that whispers") graded B− on v4.3 because
   we still used AOS-style fade-up reveals across the whole page.

   Four changes:
   1. Hero particle network Canvas (drawn by main.js initHeroParticles)
   2. Aurora breathing pulse behind hero monitor (slow gold glow cycle)
   3. Section reveal upgrade (better easing + slight scale + bigger lift)
   4. Smooth scroll polish

   All four respect prefers-reduced-motion.
   ============================================================= */

/* -----------------------------------------------------------------
   1. HERO PARTICLE NETWORK
   Canvas sits behind the hero text, above the body background.
   Pure decorative — pointer-events: none, aria-hidden. Init in main.js.
   The grid-bg layer + glow layer still render ON TOP for depth.
   ----------------------------------------------------------------- */

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Slight fade-in on load so the canvas doesn't pop into existence */
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-particles.is-ready {
    opacity: 1;
}

/* Push existing hero background layers above particles for depth */
.hero-grid-bg { z-index: 1; }
.hero-glow    { z-index: 1; }
.hero-fade    { z-index: 1; }

/* -----------------------------------------------------------------
   2. AURORA BREATHING — slow gold pulse on the hero glow
   Replaces the static .hero-glow opacity with a soft 10s cycle:
   slightly brighter, slightly larger, back to base.
   ----------------------------------------------------------------- */

@keyframes auroraBreathe {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.72;
        transform: translateY(-50%) scale(1.08);
    }
}

.hero-glow {
    animation: auroraBreathe 10s ease-in-out infinite;
    will-change: opacity, transform;
}

/* -----------------------------------------------------------------
   3. SECTION REVEAL UPGRADE — replace fade-up with lift + scale-in
   Original .up: translateY(32px) + ease.
   New .up: translateY(48px) + scale(0.985) + cubic-bezier(0.16, 1, 0.3, 1).
   Reads as "settles into place" instead of "slides up." Plus a touch
   more delay between staggered children for breathing rhythm.
   ----------------------------------------------------------------- */

.up {
    opacity: 0;
    transform: translateY(48px) scale(0.985);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.up.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.d1s { transition-delay: 0.10s; }
.d2s { transition-delay: 0.22s; }
.d3s { transition-delay: 0.34s; }
.d4s { transition-delay: 0.46s; }
.d5s { transition-delay: 0.58s; }

/* -----------------------------------------------------------------
   4. SMOOTH SCROLL POLISH
   scroll-behavior: smooth is already set on html in colors_and_type.css.
   This adds a slightly longer scroll-padding-top so anchor links don't
   land under the fixed nav, and tightens the smoothness with overscroll.
   ----------------------------------------------------------------- */

html {
    scroll-padding-top: 88px;
    overscroll-behavior-y: contain;
}

/* -----------------------------------------------------------------
   REDUCED MOTION respect for everything new above.
   Extends the v4.2 reduced-motion block (which already kills
   hero monitor float, pulse-dot, scanlines, pulse rings, .up reveals).
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero-particles { display: none !important; }
    .hero-glow { animation: none !important; }
}


/* =============================================================
   v4.5 MOBILE REDESIGN  (2026-06-11)
   -----------------------------------------------------------------
   Trigger: $10K Checklist criterion #7 — "Mobile that's designed,
   not shrunk." v4.4 graded D because 25+ media queries just collapsed
   columns. This batch redesigns the mobile experience instead of
   compressing the desktop one.

   Batch 1 of the A+ sprint:
   1. Sticky bottom CTA bar (appears after hero leaves viewport)
   2. Single rotating camera tile (replaces 4-tile mosaic)
   3. Full-screen mobile nav overlay polish (larger touch targets, blur)
   4. Form input touch targets (min 52px, font 16px to prevent iOS zoom)
   5. Section padding + type tuning for ≤480px viewports
   ============================================================= */

/* -----------------------------------------------------------------
   1. STICKY MOBILE CTA BAR
   Slides up from bottom after user scrolls past the hero.
   Two buttons: Request Demo (primary gold) + Enquire (secondary outline).
   Respects iOS safe-area-inset-bottom for notched phones.
   ----------------------------------------------------------------- */

.mobile-cta-bar {
    display: none;
}

@media (max-width: 860px) {
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        gap: 10px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: rgba(10, 10, 10, 0.88);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        backdrop-filter: blur(20px) saturate(140%);
        border-top: 1px solid var(--gold-border);
        transform: translateY(110%);
        transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
    }
    .mobile-cta-bar.is-visible {
        transform: translateY(0);
    }
    .mobile-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 1;
        min-height: 50px;
        padding: 12px 16px;
        border-radius: var(--radius);
        font-family: var(--font-heading);
        font-weight: var(--fw-medium);
        font-size: 14.5px;
        letter-spacing: var(--ls-cta);
        text-decoration: none;
        white-space: nowrap;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .mobile-cta-btn:active {
        transform: scale(0.97);
        opacity: 0.88;
    }
    .mobile-cta-btn .lucide {
        width: 16px;
        height: 16px;
    }
    .mobile-cta-btn--primary {
        background: var(--gold);
        color: var(--black);
    }
    .mobile-cta-btn--secondary {
        background: rgba(201, 168, 76, 0.08);
        color: var(--gold);
        border: 1px solid var(--gold-border);
    }
    /* Push body content up so it doesn't get hidden behind the bar */
    body {
        padding-bottom: 78px;
    }
}

/* -----------------------------------------------------------------
   2. MOBILE HERO — single rotating camera tile
   On mobile, instead of stacking the 4-tile mosaic vertically (each
   tile tiny + hard to read), show ONE camera at a time, full-bleed
   inside the hero monitor. JS cycles through every 4s.
   ----------------------------------------------------------------- */

@media (max-width: 860px) {
    .hero-mosaic {
        position: relative;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        aspect-ratio: 16 / 10;
        gap: 0;
    }
    .hero-tile {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }
    .hero-tile.is-active {
        opacity: 1;
        pointer-events: auto;
    }
    /* Indicator dots so user knows it's cycling */
    .hero-mosaic-dots {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 5;
    }
    .hero-mosaic-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.22);
        transition: background 0.3s ease, width 0.3s ease;
    }
    .hero-mosaic-dot.is-active {
        background: var(--gold);
        width: 22px;
        border-radius: 100px;
    }
}

/* -----------------------------------------------------------------
   3. MOBILE NAV — overlay polish
   Existing burger toggle works. Bump touch targets, add backdrop blur,
   smoother slide transition.
   ----------------------------------------------------------------- */

@media (max-width: 860px) {
    .nav-links {
        gap: 12px !important;
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        backdrop-filter: blur(24px) saturate(140%);
        background: rgba(10, 10, 10, 0.88);
        padding: 60px 24px 80px;
        /* Slide-in from right on open (replaces the v4 display:flex toggle) */
        display: flex !important;
        transform: translateX(100%);
        transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }
    .nav-links.open {
        transform: translateX(0);
        pointer-events: auto;
    }
    .nav-links li {
        width: 100%;
        max-width: 360px;
    }
    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        padding: 18px 24px;
        min-height: 56px;
        width: 100%;
        border-radius: var(--radius-lg);
        text-align: center;
        font-weight: var(--fw-medium);
    }
    .nav-links .nav-cta {
        margin-top: 16px;
        background: var(--gold);
        color: var(--black);
    }
    /* Burger stays above the overlay */
    .burger {
        z-index: 101;
    }
}

/* -----------------------------------------------------------------
   4. FORM INPUT TOUCH TARGETS
   iOS Safari zooms on focus if input font-size < 16px. Forcing 16px
   prevents the layout-jarring zoom-in. Bumping min-height to 52px
   matches Apple HIG touch-target recommendation.
   ----------------------------------------------------------------- */

@media (max-width: 860px) {
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        min-height: 52px;
        font-size: 16px !important; /* prevent iOS zoom-on-focus */
        padding: 14px 16px;
    }
    .contact-form textarea {
        min-height: 120px;
    }
    .btn {
        min-height: 50px;
    }
}

/* -----------------------------------------------------------------
   5. SMALL VIEWPORTS — type + padding tuning (≤480px)
   Default clamp() already responsive but very small screens benefit
   from tighter section padding and a touch more controlled type.
   ----------------------------------------------------------------- */

@media (max-width: 480px) {
    :root {
        --section-pad-sm: 56px;
        --wrap-pad-x:     18px;
    }
    .hero-title {
        font-size: clamp(32px, 8.5vw, 44px);
        letter-spacing: -1.5px;
    }
    .hero-title .gold {
        font-size: 0.96em;
        letter-spacing: -1.2px;
    }
    .hero-sub {
        font-size: 15.5px;
    }
    .hero-grid {
        padding-top: 96px;
        padding-bottom: 48px;
    }
    .hero-eyebrow {
        font-size: 11.5px;
    }
    /* Trust badges go in a compact 1-col layout */
    .trust-badges {
        gap: 10px;
    }
    .trust-badge {
        font-size: 12.5px;
    }
}

/* -----------------------------------------------------------------
   REDUCED MOTION respect for v4.5 mobile additions
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* On mobile reduced-motion, show all 4 hero tiles stacked instead
       of cycling. Avoids the animated rotation. */
    @media (max-width: 860px) {
        .hero-mosaic {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            grid-template-rows: 1fr 1fr !important;
            aspect-ratio: auto;
        }
        .hero-tile {
            position: relative;
            inset: auto;
            opacity: 1 !important;
            pointer-events: auto;
        }
        .hero-mosaic-dots {
            display: none;
        }
    }
    .mobile-cta-bar {
        transition: none !important;
    }
}


/* =============================================================
   v4.6 PERFORMANCE + ACCESSIBILITY  (2026-06-11)
   -----------------------------------------------------------------
   Trigger: $10K Checklist criterion #8 — "invisible expensive stuff."
   Batch 2 of 7 in the A+ sprint. Craft signals viewers don't see
   directly but FEEL: skip link, AA contrast, focus polish.

   Performance changes in this batch live outside CSS:
   - HTML video <source> WebM fallback (Ram converts files)
   - loading="lazy" + decoding="async" on all non-hero images
   - Token colour bumps in colors_and_type.css for WCAG AA
   ============================================================= */

/* -----------------------------------------------------------------
   SKIP LINK — Keyboard accessibility
   First focusable element on the page. Visually hidden by default
   (translated out of viewport), appears top-left when focused via
   Tab. Lets keyboard users skip past the nav directly to <main>.
   ----------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--gold);
    color: var(--black);
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 14px;
    text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
    transform: translateY(-110%);
    transition: transform 0.2s ease;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--white);
    outline-offset: -2px;
}

/* -----------------------------------------------------------------
   FOCUS-VISIBLE POLISH
   Default browser focus rings look like 1995. Replace with a clean
   gold outline that matches the brand and only shows for keyboard
   focus (not mouse clicks).
   ----------------------------------------------------------------- */

*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
}
.btn:focus-visible,
.nav-links a:focus-visible,
.mobile-cta-btn:focus-visible {
    outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -1px;
}

/* -----------------------------------------------------------------
   WCAG AA CONTRAST NOTES
   Actual colour changes live in colors_and_type.css (token bumps).
   Reference for Ram / future devs:

     --text-muted     was #888 (4.05:1 borderline) → #999 (5.51:1 AA pass)
     --text-muted-dim was #555 (1.91:1 FAIL)        → #7A7A7A (4.49:1 AA Large pass)
     --text-soft      was rgba(white, 0.68)         → rgba(white, 0.72) AA pass
     --gold #C9A84C on #0A0A0A = 7.86:1 — passes AAA Normal (already fine)
   ----------------------------------------------------------------- */

/* Reduced motion respect for skip link */
@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none !important; }
}


/* =============================================================
   v4.7 HIERARCHY THAT BREATHES  (2026-06-12)
   -----------------------------------------------------------------
   Trigger: $10K Checklist criterion #4 — "hierarchy that breathes."
   v4.6 graded B because every card in every section had equal weight.
   The fix per frontend-design skill: pick ONE element per section to
   enlarge dramatically, let the rest be quiet.

   Batch 3 of 7 in the A+ sprint. Six section anchors:
   1. #problem        provocative question display anchor
   2. #capabilities   smoking detection as featured bento card
   3. #how-it-works   step 5 (the outcome) enlarged
   4. #hardware       enlarged 3D edge unit, stronger headline
   5. #trust          YAPEIM flagship card with real numbers
   6. #industries     Government industry default-open + dominant
   ============================================================= */

/* -----------------------------------------------------------------
   ANCHOR 1: #problem - Provocative question display
   ----------------------------------------------------------------- */

.problem-anchor {
    max-width: 980px;
    margin: 0 auto 64px;
    text-align: center;
}
.problem-anchor .label {
    display: inline-block;
    margin-bottom: 24px;
}
.problem-anchor-q {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.12;
    letter-spacing: -1.6px;
    color: var(--white);
    margin-bottom: 22px;
}
.problem-anchor-q .gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold) 40%, rgba(201, 168, 76, 0.55) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.problem-anchor-sub {
    max-width: 640px;
    margin: 0 auto;
    font-size: var(--fs-body-md);
    color: var(--text-soft);
    line-height: 1.6;
}
@media (max-width: 720px) {
    .problem-anchor { margin-bottom: 40px; }
    .problem-anchor-q { font-size: clamp(26px, 7vw, 36px); letter-spacing: -1px; }
}

/* -----------------------------------------------------------------
   ANCHOR 2: #capabilities - Smoking detection as bento featured card
   ----------------------------------------------------------------- */

.cap-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 24px;
}
.cap-grid > .cap-card:first-child {
    grid-column: span 6;
    padding: 40px 44px;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201, 168, 76, 0.10) 0%, transparent 60%),
        linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, rgba(201, 168, 76, 0.02) 100%);
    border: 1px solid var(--gold);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}
.cap-grid > .cap-card:first-child::before {
    content: "Featured Detection";
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold);
    padding: 6px 12px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    background: var(--black);
}
.cap-grid > .cap-card:first-child h3 {
    font-size: clamp(26px, 3vw, 34px);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.cap-grid > .cap-card:first-child > p {
    font-size: var(--fs-body-lg);
    color: var(--text-soft);
    margin-bottom: 24px;
    max-width: 520px;
}
.cap-grid > .cap-card:first-child .cctv-viewer {
    max-width: 720px;
    margin-top: 28px;
}
.cap-grid > .cap-card:first-child .cap-icon-wrap {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
}
.cap-grid > .cap-card:not(:first-child) {
    grid-column: span 2;
}
@media (max-width: 1100px) {
    .cap-grid > .cap-card:not(:first-child) { grid-column: span 3; }
}
@media (max-width: 720px) {
    .cap-grid { grid-template-columns: 1fr !important; }
    .cap-grid > .cap-card:first-child { grid-column: 1; padding: 28px 22px; }
    .cap-grid > .cap-card:not(:first-child) { grid-column: 1; }
    .cap-grid > .cap-card:first-child::before { top: 18px; right: 18px; font-size: 9.5px; padding: 4px 9px; }
}

/* -----------------------------------------------------------------
   ANCHOR 3: #how-it-works - Step 5 outcome enlarged
   ----------------------------------------------------------------- */

.flow-grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
    grid-auto-rows: auto;
    gap: 16px 8px !important;
    align-items: stretch;
    margin-bottom: 32px;
}
.flow-grid > .flow-step:nth-child(9) {
    grid-column: 1 / -1;
    margin-top: 32px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 168, 76, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #1A1612 0%, #0F0D0A 100%);
    border: 1px solid var(--gold);
    border-radius: var(--radius-xl);
    padding: 44px 48px;
    position: relative;
    text-align: center;
}
.flow-grid > .flow-step:nth-child(9)::before {
    content: "The Outcome";
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold);
    padding: 6px 14px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    background: var(--black);
}
.flow-grid > .flow-step:nth-child(9) .flow-num {
    font-size: clamp(48px, 6vw, 72px);
    margin: 36px 0 8px;
}
.flow-grid > .flow-step:nth-child(9) h3 {
    font-size: clamp(24px, 3vw, 32px);
    margin-bottom: 12px;
}
.flow-grid > .flow-step:nth-child(9) p {
    font-size: var(--fs-body-lg);
    max-width: 560px;
    margin: 0 auto;
}
.flow-grid > .flow-step:nth-child(9) .flow-icon-wrap {
    margin: 0 auto 12px;
}
.flow-grid > .flow-arrow:nth-child(8) {
    visibility: hidden;
    width: 0;
    margin: 0;
}
@media (max-width: 980px) {
    .flow-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    .flow-grid > .flow-arrow { display: none; }
    .flow-grid > .flow-step:nth-child(9) {
        grid-column: 1 / -1;
        padding: 28px 22px;
    }
}

/* -----------------------------------------------------------------
   ANCHOR 4: #hardware - Bigger 3D edge unit, stronger headline
   ----------------------------------------------------------------- */

.hw-layout {
    grid-template-columns: 1.3fr 1fr !important;
    gap: 64px !important;
    align-items: center;
}
.hw-visual {
    transform: scale(1.15);
    transform-origin: center center;
}
.hw-content h2.h2 {
    font-size: clamp(34px, 4.2vw, 52px) !important;
    letter-spacing: -1.4px;
    line-height: 1.08;
    margin-bottom: 18px;
}
.hw-content h2.h2 .gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold) 40%, rgba(201, 168, 76, 0.55) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.hw-content > p {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    margin-bottom: 32px;
}
@media (max-width: 1100px) {
    .hw-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
    .hw-visual { transform: scale(1); }
}

/* -----------------------------------------------------------------
   ANCHOR 5: #trust - YAPEIM flagship card
   ----------------------------------------------------------------- */

.trust-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
}
.trust-card--flagship {
    padding: 44px 48px;
    background:
        radial-gradient(ellipse 50% 80% at 90% 50%, rgba(201, 168, 76, 0.10) 0%, transparent 60%),
        linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, rgba(201, 168, 76, 0.02) 100%);
    border: 1px solid var(--gold) !important;
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}
.trust-card--flagship::after {
    content: "Flagship Deployment";
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold);
    padding: 6px 12px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    background: var(--black);
}
.trust-card-flagship-grid {
    display: grid;
    grid-template-columns: 1.2fr auto;
    gap: 56px;
    align-items: center;
}
.trust-card-flagship-text h3 {
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.2;
    margin-bottom: 14px;
    margin-top: 18px;
}
.trust-card-flagship-text p {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--text-soft);
}
.trust-card-flagship-stats {
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-left: 1px solid var(--gold-border);
    padding-left: 48px;
}
.trust-flag-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.trust-flag-stat-val {
    font-family: var(--font-mono);
    font-weight: var(--fw-semibold);
    font-size: 30px;
    line-height: 1;
    color: var(--white);
    letter-spacing: -1px;
}
.trust-flag-stat-lbl {
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.trust-card--supporting {
    padding: 28px 32px;
    max-width: 580px;
    margin: 0 auto;
}
.trust-card--supporting h3 {
    font-size: var(--fs-h3);
}
@media (max-width: 900px) {
    .trust-card--flagship { padding: 32px 24px; }
    .trust-card-flagship-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .trust-card-flagship-stats {
        flex-direction: row;
        flex-wrap: wrap;
        border-left: none;
        border-top: 1px solid var(--gold-border);
        padding-left: 0;
        padding-top: 24px;
        gap: 24px;
    }
    .trust-flag-stat { flex: 1; min-width: 90px; }
    .trust-flag-stat-val { font-size: 24px; }
    .trust-card--flagship::after { top: 16px; right: 16px; font-size: 9.5px; padding: 4px 9px; }
}

/* -----------------------------------------------------------------
   ANCHOR 6: #industries - Government as featured (default-open)
   ----------------------------------------------------------------- */

.ind-item[data-industry="government"] {
    border: 1px solid var(--gold) !important;
    background:
        radial-gradient(ellipse 40% 80% at 90% 50%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
        var(--surface);
    position: relative;
}
.ind-item[data-industry="government"]::before {
    content: "Featured · Strongest Proof";
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold);
    padding: 6px 12px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    background: var(--black);
    pointer-events: none;
}
@media (max-width: 720px) {
    .ind-item[data-industry="government"]::before {
        top: 12px;
        right: 12px;
        font-size: 9px;
        padding: 4px 8px;
        letter-spacing: 1.8px;
    }
}


/* =============================================================
   v4.8 ANNOTATED IMAGERY — CCTV signature, applied as a series
   -------------------------------------------------------------
   Goal: every imagery surface on the site reads as a real CCTV
   feed from the same surveillance system. Recurring elements
   (REC chip, signal bars, statusbar, bbox label, watermark)
   are the visual brand signature.

   Sections touched:
   1. REC chip + signal bars     — caps + industry + hero header
   2. Industry mini-chrome       — statusbar / scanlines / bbox-label / watermark
   3. Hero AI Event Log strip    — auto-scrolling ticker below mosaic
   4. YAPEIM Operations Snapshot — stylized 6-cell ops grid in flagship card
   ============================================================= */

/* ----- 1. REC chip + signal bars ----- */
.cctv-rec {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ff3030;
    font-family: var(--font-heading);
    font-size: 9.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.cctv-rec-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff3030;
    box-shadow: 0 0 5px rgba(255, 48, 48, 0.7);
    animation: cctvRecBlink 1.6s ease-in-out infinite;
}
@keyframes cctvRecBlink {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.88); }
}

.cctv-signal {
    display: inline-flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 10px;
}
.cctv-signal span {
    display: block;
    width: 2px;
    background: rgba(201, 168, 76, 0.85);
    border-radius: 1px;
}
.cctv-signal span:nth-child(1) { height: 30%; }
.cctv-signal span:nth-child(2) { height: 55%; }
.cctv-signal span:nth-child(3) { height: 80%; }
.cctv-signal span:nth-child(4) { height: 100%; background: var(--gold); }

/* Reduced motion: kill REC blink */
@media (prefers-reduced-motion: reduce) {
    .cctv-rec-dot { animation: none; }
}


/* ----- 2. Industry card mini-chrome ----- */
.industry-scene.cctv-mini {
    background: #000;
}

/* Top statusbar over the industry image */
.cctv-mini-statusbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 9px;
    font-family: var(--font-heading);
    font-size: 9.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 65%, transparent 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.cctv-mini-statusbar .cctv-live {
    color: var(--gold);
    font-weight: var(--fw-medium);
}
.cctv-mini-statusbar .cctv-live .pulse-dot {
    width: 5px; height: 5px;
    background: #ff3030;
    box-shadow: 0 0 5px rgba(255, 48, 48, 0.75);
}
.cctv-mini-statusbar .cctv-cam-id {
    color: rgba(255, 255, 255, 0.5);
}
.cctv-mini-statusbar .cctv-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
}
.cctv-mini-statusbar .cctv-ai-badge {
    background: var(--gold);
    color: var(--black);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 8.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.2px;
}

/* Light scanlines for industry scenes (less intense than cap-card scanlines) */
.cctv-mini-scanlines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.16) 0px,
        rgba(0, 0, 0, 0.16) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: 0.5;
    mix-blend-mode: multiply;
}

/* Bottom-left "monitoring zone" label — matches bbox-label aesthetic */
.cctv-mini-bbox-label {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--black);
    background: var(--gold);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.cctv-mini-bbox-label .lucide {
    width: 12px;
    height: 12px;
    stroke: var(--black);
    stroke-width: 2.2;
}

/* Bracket re-tint for cctv-mini: keep them gold but lower-contrast at top
   (statusbar already provides framing) */
.industry-scene.cctv-mini .industry-scene-bracket.tl,
.industry-scene.cctv-mini .industry-scene-bracket.tr {
    opacity: 0.55;
}

@media (max-width: 720px) {
    .cctv-mini-statusbar { font-size: 8.5px; gap: 6px; padding: 5px 8px 7px; }
    .cctv-mini-bbox-label { font-size: 8.5px; padding: 4px 7px; letter-spacing: 1.1px; }
    .cctv-mini-bbox-label .lucide { width: 10px; height: 10px; }
}


/* ----- 3. AI Event Log — auto-scrolling ticker ----- */
.cctv-eventlog {
    position: relative;
    margin: 14px 14px 0;
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, rgba(20, 18, 16, 0.85) 0%, rgba(10, 10, 10, 0.85) 100%);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 8px;
    overflow: hidden;
}

.cctv-eventlog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cctv-eventlog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold);
}
.cctv-eventlog-eyebrow .pulse-dot {
    width: 5px; height: 5px;
    background: #ff3030;
    box-shadow: 0 0 5px rgba(255, 48, 48, 0.7);
}
.cctv-eventlog-meta {
    font-family: var(--font-heading);
    font-size: 9.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.cctv-eventlog-viewport {
    position: relative;
    height: 88px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.cctv-eventlog-track {
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: cctvEventScroll 28s linear infinite;
}

.cctv-eventlog-row {
    display: grid;
    grid-template-columns: 64px 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
}
.cctv-eventlog-time {
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.6px;
}
.cctv-eventlog-cam {
    color: var(--gold);
    font-weight: var(--fw-medium);
    letter-spacing: 1px;
}
.cctv-eventlog-event {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.86);
    font-weight: var(--fw-medium);
}
.cctv-eventlog-event .lucide {
    width: 13px;
    height: 13px;
    stroke: var(--gold);
    stroke-width: 2;
}
.cctv-eventlog-zone {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10.5px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

@keyframes cctvEventScroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cctv-eventlog-track { animation: none; }
    .cctv-eventlog-viewport { height: auto; max-height: 88px; }
}

@media (max-width: 720px) {
    .cctv-eventlog { margin: 10px 10px 0; padding: 10px 12px 12px; }
    .cctv-eventlog-viewport { height: 74px; }
    .cctv-eventlog-row {
        grid-template-columns: 54px 50px 1fr;
        font-size: 10px;
        gap: 9px;
    }
    .cctv-eventlog-zone { display: none; }
}


/* ----- 4. YAPEIM Operations Snapshot ----- */
.trust-card-flagship-snapshot {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(201, 168, 76, 0.15);
}

.cctv-snapshot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.cctv-snapshot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold);
}
.cctv-snapshot-eyebrow .pulse-dot {
    width: 6px; height: 6px;
    background: #ff3030;
    box-shadow: 0 0 6px rgba(255, 48, 48, 0.75);
}
.cctv-snapshot-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 9.5px;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.5);
}
.cctv-snapshot-meta-text {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.6);
}

.cctv-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cctv-snapshot-cell {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
    isolation: isolate;
    background: #050505;
}

/* Stylized abstract "feed" — gradient + perspective grid + scan haze.
   No real imagery. Communicates "live feed shape" without faking content. */
.cctv-stylized::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.045) 1px, transparent 1px);
    background-size: 18px 18px;
    background-position: center 65%;
    mask-image: linear-gradient(180deg, transparent 0%, black 45%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 45%, black 90%, transparent 100%);
    transform: perspective(280px) rotateX(58deg) translateY(15%);
    transform-origin: center bottom;
    opacity: 0.7;
}
.cctv-stylized--g1 { background: radial-gradient(ellipse at 40% 60%, #1a1612 0%, #050403 70%); }
.cctv-stylized--g2 { background: radial-gradient(ellipse at 65% 55%, #16140f 0%, #050505 70%); }
.cctv-stylized--g3 { background: radial-gradient(ellipse at 50% 70%, #18130c 0%, #060606 70%); }
.cctv-stylized--g4 { background: radial-gradient(ellipse at 30% 65%, #181410 0%, #050403 70%); }
.cctv-stylized--g5 { background: radial-gradient(ellipse at 55% 50%, #14130e 0%, #050505 70%); }
.cctv-stylized--g6 { background: radial-gradient(ellipse at 45% 65%, #1a160e 0%, #060504 70%); }

.cctv-stylized-haze {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 35%, rgba(201, 168, 76, 0.18) 0%, transparent 60%);
    animation: cctvHazeDrift 9s ease-in-out infinite alternate;
}
@keyframes cctvHazeDrift {
    0%   { transform: translate(0, 0)     scale(1); }
    100% { transform: translate(8%, -4%) scale(1.05); }
}

.cctv-snapshot-cell .cctv-bbox-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--gold);
    opacity: 0.8;
    z-index: 3;
}
.cctv-snapshot-cell .cctv-bbox-corner.tl { top: 5px;    left: 5px;    border-right: none;  border-bottom: none; }
.cctv-snapshot-cell .cctv-bbox-corner.tr { top: 5px;    right: 5px;   border-left: none;   border-bottom: none; }
.cctv-snapshot-cell .cctv-bbox-corner.bl { bottom: 5px; left: 5px;    border-right: none;  border-top: none; }
.cctv-snapshot-cell .cctv-bbox-corner.br { bottom: 5px; right: 5px;   border-left: none;   border-top: none; }

.cctv-snapshot-cell .cctv-mini-scanlines {
    z-index: 2;
}

.cctv-snapshot-cell-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    font-family: var(--font-heading);
    font-size: 8.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 3px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.cctv-snapshot-cell-label .pulse-dot {
    width: 4px; height: 4px;
    background: #ff3030;
    box-shadow: 0 0 4px rgba(255, 48, 48, 0.7);
}

.cctv-snapshot-footnote {
    margin: 10px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    letter-spacing: 0.2px;
}

@media (prefers-reduced-motion: reduce) {
    .cctv-stylized-haze { animation: none; }
}

@media (max-width: 900px) {
    .cctv-snapshot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .cctv-snapshot-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .cctv-snapshot-cell-label { font-size: 7.5px; padding: 2px 5px; }
}


/* =============================================================
   v4.9 POV RECURRING DEVICE
   -------------------------------------------------------------
   Goal: the Aurum AI Edge Unit becomes the recurring product
   "device" of the brand. Apple product-page treatment:
     1. 6 spec callouts radiating from the 3D hardware unit
     2. 1 floating callout labelling the hero live monitor
     3. The same Edge Unit silhouette appears in the architecture
        diagram core node (replacing the generic CPU icon)
   ============================================================= */

/* ----- 1. Hardware unit: spec callouts radiating from the unit ----- */
.hw-callouts {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.hw-callout {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(6px);
    animation: hwCalloutIn 0.6s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
@keyframes hwCalloutIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Anchor dot — sits at the device-side end of the line */
.hw-callout-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 7px rgba(201, 168, 76, 0.65);
    flex: 0 0 auto;
}
.hw-callout-dot::after {
    /* expanding ring pulse */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--gold);
    animation: hwCalloutRing 2.6s ease-out infinite;
    opacity: 0;
}
@keyframes hwCalloutRing {
    0%   { transform: scale(1);   opacity: 0.65; }
    100% { transform: scale(3.6); opacity: 0; }
}

/* The connecting line */
.hw-callout-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--gold) 0%, rgba(201, 168, 76, 0.25) 100%);
    min-width: 32px;
    max-width: 72px;
}

/* Label group */
.hw-callout-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    white-space: nowrap;
}
.hw-callout-eyebrow {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold);
}
.hw-callout-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.3px;
    color: var(--white, #ffffff);
}
.hw-callout-sub {
    font-family: var(--font-heading);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.2px;
}

/* Positioning — left side (label-line-dot, line goes right toward unit) */
.hw-callout--tl,
.hw-callout--ml,
.hw-callout--bl {
    flex-direction: row-reverse;
}
.hw-callout--tl .hw-callout-line,
.hw-callout--ml .hw-callout-line,
.hw-callout--bl .hw-callout-line {
    background: linear-gradient(270deg, var(--gold) 0%, rgba(201, 168, 76, 0.25) 100%);
}
.hw-callout--tl .hw-callout-label,
.hw-callout--ml .hw-callout-label,
.hw-callout--bl .hw-callout-label {
    text-align: right;
    align-items: flex-end;
}

/* Position coordinates around the unit on stage (aspect 5/4) */
.hw-callout--tl { top: 14%; left: 2%;   animation-delay: 0.15s; }
.hw-callout--tr { top: 14%; right: 2%;  animation-delay: 0.30s; }
.hw-callout--ml { top: 48%; left: 2%;   animation-delay: 0.45s; }
.hw-callout--mr { top: 48%; right: 2%;  animation-delay: 0.60s; }
.hw-callout--bl { top: 78%; left: 2%;   animation-delay: 0.75s; }
.hw-callout--br { top: 78%; right: 2%;  animation-delay: 0.90s; }

/* Hover on the stage — slight emphasis on lines */
.hw-stage:hover .hw-callout-line {
    background: linear-gradient(90deg, #FFD675 0%, rgba(201, 168, 76, 0.45) 100%);
    transition: background 0.4s ease;
}
.hw-stage:hover .hw-callout--tl .hw-callout-line,
.hw-stage:hover .hw-callout--ml .hw-callout-line,
.hw-stage:hover .hw-callout--bl .hw-callout-line {
    background: linear-gradient(270deg, #FFD675 0%, rgba(201, 168, 76, 0.45) 100%);
}

/* Mobile + tablet: hide radiating callouts, lean on the existing .hw-specs
   list (already next to the unit and accessible). Specs already mirror
   the callout content, so nothing is lost. */
@media (max-width: 980px) {
    .hw-callouts { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hw-callout { animation: none; opacity: 1; transform: none; }
    .hw-callout-dot::after { animation: none; opacity: 0; }
}


/* ----- 2. Hero monitor: single floating "this IS the device" callout ----- */
.hero-monitor-callout {
    position: absolute;
    top: -28px;
    right: 16px;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    animation: hwCalloutIn 0.7s var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1)) 1.2s forwards;
}
.hero-monitor-callout-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.7);
    margin-top: 36px; /* sits near the monitor's top edge */
    position: relative;
    flex: 0 0 auto;
}
.hero-monitor-callout-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--gold);
    animation: hwCalloutRing 2.6s ease-out infinite;
}
.hero-monitor-callout-line {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.25) 0%, var(--gold) 100%);
    margin: 0 14px 0 6px;
    flex: 0 0 auto;
    align-self: flex-start;
}
.hero-monitor-callout-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
}
.hero-monitor-callout-eyebrow {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold);
}
.hero-monitor-callout-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--white, #ffffff);
    letter-spacing: 0.3px;
}
.hero-monitor-callout-sub {
    font-family: var(--font-heading);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.2px;
}

/* Hide on mobile — hero monitor collapses to single rotating tile,
   the callout would float over nothing useful */
@media (max-width: 860px) {
    .hero-monitor-callout { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-monitor-callout { animation: none; opacity: 1; transform: none; }
    .hero-monitor-callout-dot::after { animation: none; opacity: 0; }
}


/* ----- 3. Architecture core: recurring device silhouette ----- */
.ap-arch-core-icon--device {
    width: 36px;
    height: 36px;
    color: var(--gold);
    stroke: var(--gold);
    filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.35));
}
@media (max-width: 720px) {
    .ap-arch-core-icon--device { width: 28px; height: 28px; }
}


/* =============================================================
   v4.10 MOTION POLISH
   -------------------------------------------------------------
   Goal: motion stops feeling like "elements fade in", starts
   feeling intentional and choreographed. Three moves:
     1. Magnetic CTAs — primary buttons pull subtly toward cursor
     2. Button micro-motion — arrow slide, gold glow ring on hover
     3. Section orchestration — coordinated reveal stagger inside
        sections marked [data-orchestrate]
   ============================================================= */

/* ----- 1. Magnetic CTAs ----- */
/* The JS sets --mag-x / --mag-y inline as the cursor approaches.
   We apply that pull as a transform, layered with the existing
   :hover lift so both effects coexist cleanly. */
.btn-magnetic {
    --mag-x: 0px;
    --mag-y: 0px;
    transform: translate(var(--mag-x), var(--mag-y));
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity var(--ease),
        background var(--ease),
        border-color var(--ease),
        box-shadow var(--ease);
    will-change: transform;
}

/* Hover lift composes with magnetic pull instead of replacing it.
   Existing .btn-gold:hover / .btn-outline:hover apply transform: var(--lift-sm)
   which would override our pull; nest pull + lift in one transform. */
.btn-magnetic.btn-gold:hover {
    transform: translate(var(--mag-x), calc(var(--mag-y) - 2px));
    opacity: 1;
    box-shadow: 0 10px 32px rgba(201, 168, 76, 0.32);
}
.btn-magnetic.btn-outline:hover {
    transform: translate(var(--mag-x), calc(var(--mag-y) - 2px));
    background: var(--gold-subtle);
    border-color: var(--gold);
}

/* ----- 2. Button micro-motion: arrow slide on hover ----- */
.btn .lucide {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover .lucide {
    transform: translateX(4px);
}
/* Down-arrow buttons (See Capabilities, See FAQ): slide down instead */
.btn[href="#capabilities"]:hover .lucide,
.btn[href="#faq"]:hover .lucide {
    transform: translateY(3px);
}

/* ----- 3. Button gold glow ring on hover (gold version only) ----- */
.btn-gold {
    position: relative;
    isolation: isolate;
    overflow: visible;
}
.btn-gold::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.45) 0%, transparent 70%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    filter: blur(10px);
}
.btn-gold:hover::before {
    opacity: 1;
}

/* ----- 4. Breathing pulse on the hero primary CTA ----- */
/* Only the FIRST btn-gold inside hero gets a slow breathing glow so the
   eye lands there before anywhere else. Subtle — 2.5s cycle, low amplitude. */
#hero .btn-gold {
    animation: heroCtaBreathing 3.4s ease-in-out infinite;
}
@keyframes heroCtaBreathing {
    0%, 100% { box-shadow: 0 4px 14px rgba(201, 168, 76, 0.18); }
    50%      { box-shadow: 0 6px 22px rgba(201, 168, 76, 0.36); }
}
/* Suspend breathing while hovering — the hover state's stronger shadow takes over */
#hero .btn-gold:hover {
    animation: none;
}

/* ----- 5. Section orchestrator: tighter reveal stagger via [data-orchestrate] ----- */
/* Inline transition-delay is applied by initSectionOrchestrator() to
   .up children that don't already have a manual .dXs delay class.
   The class .up + its existing cubic-bezier transition do the rest.
   This block exists to document the contract and to prevent any
   future :where() override from killing the inline delays. */
section[data-orchestrate] .up {
    /* Smoother curve specifically for orchestrated sections.
       The default .up uses cubic-bezier(0.16, 1, 0.3, 1); this one
       lands slightly softer at the end for a more "settled" feel. */
    transition-timing-function: cubic-bezier(0.22, 1, 0.32, 1);
}

/* ----- 6. Reduced motion: kill everything new in this batch ----- */
@media (prefers-reduced-motion: reduce) {
    .btn-magnetic { --mag-x: 0; --mag-y: 0; transform: none; will-change: auto; }
    .btn:hover .lucide { transform: none; }
    .btn-gold::before { display: none; }
    #hero .btn-gold { animation: none; }
}


/* =============================================================
   v4.11 DISTINCTIVE TYPOGRAPHY  (2026-06-13)
   -------------------------------------------------------------
   Final batch. Seven moves to push type from "default Geist" to
   "intentional, crafted Geist + Geist Mono italic in dialogue."

     1. OpenType features site-wide (kern, liga, calt)
     2. Tabular numerals on stats, clocks, counters
     3. Display-size letter-spacing refinement (clamp-based)
     4. Italic Geist Mono accent words on selected headlines
     5. Mixed-weight emphasis on the hero h1 .gold accent
     6. Drop cap on the problem section's lede paragraph
     7. Eyebrow .label tracking refinement
   ============================================================= */

/* ----- 1 + 2. Global OpenType + tabular numerals ----- */
html {
    font-feature-settings:
        "kern" 1,    /* Kerning always on */
        "liga" 1,    /* Standard ligatures (fi, fl, etc.) */
        "calt" 1;    /* Contextual alternates */
    font-variant-ligatures: contextual;
}

/* Numeric displays get tabular-nums so digits don't jitter when counting up. */
.hero-monitor-stat,
.stat-val,
.trust-flag-stat-val,
.cctv-time,
.cctv-eventlog-time,
[data-clock],
[data-count],
[data-event-counter] {
    font-variant-numeric: tabular-nums;
}

/* ----- 3. Display-size letter-spacing refinement ----- */
/* Geist needs tighter tracking at very large sizes. The static -1.5px
   in design tokens works at clamp's midpoint but feels loose at 64px+.
   Use a clamp formula that scales with viewport for cleaner display type. */
h1, .d1 {
    letter-spacing: clamp(-2.5px, -0.18vw, -1px);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
h2, .h2 {
    letter-spacing: clamp(-1.2px, -0.08vw, -0.4px);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
.problem-anchor-q {
    letter-spacing: clamp(-1.4px, -0.1vw, -0.6px);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

/* ----- 4. Italic Geist Mono accent words ----- */
/* Usage: <em class="accent-em">word</em> inside headings.
   Geist Mono Italic 500 was preloaded but unused until v4.11. This is
   the typographic punctuation of the page — deliberate, hand-set feel. */
em.accent-em {
    font-family: var(--font-mono);
    font-style: italic;
    font-weight: 500;
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.3px;
    padding: 0 0.05em;
    position: relative;
    top: -0.02em;
}

/* ----- 5. Mixed-weight emphasis on hero h1 .gold accent ----- */
/* Hero h1 is the most-read heading on the page. Base is medium (500).
   Bumping .gold to 700 inside the hero only creates the deliberate
   weight-mix Apple uses on product page heroes. NOT applied to other
   h2 .gold accents (would be too much). */
.hero-title .gold {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ----- 6. Drop cap on the problem section's lede paragraph ----- */
/* Iconic move. Single drop cap at the bridge between the provocative
   question and the four problem cards. Not used elsewhere. */
.problem-anchor-sub {
    text-align: left;
}
.problem-anchor-sub::first-letter {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 3.2em;
    line-height: 0.9;
    float: left;
    padding: 4px 12px 0 0;
    color: var(--gold);
    text-shadow: 0 2px 8px rgba(201, 168, 76, 0.18);
}
@media (max-width: 720px) {
    .problem-anchor-sub::first-letter {
        font-size: 2.6em;
        padding: 2px 9px 0 0;
    }
}

/* ----- 7. Eyebrow .label breathing: slightly wider tracking ----- */
/* Subtle push from "uppercase text" to "deliberately spaced label". */
.sec-header .label,
.problem-anchor .label {
    letter-spacing: calc(var(--ls-label) + 0.5px);
}


/* ============================================================
   v5 — 3D UPGRADE
   Three.js globe, gold shimmer, scan beam, card glow
   ============================================================ */

/* --- Three.js container ---
   Sits between the video overlay (z:-1/0) and the particle
   canvas (z:0). Covers the full hero, pointer-events disabled
   so clicks fall through to content below. */
.hero-3d {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.hero-3d.is-ready {
    opacity: 1;
}
.hero-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Reduce globe opacity on mobile — smaller screen, less room */
@media (max-width: 767px) {
    .hero-3d { opacity: 0.7; }
    .hero-3d.is-ready { opacity: 0.7; }
}

/* --- Gold shimmer on hero h1 accent ---
   The "Now Intelligent." span breathes with a slow brightness
   pulse. Subtle — just enough to draw the eye back after reading. */
@keyframes v5-goldShimmer {
    0%,  100% { filter: brightness(1)   drop-shadow(0 0  6px rgba(201,168,76,0.20)); }
    50%        { filter: brightness(1.25) drop-shadow(0 0 18px rgba(201,168,76,0.55)); }
}
.hero-title .gold {
    animation: v5-goldShimmer 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .hero-title .gold { animation: none; }
}

/* --- Section scan beam ---
   A luminous horizontal sweep passes across each section header
   once on page load, then loops on a long delay. */
@keyframes v5-sectionScan {
    0%   { transform: translateX(-110%) skewX(-12deg); opacity: 0;    }
    8%   {                                              opacity: 1;    }
    92%  {                                              opacity: 1;    }
    100% { transform: translateX(210%)  skewX(-12deg); opacity: 0;    }
}
.sec-header {
    position: relative;
    overflow: hidden;
}
.sec-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,168,76,0.07) 45%,
        rgba(201,168,76,0.13) 50%,
        rgba(201,168,76,0.07) 55%,
        transparent 100%);
    animation: v5-sectionScan 9s cubic-bezier(0.4,0,0.6,1) infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .sec-header::after { display: none; }
}

/* --- Enhanced card hover glow ---
   Extends the existing tilt-card hover with a deeper gold aura. */
.tilt-card {
    transition: box-shadow 0.35s ease, transform 0.2s ease;
}
.tilt-card:hover {
    box-shadow:
        0 0 0 1px rgba(201,168,76,0.25),
        0 8px 28px rgba(201,168,76,0.10),
        0 0 60px rgba(201,168,76,0.05),
        inset 0 1px 0 rgba(201,168,76,0.08);
}

/* --- Capability card icon glow on hover --- */
.cap-card:hover .icon-wrap {
    box-shadow: 0 0 24px rgba(201,168,76,0.35), 0 0 48px rgba(201,168,76,0.12);
    transition: box-shadow 0.4s ease;
}

/* --- Solution stat value flicker ---
   Numbers feel "live" — very faint, very fast flicker on initial paint. */
@keyframes v5-statFlicker {
    0%, 100% { opacity: 1; }
    92%       { opacity: 1; }
    93%       { opacity: 0.82; }
    94%       { opacity: 1; }
}
.stat-val {
    animation: v5-statFlicker 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .stat-val { animation: none; }
}

/* --- Floating ambient dots around capabilities section header ---
   Pure CSS. Two small gold dots drift upward behind the label. */
.sec-header .label {
    position: relative;
}
@keyframes v5-floatDot {
    0%   { transform: translateY(0)   scale(1);    opacity: 0;    }
    10%  {                                          opacity: 0.6;  }
    90%  {                                          opacity: 0.3;  }
    100% { transform: translateY(-28px) scale(0.6); opacity: 0;   }
}
.sec-header .label::before,
.sec-header .label::after {
    content: '';
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gold);
    top: 50%; left: -14px;
    animation: v5-floatDot 4s ease-in-out infinite;
    pointer-events: none;
}
.sec-header .label::after {
    left: -24px;
    animation-delay: 1.8s;
    width: 3px; height: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .sec-header .label::before,
    .sec-header .label::after { display: none; }
}

/* --- CCTV bounding-box corners: brighter gold pulse on hero tiles --- */
@keyframes v5-bboxCorner {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1.0; box-shadow: 0 0 8px rgba(201,168,76,0.8); }
}
.hero-tile-bbox .cctv-bbox-corner {
    animation: v5-bboxCorner 2.4s ease-in-out infinite;
}
.hero-tile-bbox .cctv-bbox-corner.tr { animation-delay: 0.3s; }
.hero-tile-bbox .cctv-bbox-corner.bl { animation-delay: 0.6s; }
.hero-tile-bbox .cctv-bbox-corner.br { animation-delay: 0.9s; }
@media (prefers-reduced-motion: reduce) {
    .hero-tile-bbox .cctv-bbox-corner { animation: none; }
}


/* =============================================================
   v5.1 SCROLL MOTION + LOOP POLISH
   ---------------------------------------------------------------
   1. Dual hero-video crossfade  (hides the seam of AI-gen loops)
   2. Scroll progress bar         (thin gold line at top of viewport)
   3. Hero scroll-fade            (hero dims + scales as you scroll past)
   4. Background parallax         (glow/grid/3D drift at different speeds)
   All effects honour prefers-reduced-motion via main.js skip checks.
============================================================= */

/* ---------- 1. Hero video crossfade pair ---------- */
.hero-video-stack {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.hero-video-stack .hero-video-bg {
    /* override the legacy z-index from .hero-video-bg base — both videos
       live inside the stack and z-index between them is set via order */
    z-index: auto;
    position: absolute;
    inset: 0;
    transition: opacity 1.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: opacity;
}
.hero-video-bg--a { opacity: 1; }    /* primary buffer: visible at load   */
.hero-video-bg--b { opacity: 0; }    /* secondary: invisible until JS swap */
/* JS toggles .is-front to flip which one is visible during the crossfade */
.hero-video-bg.is-front { opacity: 1; }
.hero-video-bg.is-back  { opacity: 0; }

/* ---------- 2. Scroll progress bar ---------- */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;          /* JS updates this on scroll */
    z-index: 9999;
    background: linear-gradient(90deg,
        rgba(201, 168, 76, 0.0)  0%,
        rgba(201, 168, 76, 0.85) 50%,
        rgba(255, 214, 117, 1.0) 100%);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.55);
    pointer-events: none;
    transition: width 0.08s linear, opacity 0.4s ease;
    opacity: 0;         /* hidden at top of page */
}
#scroll-progress.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    #scroll-progress { display: none; }
}

/* ---------- 3. Hero scroll-fade ----------
   --hero-scroll is set 0..1 by initHeroScrollFade() as the hero leaves
   the viewport. Used to dim and gently shrink the hero so it feels like
   the visitor is travelling past it, not just scrolling a static block. */
#hero {
    --hero-scroll: 0;
    transform: translate3d(0, calc(var(--hero-scroll) * 32px), 0)
               scale(calc(1 - var(--hero-scroll) * 0.035));
    transform-origin: 50% 30%;
    transition: transform 0.2s linear;
    will-change: transform;
}
/* Background layers and visual fade with scroll but text stays full opacity
   so the message remains readable until the hero is mostly off-screen */
#hero .hero-video-stack,
#hero .hero-3d,
#hero #hero-particles,
#hero .hero-glow,
#hero .hero-grid-bg,
#hero .hero-visual {
    opacity: calc(1 - var(--hero-scroll) * 0.6);
    transition: opacity 0.2s linear;
}
@media (prefers-reduced-motion: reduce) {
    #hero {
        transform: none !important;
    }
    #hero .hero-video-stack,
    #hero .hero-3d,
    #hero #hero-particles,
    #hero .hero-glow,
    #hero .hero-grid-bg,
    #hero .hero-visual {
        opacity: 1 !important;
    }
}

/* ---------- 4. Parallax helper ----------
   Each [data-parallax] element gets a CSS variable --parallax-y set by JS.
   We additively translate without nuking existing transforms (especially on
   .hero-glow which uses translateY for vertical centering). */
[data-parallax] {
    --parallax-y: 0px;
    will-change: transform;
}
.hero-3d[data-parallax] {
    transform: translate3d(0, var(--parallax-y), 0);
}
.hero-grid-bg[data-parallax] {
    transform: translate3d(0, var(--parallax-y), 0);
}
.hero-glow[data-parallax] {
    /* original CSS used translateY(-50%) for vertical center; preserve it */
    transform: translate3d(0, calc(-50% + var(--parallax-y)), 0);
}
@media (prefers-reduced-motion: reduce) {
    [data-parallax] {
        transform: none !important;
    }
    .hero-glow[data-parallax] {
        transform: translateY(-50%) !important;
    }
}

/* ---------- 5. Section scroll-in lift (additive to existing .up) ----------
   v4.10 orchestrator already staggers .up children. v5.1 adds a stronger
   directional cue: section headers slide in from the side with a slight tilt,
   then settle. Subtle but reads as deliberate motion. */
.sec-header .label,
.sec-header h2 {
    transform: translateY(18px);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
section.is-visible .sec-header .label,
section.is-visible .sec-header h2 {
    transform: translateY(0);
    opacity: 1;
}
section.is-visible .sec-header h2 {
    transition-delay: 0.08s;
}
@media (prefers-reduced-motion: reduce) {
    .sec-header .label,
    .sec-header h2 {
        transform: none;
        opacity: 1;
        transition: none;
    }
}


/* =============================================================
   v5.2 SMOOTH SCROLL (LENIS)
   ---------------------------------------------------------------
   Lenis lerps the native scroll position so wheel/trackpad gestures
   feel weighted and continuous (the "agency site" feel — like
   fromanother.love, studio-freight.com, etc.).
   The CSS rules below are mandatory for Lenis to operate. They neutralize
   the browser's own scroll-behavior so Lenis can drive it instead.

   Reduced-motion users get NATIVE scroll back via the JS bail in
   initSmoothScroll() — they never see the .lenis classes applied.
============================================================= */
html.lenis,
html.lenis body {
    height: auto;
}
html.lenis-smooth {
    scroll-behavior: auto !important;
}
html.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
html.lenis-stopped {
    overflow: clip;
}
html.lenis-scrolling iframe {
    pointer-events: none;
}


/* =================================================================
   v6 EDITORIAL DISCIPLINE + 3D — LIGHT THEME OVERRIDE
   ------------------------------------------------------------------
   Activated by <body class="v6"> wrapper. Inverts the colour system
   for every section below the hero (#hero stays dark cinematic).

   Design philosophy: wibify.agency — restrained, editorial, generous
   whitespace, monochrome with one disciplined accent, italic word
   emphasis, tracked numbered section labels.

   Brand kept: gold #C9A84C accent retained but used SPARINGLY (max
   one gold word per heading, plus CTA button).

   Aggressive overrides — anything below should win the cascade.
================================================================= */

/* ---------- Light theme tokens ---------- */
body.v6 {
    --v6-cream:        #F4F1EB;   /* primary light background */
    --v6-cream-deep:   #ECE7DD;   /* secondary surface */
    --v6-white:        #FFFFFF;   /* card surface */
    --v6-ink:          #0F0F10;   /* primary text */
    --v6-ink-soft:     #4A4A4F;   /* secondary text */
    --v6-ink-muted:    #8A8A8F;   /* eyebrow / meta text */
    --v6-rule:         rgba(15, 15, 16, 0.08);
    --v6-rule-strong:  rgba(15, 15, 16, 0.16);
    --v6-gold:         #C9A84C;
    --v6-gold-deep:    #A68A35;
}


/* ---------- KILL THE MOTION NOISE on light sections ----------
   Below the hero, we kill: the section scan beam, the gold shimmer
   spam, the hero glow drift, the particle wash. Wibify's silence
   between motion moments is the source of its calm. */

/* Scan beam from v5 — kill on every non-hero section */
body.v6 main > section:not(#hero) .sec-header::after {
    display: none !important;
}

/* Hero glow drift breathing keyframe — neutralise (we re-style glow below) */
body.v6 .hero-glow {
    animation: none !important;
}

/* Hero particles canvas — hide entirely. The 3D sphere is the only
   hero motion focal point in v6. */
body.v6 #hero-particles {
    display: none !important;
}

/* Gold shimmer on hero h1 .gold — keep but slower + softer */
body.v6 .hero-title .gold {
    animation: v6-goldShimmer 9s ease-in-out infinite;
}
@keyframes v6-goldShimmer {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 4px rgba(201,168,76,0.18)); }
    50%       { filter: brightness(1.12) drop-shadow(0 0 12px rgba(201,168,76,0.34)); }
}


/* ---------- HERO POLISH (still dark, just calmer) ---------- */

/* Hero grid pattern: dim further for more silence behind sphere */
body.v6 .hero-grid-bg { opacity: 0.45; }
body.v6 .hero-glow    { opacity: 0.7;  filter: blur(28px); }

/* Kill the Higgsfield video noise from the hero — v6 picks the 3D
   sphere as the single hero focal point. Re-enable later if you want. */
body.v6 .hero-video-stack { display: none !important; }
body.v6 .hero-video-overlay { background: rgba(10, 10, 10, 0.30); }

/* Hero h1 ladder a touch larger + tighter, more wibify scale */
body.v6 .hero-title {
    font-size: clamp(56px, 7.8vw, 116px);
    line-height: 0.96;
    letter-spacing: clamp(-3.5px, -0.22vw, -1.5px);
}


/* ---------- BODY-LEVEL LIGHT THEME ---------- */

body.v6 {
    background: var(--v6-cream);
    color: var(--v6-ink);
}

/* The dark backgrounds and per-section gradients in v4/v5 styles get
   wiped here. Every non-hero section becomes a cream surface. */
body.v6 main > section:not(#hero) {
    background: var(--v6-cream) !important;
    color: var(--v6-ink);
    /* MASSIVE breathing room — wibify's signature whitespace */
    padding-top: clamp(96px, 12vw, 200px);
    padding-bottom: clamp(96px, 12vw, 200px);
    position: relative;
}

/* Hairline rule between sections — editorial signature */
body.v6 main > section:not(#hero) + section:not(#hero)::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(90%, 1200px);
    height: 1px;
    background: var(--v6-rule);
}


/* ---------- TYPOGRAPHY RHYTHM ---------- */

body.v6 main > section:not(#hero) h2 {
    color: var(--v6-ink);
    font-family: var(--font-heading, 'Geist', system-ui, sans-serif);
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 1.02;
    letter-spacing: clamp(-2px, -0.12vw, -0.6px);
    font-weight: 500;
    max-width: 18ch;
    margin: 0 0 32px 0;
}

/* Gold word emphasis inside section h2s.
   Apply via <em class="v6-em"> — Geist Sans, gold accent, no italic
   (italic was clipped by .word-reveal overflow:hidden). */
body.v6 .v6-em {
    font-style: normal;
    font-weight: 600;
    color: var(--v6-ink);
    letter-spacing: -0.01em;
}

/* Gold accent in light sections — RARE, max one per section */
body.v6 main > section:not(#hero) .gold {
    color: var(--v6-gold-deep);
    background: none;
    -webkit-text-fill-color: var(--v6-gold-deep);
    animation: none;
    text-shadow: none;
}

/* Body paragraph */
body.v6 main > section:not(#hero) p {
    color: var(--v6-ink-soft);
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.6;
    max-width: 62ch;
}


/* ---------- [01] NUMBERED SECTION LABEL ---------- */

body.v6 .sec-num {
    display: inline-block;
    font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v6-ink-muted);
    margin-right: 18px;
    vertical-align: middle;
}

/* Re-style the existing .label inside .sec-header for light theme */
body.v6 main > section:not(#hero) .sec-header .label {
    color: var(--v6-ink-muted);
    font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 0;
    vertical-align: middle;
}

/* Eyebrow row: number + label sit on a hairline rule */
body.v6 .sec-header {
    padding-top: 28px;
    margin-bottom: 48px;
    border-top: 1px solid var(--v6-rule);
    position: relative;
    overflow: visible !important;  /* override scan-beam clipper */
}
body.v6 .sec-header .label::before {
    /* kill the floating ambient dots from v5 */
    display: none !important;
}
body.v6 .sec-header .label::after {
    display: none !important;
}


/* ---------- CARDS & SURFACES ---------- */

body.v6 main > section:not(#hero) .tilt-card,
body.v6 main > section:not(#hero) .cap-card,
body.v6 main > section:not(#hero) .hw-card,
body.v6 main > section:not(#hero) .ind-item,
body.v6 main > section:not(#hero) .faq-item {
    background: var(--v6-white) !important;
    border: 1px solid var(--v6-rule) !important;
    color: var(--v6-ink);
    box-shadow: none !important;
    border-radius: 14px;
}

/* Card text recolours */
body.v6 main > section:not(#hero) .cap-card h3,
body.v6 main > section:not(#hero) .hw-card h3,
body.v6 main > section:not(#hero) .ind-head h3,
body.v6 main > section:not(#hero) .faq-head {
    color: var(--v6-ink) !important;
}
body.v6 main > section:not(#hero) .cap-card p,
body.v6 main > section:not(#hero) .hw-card p,
body.v6 main > section:not(#hero) .ind-panel p,
body.v6 main > section:not(#hero) .faq-panel p {
    color: var(--v6-ink-soft) !important;
}

/* Hairline tick on card hover (wibify-style restraint, not gold aura) */
body.v6 main > section:not(#hero) .tilt-card:hover,
body.v6 main > section:not(#hero) .cap-card:hover,
body.v6 main > section:not(#hero) .hw-card:hover {
    border-color: var(--v6-rule-strong) !important;
    box-shadow: 0 8px 30px rgba(15, 15, 16, 0.06) !important;
}

/* Icon wrapper bg for capability cards */
body.v6 main > section:not(#hero) .icon-wrap {
    background: var(--v6-cream-deep) !important;
    border-color: var(--v6-rule) !important;
    color: var(--v6-ink) !important;
}
body.v6 main > section:not(#hero) .icon-wrap svg {
    stroke: var(--v6-ink) !important;
}


/* ---------- HOW IT WORKS — ALTERNATING IMAGE-LEFT / IMAGE-RIGHT
   Wibify's signature process layout. We restructure the existing
   .hw-list grid into a vertical stack of 2-column rows that alternate
   sides. Each step gets its own row with generous vertical rhythm. */

body.v6 #how-it-works .hw-list,
body.v6 #how-it-works .hw-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(80px, 9vw, 140px) !important;
    grid-template-columns: none !important;
}
body.v6 #how-it-works .hw-card,
body.v6 #how-it-works .hw-step {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(40px, 5vw, 80px) !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
}
body.v6 #how-it-works .hw-card:nth-child(even),
body.v6 #how-it-works .hw-step:nth-child(even) {
    direction: rtl;
}
body.v6 #how-it-works .hw-card:nth-child(even) > *,
body.v6 #how-it-works .hw-step:nth-child(even) > * {
    direction: ltr;
}
body.v6 #how-it-works .hw-card-num,
body.v6 #how-it-works .hw-step-num {
    font-family: var(--font-mono, 'Geist Mono', monospace);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v6-ink-muted);
    display: block;
    margin-bottom: 16px;
}
body.v6 #how-it-works .hw-card h3,
body.v6 #how-it-works .hw-step h3 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 16px !important;
    max-width: 16ch;
}

@media (max-width: 860px) {
    body.v6 #how-it-works .hw-card,
    body.v6 #how-it-works .hw-step {
        grid-template-columns: 1fr !important;
    }
    body.v6 #how-it-works .hw-card:nth-child(even),
    body.v6 #how-it-works .hw-step:nth-child(even) {
        direction: ltr;
    }
}


/* ---------- INDUSTRIES section ---------- */

body.v6 #industries .ind-item {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--v6-rule) !important;
    border-bottom: none !important;
    background: transparent !important;
    padding: 0 !important;
}
body.v6 #industries .ind-item:last-child {
    border-bottom: 1px solid var(--v6-rule) !important;
}
body.v6 #industries .ind-head {
    padding: 28px 0 !important;
    background: transparent !important;
    color: var(--v6-ink) !important;
}
body.v6 #industries .ind-head h3 {
    font-size: clamp(20px, 2vw, 28px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.3px !important;
}


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

body.v6 #faq .faq-item {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--v6-rule) !important;
    border-bottom: none !important;
    background: transparent !important;
    padding: 0 !important;
}
body.v6 #faq .faq-item:last-child {
    border-bottom: 1px solid var(--v6-rule) !important;
}
body.v6 #faq .faq-head {
    padding: 26px 0 !important;
    background: transparent !important;
    color: var(--v6-ink) !important;
    font-size: clamp(17px, 1.4vw, 21px) !important;
    font-weight: 500 !important;
}


/* ---------- BUTTONS / CTAs ---------- */

body.v6 main > section:not(#hero) .btn {
    border-radius: 999px !important;
    padding: 16px 28px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}
body.v6 main > section:not(#hero) .btn-gold {
    background: var(--v6-ink) !important;
    color: var(--v6-cream) !important;
    border: 1px solid var(--v6-ink) !important;
    box-shadow: none !important;
}
body.v6 main > section:not(#hero) .btn-gold:hover {
    background: var(--v6-gold-deep) !important;
    color: var(--v6-white) !important;
    border-color: var(--v6-gold-deep) !important;
}
body.v6 main > section:not(#hero) .btn-outline {
    background: transparent !important;
    color: var(--v6-ink) !important;
    border: 1px solid var(--v6-rule-strong) !important;
}
body.v6 main > section:not(#hero) .btn-outline:hover {
    background: var(--v6-ink) !important;
    color: var(--v6-cream) !important;
}


/* ---------- NAV — adapt to scroll context ---------- */

body.v6 #navbar.scrolled {
    background: rgba(244, 241, 235, 0.85) !important;
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--v6-rule) !important;
}
body.v6 #navbar.scrolled .nav-links a {
    color: var(--v6-ink) !important;
}
body.v6 #navbar.scrolled .nav-cta {
    background: var(--v6-ink) !important;
    color: var(--v6-cream) !important;
}
/* Swap the white wordmark for a graphite version when scrolled into light */
body.v6 #navbar.scrolled .logo-img {
    content: url('images/aurum-ai-wordmark-graphite.svg');
}


/* ---------- CONTACT FORM ---------- */

body.v6 #contact input,
body.v6 #contact select,
body.v6 #contact textarea {
    background: var(--v6-white) !important;
    border: 1px solid var(--v6-rule-strong) !important;
    color: var(--v6-ink) !important;
    padding: 18px 20px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
}
body.v6 #contact input:focus,
body.v6 #contact textarea:focus {
    border-color: var(--v6-gold-deep) !important;
    outline: 2px solid rgba(201, 168, 76, 0.18) !important;
    outline-offset: 0 !important;
}
body.v6 #contact label {
    color: var(--v6-ink-soft) !important;
    font-weight: 500 !important;
}


/* ---------- FOOTER ---------- */

body.v6 footer,
body.v6 .site-footer {
    background: var(--v6-cream-deep) !important;
    color: var(--v6-ink) !important;
    border-top: 1px solid var(--v6-rule) !important;
    padding: clamp(80px, 8vw, 120px) 0 40px !important;
}
body.v6 footer a,
body.v6 .site-footer a {
    color: var(--v6-ink) !important;
}
body.v6 footer .footer-tagline,
body.v6 footer p {
    color: var(--v6-ink-soft) !important;
}


/* ---------- TRUST SECTION cleanup ---------- */

body.v6 #trust .trust-flag-stat-val,
body.v6 #trust .trust-flag-h {
    color: var(--v6-ink) !important;
}
body.v6 #trust .stat-val { color: var(--v6-ink) !important; }
body.v6 #trust .trust-flag-card {
    background: var(--v6-white) !important;
    border: 1px solid var(--v6-rule) !important;
}


/* ---------- ARCHITECTURE / HARDWARE section ---------- */

body.v6 #architecture *,
body.v6 #hardware * {
    color: inherit;
}
body.v6 #architecture .ap-arch-cloud-note {
    color: var(--v6-ink-muted) !important;
    background: var(--v6-cream-deep) !important;
    border: 1px dashed var(--v6-rule-strong) !important;
}


/* ---------- KILL section orchestrator stagger noise ----------
   v4.10's orchestrator added inline transition-delay on every .up
   child. In v6 we want simpler, calmer entrance. We strip the delay
   visually by capping the cascading stagger to a max of 60ms. */
body.v6 main > section:not(#hero) .up {
    transition-duration: 0.7s !important;
}


/* ---------- 3D SPHERE SCROLL CHOREOGRAPHY ----------
   Set by initHeroSphereScroll() in main.js:
     --sphere-scale   : 1.0 (hero in view) → 0.35 (hero scrolled away)
     --sphere-opacity : 1.0 → 0.0
     --sphere-y       : 0px → -60px (slight upward drift)
   This is the v6 hero 3D moment: the Three.js sphere shrinks and rises
   away as the visitor descends. Three.js keeps rotating internally so
   the sphere stays alive while leaving. */
body.v6 #hero-3d {
    --sphere-scale: 1;
    --sphere-opacity: 1;
    --sphere-y: 0px;
    transform-origin: 75% 45%;
    will-change: transform, opacity;
    transition: opacity 0.18s linear;
}
/* Override the parallax-only transform from v5.1 so we can compose
   parallax-y + scroll-scale + drift-y into a single transform chain. */
body.v6 #hero-3d[data-parallax] {
    transform:
        translate3d(0, calc(var(--parallax-y, 0px) + var(--sphere-y, 0px)), 0)
        scale(var(--sphere-scale, 1));
    opacity: var(--sphere-opacity, 1);
}


/* ---------- v6 EDGE UNIT — SCROLL-LINKED 3D ROTATION ----------
   Set by initEdgeUnitScroll() in main.js:
     --edge-rot-y : -30deg → +80deg as user scrolls through #hardware
     --edge-rot-x : -8deg  → +8deg
   The existing .hw-unit has 6 CSS faces; this scroll-linked rotation
   lets the visitor "inspect" the unit by scrolling. The second 3D
   moment in v6, anchored to the product itself. */
body.v6 .hw-unit {
    --edge-rot-y: -30deg;
    --edge-rot-x: -8deg;
    transform:
        rotateX(var(--edge-rot-x))
        rotateY(var(--edge-rot-y));
    transform-style: preserve-3d;
    transition: transform 0.18s linear;
    will-change: transform;
}
body.v6 .hw-stage {
    perspective: 1400px;
    perspective-origin: 50% 50%;
}


/* ---------- INDUSTRY IMAGERY: full-bleed editorial ---------- */
body.v6 .ind-panel img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--v6-rule);
}


/* ---------- SOLUTION / CAPABILITIES grid breathing ---------- */
body.v6 #capabilities .cap-grid,
body.v6 #solution .sol-grid,
body.v6 #solution .solution-stats {
    gap: clamp(20px, 2vw, 32px) !important;
}
body.v6 #capabilities .cap-card,
body.v6 #solution .sol-card,
body.v6 #solution .solution-stat {
    padding: clamp(28px, 3vw, 44px) !important;
}


/* ---------- CTA-MID (full-bleed dark island between light sections) ---------- */
body.v6 #cta-mid {
    background: var(--v6-ink) !important;
    color: var(--v6-cream) !important;
    text-align: center;
}
body.v6 #cta-mid h2 {
    color: var(--v6-cream) !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
body.v6 #cta-mid p {
    color: rgba(244, 241, 235, 0.75) !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
body.v6 #cta-mid .label {
    color: rgba(244, 241, 235, 0.55) !important;
}
body.v6 #cta-mid .sec-header {
    border-top-color: rgba(244, 241, 235, 0.18) !important;
    text-align: center;
}
body.v6 #cta-mid::before {
    display: none !important;  /* no hairline between dark cta-mid and adjacent light */
}
body.v6 #cta-mid + section:not(#hero)::before {
    display: none !important;
}
body.v6 #cta-mid .btn-gold {
    background: var(--v6-gold) !important;
    color: var(--v6-ink) !important;
    border-color: var(--v6-gold) !important;
}
body.v6 #cta-mid .btn-gold:hover {
    background: var(--v6-cream) !important;
    color: var(--v6-ink) !important;
}
body.v6 #cta-mid .btn-outline {
    color: var(--v6-cream) !important;
    border-color: rgba(244, 241, 235, 0.4) !important;
}
body.v6 #cta-mid .btn-outline:hover {
    background: var(--v6-cream) !important;
    color: var(--v6-ink) !important;
}


/* ---------- PROCESS-STEP IMAGERY (placeholder for v6 alternating layout) ---------- */
body.v6 .hw-card-visual,
body.v6 .hw-step-visual {
    aspect-ratio: 4 / 3;
    background: var(--v6-cream-deep);
    border: 1px solid var(--v6-rule);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v6-ink-muted);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
}
body.v6 .hw-card-visual img,
body.v6 .hw-step-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ---------- MOBILE bg + nav cleanup ---------- */
@media (max-width: 860px) {
    body.v6 main > section:not(#hero) {
        padding-top: clamp(72px, 18vw, 120px);
        padding-bottom: clamp(72px, 18vw, 120px);
    }
}


/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    body.v6 .hero-title .gold { animation: none !important; }
}


/* =================================================================
   v6 LIVE MONITOR MOVE — POST-MONITOR-MOVE EDIT
   ------------------------------------------------------------------
   Hero is now SINGLE COLUMN (text + 3D sphere only).
   Live monitor lives in its own section [01] right after the hero,
   framed in cream, with the dark monitor as the visual proof.
================================================================= */

/* ---------- Hero relayout: single-column, sphere as backdrop ---------- */
body.v6 #hero .hero-grid {
    grid-template-columns: 1fr !important;
    /* Constrain text column so the h1 doesn't span edge-to-edge */
    max-width: 880px;
    padding-top: clamp(140px, 16vw, 220px);
    padding-bottom: clamp(140px, 16vw, 220px);
}
body.v6 #hero .hero-content {
    /* Plenty of vertical breathing room around the headline cluster */
    max-width: 760px;
}
body.v6 #hero .hero-title {
    /* Bigger headline now that it owns the page top */
    font-size: clamp(56px, 8.5vw, 132px);
    line-height: 0.94;
    letter-spacing: clamp(-4px, -0.24vw, -1.5px);
    margin-bottom: clamp(24px, 2.6vw, 36px);
}
body.v6 #hero .hero-sub {
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    max-width: 56ch;
}

/* Sphere container: now anchored to the right HALF of the hero so it
   reads as a clear visual companion to the text. Three.js positions
   the geometry inside; we just shape the canvas mount. */
body.v6 #hero #hero-3d {
    /* Push the sphere visually toward the right edge */
    left: auto !important;
    right: 0;
    width: 65%;
    /* Soft radial mask so the sphere fades into the hero atmosphere */
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 65% 50%, black 35%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 70% at 65% 50%, black 35%, transparent 80%);
}
@media (max-width: 860px) {
    body.v6 #hero #hero-3d {
        width: 100%;
        right: 0;
        opacity: 0.45;
    }
}


/* ---------- [01] LIVE MONITOR SECTION — editorial frame ---------- */
body.v6 #live-monitor {
    background: var(--v6-cream) !important;
    padding-top: clamp(96px, 12vw, 200px) !important;
    padding-bottom: clamp(96px, 12vw, 200px) !important;
}

/* The dark monitor frame floating in the cream section. Drop-shadow
   grounds it; subtle gradient ring around the edge gives a printed,
   editorial feel rather than a flat screenshot. */
body.v6 #live-monitor .live-monitor-frame {
    position: relative;
    margin-top: clamp(56px, 6vw, 96px);
    padding: clamp(18px, 1.6vw, 26px);
    background: linear-gradient(180deg, #16161A 0%, #0B0B0E 100%);
    border-radius: 22px;
    border: 1px solid rgba(15, 15, 16, 0.10);
    box-shadow:
        0 30px 80px rgba(15, 15, 16, 0.14),
        0 6px 16px  rgba(15, 15, 16, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: visible;
    /* Subtle scale-in on enter for a "screenshot reveal" feel */
    transform: translateY(28px);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
body.v6 #live-monitor .live-monitor-frame.show {
    transform: translateY(0);
    opacity: 1;
}

/* Reset inherited hero-* positioning so the monitor renders cleanly inside
   its new container (it was originally absolute-positioned inside the hero
   right column). */
body.v6 #live-monitor .hero-monitor {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

/* Kill the floating POV callout that was anchored to the hero monitor —
   no longer needed once the monitor has its own framing + section header. */
body.v6 #live-monitor .hero-monitor-callout {
    display: none !important;
}

/* Kill the ambient pulse rings that floated around the hero monitor.
   In the editorial frame they read as visual noise. */
body.v6 #live-monitor .hero-pulse-ring {
    display: none !important;
}

/* Section header inside #live-monitor: sit centered for showcase feel.
   (Other sections are left-aligned; this one is the "selected work" hero
   moment so center alignment reads as deliberate showcase.) */
body.v6 #live-monitor .sec-header {
    text-align: center;
    border-top: none;
    padding-top: 0;
    margin-bottom: 0;
}
body.v6 #live-monitor .sec-header .sec-num,
body.v6 #live-monitor .sec-header .label {
    display: inline-block;
}
body.v6 #live-monitor .sec-header h2 {
    margin-left: auto;
    margin-right: auto;
    max-width: 22ch;
    margin-bottom: 24px;
}
body.v6 #live-monitor .sec-header p {
    margin-left: auto;
    margin-right: auto;
    max-width: 56ch;
}

/* Mobile: collapse the cinematic frame padding so the monitor fits */
@media (max-width: 860px) {
    body.v6 #live-monitor .live-monitor-frame {
        padding: 12px;
        border-radius: 16px;
    }
}


/* ---------- HERO CTA POLISH (now that hero is calmer) ---------- */
body.v6 #hero .hero-ctas {
    margin-top: clamp(32px, 3vw, 44px);
    gap: 14px;
}
body.v6 #hero .hero-trust {
    margin-top: clamp(48px, 5vw, 72px);
}


/* =================================================================
   v6 COINLOMBARD HERO TREATMENT
   ------------------------------------------------------------------
   Inspired by coinlombard.com / cyber-crypto authority aesthetic.
   Pure dark base, subtle dotted territory pattern, flowing gold mesh
   particle waves bleeding from top-left and bottom-right.
   Combined with the existing Three.js neural-net sphere = three
   layered visual signals: network mesh (sphere) + topology (territory)
   + flowing data (waves).
================================================================= */

/* ---------- Pure dark hero base ---------- */
body.v6 #hero {
    background:
        radial-gradient(ellipse 110% 80% at 50% 35%, rgba(15, 15, 18, 0) 0%, rgba(4, 4, 5, 0.85) 80%),
        #060607;
    overflow: hidden;  /* clip wave bleed at section edges */
    isolation: isolate;
}


/* ---------- Subtle dotted territory map overlay ---------- */
body.v6 .hero-territory {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        /* Two layered dot grids at different scales for organic depth */
        radial-gradient(rgba(201, 168, 76, 0.10) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1.5px);
    background-size: 22px 22px, 11px 11px;
    background-position: 0 0, 11px 11px;
    /* Soft radial mask so the dots fade out at the focal area, keeping
       headline text uncluttered while the perimeter reads as territory */
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 50%, transparent 18%, rgba(0,0,0,0.4) 45%, black 85%);
            mask-image: radial-gradient(ellipse 95% 85% at 50% 50%, transparent 18%, rgba(0,0,0,0.4) 45%, black 85%);
    opacity: 0.85;
    /* Very slow drift so the territory feels alive but not moving */
    animation: v6-territoryDrift 60s linear infinite;
}
@keyframes v6-territoryDrift {
    0%   { background-position: 0 0, 11px 11px; }
    100% { background-position: 22px 22px, 33px 33px; }
}
@media (prefers-reduced-motion: reduce) {
    body.v6 .hero-territory { animation: none; }
}


/* ---------- Gold mesh-wave particle canvases ---------- */
body.v6 .hero-wave {
    position: absolute;
    pointer-events: none;
    z-index: 1;            /* above territory, below content */
    mix-blend-mode: screen; /* gold particles add light on dark */
    opacity: 0;             /* fade in once initialised */
    transition: opacity 1.2s ease;
}
body.v6 .hero-wave.is-ready { opacity: 1; }

/* Top-left wave: bleeds from upper-left edge inward */
body.v6 .hero-wave--tl {
    top: -8%;
    left: -6%;
    width: 60%;
    height: 75%;
}
/* Bottom-right wave: bleeds from lower-right edge inward */
body.v6 .hero-wave--br {
    bottom: -10%;
    right: -8%;
    width: 65%;
    height: 80%;
}
/* Mobile: shrink + soften so they don't crowd the text */
@media (max-width: 860px) {
    body.v6 .hero-wave--tl,
    body.v6 .hero-wave--br {
        opacity: 0;
    }
    body.v6 .hero-wave--tl.is-ready,
    body.v6 .hero-wave--br.is-ready {
        opacity: 0.55;
    }
    body.v6 .hero-wave--tl { width: 95%; height: 50%; top: -5%; left: -10%; }
    body.v6 .hero-wave--br { width: 95%; height: 50%; bottom: -5%; right: -10%; }
}


/* ---------- Hero headline + CTA emphasis (coinlombard energy) ---------- */
body.v6 #hero .hero-title {
    /* Heavier letter spacing, more presence */
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
}

/* The gold "Now Intelligent." span: brighter, more wattage */
body.v6 #hero .hero-title .gold {
    color: #F8D573;
    text-shadow:
        0 0 12px rgba(201, 168, 76, 0.35),
        0 2px 24px rgba(201, 168, 76, 0.25);
    -webkit-text-fill-color: #F8D573;
    background: none;
}

/* Primary CTA: brighter gold pill, more coinlombard-style wattage */
body.v6 #hero .btn-gold {
    background: linear-gradient(180deg, #E8C457 0%, #C9A84C 100%) !important;
    color: #0A0A0B !important;
    border: 1px solid rgba(255, 214, 117, 0.45) !important;
    box-shadow:
        0 8px 28px rgba(201, 168, 76, 0.35),
        0 2px 8px rgba(201, 168, 76, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 18px 32px !important;
    border-radius: 999px !important;
}
body.v6 #hero .btn-gold:hover {
    background: linear-gradient(180deg, #FFD675 0%, #E8C457 100%) !important;
    box-shadow:
        0 10px 36px rgba(255, 214, 117, 0.45),
        0 4px 14px rgba(201, 168, 76, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px);
}
body.v6 #hero .btn-gold .lucide { stroke: #0A0A0B !important; }


/* ---------- Hero eyebrow: bracketed coinlombard-style ---------- */
body.v6 #hero .hero-eyebrow {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-mono, 'Geist Mono', monospace);
    letter-spacing: 0.18em;
}
body.v6 #hero .hero-eyebrow .label {
    color: rgba(255, 255, 255, 0.7);
}
body.v6 #hero .hero-eyebrow .pulse-dot {
    background: #FFD675;
    box-shadow: 0 0 12px rgba(255, 214, 117, 0.8);
}


/* ---------- Trust badges: tighten to match new hero authority ---------- */
body.v6 #hero .hero-trust {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: clamp(28px, 3vw, 40px);
}
body.v6 #hero .trust-eyebrow {
    color: rgba(255, 255, 255, 0.5);
}
body.v6 #hero .trust-badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}
body.v6 #hero .trust-badge:hover {
    background: rgba(201, 168, 76, 0.08);
    border-color: rgba(201, 168, 76, 0.3);
}


/* ---------- Sphere & glow: gentler so waves can sing ---------- */
body.v6 #hero #hero-3d {
    opacity: 0.85;
}
body.v6 #hero .hero-glow {
    opacity: 0.4;
}


/* ---------- Hero fade-to-next: keep the cream transition crisp ---------- */
body.v6 #hero .hero-fade {
    background: linear-gradient(180deg, transparent 0%, var(--v6-cream) 100%);
    height: 180px;
    z-index: 2;
}


/* =================================================================
   v6 ALL-DARK OVERRIDE — going full dark gold, top to bottom
   ------------------------------------------------------------------
   Token redefinition flips cream → dark for the whole body. Most v6
   editorial rules adapt automatically because they read from the
   --v6-* tokens. Specific overrides below for places that hardcoded
   colors (button shadows, hover glows, contact form, nav, footer,
   CTA-mid island, live monitor frame).
================================================================= */

/* ---------- DARK TOKENS ---------- */
body.v6 {
    --v6-cream:        #0A0A0B;                      /* page background */
    --v6-cream-deep:   #111114;                       /* secondary surface (footer, cta-mid) */
    --v6-white:        rgba(255, 255, 255, 0.03);    /* card surface */
    --v6-ink:          #F5F5F8;                       /* primary text */
    --v6-ink-soft:     rgba(245, 245, 248, 0.72);    /* secondary text */
    --v6-ink-muted:    rgba(245, 245, 248, 0.42);    /* eyebrow / meta */
    --v6-rule:         rgba(255, 255, 255, 0.08);    /* hairlines */
    --v6-rule-strong:  rgba(255, 255, 255, 0.18);    /* stronger hairlines */
    --v6-gold:         #C9A84C;
    --v6-gold-bright:  #FFD675;
    --v6-gold-deep:    #FFD675;                       /* in dark mode the "deep" actually goes brighter */
}


/* ---------- TERRITORY DOT PATTERN extended subtly to whole page ----------
   Gives the entire site the coinlombard-grid feel without overdoing it.
   Single faint dot grid behind everything; sections sit on top. */
body.v6 {
    background-color: #060607;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 18px 18px;
    background-attachment: fixed;
}


/* ---------- SECTIONS: pure dark with hairline gold accent ---------- */
body.v6 main > section:not(#hero) {
    background: transparent !important;  /* let the body grid show through */
}
/* Hairline rule between sections — gold in dark mode (was charcoal in cream) */
body.v6 main > section:not(#hero) + section:not(#hero)::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 168, 76, 0.0)  10%,
        rgba(201, 168, 76, 0.25) 50%,
        rgba(201, 168, 76, 0.0)  90%,
        transparent 100%);
    width: min(80%, 1100px);
    opacity: 0.5;
}


/* ---------- TYPOGRAPHY recolor ---------- */
body.v6 main > section:not(#hero) h2 {
    color: var(--v6-ink);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
body.v6 .v6-em {
    color: var(--v6-gold-bright);
    text-shadow: 0 0 18px rgba(255, 214, 117, 0.28);
}
body.v6 main > section:not(#hero) p {
    color: var(--v6-ink-soft);
}
body.v6 main > section:not(#hero) .sec-header .label {
    color: var(--v6-ink-muted);
}
body.v6 .sec-num {
    color: var(--v6-gold);
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.25);
}
body.v6 .sec-header {
    border-top: 1px solid rgba(201, 168, 76, 0.18);
}


/* ---------- CARDS now elevated dark surfaces with gold hover ---------- */
body.v6 main > section:not(#hero) .tilt-card,
body.v6 main > section:not(#hero) .cap-card,
body.v6 main > section:not(#hero) .hw-card,
body.v6 main > section:not(#hero) .ind-item,
body.v6 main > section:not(#hero) .faq-item,
body.v6 main > section:not(#hero) .glass-card,
body.v6 main > section:not(#hero) .pillar-card,
body.v6 main > section:not(#hero) .sol-card,
body.v6 main > section:not(#hero) .trust-flag-card,
body.v6 main > section:not(#hero) .flow-step,
body.v6 main > section:not(#hero) .prob-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--v6-ink);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 12px 32px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(6px);
}

body.v6 main > section:not(#hero) .tilt-card:hover,
body.v6 main > section:not(#hero) .cap-card:hover,
body.v6 main > section:not(#hero) .hw-card:hover,
body.v6 main > section:not(#hero) .glass-card:hover,
body.v6 main > section:not(#hero) .pillar-card:hover,
body.v6 main > section:not(#hero) .sol-card:hover,
body.v6 main > section:not(#hero) .prob-card:hover {
    border-color: rgba(201, 168, 76, 0.45) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 16px 44px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(201, 168, 76, 0.18),
        0 0 36px rgba(201, 168, 76, 0.12) !important;
}

body.v6 main > section:not(#hero) .cap-card h3,
body.v6 main > section:not(#hero) .hw-card h3,
body.v6 main > section:not(#hero) .ind-head h3,
body.v6 main > section:not(#hero) .faq-head,
body.v6 main > section:not(#hero) .prob-card h3,
body.v6 main > section:not(#hero) .glass-card h3,
body.v6 main > section:not(#hero) .pillar-card h3,
body.v6 main > section:not(#hero) .sol-card h3 {
    color: var(--v6-ink) !important;
}
body.v6 main > section:not(#hero) .cap-card p,
body.v6 main > section:not(#hero) .hw-card p,
body.v6 main > section:not(#hero) .ind-panel p,
body.v6 main > section:not(#hero) .faq-panel p,
body.v6 main > section:not(#hero) .prob-card p,
body.v6 main > section:not(#hero) .glass-card p,
body.v6 main > section:not(#hero) .pillar-card p,
body.v6 main > section:not(#hero) .sol-card p {
    color: var(--v6-ink-soft) !important;
}


/* ---------- ICON WRAPS in dark mode ---------- */
body.v6 main > section:not(#hero) .icon-wrap,
body.v6 main > section:not(#hero) .cap-icon-wrap,
body.v6 main > section:not(#hero) .card-icon-wrap,
body.v6 main > section:not(#hero) .flow-icon-wrap,
body.v6 main > section:not(#hero) .hw-spec-icon {
    background:
        linear-gradient(180deg, rgba(201, 168, 76, 0.18) 0%, rgba(201, 168, 76, 0.06) 100%) !important;
    border: 1px solid rgba(201, 168, 76, 0.32) !important;
    color: var(--v6-gold-bright) !important;
    box-shadow: 0 0 18px rgba(201, 168, 76, 0.18);
}
body.v6 main > section:not(#hero) .icon-wrap svg,
body.v6 main > section:not(#hero) .cap-icon-wrap svg,
body.v6 main > section:not(#hero) .card-icon-wrap svg,
body.v6 main > section:not(#hero) .flow-icon-wrap svg,
body.v6 main > section:not(#hero) .hw-spec-icon svg {
    stroke: var(--v6-gold-bright) !important;
}


/* ---------- HOW IT WORKS alternating rows: dark-mode visual ---------- */
body.v6 #how-it-works .hw-card,
body.v6 #how-it-works .hw-step {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
body.v6 #how-it-works .hw-step-num,
body.v6 #how-it-works .hw-card-num {
    color: var(--v6-gold);
}
body.v6 #how-it-works .hw-step h3,
body.v6 #how-it-works .hw-card h3 {
    color: var(--v6-ink) !important;
}
body.v6 #how-it-works .hw-step p,
body.v6 #how-it-works .hw-card p {
    color: var(--v6-ink-soft) !important;
}
body.v6 .hw-card-visual,
body.v6 .hw-step-visual {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(201, 168, 76, 0.18);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    color: rgba(255, 255, 255, 0.45);
}


/* ---------- INDUSTRIES + FAQ as dark editorial lists ---------- */
body.v6 #industries .ind-item,
body.v6 #faq .faq-item {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
body.v6 #industries .ind-item:last-child,
body.v6 #faq .faq-item:last-child {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.v6 #industries .ind-head:hover,
body.v6 #faq .faq-head:hover {
    color: var(--v6-gold-bright) !important;
}
body.v6 #industries .ind-head h3,
body.v6 #faq .faq-head {
    color: var(--v6-ink) !important;
}
body.v6 #industries .ind-panel p,
body.v6 #faq .faq-panel p,
body.v6 #faq .faq-panel,
body.v6 #industries .ind-panel {
    color: var(--v6-ink-soft) !important;
}


/* ---------- BUTTONS / CTAs in dark body sections (gold pill everywhere) ---------- */
body.v6 main > section:not(#hero) .btn-gold {
    background: linear-gradient(180deg, #E8C457 0%, #C9A84C 100%) !important;
    color: #0A0A0B !important;
    border: 1px solid rgba(255, 214, 117, 0.45) !important;
    box-shadow:
        0 8px 28px rgba(201, 168, 76, 0.35),
        0 2px 8px rgba(201, 168, 76, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    font-weight: 600 !important;
}
body.v6 main > section:not(#hero) .btn-gold:hover {
    background: linear-gradient(180deg, #FFD675 0%, #E8C457 100%) !important;
    box-shadow:
        0 10px 36px rgba(255, 214, 117, 0.45),
        0 4px 14px rgba(201, 168, 76, 0.35) !important;
    transform: translateY(-1px);
}
body.v6 main > section:not(#hero) .btn-gold .lucide {
    stroke: #0A0A0B !important;
}

body.v6 main > section:not(#hero) .btn-outline {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--v6-ink) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body.v6 main > section:not(#hero) .btn-outline:hover {
    background: rgba(201, 168, 76, 0.12) !important;
    border-color: rgba(201, 168, 76, 0.55) !important;
    color: var(--v6-gold-bright) !important;
}


/* ---------- NAV in dark mode ---------- */
body.v6 #navbar.scrolled {
    background: rgba(10, 10, 11, 0.78) !important;
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(201, 168, 76, 0.18) !important;
}
body.v6 #navbar.scrolled .nav-links a {
    color: rgba(245, 245, 248, 0.82) !important;
}
body.v6 #navbar.scrolled .nav-links a:hover {
    color: var(--v6-gold-bright) !important;
}
body.v6 #navbar.scrolled .nav-cta {
    background: linear-gradient(180deg, #E8C457 0%, #C9A84C 100%) !important;
    color: #0A0A0B !important;
    border: 1px solid rgba(255, 214, 117, 0.45) !important;
}
/* Keep the white wordmark visible at all times (don't swap to graphite) */
body.v6 #navbar.scrolled .logo-img {
    content: url('images/aurum-ai-wordmark-white.svg');
}


/* ---------- CONTACT FORM dark inputs ---------- */
body.v6 #contact input,
body.v6 #contact select,
body.v6 #contact textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--v6-ink) !important;
}
body.v6 #contact input::placeholder,
body.v6 #contact textarea::placeholder {
    color: rgba(245, 245, 248, 0.35) !important;
}
body.v6 #contact input:focus,
body.v6 #contact textarea:focus,
body.v6 #contact select:focus {
    border-color: rgba(201, 168, 76, 0.55) !important;
    background: rgba(201, 168, 76, 0.04) !important;
    outline: 2px solid rgba(201, 168, 76, 0.18) !important;
}
body.v6 #contact label {
    color: var(--v6-ink-soft) !important;
}


/* ---------- FOOTER on dark ---------- */
body.v6 footer,
body.v6 .site-footer {
    background: linear-gradient(180deg, #060607 0%, #0E0E11 100%) !important;
    border-top: 1px solid rgba(201, 168, 76, 0.18) !important;
    color: var(--v6-ink-soft) !important;
}
body.v6 footer a,
body.v6 .site-footer a {
    color: var(--v6-ink-soft) !important;
}
body.v6 footer a:hover,
body.v6 .site-footer a:hover {
    color: var(--v6-gold-bright) !important;
}


/* ---------- CTA-MID: now an elevated gold-ring panel, not a contrasting island ---------- */
body.v6 #cta-mid {
    background: transparent !important;
}
body.v6 #cta-mid .cta-mid-card {
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.06) 0%, rgba(201, 168, 76, 0.015) 100%) !important;
    border: 1px solid rgba(201, 168, 76, 0.32) !important;
    border-radius: 24px !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 48px rgba(201, 168, 76, 0.12) !important;
    padding: clamp(48px, 5vw, 80px) !important;
}
body.v6 #cta-mid h2,
body.v6 #cta-mid p,
body.v6 #cta-mid .label {
    color: var(--v6-ink) !important;
}
body.v6 #cta-mid p {
    color: var(--v6-ink-soft) !important;
}
body.v6 #cta-mid .label {
    color: var(--v6-gold) !important;
}


/* ---------- LIVE MONITOR section frame (no longer cream cradle) ---------- */
body.v6 #live-monitor .live-monitor-frame {
    background: linear-gradient(180deg, #0E0E11 0%, #060607 100%) !important;
    border: 1px solid rgba(201, 168, 76, 0.18) !important;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 64px rgba(201, 168, 76, 0.10) !important;
}


/* ---------- ARCHITECTURE + HARDWARE section text recolor ---------- */
body.v6 #architecture h3,
body.v6 #hardware h3,
body.v6 #architecture p,
body.v6 #hardware p {
    color: var(--v6-ink);
}
body.v6 #architecture .arch-pt p,
body.v6 #hardware .hw-spec-detail {
    color: var(--v6-ink-soft) !important;
}
body.v6 #architecture .ap-arch-cloud-note {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed rgba(201, 168, 76, 0.32) !important;
    color: var(--v6-ink-soft) !important;
}


/* ---------- TRUST stats / values: white on dark ---------- */
body.v6 #trust .trust-flag-stat-val,
body.v6 #trust .trust-flag-h,
body.v6 #trust .stat-val {
    color: var(--v6-ink) !important;
}
body.v6 #trust .trust-flag-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* ---------- HERO fade-to-next: was fading to cream; now fades to dark ---------- */
body.v6 #hero .hero-fade {
    background: linear-gradient(180deg, transparent 0%, rgba(6, 6, 7, 1) 100%);
}


/* ---------- PROBLEM section: gold accent on the provocative h2 ---------- */
body.v6 #problem .problem-anchor-q .gold,
body.v6 #problem .problem-anchor-q .v6-em {
    color: var(--v6-gold-bright) !important;
    text-shadow: 0 0 18px rgba(255, 214, 117, 0.28);
}
body.v6 #problem .problem-anchor-sub::first-letter {
    color: var(--v6-gold-bright) !important;
    text-shadow: 0 4px 24px rgba(255, 214, 117, 0.35) !important;
}


/* ---------- AUDIT TICK list/lists on dark ---------- */
body.v6 main > section:not(#hero) li {
    color: var(--v6-ink-soft);
}


/* ---------- Problem stat strip / severity dots stay readable ---------- */
body.v6 .prob-stat-strip {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.v6 .prob-stat-num {
    color: var(--v6-gold-bright) !important;
}
body.v6 .prob-stat-lbl {
    color: var(--v6-ink-muted) !important;
}


/* ---------- Trust badges below stats (dark variant) ---------- */
body.v6 main > section:not(#hero) .trust-badge {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--v6-ink-soft) !important;
}


/* =================================================================
   v6 FINAL — HIGGSFIELD CCTV CAMERA VIDEO IN HERO
   ------------------------------------------------------------------
   Photoreal CCTV camera video replaces the Three.js camera as the
   hero centerpiece. Three.js camera container is hidden via CSS
   (function preserved in main.js for one-line revert).
================================================================= */

/* Hide the Three.js camera container; the video owns the space */
body.v6 #hero #hero-3d {
    display: none !important;
}

/* The CCTV video — sits in the right half of the hero, anchored to
   roughly the same area the sphere/camera occupied. Soft radial mask
   blends it into the hero atmosphere instead of ending hard. */
body.v6 .hero-cctv-video {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 2;            /* above the territory + waves, below content */
    pointer-events: none;
    opacity: 0;            /* fade in once buffered */
    transition: opacity 1.2s ease;
    /* Radial mask so the square video dissolves into the dark hero on
       all edges — no hard rectangle visible. */
    -webkit-mask-image: radial-gradient(ellipse 75% 78% at 55% 50%, black 22%, rgba(0,0,0,0.6) 55%, transparent 88%);
            mask-image: radial-gradient(ellipse 75% 78% at 55% 50%, black 22%, rgba(0,0,0,0.6) 55%, transparent 88%);
    /* Light blend so the gold accents add to the hero gold particles
       instead of looking pasted on a flat layer */
    mix-blend-mode: lighten;
    filter: contrast(1.05) saturate(1.05);
}
/* Reveal once playable */
body.v6 .hero-cctv-video.is-loaded {
    opacity: 1;
}

/* Composes with the v6 scroll choreography (--hero-scroll set by initHeroScrollFade) —
   video shrinks + fades as the visitor leaves the hero, same as the sphere did. */
body.v6 #hero .hero-cctv-video {
    transform: scale(calc(1 - var(--hero-scroll, 0) * 0.55))
               translateY(calc(var(--hero-scroll, 0) * -40px));
    transform-origin: 60% 50%;
    will-change: transform, opacity;
}

/* Mobile: smaller, dimmer so it doesn't dominate the headline */
@media (max-width: 860px) {
    body.v6 .hero-cctv-video {
        width: 100%;
        height: 50%;
        top: auto;
        bottom: 6%;
        right: 0;
        opacity: 0;
    }
    body.v6 .hero-cctv-video.is-loaded {
        opacity: 0.6;
    }
}

/* Reduced motion: video plays but no transform/scroll-fade applied */
@media (prefers-reduced-motion: reduce) {
    body.v6 #hero .hero-cctv-video {
        transform: none !important;
    }
}


/* =================================================================
   v6 FINAL — CENTERED HERO + THREE.JS CCTV CAMERA AS BIG BACKDROP
   ------------------------------------------------------------------
   The hero text cluster moves to dead-center. The Three.js CCTV
   camera fills the whole hero as a dramatic backdrop. A radial
   vignette behind the headline gives the text breathing room.
   Higgsfield video is hidden (file preserved at hero-cctv.mp4 for
   future use).
================================================================= */

/* ---------- Higgsfield video off, Three.js container back on ---------- */
body.v6 .hero-cctv-video {
    display: none !important;
}
body.v6 #hero #hero-3d {
    display: block !important;
    /* Full-bleed: the camera fills the WHOLE hero, not just the right half */
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* No more right-only mask. Soft full-frame mask gently fades the camera
       at the very edges so it doesn't end hard against the page edge. */
    -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 55%, black 60%, rgba(0,0,0,0.9) 80%, transparent 100%) !important;
            mask-image: radial-gradient(ellipse 95% 95% at 50% 55%, black 60%, rgba(0,0,0,0.9) 80%, transparent 100%) !important;
    /* Dim slightly so the centered headline reads */
    opacity: 0.85 !important;
}


/* ---------- Centered text cluster ---------- */
body.v6 #hero .hero-grid {
    grid-template-columns: 1fr !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding-top: clamp(160px, 18vw, 240px) !important;
    padding-bottom: clamp(160px, 18vw, 240px) !important;
    text-align: center !important;
    position: relative;
    z-index: 5;  /* above the backdrop + vignette */
}
body.v6 #hero .hero-content {
    max-width: none !important;
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Center every child of hero-content */
body.v6 #hero .hero-eyebrow {
    justify-content: center !important;
    text-align: center !important;
    display: inline-flex !important;
    margin: 0 auto !important;
}
body.v6 #hero .hero-title {
    text-align: center !important;
    /* Comfortable centered display size — big but not overwhelming */
    font-size: clamp(44px, 6.5vw, 96px) !important;
    line-height: 0.98 !important;
    letter-spacing: clamp(-2.5px, -0.16vw, -1px) !important;
    margin: 24px auto 28px auto !important;
    max-width: 16ch !important;
}
body.v6 #hero .hero-sub {
    text-align: center !important;
    max-width: 56ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(17px, 1.4vw, 22px) !important;
    line-height: 1.55 !important;
}
body.v6 #hero .hero-ctas {
    justify-content: center !important;
    margin-top: clamp(36px, 3.5vw, 52px) !important;
}
body.v6 #hero .hero-trust {
    text-align: center !important;
    margin-top: clamp(56px, 5.5vw, 84px) !important;
    padding-top: clamp(28px, 3vw, 40px) !important;
}
body.v6 #hero .hero-trust .trust-eyebrow {
    text-align: center !important;
}
body.v6 #hero .hero-trust .trust-badges {
    justify-content: center !important;
}


/* ---------- Vignette behind the headline for text legibility ----------
   A soft radial dimmer SPECIFICALLY behind the text cluster, so the
   centered headline reads cleanly over the camera backdrop without
   killing the camera's visual presence at the edges. */
body.v6 #hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;        /* above hero-3d (z:0), below content (z:5) */
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 50% 45%,
            rgba(6, 6, 7, 0.65) 0%,
            rgba(6, 6, 7, 0.35) 35%,
            transparent 75%);
}


/* ---------- Hero text gets stronger drop-shadow for backdrop legibility ---------- */
body.v6 #hero .hero-title {
    text-shadow:
        0 4px 32px rgba(0, 0, 0, 0.85),
        0 2px 8px rgba(0, 0, 0, 0.6) !important;
}
body.v6 #hero .hero-sub {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7) !important;
}


/* ---------- Mobile: stack still works, camera dim, headline still centered ---------- */
@media (max-width: 860px) {
    body.v6 #hero #hero-3d {
        opacity: 0.55 !important;
    }
    body.v6 #hero::after {
        background: radial-gradient(ellipse 80% 55% at 50% 45%,
            rgba(6, 6, 7, 0.75) 0%,
            rgba(6, 6, 7, 0.40) 40%,
            transparent 80%);
    }
}


/* ---------- Particle waves still bleed behind the centered text ----------
   No change needed; they're already at z:1 with mix-blend:screen so they
   compose nicely with the camera backdrop and vignette. */


/* =============================================================
   v6.1 WORD REVEAL
   Each word in a .sec-header h2 is wrapped in:
     .word-reveal (overflow: hidden, display: inline-block)
     .word-inner  (starts translateY 110%, slides to 0)
   JS adds .words-visible to the h2 when the section enters view.
   Stagger delay is set inline by JS (55ms per word).
============================================================= */
.word-reveal {
    display: inline-block;
    overflow: hidden;
    /* Align bottoms so letters sit on the same baseline */
    vertical-align: bottom;
    /* Small breathing room between words */
    margin-right: 0.18em;
}
/* Compensate for the margin-right on the last word per line */
.word-reveal:last-child {
    margin-right: 0;
}
.word-inner {
    display: inline-block;
    transform: translateY(110%);
    /* Base transition; JS overrides delay per word */
    transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
/* Fire: h2 receives .words-visible from JS IntersectionObserver */
h2.words-visible .word-inner {
    transform: translateY(0);
}
/* Reduced-motion: skip the slide, just appear */
@media (prefers-reduced-motion: reduce) {
    .word-inner {
        transform: none !important;
        transition: none !important;
    }
}


/* =============================================================
   v6.1 SECTION TICKER
   Fixed bottom-left pill showing the current [0X] section number.
   Created and managed by initSectionTicker() in JS.
============================================================= */
#section-ticker {
    position: fixed;
    bottom: 40px;
    left: 40px;
    z-index: 90;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(201, 168, 76, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    /* Subtle left border accent */
    padding-left: 10px;
    border-left: 1px solid rgba(201, 168, 76, 0.25);
    line-height: 1;
}
#section-ticker.is-active {
    opacity: 1;
}
.ticker-num {
    display: block;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
/* Mobile: push to smaller margin so it doesn't crowd the page */
@media (max-width: 600px) {
    #section-ticker {
        bottom: 80px; /* above the mobile CTA bar */
        left: 20px;
        font-size: 10px;
    }
}


/* =============================================================
   v6.1 PROCESS ROW PARALLAX
   JS (initProcessRowParallax) applies inline transform to the
   img inside each .hw-step-visual. The existing overflow:hidden
   on .hw-step-visual clips the motion to a masked-reveal effect.
   The img transitions from translateX(±56px) scale(1.04) → 0 / 1.
   No additional CSS needed here — the existing rules are sufficient.
============================================================= */




/* =============================================================
   INSTITUTIONAL ENGAGEMENTS STRIP (added 2026-06-14)
   Sits between Trust cards and Partners row. Shows the full
   breadth of Malaysian institutional touchpoints with status pills.
============================================================= */
.engagements {
    text-align: center;
    margin: 48px 0 40px;
}
.engagements-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}
.engagement-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--glass-bg);
    border: var(--border-glass);
    border-radius: 12px;
    padding: 12px 18px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.engagement-chip:hover {
    border-color: rgba(201, 168, 76, 0.4);
    transform: translateY(-2px);
}
.engagement-chip-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: var(--gold-subtle);
    border-radius: 8px;
    color: var(--gold);
    flex-shrink: 0;
}
.engagement-chip-icon svg {
    width: 16px;
    height: 16px;
}
.engagement-chip-body {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}
.engagement-chip-name {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.01em;
}
.engagement-chip-status {
    font-family: var(--font-heading);
    font-size: 10px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 3px;
}
@media (max-width: 600px) {
    .engagements-row { gap: 10px; }
    .engagement-chip { padding: 10px 14px; }
}


/* =============================================================
   v6 TYPOGRAPHY LIFT (2026-06-14)
   $10K checklist criterion #2: paired display + body face.
   Geist Sans display emphasis on hero + section moments
   only: hero h1 + italic emphasis spans in section h2s.
   Everything else keeps Geist for tech credibility.
   Placed at end of file so the late cascade wins over earlier
   .hero-title / .v6-em rules across v4 to v6 iterations.
============================================================= */

/* Hero h1 — the signature display moment.
   opsz: 144 unlocks display-optical-size flair (high contrast strokes,
   sharper terminals). SOFT: 50 warms the curves slightly. WONK: 0 keeps
   the regular forms (we save WONK 1 for the italic spans below). */
body.v6 #hero .hero-title,
.hero-title {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.025em;
}

/* The gold ".gold" span in the hero ("Now Intelligent.") — bring it
   to a heavier Geist weight for bold contrast against
   the italic "Your CCTV." line above. */
body.v6 #hero .hero-title .gold,
.hero-title .gold {
    font-family: var(--font-heading);
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.035em;
}

/* Section h2 gold emphasis (.v6-em) — upright Geist, not italic. */
body.v6 .v6-em,
.v6-em {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* .word-reveal clips overflow for the slide-up animation; give emphasis
   words breathing room so glyphs and glow are not truncated. */
.word-reveal:has(.v6-em) {
    padding-inline: 0.06em;
    margin-inline: -0.03em;
}

/* The $10K checklist itself uses bracketed gold accents (e.g. "$10K").
   If we ever surface a similar editorial number-as-display moment on
   the page, this utility applies display heading weight. */
.fr-display {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.03em;
}
.fr-italic {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 600;
}


/* =============================================================
   v6 VIDEO IMAGERY INTEGRATION (2026-06-14)
   The Higgsfield agent generated cinematic Seedance 1.5 Pro videos
   for detection scenes (smoking/sleep/phone/fall/fire/absence) and
   industry interiors (retail/manufacturing/healthcare).
   Ensure <video> in .cctv-feed and .ind-head-scene fills its
   container exactly like the <img> it replaces.
============================================================= */
.cctv-feed video,
.ind-head-scene video,
.industry-scene video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Match the subtle grading applied to the static images so the
       Capabilities/Industries surfaces stay consistent. */
    filter: contrast(1.05) saturate(0.85);
}
.industry-scene video {
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* =============================================================
   v6 INDUSTRY CARD OVERLAY CLEANUP (2026-06-14)
   The CCTV-mini chrome (LIVE / REC / signal / timestamp / cam ID /
   monitoring zone label) was designed for STATIC images. When the
   underneath becomes a VIDEO with its own motion, the overlays
   compete visually and cover the imagery (user feedback: "i cannot
   even see the videos because all the text has been covered up").
   When the scene contains a video, simplify radically: only a small
   LIVE indicator survives in the corner. Let the motion be the hero.
============================================================= */
.ind-head-scene.cctv-mini:has(video) .cctv-mini-statusbar > .cctv-cam-id,
.ind-head-scene.cctv-mini.has-video .cctv-mini-statusbar > .cctv-cam-id,
.ind-head-scene.cctv-mini:has(video) .cctv-mini-statusbar > .cctv-rec,
.ind-head-scene.cctv-mini.has-video .cctv-mini-statusbar > .cctv-rec,
.ind-head-scene.cctv-mini:has(video) .cctv-mini-statusbar > .cctv-signal,
.ind-head-scene.cctv-mini.has-video .cctv-mini-statusbar > .cctv-signal,
.ind-head-scene.cctv-mini:has(video) .cctv-mini-statusbar > .cctv-time,
.ind-head-scene.cctv-mini.has-video .cctv-mini-statusbar > .cctv-time,
.ind-head-scene.cctv-mini:has(video) .cctv-mini-statusbar > .cctv-ai-badge,
.ind-head-scene.cctv-mini.has-video .cctv-mini-statusbar > .cctv-ai-badge,
.ind-head-scene.cctv-mini:has(video) .cctv-mini-bbox-label,
.ind-head-scene.cctv-mini.has-video .cctv-mini-bbox-label,
.ind-head-scene.cctv-mini:has(video) .cctv-watermark,
.ind-head-scene.cctv-mini.has-video .cctv-watermark,
.ind-head-scene.cctv-mini:has(video) .cctv-mini-scanlines,
.ind-head-scene.cctv-mini.has-video .cctv-mini-scanlines,
.ind-head-scene.cctv-mini:has(video) .industry-scene-skyline,
.ind-head-scene.cctv-mini.has-video .industry-scene-skyline,
.ind-head-scene.cctv-mini:has(video) .industry-scene-icon,
.ind-head-scene.cctv-mini.has-video .industry-scene-icon {
    display: none !important;
}

/* The surviving LIVE badge: smaller, transparent background,
   sits cleanly in the top-left corner instead of a heavy bar. */
.ind-head-scene.cctv-mini:has(video) .cctv-mini-statusbar,
.ind-head-scene.cctv-mini.has-video .cctv-mini-statusbar {
    background: transparent !important;
    border: none !important;
    padding: 12px !important;
    width: auto;
    inset: 0 auto auto 0;
    pointer-events: none;
}
.ind-head-scene.cctv-mini:has(video) .cctv-mini-statusbar .cctv-live,
.ind-head-scene.cctv-mini.has-video .cctv-mini-statusbar .cctv-live {
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

/* Subtle bottom gradient inside the scene so any future label text
   stays legible without the heavy bar treatment. */
.ind-head-scene.cctv-mini:has(video)::after,
.ind-head-scene.cctv-mini.has-video::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 35%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Brackets in the corners stay but become much more discreet so they
   read as a frame, not a busy overlay. */
.ind-head-scene.cctv-mini:has(video) .industry-scene-bracket,
.ind-head-scene.cctv-mini.has-video .industry-scene-bracket {
    opacity: 0.4;
    width: 14px;
    height: 14px;
}


/* =============================================================
   v6.2 HERO VIDEO BACKDROP (2026-06-14)
   The cinematic Higgsfield control-room MP4 becomes the hero
   centerpiece, replacing the Three.js sphere. Full-bleed, sits
   behind everything (z-index 0). A dark gradient veil sits over
   the video so the headline copy stays legible at every scale.
============================================================= */
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    /* Soft radial mask so the corners dissolve into the dark hero atmosphere
       and the gold mesh-wave canvases can still bleed in. */
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 55%, transparent 95%);
            mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 55%, transparent 95%);
    /* Reduce intensity so the headline reads, but enough so the cinematography
       feels like a real backdrop, not a thumbnail. */
    opacity: 0.78;
    filter: contrast(1.05) saturate(0.9);
}
.hero-bg-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* v6.2 Hero polish (2026-06-14): strengthened veil so the Fraunces
       headline never has to fight the brightest moment of the control-room
       video loop. Center radial pushed 0.55 -> 0.72, edges deeper. */
    background:
        radial-gradient(ellipse 58% 48% at 50% 50%, rgba(6, 6, 7, 0.72) 0%, transparent 72%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.50) 0%, rgba(10, 10, 10, 0) 28%, rgba(10, 10, 10, 0.55) 100%);
}

/* Hide the Three.js sphere now that the video supersedes it.
   Container kept in DOM + JS function preserved for one-line revert. */
body.v6 #hero #hero-3d {
    display: none !important;
}

/* Mobile: reduce video opacity so text contrast holds on smaller screens. */
@media (max-width: 760px) {
    .hero-bg-video {
        opacity: 0.55;
        -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, black 50%, transparent 95%);
                mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, black 50%, transparent 95%);
    }
}

/* Respect prefers-reduced-motion: pause video, show poster only. */
@media (prefers-reduced-motion: reduce) {
    .hero-bg-video {
        animation: none !important;
    }
}


/* =============================================================
   v6.2 OPERATIONS CONSOLE FEATURE (Capabilities section)
   2026-06-14
   Cinematic ops-console.mp4 sits at the top of Capabilities as
   the "this is what AI detection looks like in production" beat.
   Premium framed surface: thin gold hairline, glow shadow, soft
   corner marks, glass live tag.
============================================================= */
.ops-feature {
    margin: 0 auto 80px;
    max-width: 1080px;
}
.ops-feature-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: var(--black);
    border: 1px solid rgba(201, 168, 76, 0.18);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 168, 76, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: border-color var(--dur-considered) var(--ease-out-expo),
                box-shadow var(--dur-considered) var(--ease-out-expo);
}
.ops-feature-frame:hover {
    border-color: rgba(201, 168, 76, 0.32);
    box-shadow:
        0 36px 96px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(201, 168, 76, 0.18),
        0 0 80px rgba(201, 168, 76, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ops-feature-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(0.92);
}
/* Corner brackets — discreet gold L-shapes in each corner of the frame */
.ops-feature-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--gold);
    opacity: 0.6;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.4));
}
.ops-feature-corner.tl { top: 14px;    left: 14px;    border-right: none;  border-bottom: none; }
.ops-feature-corner.tr { top: 14px;    right: 14px;   border-left: none;   border-bottom: none; }
.ops-feature-corner.bl { bottom: 14px; left: 14px;    border-right: none;  border-top: none; }
.ops-feature-corner.br { bottom: 14px; right: 14px;   border-left: none;   border-top: none; }
/* Live tag, top-left, glass pill */
.ops-feature-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}
/* Caption below the frame, restrained */
.ops-feature-caption {
    margin: 22px auto 0;
    max-width: 640px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 760px) {
    .ops-feature { margin-bottom: 48px; }
    .ops-feature-corner { width: 16px; height: 16px; }
    .ops-feature-corner.tl,
    .ops-feature-corner.tr,
    .ops-feature-corner.bl,
    .ops-feature-corner.br { top: 10px; left: 10px; right: 10px; bottom: 10px; }
    .ops-feature-corner.tl { right: auto; bottom: auto; }
    .ops-feature-corner.tr { left: auto; bottom: auto; }
    .ops-feature-corner.bl { right: auto; top: auto; }
    .ops-feature-corner.br { left: auto; top: auto; }
}


/* =============================================================
   v6.2 PROCESS FLOW FEATURE (How It Works section)
   2026-06-14
   Cinematic process-flow.mp4 (camera → Edge AI → phone alert)
   sits at the top of How It Works before the 5 alternating rows.
============================================================= */
.process-feature {
    margin: 0 auto 80px;
    max-width: 1080px;
}
.process-feature-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: var(--black);
    border: 1px solid rgba(201, 168, 76, 0.18);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 168, 76, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: border-color var(--dur-considered) var(--ease-out-expo),
                box-shadow var(--dur-considered) var(--ease-out-expo);
}
.process-feature-frame:hover {
    border-color: rgba(201, 168, 76, 0.32);
    box-shadow:
        0 36px 96px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(201, 168, 76, 0.18),
        0 0 80px rgba(201, 168, 76, 0.08);
}
.process-feature-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(0.92);
}
.process-feature-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 760px) {
    .process-feature { margin-bottom: 48px; }
}


/* =============================================================
   v6.3 REAL CHALLENGE EDITORIAL REBUILD (2026-06-14)
   The old 4-card prob-grid is replaced with an editorial story:
   provocative anchor headline (kept) → cinematic establishing
   video → 4 full-width "acts" (number + body) → closing kicker.
   No more generic SaaS-template cards. This section now lands
   like a magazine spread, not a feature comparison.
============================================================= */

/* Kill the old prob-grid so it never accidentally re-renders. */
.prob-grid { display: none !important; }


/* --- CINEMATIC ESTABLISHING VIDEO --- */
.problem-cinema {
    margin: 56px auto 88px;
    max-width: 1080px;
}
.problem-cinema-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: var(--black);
    border: 1px solid rgba(201, 168, 76, 0.18);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 168, 76, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.problem-cinema-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(0.85) brightness(0.92);
}
/* Veil so the caption inside the video frame stays legible. */
.problem-cinema-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(6, 6, 7, 0.15) 0%,
            rgba(6, 6, 7, 0) 40%,
            rgba(6, 6, 7, 0.45) 75%,
            rgba(6, 6, 7, 0.78) 100%);
    pointer-events: none;
    z-index: 2;
}
/* Caption block in the bottom-left of the cinematic frame.
   Lives over the video, reads as a film title card. */
.problem-cinema-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 40px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.problem-cinema-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    align-self: flex-start;
}
.problem-cinema-line {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.95);
    max-width: 640px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}
.problem-cinema-line em {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}
/* Discreet gold corner brackets — film-frame energy */
.problem-cinema-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--gold);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.4));
}
.problem-cinema-corner.tl { top: 14px;    left: 14px;    border-right: none;  border-bottom: none; }
.problem-cinema-corner.tr { top: 14px;    right: 14px;   border-left: none;   border-bottom: none; }
.problem-cinema-corner.bl { bottom: 14px; left: 14px;    border-right: none;  border-top: none; }
.problem-cinema-corner.br { bottom: 14px; right: 14px;   border-left: none;   border-top: none; }


/* --- THE 4 EDITORIAL ACTS --- */
.problem-acts {
    display: flex;
    flex-direction: column;
    gap: 64px;
    max-width: 1080px;
    margin: 0 auto;
}
.problem-act {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.problem-act:first-child {
    border-top: none;
    padding-top: 0;
}

/* The number block — left column, editorial visual anchor */
.problem-act-num {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.problem-act-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.7);
}
.problem-act-stat {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(72px, 9vw, 132px);
    line-height: 0.95;
    color: var(--gold);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 8px 40px rgba(201, 168, 76, 0.15);
}
.problem-act-stat--word {
    font-size: clamp(60px, 7.5vw, 108px);
    letter-spacing: -0.025em;
}
.problem-act-cap {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* The body block — right column, the copy */
.problem-act-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 18px;  /* aligns roughly to the cap line of the big number */
}
.problem-act-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--white);
}
.problem-act-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.62);
    max-width: 56ch;
}

/* Hover on the whole act — the number block warms, divider light up */
.problem-act:hover .problem-act-stat {
    text-shadow: 0 8px 60px rgba(201, 168, 76, 0.32);
    transition: text-shadow var(--dur-considered) var(--ease-out-expo);
}


/* --- CLOSING KICKER --- */
.problem-kicker {
    margin: 96px auto 0;
    max-width: 920px;
    text-align: center;
    padding: 0 24px;
}
.problem-kicker-line {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: rgba(255, 255, 255, 0.92);
}
.problem-kicker-line em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
}
.problem-kicker-line .gold {
    color: var(--gold);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.03em;
}


/* --- MOBILE: stack the act rows into single column --- */
@media (max-width: 760px) {
    .problem-cinema { margin: 40px auto 56px; }
    .problem-cinema-caption { padding: 22px 22px; }
    .problem-cinema-corner { width: 16px; height: 16px; }
    .problem-cinema-corner.tl,
    .problem-cinema-corner.tr,
    .problem-cinema-corner.bl,
    .problem-cinema-corner.br { top: 10px; left: 10px; right: 10px; bottom: 10px; }
    .problem-cinema-corner.tl { right: auto; bottom: auto; }
    .problem-cinema-corner.tr { left: auto; bottom: auto; }
    .problem-cinema-corner.bl { right: auto; top: auto; }
    .problem-cinema-corner.br { left: auto; top: auto; }

    .problem-acts { gap: 48px; }
    .problem-act {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 28px 0;
    }
    .problem-act-body { padding-top: 0; }
    .problem-act-stat { font-size: clamp(64px, 18vw, 88px); }
    .problem-act-stat--word { font-size: clamp(48px, 14vw, 68px); }

    .problem-kicker { margin: 64px auto 0; }
}


/* =============================================================
   v6.3.1 SECTION LABEL + DROP CAP CLEANUP (2026-06-14)
   User feedback after Plan C review:
   1. "remove the title of each section" - the .label eyebrow
      above each h2 reads as redundant category text. The [01]-
      [11] ticker + the h2 + section context already do the job.
   2. "fix the 'Y' it feels off" - the drop cap on the Problem
      sub-line read as wine-magazine flourish, not editorial-tech.
============================================================= */

/* Hide the section-title eyebrow across every section header.
   Scoped to .sec-header only so the hero eyebrow + monitor labels
   (which live outside .sec-header) stay intact. */
body.v6 .sec-header .label,
.sec-header .label {
    display: none !important;
}

/* Reset the drop cap to a normal first letter. Each property is
   explicitly set to a sensible "no special treatment" value so
   the rule overrides the v4.11 lede flourish + all v6 overrides. */
.problem-anchor-sub::first-letter,
body.v6 #problem .problem-anchor-sub::first-letter {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    text-shadow: none !important;
}


/* =============================================================
   v6.3.2 SECTION NUMBERING REMOVED (2026-06-14)
   User: "remove also the numbering for each section."
   Hide every .sec-num [01]-[11] tag in section headers + the
   fixed bottom-left section-ticker pill that referenced them.
   The h2 carries each section now. Pure editorial, no chapter
   numbering. Matches the section-label removal from v6.3.1.
============================================================= */
body.v6 .sec-header .sec-num,
.sec-header .sec-num,
.sol-header .sec-num,
.problem-anchor .sec-num {
    display: none !important;
}

/* Kill the bottom-left fixed ticker pill since it has nothing
   to reference once the [0X] markers are gone. */
#section-ticker,
.section-ticker {
    display: none !important;
}


/* =============================================================
   v6.3.3 HOW IT WORKS STEP NUMBER EDITORIAL REDESIGN (2026-06-14)
   Plan D. User: "STEP 01 is very small, people will not notice
   it, and you highlight the wrong things."
   Same editorial language as the Real Challenge acts: massive
   italic Fraunces number anchors each row. Eyebrow "Step" tiny
   above. Verb caption (Capture / Analyze / Alert / Verify / Act)
   below the number. Then h3 punchy headline with italic emphasis
   on the right word. Then body.
============================================================= */

/* Hide the old small .hw-step-num span if it lingers. */
.hw-step-num { display: none !important; }

.hw-step-num-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}
.hw-step-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.65);
}
.hw-step-num-big {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(72px, 8.5vw, 124px);
    line-height: 0.92;
    color: var(--gold);
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 8px 36px rgba(201, 168, 76, 0.18);
}
.hw-step-verb {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
}

/* The punchy step title — Fraunces bold like the Real Challenge acts. */
.hw-step-title {
    margin: 0 0 16px;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--white) !important;
}
.hw-step-title .v6-em {
    /* Override default v6-em coloring so emphasis stays gold here */
    color: var(--gold);
}

.hw-step-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.62);
    max-width: 56ch;
}

/* Hover: the giant gold number glows warmer */
.hw-step:hover .hw-step-num-big {
    text-shadow: 0 8px 56px rgba(201, 168, 76, 0.36);
    transition: text-shadow var(--dur-considered) var(--ease-out-expo);
}

/* Mobile — number scales down but stays the visual anchor */
@media (max-width: 760px) {
    .hw-step-num-block { margin-bottom: 20px; }
    .hw-step-num-big { font-size: clamp(64px, 18vw, 96px); }
}


/* =============================================================
   v6.3.4 HOW IT WORKS — VERB-AS-HEADLINE REBUILD (2026-06-14)
   User: "the steps text is too small. people dont know what the
   steps are in one glance." Verb becomes the unmissable hero.
   Five framed step videos sit alongside, each cinematic and
   step-specific (Higgsfield generated this round).
============================================================= */

/* Hide the v6.3.3 num-block so the previous editorial number
   layout does not double up with the new verb-as-headline. */
body.v6 #how-it-works .hw-step--v62 .hw-step-num-block { display: none !important; }

/* The headline row — small chapter mark + giant verb */
body.v6 #how-it-works .hw-step--v62 .hw-step-headline {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 18px;
}
body.v6 #how-it-works .hw-step--v62 .hw-step-mark {
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.6);
    line-height: 1;
    flex-shrink: 0;
}
body.v6 #how-it-works .hw-step--v62 .hw-step-verb-big {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(56px, 7vw, 104px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
    color: var(--gold) !important;
    text-shadow: 0 8px 36px rgba(201, 168, 76, 0.18);
    max-width: none !important;
}

/* The descriptive title line — sits under the giant verb */
body.v6 #how-it-works .hw-step--v62 .hw-step-title-line {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--white);
}
body.v6 #how-it-works .hw-step--v62 .hw-step-title-line .v6-em {
    color: var(--gold);
}

body.v6 #how-it-works .hw-step--v62 .hw-step-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.62);
    max-width: 52ch;
}

/* The video frame — premium dark cinematic surface with gold corners */
body.v6 #how-it-works .hw-step-visual--video {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: var(--black);
    border: 1px solid rgba(201, 168, 76, 0.18);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(201, 168, 76, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: border-color var(--dur-considered) var(--ease-out-expo),
                box-shadow var(--dur-considered) var(--ease-out-expo);
}
body.v6 #how-it-works .hw-step-visual--video:hover {
    border-color: rgba(201, 168, 76, 0.32);
    box-shadow:
        0 32px 86px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 168, 76, 0.16),
        0 0 70px rgba(201, 168, 76, 0.08);
}
body.v6 #how-it-works .hw-step-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(0.9);
}
/* Gold film corner brackets */
.hw-step-frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--gold);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.35));
}
.hw-step-frame-corner.tl { top: 12px;    left: 12px;    border-right: none;  border-bottom: none; }
.hw-step-frame-corner.tr { top: 12px;    right: 12px;   border-left: none;   border-bottom: none; }
.hw-step-frame-corner.bl { bottom: 12px; left: 12px;    border-right: none;  border-top: none; }
.hw-step-frame-corner.br { bottom: 12px; right: 12px;   border-left: none;   border-top: none; }

/* Mobile — verb shrinks but stays the visual anchor */
@media (max-width: 760px) {
    body.v6 #how-it-works .hw-step--v62 .hw-step-headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    body.v6 #how-it-works .hw-step--v62 .hw-step-verb-big {
        font-size: clamp(52px, 16vw, 84px) !important;
    }
    body.v6 #how-it-works .hw-step--v62 .hw-step-title-line {
        font-size: clamp(20px, 5vw, 26px);
    }
    .hw-step-frame-corner { width: 14px; height: 14px; }
    .hw-step-frame-corner.tl,
    .hw-step-frame-corner.tr,
    .hw-step-frame-corner.bl,
    .hw-step-frame-corner.br { top: 8px; left: 8px; right: 8px; bottom: 8px; }
    .hw-step-frame-corner.tl { right: auto; bottom: auto; }
    .hw-step-frame-corner.tr { left: auto; bottom: auto; }
    .hw-step-frame-corner.bl { right: auto; top: auto; }
    .hw-step-frame-corner.br { left: auto; top: auto; }
}


/* =============================================================
   v6.3.7 INSIDE AURUM AI (2026-06-14)
   Real product UI screenshots from the AURUM AI ISMIS console.
   Strongest credibility moment on the page. Section structure:
   1. Editorial anchor headline + sub
   2. Featured Command Center screenshot (16:9 framed surface)
   3. 3-up grid of supporting tiles (Live / Identity / Health)
   4. Closing kicker
============================================================= */

#inside {
    padding: clamp(96px, 12vw, 200px) 0;
    position: relative;
    /* v6.1 Mobile Lite (2026-06-15): clip any horizontal overflow so the
       3-up screenshot grid never pushes content past the right viewport
       edge on intermediate desktop widths (~1100-1280px). */
    overflow-x: clip;
}

/* Editorial section header — Fraunces italic emphasis. */
.inside-anchor {
    text-align: center;
    margin: 0 auto 64px;
    max-width: 880px;
    padding: 0 24px;
}
.inside-headline {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--white);
}
.inside-headline .v6-em {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 600;
    color: var(--gold);
}
.inside-sub {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}


/* --- FEATURED SCREENSHOT (Command Center) --- */
.inside-feature {
    margin: 0 auto 56px;
    max-width: 1180px;
    padding: 0 24px;
}
.inside-feature-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0b0b0d;
    border: 1px solid rgba(201, 168, 76, 0.22);
    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(201, 168, 76, 0.08),
        0 0 80px rgba(201, 168, 76, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: border-color var(--dur-considered) var(--ease-out-expo),
                box-shadow var(--dur-considered) var(--ease-out-expo);
}
.inside-feature-frame:hover {
    border-color: rgba(201, 168, 76, 0.4);
    box-shadow:
        0 40px 110px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(201, 168, 76, 0.2),
        0 0 110px rgba(201, 168, 76, 0.1);
}
.inside-feature-frame img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* Subtle desaturation + brightness lift so the screenshots feel
       like they belong in the dark editorial canvas, not pasted-on. */
    filter: contrast(1.02) saturate(0.96) brightness(0.97);
}
.inside-feature-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}
.inside-feature-caption {
    margin: 24px auto 0;
    max-width: 640px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}


/* --- 3-UP SUPPORTING GRID --- */
.inside-grid {
    display: grid;
    /* v6.1 Mobile Lite (2026-06-15): minmax(0, 1fr) replaces 1fr so grid items
       can shrink below their intrinsic min-content width. Previously the cards
       refused to shrink at ~1100-1280px desktop widths and the right column
       (System Health) overflowed the viewport. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
.inside-tile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Safety: explicit min-width:0 so the tile doesn't refuse to shrink. */
    min-width: 0;
}
.inside-tile-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0b0b0d;
    border: 1px solid rgba(201, 168, 76, 0.16);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(201, 168, 76, 0.06);
    transition: border-color var(--dur-considered) var(--ease-out-expo),
                box-shadow var(--dur-considered) var(--ease-out-expo),
                transform var(--dur-considered) var(--ease-out-expo);
    aspect-ratio: 16 / 10;
}
.inside-tile-frame:hover {
    border-color: rgba(201, 168, 76, 0.32);
    box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 168, 76, 0.16),
        0 0 70px rgba(201, 168, 76, 0.08);
    transform: translateY(-3px);
}
.inside-tile-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    filter: contrast(1.02) saturate(0.96) brightness(0.97);
}

/* Tile caption block sits under the frame, editorial restrained */
.inside-tile-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}
.inside-tile-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--white);
}
.inside-tile-desc {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}


/* --- GOLD CORNER BRACKETS — shared between feature + tiles --- */
.inside-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--gold);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.35));
}
.inside-feature-frame .inside-corner { width: 24px; height: 24px; }
.inside-corner.tl { top: 12px;    left: 12px;    border-right: none;  border-bottom: none; }
.inside-corner.tr { top: 12px;    right: 12px;   border-left: none;   border-bottom: none; }
.inside-corner.bl { bottom: 12px; left: 12px;    border-right: none;  border-top: none; }
.inside-corner.br { bottom: 12px; right: 12px;   border-left: none;   border-top: none; }


/* --- CLOSING KICKER --- */
.inside-kicker {
    margin: 72px auto 0;
    max-width: 920px;
    text-align: center;
    padding: 0 24px;
}
.inside-kicker-line {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(22px, 2.8vw, 38px);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.92);
}
.inside-kicker-line em {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}


/* --- MOBILE --- */
@media (max-width: 860px) {
    .inside-anchor { margin-bottom: 40px; }
    .inside-feature { margin-bottom: 40px; }
    .inside-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .inside-kicker { margin-top: 48px; }
    .inside-corner { width: 14px; height: 14px; }
    .inside-feature-frame .inside-corner { width: 16px; height: 16px; }
    .inside-corner.tl,
    .inside-corner.tr,
    .inside-corner.bl,
    .inside-corner.br { top: 8px; left: 8px; right: 8px; bottom: 8px; }
    .inside-corner.tl { right: auto; bottom: auto; }
    .inside-corner.tr { left: auto; bottom: auto; }
    .inside-corner.bl { right: auto; top: auto; }
    .inside-corner.br { left: auto; top: auto; }
}


/* =============================================================
   v6.4 MOVE B — HARDWARE PINNED-SCROLL SHOWCASE (2026-06-14)
   Resn-inspired pinned scroll moment. The user enters the section,
   the inner stage sticks for 300vh of scroll, the Edge unit
   rotates 360° driven by --hw-reveal-progress, and the copy beats
   crossfade. Then unpin and continue into the technical detail.
============================================================= */

/* v6.4.1 (2026-06-14) HIDDEN: User flagged the new reveal duplicates the
   existing #hardware section. Existing #hardware below carries the story
   with its 6 detailed callouts and specs. All v6.4 Move B CSS and JS kept
   intact for one-line restore. */
#hardware-reveal { display: none !important; }

#hardware-reveal-disabled-original-rule {
    position: relative;
    background: #0a0a0b;
    overflow: visible;
}

/* The track is the scrubbable scroll space. 300vh tall so the
   user has three viewport heights to scrub through the rotation. */
.hw-reveal-track {
    position: relative;
    height: 320vh;
}

/* The stage sticks at the top of the viewport during the scrub. */
.hw-reveal-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 0 clamp(24px, 6vw, 96px);
    overflow: hidden;
}

/* === LEFT: rotating Edge unit === */
.hw-reveal-visual {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
}
.hw-reveal-spin {
    --hw-reveal-rot-y: 0deg;
    --hw-reveal-rot-x: -12deg;
    width: clamp(280px, 32vw, 460px);
    height: clamp(140px, 16vw, 230px);
    transform-style: preserve-3d;
    transform:
        rotateX(var(--hw-reveal-rot-x))
        rotateY(var(--hw-reveal-rot-y));
    transition: transform 0.05s linear;
    position: relative;
}

/* The unit cube. Scaled face system. */
.hw-reveal-unit {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.hw-reveal-face {
    position: absolute;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* Front face — branded with LED, brand, AI badge */
.hw-reveal-face--front {
    inset: 0;
    transform: translateZ(115px);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hw-reveal-fins {
    /* Subtle decorative cooling fin lines on the front face */
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 6px,
        rgba(255, 255, 255, 0.04) 6px,
        rgba(255, 255, 255, 0.04) 7px
    );
    pointer-events: none;
}
.hw-reveal-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.9);
    animation: hwLedPulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes hwLedPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(201, 168, 76, 0.9); }
    50%      { opacity: 0.55; box-shadow: 0 0 18px rgba(201, 168, 76, 1); }
}
.hw-reveal-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}
.hw-reveal-brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(15px, 1.3vw, 19px);
    letter-spacing: 0.08em;
    color: var(--gold);
}
.hw-reveal-brand-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.hw-reveal-ai-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(10, 10, 10, 0.85);
    background: var(--gold);
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Back face — port array */
.hw-reveal-face--back {
    inset: 0;
    transform: translateZ(-115px) rotateY(180deg);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.hw-reveal-port {
    width: 18px;
    height: 22px;
    background: linear-gradient(180deg, #2a2a2a 0%, #111 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}
.hw-reveal-port--eth { width: 24px; background: linear-gradient(180deg, #1a3d1f 0%, #0a1d0a 100%); }
.hw-reveal-port--usb { background: linear-gradient(180deg, #1a2a4a 0%, #0a1530 100%); }
.hw-reveal-port--pwr { width: 14px; height: 14px; border-radius: 50%; }
.hw-reveal-port--hdmi { width: 22px; }

/* Top face — heatsink fins */
.hw-reveal-face--top {
    width: 100%;
    height: 230px;
    top: -115px;
    transform: rotateX(90deg);
    background: linear-gradient(90deg, #1a1a1a 0%, #0d0d0d 100%);
}
.hw-reveal-fins-top {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06) 0px,
        rgba(255, 255, 255, 0.06) 2px,
        transparent 2px,
        transparent 8px
    );
}

.hw-reveal-face--bottom {
    width: 100%;
    height: 230px;
    bottom: -115px;
    transform: rotateX(-90deg);
}
.hw-reveal-face--left {
    width: 230px;
    height: 100%;
    left: -115px;
    transform: rotateY(-90deg);
}
.hw-reveal-face--right {
    width: 230px;
    height: 100%;
    right: -115px;
    transform: rotateY(90deg);
}

/* Gold radial glow underneath the unit */
.hw-reveal-glow {
    position: absolute;
    bottom: 28%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 200px;
    background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.18) 0%, transparent 60%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
.hw-reveal-floor {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.4) 50%, transparent 100%);
    pointer-events: none;
}


/* === RIGHT: copy beats === */
.hw-reveal-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 500px;
}
.hw-reveal-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.7);
}
.hw-reveal-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--white);
}
.hw-reveal-title em {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

/* The 4 beats stacked, only one opacity:1 at a time */
.hw-reveal-beats {
    position: relative;
    min-height: 140px;
}
.hw-reveal-beat {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease-out-expo),
                transform 0.5s var(--ease-out-expo);
    pointer-events: none;
}
.hw-reveal-beat.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.hw-reveal-beat-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.hw-reveal-beat-line {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.78);
}

/* Progress dots show which beat we're on */
.hw-reveal-progress {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.hw-reveal-progress-dot {
    width: 28px;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1px;
    transition: background var(--dur-quick) var(--ease-out-expo);
}
.hw-reveal-progress-dot.is-active {
    background: var(--gold);
}


/* === MOBILE: stack the columns, shrink the unit, no pin === */
@media (max-width: 860px) {
    .hw-reveal-track { height: auto; }
    .hw-reveal-stage {
        position: relative;
        grid-template-columns: 1fr;
        height: auto;
        gap: 40px;
        padding: 80px 24px;
    }
    .hw-reveal-visual {
        height: 280px;
    }
    .hw-reveal-spin {
        width: 240px;
        height: 120px;
    }
    .hw-reveal-face--front { padding: 10px 16px; }
    .hw-reveal-face--back { padding: 12px 18px; gap: 8px; }
    .hw-reveal-face--top,
    .hw-reveal-face--bottom { height: 120px; }
    .hw-reveal-face--left,
    .hw-reveal-face--right { width: 120px; }
    .hw-reveal-beats { min-height: 100px; }
}


/* =============================================================
   v6.5 EDITORIAL CINEMA PASS (2026-06-14)
   Resn-inspired "one continuous storyline" treatment. Everything
   scoped under body.v65 so a one-line revert kills the whole pass:
   document.body.classList.remove('v65')
   Scope inversion in main.js initEditorialCinema().
============================================================= */

/* === A. SITE-WIDE GOLD DUST ATMOSPHERE ===
   Fixed canvas drifts gold particle dust across the WHOLE page,
   not just the hero. Ties every section into one connected world.
   Sits behind all content (z-index 1), above the body background. */
body.v65 .v65-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.7;
}

/* Push sections above the atmosphere */
body.v65 section,
body.v65 footer,
body.v65 .site-nav { position: relative; z-index: 2; }


/* === B. KEN BURNS ON INSIDE AURUM AI SCREENSHOTS ===
   Each screenshot animates with a slow scale + drift on viewport
   entry. Makes them feel like cinematic stills, not pasted images.
   Trigger class added by IntersectionObserver in main.js. */
body.v65 .inside-feature-frame img,
body.v65 .inside-tile-frame img {
    transition: transform 14s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform: scale(1.03) translate(0, 0);
}
body.v65 .inside-feature-frame img.v65-ken-burns {
    transform: scale(1.08) translate(-0.6%, -0.6%);
}
body.v65 .inside-tile-frame img.v65-ken-burns {
    transform: scale(1.1) translate(-0.8%, -0.8%);
}


/* === C. SECTION TRANSITION FADES — DISABLED 2026-06-14 ===
   User flagged the dark gradient at section tops as "feels off"
   (appeared as a visible dark rectangle behind headlines). Killed. */
body.v65 #problem::before,
body.v65 #capabilities::before,
body.v65 #inside::before,
body.v65 #cta-mid::before,
body.v65 #how-it-works::before,
body.v65 #hardware::before,
body.v65 #architecture::before,
body.v65 #industries::before,
body.v65 #trust::before,
body.v65 #faq::before,
body.v65 #contact::before {
    content: none !important;
    background: none !important;
}


/* === D. CINEMATIC HEADLINE SHIMMER — DISABLED 2026-06-14 ===
   Could read as the "background behind every header" the user
   flagged. Killed too. The word-reveal stagger from v6.1 already
   gives the headlines enough editorial entrance motion. */
body.v65 .sec-header h2.words-visible::after,
body.v65 .problem-anchor-q.words-visible::after,
body.v65 .inside-headline.words-visible::after {
    content: none !important;
    background: none !important;
    animation: none !important;
}


/* === E. HERO SCROLL EXIT — kept, no visible change yet === */
body.v65 #hero .hero-content {
    transition: filter 0.4s var(--ease-out-expo);
}


/* === F. CINEMATIC VIDEO SCALE — DISABLED 2026-06-14 ===
   User reported scroll glitches. The 30s slow zoom transform was
   competing with the IntersectionObserver play/pause and other
   transforms on those videos, causing layout jank. Killed. */
body.v65 .problem-cinema-video,
body.v65 .ops-feature-video,
body.v65 .process-feature-video {
    animation: none !important;
}


/* === MOBILE GUARD ===
   Atmosphere stays. Ken Burns transforms still work. The other
   effects (sheen, slow zoom) are already cheap enough. No mobile
   overrides needed. */

/* === REDUCED MOTION ===
   Cinema-level animations honour the system preference. */
@media (prefers-reduced-motion: reduce) {
    body.v65 .v65-atmosphere { display: none; }
    body.v65 .inside-feature-frame img,
    body.v65 .inside-tile-frame img { transition: none; transform: none; }
    body.v65 .sec-header h2.words-visible::after,
    body.v65 .problem-anchor-q.words-visible::after,
    body.v65 .inside-headline.words-visible::after { animation: none; opacity: 0; }
    body.v65 .problem-cinema-video,
    body.v65 .ops-feature-video,
    body.v65 .process-feature-video { animation: none; }
}


/* =============================================================
   v6.6 PHOTOREAL EDGE UNIT (Three.js bones, 2026-06-14)
   Replaces the hidden v6.4 CSS-faces hardware-reveal with real
   WebGL geometry + PBR materials + scroll-driven rotation.
   This is the BONES round; v6.6.1 adds HDR env + bloom.
============================================================= */

#hardware-3d {
    position: relative;
    background: linear-gradient(180deg, #0a0a0b 0%, #08080a 100%);
    overflow: visible;
}

/* 300vh outer track gives 3 viewport heights of scrub space */
.hw3d-track {
    position: relative;
    height: 320vh;
}

/* Sticky inner stage pins at top during scrub */
.hw3d-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 0 clamp(24px, 6vw, 96px);
    overflow: hidden;
}

/* === LEFT: WebGL canvas === */
.hw3d-canvas-wrap {
    position: relative;
    height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#hw3d-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
/* Subtle gold radial glow behind the canvas — reads as ambient room light */
.hw3d-canvas-glow {
    position: absolute;
    inset: 15% 10%;
    background: radial-gradient(ellipse at 50% 60%,
        rgba(201, 168, 76, 0.14) 0%,
        rgba(201, 168, 76, 0.04) 40%,
        transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* === RIGHT: copy column === */
.hw3d-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 480px;
}
.hw3d-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.7);
}
.hw3d-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--white);
}
.hw3d-title em {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

/* Beat stack — only the active one shows */
.hw3d-beats {
    position: relative;
    min-height: 150px;
}
.hw3d-beat {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease-out-expo),
                transform 0.5s var(--ease-out-expo);
    pointer-events: none;
}
.hw3d-beat.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.hw3d-beat-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.hw3d-beat p {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.78);
}

.hw3d-progress {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.hw3d-progress-dot {
    width: 30px;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1px;
    transition: background var(--dur-quick) var(--ease-out-expo);
}
.hw3d-progress-dot.is-active {
    background: var(--gold);
}

/* === MOBILE: stack, kill pin === */
@media (max-width: 860px) {
    .hw3d-track { height: auto; }
    .hw3d-stage {
        position: relative;
        grid-template-columns: 1fr;
        height: auto;
        padding: 80px 24px;
        gap: 40px;
    }
    .hw3d-canvas-wrap {
        height: 60vh;
        min-height: 320px;
    }
    .hw3d-beats { min-height: 120px; }
}


/* v6.6 RETIRED 2026-06-14: User "feels wrong, kill it, i dont want
   another section for the edge unit". Hiding the section. Existing
   #hardware below carries the story. Three.js code in main.js is
   commented out. CSS rules kept for safety / one-line restore. */
#hardware-3d { display: none !important; }


/* =============================================================
   v6.7 CAPABILITIES EDITORIAL REBUILD (2026-06-14)
   User: "I don't want the image to be specifically in a box."
   The 6 CCTV-viewer cap-cards become magazine-spread rows.
   Each row: bleed image with soft mask edges (no box, no
   border), big italic Fraunces verb headline (Smoking. Sleep.
   Phone. Fall. Fire. Absent.), one-line evocative description,
   subtle gold "DETECTED" pill. Alternating left/right rhythm.
============================================================= */

/* Kill the old cap-grid so nothing rendered cap-cards lingers. */
.cap-grid { display: none !important; }

.cap-spread {
    display: flex;
    flex-direction: column;
    gap: clamp(80px, 9vw, 140px);
    max-width: 1280px;
    margin: 80px auto 0;
    padding: 0 24px;
}

.cap-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: center;
}

/* Alternate: even rows flip so image goes right, copy goes left */
.cap-row:nth-child(even) {
    direction: rtl;
}
.cap-row:nth-child(even) > * {
    direction: ltr;
}


/* === LEFT (or right): bleed image ===
   No box, no border, no card chrome. The image fades into the
   dark background on its trailing edge via a soft gradient mask.
   That's the only "frame" — restraint over chrome. */
.cap-row-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Subtle gold ambient glow underneath, just enough to feel like
       light is hitting the scene from somewhere off-frame. */
}
.cap-row-img::before {
    content: "";
    position: absolute;
    inset: -15% -8% -15% -8%;
    background: radial-gradient(ellipse at 50% 60%,
        rgba(201, 168, 76, 0.08) 0%,
        transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.cap-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Subtle filter pulls the image into the dark editorial canvas */
    filter: contrast(1.08) saturate(0.78) brightness(0.92);
    /* The key move: soft mask gradient on all 4 edges so the image
       dissolves into the dark page instead of stopping in a hard box. */
    -webkit-mask-image:
        radial-gradient(ellipse 100% 95% at 50% 50%, black 55%, transparent 100%);
            mask-image:
        radial-gradient(ellipse 100% 95% at 50% 50%, black 55%, transparent 100%);
    position: relative;
    z-index: 1;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cap-row:hover .cap-row-img img {
    transform: scale(1.04);
    filter: contrast(1.12) saturate(0.85) brightness(0.96);
}


/* === RIGHT (or left): editorial copy block === */
.cap-row-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 480px;
}

.cap-row-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: var(--gold-subtle);
    border-radius: 8px;
    color: var(--gold);
    margin-bottom: 4px;
}
.cap-row-icon svg {
    width: 16px;
    height: 16px;
}

.cap-row-verb {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--white);
}
.cap-row-verb em {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.cap-row-line {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.72);
    max-width: 32ch;
}

/* The only AI signal — small gold pill at the bottom. */
.cap-row-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    align-self: flex-start;
    margin-top: 8px;
}


/* === MOBILE: single column, image stacks on top === */
@media (max-width: 860px) {
    .cap-spread { gap: 64px; margin-top: 48px; }
    .cap-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .cap-row:nth-child(even) {
        direction: ltr;
    }
    .cap-row-verb { font-size: clamp(40px, 13vw, 72px); }
    .cap-row-line { font-size: clamp(16px, 4.5vw, 20px); }
}


/* =============================================================
   v6.8 INDUSTRIES "IN THE FIELD" (2026-06-14)
   User: "use your creativity and I don't want it to be very pale.
   Maybe don't use the same structure as before, do something else."
   Replaces the 5-card accordion with an interactive scenario panel.
   Large visual on the left crossfades between 5 industries; the
   right side has numbered nav + cinematic scenario story.
============================================================= */

/* Stage layout: 1.15:1 grid on desktop, stacked on mobile */
.field-stage {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
    max-width: 1280px;
    margin: 64px auto 0;
    padding: 0 24px;
    position: relative;
}

/* === LEFT: visual frame with stacked media === */
.field-visual {
    position: relative;
    width: 100%;
}
.field-visual-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: #0a0a0b;
    border: 1px solid rgba(201, 168, 76, 0.18);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 168, 76, 0.08),
        0 0 80px rgba(201, 168, 76, 0.06);
}

/* All 5 media stack on top of each other; only .is-active is visible */
.field-visual-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.9s var(--ease-out-expo),
                transform 1.4s var(--ease-out-expo);
    filter: contrast(1.05) saturate(0.9) brightness(0.92);
    pointer-events: none;
    z-index: 1;
}
.field-visual-media.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* Gold corner brackets */
.field-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--gold);
    opacity: 0.55;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.4));
}
.field-corner.tl { top: 14px;    left: 14px;    border-right: none;  border-bottom: none; }
.field-corner.tr { top: 14px;    right: 14px;   border-left: none;   border-bottom: none; }
.field-corner.bl { bottom: 14px; left: 14px;    border-right: none;  border-top: none; }
.field-corner.br { bottom: 14px; right: 14px;   border-left: none;   border-top: none; }

/* "In the Field" glass pill */
.field-live-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    background: rgba(10, 10, 10, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}


/* === RIGHT: nav + story === */
.field-side {
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: 520px;
}

/* Numbered nav as a vertical list */
.field-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0;
}
.field-nav-item {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 12px 0 12px 22px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: rgba(255, 255, 255, 0.42);
    transition: color var(--dur-quick) var(--ease-out-expo);
    font-family: inherit;
    position: relative;
}
.field-nav-item:hover {
    color: rgba(255, 255, 255, 0.78);
}
.field-nav-item.is-active {
    color: var(--white);
}
.field-nav-num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.6px;
    color: rgba(201, 168, 76, 0.6);
    flex-shrink: 0;
}
.field-nav-item.is-active .field-nav-num {
    color: var(--gold);
}
.field-nav-label {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(18px, 1.9vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    transition: letter-spacing var(--dur-quick) var(--ease-out-expo);
}
.field-nav-item.is-active .field-nav-label {
    letter-spacing: -0.025em;
}

/* Gold sliding indicator (the vertical line that moves to the active item) */
.field-nav-indicator {
    position: absolute;
    left: -1px;
    width: 2px;
    height: 48px;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.6);
    transition: transform 0.5s var(--ease-out-expo);
    pointer-events: none;
    transform: translateY(0);
}

/* Story cards stacked, only .is-active is visible */
.field-story {
    position: relative;
    min-height: 180px;
}
.field-story-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease-out-expo),
                transform 0.5s var(--ease-out-expo);
    pointer-events: none;
}
.field-story-card.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.field-story-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold);
    align-self: flex-start;
}
.field-story-line {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.88);
}
.field-story-line em {
    font-style: italic;
    color: var(--gold);
    font-weight: 500;
}
.field-story-meta {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    max-width: 56ch;
    margin-top: 4px;
}


/* === MOBILE: stack, smaller spacing === */
@media (max-width: 860px) {
    .field-stage {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 40px;
    }
    .field-visual-frame { aspect-ratio: 16 / 10; }
    .field-side { max-width: none; gap: 28px; }
    .field-nav-item { padding: 10px 0 10px 18px; gap: 14px; }
    .field-story { min-height: 220px; }
    .field-corner { width: 16px; height: 16px; }
    .field-corner.tl,
    .field-corner.tr,
    .field-corner.bl,
    .field-corner.br { top: 10px; left: 10px; right: 10px; bottom: 10px; }
    .field-corner.tl { right: auto; bottom: auto; }
    .field-corner.tr { left: auto; bottom: auto; }
    .field-corner.bl { right: auto; top: auto; }
    .field-corner.br { left: auto; top: auto; }
}


/* =============================================================
   v6.8.1 IN THE FIELD — ANIMATION UPGRADES (2026-06-14)
   User: "the structure is good but the UI animation can still
   be upgraded." Four refinements that whisper, not shout.
============================================================= */

/* 1. SMOOTHER CROSSFADE WITH SUBTLE BLUR
   The active media transitions in with a brief blur clearing,
   feels like the visual "focuses" on entry rather than just
   fading. Inactive media is held slightly out of focus. */
.field-visual-media {
    transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    filter: contrast(1.05) saturate(0.9) brightness(0.92) blur(4px);
}
.field-visual-media.is-active {
    filter: contrast(1.05) saturate(0.9) brightness(0.92) blur(0);
}

/* 2. KEN BURNS DRIFT ON ACTIVE VISUAL
   The active media slowly scales + translates 1.0 → 1.05 over
   18 seconds. Subtle "alive" feel; you only notice it if you
   stare for several seconds. */
@keyframes field-ken-burns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.05) translate(-1%, -0.6%); }
}
.field-visual-media.is-active {
    animation: field-ken-burns 18s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
.field-visual-media:not(.is-active) {
    animation: none !important;
}

/* 3. STORY COPY ENTRANCE — WORD STAGGER REVEAL
   When a story card activates, its child elements stagger in
   one after the other instead of fading as one block. The tag
   leads, the line follows, the meta caboose. Cinematic beat. */
.field-story-card.is-active .field-story-tag,
.field-story-card.is-active .field-story-line,
.field-story-card.is-active .field-story-meta {
    animation: field-line-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.field-story-card.is-active .field-story-tag  { animation-delay: 0.05s; }
.field-story-card.is-active .field-story-line { animation-delay: 0.18s; }
.field-story-card.is-active .field-story-meta { animation-delay: 0.34s; }
@keyframes field-line-rise {
    0%   { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0);  }
}

/* 4. GOLD INDICATOR ELASTIC MORPH
   Between positions the indicator briefly stretches taller,
   then settles to the active item height. Feels like a spring
   reach instead of a slide. */
.field-nav-indicator {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease !important;
    will-change: transform, height;
}
.field-nav-indicator.is-morphing {
    background: linear-gradient(180deg, var(--gold) 0%, rgba(201, 168, 76, 0.4) 50%, var(--gold) 100%);
}

/* 5. BONUS: subtle pre-warm on hover (inactive nav items)
   Hover any inactive industry → its number pulses softly. */
.field-nav-item:not(.is-active):hover .field-nav-num {
    color: rgba(201, 168, 76, 0.9);
    transition: color 0.3s ease;
}


/* =============================================================
   TRUST — CONCENTRATED SPOTLIGHT
   Editorial credibility card. Concentrates credibility on the
   flagship institution Aurum AI has explicit consent to name
   (YAPEIM). Others (KKM, AADK, APMM) removed per lack of
   marketing-material consent.
============================================================= */

/* Hide old layout */
.trust-grid,
.engagements { display: none !important; }


.trust-spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    max-width: 1280px;
    margin: 64px auto 0;
    padding: 0 24px;
}

.trust-spot-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(201, 168, 76, 0.16);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color var(--dur-considered) var(--ease-out-expo),
                box-shadow var(--dur-considered) var(--ease-out-expo),
                transform var(--dur-considered) var(--ease-out-expo);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.trust-spot-card:hover {
    border-color: rgba(201, 168, 76, 0.32);
    transform: translateY(-4px);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 60px rgba(201, 168, 76, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* === IMAGE BANNER (top of card) === */
.trust-spot-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0a0a0b;
}
.trust-spot-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.04) saturate(0.9) brightness(0.92);
    transition: transform 14s cubic-bezier(0.25, 0.1, 0.25, 1),
                filter 0.7s ease;
    transform: scale(1.02);
}
.trust-spot-card:hover .trust-spot-image img {
    transform: scale(1.07) translate(-0.5%, -0.5%);
    filter: contrast(1.06) saturate(0.95) brightness(0.96);
}

/* Status pill in the top-left corner of the image */
.trust-spot-status {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 168, 76, 0.28);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

/* Gold film corner brackets on the image */
.trust-spot-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--gold);
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.35));
}
.trust-spot-corner.tl { top: 12px;    left: 12px;    border-right: none;  border-bottom: none; }
.trust-spot-corner.tr { top: 12px;    right: 12px;   border-left: none;   border-bottom: none; }
.trust-spot-corner.bl { bottom: 12px; left: 12px;    border-right: none;  border-top: none; }
.trust-spot-corner.br { bottom: 12px; right: 12px;   border-left: none;   border-top: none; }


/* === BODY (below image) === */
.trust-spot-body {
    padding: clamp(28px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}
.trust-spot-mark {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.7);
}
.trust-spot-name {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(48px, 5.5vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--white);
}
.trust-spot-name em {
    font-style: italic;
    color: var(--gold);
    font-weight: 500;
}
.trust-spot-subtitle {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.68);
    letter-spacing: -0.01em;
}
.trust-spot-story {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.62);
    max-width: 56ch;
}
.trust-spot-story .gold {
    color: var(--gold);
    font-weight: 600;
}


/* === STATS ROW at the bottom of each card === */
.trust-spot-stats {
    display: flex;
    gap: clamp(20px, 2.4vw, 32px);
    margin-top: 12px;
    padding-top: 22px;
    border-top: 1px solid rgba(201, 168, 76, 0.16);
}
.trust-spot-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.trust-spot-stat-val {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.trust-spot-stat-lbl {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}


/* === MOBILE: stack === */
@media (max-width: 860px) {
    .trust-spotlight {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 40px;
    }
    .trust-spot-image { aspect-ratio: 16 / 10; }
    .trust-spot-status { font-size: 9.5px; padding: 6px 12px; }
    .trust-spot-corner { width: 14px; height: 14px; }
    .trust-spot-corner.tl,
    .trust-spot-corner.tr,
    .trust-spot-corner.bl,
    .trust-spot-corner.br { top: 8px; left: 8px; right: 8px; bottom: 8px; }
    .trust-spot-corner.tl { right: auto; bottom: auto; }
    .trust-spot-corner.tr { left: auto; bottom: auto; }
    .trust-spot-corner.bl { right: auto; top: auto; }
    .trust-spot-corner.br { left: auto; top: auto; }
}


/* =============================================================
   v6.9.1 (2026-06-14) USER FEEDBACK FIXES
   1. Descender clipping (y / g / p / q tails being cut off
      by the word-reveal overflow:hidden)
   2. Partners row too close to the trust spotlight cards
   3. Section h2 headers wrapping to 3+ lines (want 2 max)
   4. Trust section layout: h2 LEFT, cards RIGHT
============================================================= */

/* === 1. DESCENDER CLIP FIX ===
   The .word-reveal box clipped descenders because the box edge
   stopped at the baseline. Add 0.15em padding-bottom on the
   wrapper and on .word-inner so descenders have room. The
   reveal animation math (translateY 110% → 0) still works
   because both the box AND its content grow by the same amount. */
.word-reveal {
    padding-bottom: 0.18em;
    /* Negative margin to keep overall vertical rhythm unchanged */
    margin-bottom: -0.18em;
}


/* === 2. PARTNERS ROW GAP ===
   "Powered By & Delivered With" sat too close to the trust
   cards. Push it down with a real breathing buffer. */
#trust .partners {
    margin-top: clamp(64px, 7vw, 110px) !important;
}


/* === 3. SECTION HEADER 2-LINE GUARANTEE ===
   The centered .sec-header had max-width: 600px which forced
   headlines like "Trusted by Malaysian institutions." into
   three lines. Widening to 880px lets long headlines wrap
   cleanly to 2 lines. The h2 max font-size is unchanged so
   the editorial weight is preserved. */
body.v6 .sec-header {
    max-width: 880px;
}
/* Per-section override: any section that still has a 3-line
   issue should set its own max-width here. Most won't need to. */
body.v6 #problem .problem-anchor.sec-header {
    max-width: 940px;
}

/* Keep "today, and nobody noticed?" on one line (override 18ch h2 wrap). */
body.v6 #problem .problem-anchor-q {
    max-width: none;
}
.problem-anchor-q-tail {
    white-space: nowrap;
}
@media (max-width: 520px) {
    .problem-anchor-q-tail {
        white-space: normal;
    }
}


/* === 4. TRUST SECTION — H2 LEFT, CARDS RIGHT ===
   New asymmetric layout: the section header sits on the left
   (0.6fr), the two spotlight cards stack on the right (1.4fr).
   Restructure happens via a wrapper grid; the existing trust
   spotlight grid is flattened to single column under this. */
#trust .wrap {
    max-width: 1280px;
}
.trust-layout {
    display: grid;
    grid-template-columns: 0.6fr 1.4fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
    margin-top: 32px;
}
.trust-header-side {
    position: sticky;
    top: 120px;
}
.trust-header-side .h2 {
    /* The narrow left column wants a slightly smaller h2 size */
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1.04;
    margin-bottom: 18px;
}
.trust-header-side .h2 em {
    font-style: normal;
    font-weight: 600;
    color: var(--gold);
}
.trust-header-side p {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    max-width: 30ch;
    margin: 0;
}

/* Override the spotlight grid inside the trust-layout — stack
   the 2 cards vertically since they're now in the narrower
   right column. */
.trust-layout .trust-spotlight {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    max-width: none;
}

/* Mobile — stack everything, kill sticky */
@media (max-width: 960px) {
    .trust-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .trust-header-side {
        position: static;
        top: auto;
    }
    .trust-header-side .h2 {
        font-size: clamp(40px, 9vw, 60px);
    }
}


/* v6.9.2 (2026-06-14): Honest caption under the Inside Aurum AI sub-line.
   Explains why zero counters in the screenshots — they're from a quiet
   shift in an active deployment, not a placeholder/empty system. */
.inside-note {
    margin: 12px auto 0;
    max-width: 480px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.5;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.42);
    font-style: italic;
}


/* =============================================================
   v6.9.3 LIVE MONITOR — DETECTION LOCK-ON REBUILD (2026-06-15)
   User: "the alert grid is not in the right place when the video
   paused, refer camera grid intrusion. same concept, use
   creativity to upgrade." Stop the infinite cycle; lock bboxes in
   once and let them stay deliberate. Better positions, staggered
   firing, confidence overlays.
============================================================= */

/* 1. Override all 4 per-tile bbox positions to a wider central
      frame. Was: corner-biased (intrusion at left 28%, was off).
      Now: 18/22/60/56 — frames the central two-thirds of every
      tile so it lands sensibly regardless of video content. */
.hero-tile--1 .hero-tile-bbox,
.hero-tile--2 .hero-tile-bbox,
.hero-tile--3 .hero-tile-bbox,
.hero-tile--4 .hero-tile-bbox {
    left: 18% !important;
    top: 22% !important;
    width: 60% !important;
    height: 56% !important;
}

/* 2. One-shot lock-on animation: bbox draws in, scales, settles
      and STAYS at its position. `forwards` keeps the final state
      visible after the animation completes, so when the video
      pauses at its end frame, the bbox is already locked. */
@keyframes hero-tile-lockon {
    0%   { opacity: 0; transform: scale(0.82); filter: brightness(1); }
    44%  { opacity: 0; transform: scale(0.82); }
    58%  { opacity: 1; transform: scale(1.06); filter: brightness(1.5); }
    72%  { opacity: 1; transform: scale(1);    filter: brightness(1); }
    100% { opacity: 1; transform: scale(1);    filter: brightness(1); }
}

@keyframes hero-tile-ring-on {
    0%, 44%, 100% { border-color: rgba(201, 168, 76, 0.10); box-shadow: none; }
    58%, 72%      { border-color: var(--gold); box-shadow: 0 0 22px rgba(201, 168, 76, 0.45), inset 0 0 12px rgba(201, 168, 76, 0.12); }
    85%           { border-color: rgba(201, 168, 76, 0.32); box-shadow: 0 0 12px rgba(201, 168, 76, 0.18); }
}

@keyframes hero-tile-scan-on {
    0%, 100% { opacity: 0.4; }
    24%, 36% { opacity: 0.9; }   /* scanning phase */
    58%      { opacity: 0.45; }
    72%      { opacity: 0.30; }
}

/* Apply the one-shot animations. forwards = stay at final state. */
.hero-tile-bbox      { animation: hero-tile-lockon  10s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards !important; }
.hero-tile           { animation: hero-tile-ring-on 10s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards !important; }
.hero-tile-scanlines { animation: hero-tile-scan-on 10s linear 1 forwards !important; }

/* 3. Staggered start per tile so alerts cascade across the
      mosaic rather than all firing simultaneously. */
.hero-tile--1 .hero-tile-bbox,
.hero-tile--1,
.hero-tile--1 .hero-tile-scanlines { animation-delay: 0s !important; }
.hero-tile--2 .hero-tile-bbox,
.hero-tile--2,
.hero-tile--2 .hero-tile-scanlines { animation-delay: 1.2s !important; }
.hero-tile--3 .hero-tile-bbox,
.hero-tile--3,
.hero-tile--3 .hero-tile-scanlines { animation-delay: 2.4s !important; }
.hero-tile--4 .hero-tile-bbox,
.hero-tile--4,
.hero-tile--4 .hero-tile-scanlines { animation-delay: 3.6s !important; }

/* 4. Bbox label gets a subtle continuous heartbeat pulse after
      lock-on, so the "alert is active" feeling persists. */
@keyframes hero-tile-label-heartbeat {
    0%, 100% { box-shadow: 0 4px 14px rgba(201, 168, 76, 0.32); }
    50%      { box-shadow: 0 4px 22px rgba(201, 168, 76, 0.62); }
}
.hero-tile-bbox-label {
    animation: hero-tile-label-heartbeat 2.4s ease-in-out infinite;
    animation-delay: 7s;
}
.hero-tile--2 .hero-tile-bbox-label { animation-delay: 8.2s; }
.hero-tile--3 .hero-tile-bbox-label { animation-delay: 9.4s; }
.hero-tile--4 .hero-tile-bbox-label { animation-delay: 10.6s; }

/* 5. Confidence + timestamp data overlay — small mono pills sitting
      next to the bbox label. Live operations console vibe. */
.hero-tile-data {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(10, 10, 10, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    opacity: 0;
    animation: hero-tile-data-fade 10s linear 1 forwards;
}
.hero-tile-data-conf {
    color: var(--gold);
    font-weight: 600;
}
.hero-tile-data-time {
    color: rgba(255, 255, 255, 0.52);
    border-left: 1px solid rgba(201, 168, 76, 0.22);
    padding-left: 6px;
}
@keyframes hero-tile-data-fade {
    0%, 60%   { opacity: 0; transform: translateY(4px); }
    72%, 100% { opacity: 1; transform: translateY(0); }
}
.hero-tile--1 .hero-tile-data { animation-delay: 0s; }
.hero-tile--2 .hero-tile-data { animation-delay: 1.2s; }
.hero-tile--3 .hero-tile-data { animation-delay: 2.4s; }
.hero-tile--4 .hero-tile-data { animation-delay: 3.6s; }

/* Reduced motion: skip the cascading lock-on, just show static state */
@media (prefers-reduced-motion: reduce) {
    .hero-tile-bbox      { animation: none !important; opacity: 1 !important; transform: none !important; }
    .hero-tile           { animation: none !important; border-color: rgba(201, 168, 76, 0.32) !important; }
    .hero-tile-scanlines { animation: none !important; opacity: 0.4 !important; }
    .hero-tile-bbox-label { animation: none !important; }
    .hero-tile-data { animation: none !important; opacity: 1 !important; transform: none !important; }
}


/* =============================================================
   v6.9.6 LIVE MONITOR — CCTV GRADE (2026-06-15)
   User: "the video is not like cctv viewed. i want it looks like
   it is taken from cctv point of view. please fix that."
   The Higgsfield clips are too cinematic / clean. Layer CSS
   filters + overlays on top so they read as actual CCTV footage:
   desaturated, slightly muddy, scanlines, sensor noise, heavy
   vignette, slight barrel-edge falloff.
============================================================= */

/* 1. THE VIDEO ITSELF — desaturated, slightly muddy, low-fi
      Cinematic Seedance clips read "film". CCTV reads "sensor".
      Push saturation low, lift contrast slightly, knock brightness
      down a hair, add a tiny blur so subjects feel resolved by
      a security camera, not a Canon. */
.hero-tile-feed video {
    filter: contrast(1.18) saturate(0.42) brightness(0.86) blur(0.4px) !important;
}

/* 2. SCANLINES — more visible, tighter pitch.
      The previous treatment was barely there. Real CCTV interlace
      has visible horizontal banding. Doubled the opacity and
      tightened the line pitch from 3px → 2.5px. */
.hero-tile-scanlines {
    background-image: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.36) 0px,
        rgba(0, 0, 0, 0.36) 1px,
        transparent 1px,
        transparent 2.5px
    ) !important;
    opacity: 0.7 !important;
}

/* 3. SENSOR NOISE — extra grain layer on the feed.
      Adds the static-y feel of a low-bitrate CCTV stream.
      Inline SVG turbulence so no extra HTTP request. */
.hero-tile-feed::before {
    /* override the old perspective grid with sensor noise */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") !important;
    background-size: 240px 240px !important;
    mix-blend-mode: overlay !important;
    transform: none !important;
    opacity: 0.32 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* 4. HEAVY CORNER VIGNETTE — the lens falloff of a security camera.
      Existing vignette was light editorial. CCTV cameras have
      heavier corner darkening because of the wide-angle lens. */
.hero-tile-screen {
    position: relative;
}
.hero-tile-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 110% 105% at 50% 50%,
        transparent 30%,
        rgba(0, 0, 0, 0.45) 75%,
        rgba(0, 0, 0, 0.72) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* 5. SUBTLE CHROMATIC GREEN-CYAN TINT
      Real CCTV color profile leans cool/cyan. Adds an inset box
      shadow of muted cyan on the inner edges so the feed reads
      "sensor", not "DSLR". */
.hero-tile-feed {
    box-shadow:
        inset 0 0 30px rgba(80, 130, 140, 0.16),
        inset 0 0 4px rgba(0, 0, 0, 0.5);
}

/* 6. KEEP THE TILE-1 LOBBY scene slightly warmer (it's an indoor
      lobby with gold pendant lights, so the cool CCTV tint
      should be slightly amber-mixed rather than full cyan). */
.hero-tile--1 .hero-tile-feed {
    box-shadow:
        inset 0 0 28px rgba(120, 90, 50, 0.14),
        inset 0 0 4px rgba(0, 0, 0, 0.5);
}
.hero-tile--1 .hero-tile-feed video {
    filter: contrast(1.14) saturate(0.55) brightness(0.90) blur(0.4px) !important;
}

/* Reduced motion: no need to override; static state still looks CCTV */