/* ==========================================================================
   HOME SCENES — the homepage's own compositions
   ==========================================================================

   Split out of css/09-scenes.css, and the reason is a measurement rather than
   a preference. 09-scenes is a CORE stylesheet: every one of the sixteen
   routes downloads it. The hero and its floor, the glass cluster, the product
   deck, the service bento, the phones and the coverflow gallery are rendered
   by index.php and by nothing else — eleven pages were carrying roughly 30 KB
   of rules for markup they do not contain, and the per-route CSS budget in
   inc/tools/perf-budget.json failed at 215 KB because of it.

   WHAT STAYED IN 09-scenes: the page-wide field canvas, the three textures,
   the orb, the .has-tex rule and the head field — everything that more than
   one route actually uses.

   The one hard rule is inherited unchanged: THIS FILE MAY NEVER DEFINE A
   GROUND TOKEN. Not --surface, not --accent-fg, not --paper, not --ink. It
   may read any of them. Grounds are css/08-ground.css's job.

   Loaded via $page['styles'] in index.php, which means it arrives AFTER
   09-scenes and after css/pages/home.css.
   ========================================================================== */

/* ==========================================================================
   THE RAFly PREMIUM HERO SECTION — ASYMMETRIC DIGITAL ECOSYSTEM
   ========================================================================== */

.rafly-hero {
    --hub-size: 230px;
    --card-w: 320px;
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: max(780px, 100vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #f8fafd;
    color: #13213d;
    isolation: isolate;
    padding: 90px 48px 60px;
    box-sizing: border-box;
    font-family: inherit;
}

.rafly-hero[data-hero-static] *,
.rafly-hero[data-hero-static] *::before,
.rafly-hero[data-hero-static] *::after {
    animation: none !important;
}

/* ── 1. ATMOSPHERIC BACKGROUND SYSTEM & TECHNICAL GRIDS ── */
.rafly-hero__env {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.rafly-hero__bg-base {
    position: absolute;
    inset: 0;
    background: #f8fafd;
}

.rafly-hero__bg-glows {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rafly-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.rafly-hero__glow--center {
    left: 55%;
    top: 45%;
    width: 750px;
    height: 750px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(43, 130, 255, 0.10) 0%, rgba(23, 105, 255, 0.04) 50%, transparent 75%);
}

.rafly-hero__glow--right {
    right: 5%;
    top: 30%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(121, 103, 255, 0.06) 0%, transparent 70%);
}

.rafly-hero__glow--left {
    left: -5%;
    top: 20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(42, 160, 255, 0.035) 0%, transparent 70%);
}

.rafly-hero__glow--bottom {
    left: 45%;
    bottom: -10%;
    width: 700px;
    height: 500px;
    background: radial-gradient(circle, rgba(80, 150, 255, 0.035) 0%, transparent 70%);
}

.rafly-hero__grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(50, 110, 210, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(50, 110, 210, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 100%);
    opacity: 0.9;
}

.rafly-hero__grid-sec {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(50, 110, 210, 0.018) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(50, 110, 210, 0.018) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
}

.rafly-hero__light-ribbons {
    position: absolute;
    inset: 0;
    opacity: 0.8;
}
.rafly-hero__light-ribbons svg {
    width: 100%;
    height: 100%;
}

.rafly-hero__cursor-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 105, 255, 0.05) 0%, transparent 70%);
    filter: blur(50px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.rafly-hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.rafly-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(23, 105, 255, 0.45);
    box-shadow: 0 0 6px rgba(23, 105, 255, 0.45);
    animation: raflyParticleFloat var(--dur, 9s) ease-in-out infinite alternate;
}

@keyframes raflyParticleFloat {
    0% { transform: translate(0, 0); opacity: 0.15; }
    50% { opacity: 0.55; }
    100% { transform: translate(var(--dx, 15px), var(--dy, -20px)); opacity: 0.2; }
}

/* ── 2. FRAMING ELEMENTS ── */
.rafly-hero__top-left {
    position: absolute;
    left: 48px;
    top: 96px;
    z-index: 25;
}

.rafly-hero__brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rafly-hero__brand-mark {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.rafly-hero__brand-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #13213d;
    text-transform: uppercase;
}

.rafly-hero__brand-sep {
    color: #94a3b8;
    font-size: 11px;
}

.rafly-hero__brand-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: #647594;
    text-transform: uppercase;
}

.rafly-hero__top-right {
    position: absolute;
    right: 48px;
    top: 96px;
    z-index: 25;
    text-align: right;
}

.rafly-hero__tagline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rafly-hero__tagline-main {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #13213d;
    text-transform: uppercase;
}

.rafly-hero__tagline-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #647594;
    text-transform: uppercase;
}

.rafly-hero__bottom-left {
    position: absolute;
    left: 48px;
    bottom: 36px;
    z-index: 25;
}

.rafly-hero__scroll-cue {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #647594;
    transition: color 0.25s ease;
}
.rafly-hero__scroll-cue:hover {
    color: #1769ff;
}

.rafly-hero__scroll-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.rafly-hero__scroll-track {
    position: relative;
    width: 2px;
    height: 22px;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 2px;
    overflow: hidden;
}

.rafly-hero__scroll-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: #1769ff;
    border-radius: 2px;
    animation: raflyScrollMove 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes raflyScrollMove {
    0% { transform: translateY(-100%); }
    60%, 100% { transform: translateY(280%); }
}

.rafly-hero__bottom-right {
    position: absolute;
    right: 48px;
    bottom: 36px;
    z-index: 25;
}

.rafly-hero__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rafly-hero__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.3);
    transition: all 0.3s ease;
}
.rafly-hero__dot.is-active {
    width: 18px;
    border-radius: 4px;
    background: #1769ff;
    box-shadow: 0 0 10px rgba(23, 105, 255, 0.35);
}

/* ── 3. ASYMMETRIC MAIN LAYOUT CONTAINER ── */
.rafly-hero__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1440px;
    padding: 0 48px 0 80px;
    gap: 36px;
    z-index: 10;
    margin-top: 20px;
}

/* LEFT COLUMN: COMPACT MARKETING CONTENT (28-32% width) */
.rafly-hero__left {
    width: 31%;
    max-width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 20;
}

.rafly-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(23, 105, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 999px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(23, 105, 255, 0.04);
}

.rafly-hero__sparkle {
    font-size: 10px;
    color: #1769ff;
}

.rafly-hero__eyebrow-text {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #1769ff;
    text-transform: uppercase;
}

/* Editorial Headline Typography */
.rafly-hero__title {
    font-size: 54px;
    font-weight: 750;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: #12203d;
    margin: 0 0 22px 0;
    max-width: 440px;
}

.rafly-hero__title-line {
    display: block;
    overflow: hidden;
    margin-bottom: 2px;
}

.rafly-hero__title-text {
    display: block;
}

.rafly-hero__title-text--blue {
    color: #1769ff;
    font-weight: 800;
}

/* Staggered Reveal Choreography */
.rafly-hero [data-hero-reveal] {
    opacity: 0;
    will-change: opacity, transform, filter;
    transition-property: opacity, transform, filter;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.rafly-hero [data-hero-reveal="eyebrow"] {
    transform: translateY(12px);
    filter: blur(5px);
    transition-duration: 700ms;
}

.rafly-hero [data-hero-reveal="title-1"],
.rafly-hero [data-hero-reveal="title-2"],
.rafly-hero [data-hero-reveal="title-3"],
.rafly-hero [data-hero-reveal="title-4"] {
    transform: translateY(24px) scaleY(0.98);
    filter: blur(6px);
}

.rafly-hero [data-hero-reveal="title-1"] { transition-duration: 450ms; }
.rafly-hero [data-hero-reveal="title-2"] { transition-duration: 550ms; }
.rafly-hero [data-hero-reveal="title-3"] { transition-duration: 650ms; }
.rafly-hero [data-hero-reveal="title-4"] { transition-duration: 750ms; }

.rafly-hero [data-hero-reveal="desc"] {
    transform: translateY(16px);
    filter: blur(4px);
    transition-duration: 600ms;
}

.rafly-hero [data-hero-reveal="cta"] {
    transform: translateY(16px);
    transition-duration: 600ms;
}

.rafly-hero [data-hero-reveal="metrics"] {
    transform: translateY(10px);
    transition-duration: 600ms;
}

.rafly-hero.rafly-hero--entered [data-hero-reveal] {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: blur(0);
}

.rafly-hero__desc {
    font-size: 15.5px;
    line-height: 1.65;
    color: #647594;
    max-width: 420px;
    margin: 0 0 28px 0;
    font-weight: 450;
}

.rafly-hero__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 36px;
}

.rafly-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    width: 178px;
    padding: 0 24px;
    background: #101c3b;
    color: #ffffff;
    border-radius: 26px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 25px -5px rgba(16, 28, 59, 0.20);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.rafly-hero__cta-primary:hover {
    transform: translateY(-2px);
    background: #1769ff;
    box-shadow: 0 14px 30px -5px rgba(23, 105, 255, 0.30);
}

.rafly-hero__cta-arrow {
    font-size: 15px;
    transition: transform 0.3s ease;
}

.rafly-hero__cta-primary:hover .rafly-hero__cta-arrow {
    transform: translateX(4px);
}

.rafly-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #13213d;
    transition: color 0.25s ease;
}

.rafly-hero__cta-secondary:hover {
    color: #1769ff;
}

.rafly-hero__cta-subarrow {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.rafly-hero__cta-secondary:hover .rafly-hero__cta-subarrow {
    transform: translateX(3px);
}

.rafly-hero__metrics {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(30, 90, 170, 0.10);
    width: 100%;
    max-width: 440px;
}

.rafly-hero__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rafly-hero__metric-val {
    font-size: 22px;
    font-weight: 800;
    color: #182744;
    letter-spacing: -0.02em;
    line-height: 1;
}

.rafly-hero__metric-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #71809a;
    text-transform: uppercase;
}

.rafly-hero__metric-sep {
    width: 1px;
    height: 28px;
    background: rgba(30, 90, 170, 0.12);
}

/* RIGHT COLUMN: DIGITAL ECOSYSTEM (68-72% width) */
.rafly-hero__right {
    width: 69%;
    flex-grow: 1;
    position: relative;
    height: 680px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── 4. MAIN SPATIAL STAGE ── */
.rafly-hero__stage {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── 5. SVG CONNECTIONS ── */
.rafly-hero__connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.rafly-path-group {
    transition: opacity 0.35s ease;
}

.rafly-path__base {
    transition: stroke-width 0.3s ease, stroke 0.3s ease;
}

.rafly-path__glow {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.rafly-path__core {
    stroke-dashoffset: 0;
    animation: raflyPathFlow 30s linear infinite;
}

@keyframes raflyPathFlow {
    to { stroke-dashoffset: -200; }
}

.rafly-path__packet {
    opacity: 0.95;
}

.rafly-path-group.is-active .rafly-path__glow {
    opacity: 0.85;
    stroke-width: 10;
}

/* ── 6. CENTRAL RAFly LOGO HUB & ORBITS (Section 8 & 9) ── */
.rafly-hub {
    position: absolute;
    left: 42%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 230px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
}

.rafly-hub__halo {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(23, 105, 255, 0.075) 0%, 
        rgba(34, 184, 214, 0.03) 45%, 
        transparent 70%);
    animation: raflyHaloPulse 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes raflyHaloPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.03); opacity: 0.85; }
}

.rafly-hub__orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Orbit 1: 260px solid 1px rgba(23,105,255,0.16) */
.rafly-hub__orbit--1 {
    width: 260px;
    height: 260px;
    border: 1px solid rgba(23, 105, 255, 0.16);
    animation: raflyOrbitSpin 38s linear infinite;
}

/* Orbit 2: 350px dashed 1px rgba(23,105,255,0.11) */
.rafly-hub__orbit--2 {
    width: 350px;
    height: 350px;
    border: 1px dashed rgba(23, 105, 255, 0.11);
    animation: raflyOrbitSpin 55s linear infinite reverse;
}

/* Orbit 3: 430px dotted 1px rgba(23,105,255,0.07) */
.rafly-hub__orbit--3 {
    width: 430px;
    height: 430px;
    border: 1px dotted rgba(23, 105, 255, 0.07);
    animation: raflyOrbitSpin 75s linear infinite;
}

.rafly-hub__orbit-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1769ff;
    box-shadow: 0 0 5px #1769ff;
}

.rafly-hub__orbit-dot--1 { top: -2px; left: 50%; transform: translateX(-50%); }
.rafly-hub__orbit-dot--2 { bottom: -2px; left: 50%; transform: translateX(-50%); background: #22b8d6; box-shadow: 0 0 5px #22b8d6; }

@keyframes raflyOrbitSpin {
    to { transform: rotate(360deg); }
}

/* Translucent Glass Sphere with Crisp Stable Logo */
.rafly-hub__sphere {
    position: relative;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.90);
    box-shadow: 
        0 20px 60px rgba(30, 80, 150, 0.08),
        inset 0 2px 4px rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    overflow: hidden;
}

.rafly-hub__sphere-shine {
    position: absolute;
    inset: -50%;
    background: linear-gradient(135deg, 
        transparent 42%, 
        rgba(255, 255, 255, 0.55) 50%, 
        transparent 58%);
    animation: raflyLightSweep 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes raflyLightSweep {
    0%, 100% { transform: translateY(-100%) rotate(45deg); }
    50% { transform: translateY(100%) rotate(45deg); }
}

.rafly-hub__logo-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rafly-hub__logo {
    width: 74px;
    height: 74px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(23, 105, 255, 0.18));
    transform: translateZ(0);
}

.rafly-hub.is-pulsing .rafly-hub__sphere {
    transform: scale(1.025);
    box-shadow: 
        0 22px 50px -4px rgba(23, 105, 255, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 1);
}

/* ── 7. SUPPORTING GLASS SERVICE CARDS (Section 10 & 11) ── */
.rafly-card {
    position: absolute;
    width: 310px;
    height: 76px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: 
        0 16px 40px rgba(40, 80, 140, 0.07),
        0 2px 6px rgba(19, 33, 61, 0.02),
        inset 0 1px 1px rgba(255, 255, 255, 0.95);
    text-decoration: none;
    color: inherit;
    z-index: 18;
    box-sizing: border-box;
    transition: 
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        background-color 0.35s ease;
    opacity: 0;
    transform: translateY(18px);
}

.rafly-hero--entered .rafly-card {
    opacity: 1;
}

.rafly-card__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

/* Reference Card Positions — Symmetrical Spatial Hierarchy */
.rafly-card--web {
    left: 2%;
    top: 12%;
}

.rafly-card--security {
    left: -1%;
    top: 46%;
    transform: translateY(-50%);
}

.rafly-card--marketing {
    left: 48%;
    top: 12%;
}

.rafly-card--content {
    left: 48%;
    top: 46%;
    transform: translateY(-50%);
}

.rafly-card--commerce {
    left: 42%;
    top: 80%;
    transform: translateX(-50%);
    width: 310px;
}

/* Card Icon Box (44px x 44px) */
.rafly-card__icon-box {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.rafly-card__icon-box svg {
    width: 20px;
    height: 20px;
    stroke-width: 2px;
}

.rafly-card__icon-box--blue {
    background: rgba(23, 105, 255, 0.08);
    color: #1769ff;
}

.rafly-card__icon-box--cyan {
    background: rgba(34, 184, 214, 0.08);
    color: #22b8d6;
}

.rafly-card__icon-box--violet {
    background: rgba(124, 92, 255, 0.08);
    color: #7c5cff;
}

.rafly-card__icon-box--navy {
    background: rgba(37, 60, 136, 0.07);
    color: #253c88;
}

/* Card Content Text */
.rafly-card__content {
    flex: 1;
    min-width: 0;
}

.rafly-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.rafly-card__num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1769ff;
}

.rafly-card--security .rafly-card__num { color: #22b8d6; }
.rafly-card--marketing .rafly-card__num { color: #7c5cff; }

.rafly-card__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #13213d;
    margin: 0;
    text-transform: uppercase;
}

.rafly-card__desc {
    font-size: 11.5px;
    line-height: 1.35;
    color: #71809b;
    margin: 0;
    white-space: normal;
}

.rafly-card__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(240, 246, 255, 0.8);
    color: #647594;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.rafly-card__arrow svg {
    width: 13px;
    height: 13px;
    stroke-width: 2px;
}

.rafly-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 20px 48px rgba(23, 105, 255, 0.12),
        0 4px 12px rgba(19, 33, 61, 0.03);
    border-color: rgba(23, 105, 255, 0.25);
}

.rafly-card:hover .rafly-card__action {
    background: #1769ff;
    color: #ffffff;
    transform: translateX(3px);
}

.rafly-card:hover .rafly-card__icon-box {
    transform: scale(1.05);
}

/* ── 8. FAR-RIGHT COMPACT FLOATING DIGITAL ANALYTICS PANEL (Section 17) ── */
.rafly-hero__model3d {
    position: absolute;
    right: -4%;
    top: 46%;
    transform: translateY(-50%);
    width: 245px;
    height: 195px;
    z-index: 26;
    pointer-events: auto;
    perspective: 1000px;
}

.rafly-model3d__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-6deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.rafly-model3d__layer--mid {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 25px 70px rgba(35, 70, 120, 0.10),
        inset 0 1px 2px rgba(255, 255, 255, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rafly-model3d__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(240, 246, 255, 0.65);
    border-bottom: 1px solid rgba(220, 235, 255, 0.7);
}

.rafly-model3d__dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rafly-model3d__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.rafly-model3d__dot.red { background: #ff5f56; }
.rafly-model3d__dot.yellow { background: #ffbd2e; }
.rafly-model3d__dot.green { background: #27c93f; }

.rafly-model3d__title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #647594;
    text-transform: uppercase;
    margin-left: 4px;
}

.rafly-model3d__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #38d39f;
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: auto;
}

.rafly-model3d__status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #38d39f;
    box-shadow: 0 0 5px #38d39f;
    animation: raflyStatusPulse 2.5s ease-in-out infinite;
}

@keyframes raflyStatusPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.rafly-model3d__screen {
    position: relative;
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.rafly-model3d__grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(23, 105, 255, 0.04) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(23, 105, 255, 0.04) 1px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
}

.rafly-model3d__graph {
    position: relative;
    width: 100%;
    height: 90px;
}

.rafly-model3d__waves-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.rafly-wave {
    transition: d 0.5s ease;
}

.rafly-wave--primary {
    filter: drop-shadow(0 3px 6px rgba(23, 105, 255, 0.20));
}

.rafly-model3d__panel {
    position: relative;
    z-index: 5;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    height: 32px;
    background: #101c3b;
    border-radius: 10px;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(16, 28, 59, 0.20);
    box-sizing: border-box;
}

.rafly-model3d__badge {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #60a5fa;
    text-transform: uppercase;
}

.rafly-model3d__stat {
    font-size: 10px;
    font-weight: 800;
    color: #38d39f;
}

/* Floating Process Pill (IDEA -> PRODUCT -> IMPACT) */
.rafly-hero__floating-tag {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.98);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(23, 105, 255, 0.10);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #13213d;
    z-index: 30;
}

.rafly-tag__arr {
    color: #94a3b8;
    font-size: 10px;
}

.rafly-tag__highlight {
    color: #1769ff;
}

/* ── 9. RESPONSIVE BREAKPOINTS ── */
@media (max-width: 1280px) {
    .rafly-hero__container {
        gap: 24px;
    }

    .rafly-hero__left {
        width: 34%;
    }

    .rafly-hero__title {
        font-size: 48px;
    }

    .rafly-hero__model3d {
        display: none; /* Hide far-right 3D card on medium laptop to prevent clutter */
    }

    .rafly-card--marketing {
        right: 6%;
    }

    .rafly-card--content {
        right: 4%;
    }
}

@media (max-width: 1024px) {
    .rafly-hero {
        padding: 100px 32px 60px;
        min-height: auto;
    }

    .rafly-hero__container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    .rafly-hero__left {
        width: 100%;
        max-width: 640px;
        align-items: center;
    }

    .rafly-hero__desc {
        text-align: center;
    }

    .rafly-hero__right {
        width: 100%;
        height: 580px;
    }

    .rafly-hub {
        left: 50%;
    }

    .rafly-card--web { left: 4%; top: 10%; }
    .rafly-card--security { left: 2%; top: 48%; }
    .rafly-card--marketing { right: 4%; top: 10%; }
    .rafly-card--content { right: 2%; top: 48%; }
    .rafly-card--commerce { left: 50%; top: 82%; }
}

@media (max-width: 768px) {
    .rafly-hero {
        padding: 90px 20px 50px;
    }

    .rafly-hero__top-left,
    .rafly-hero__top-right {
        display: none;
    }

    .rafly-hero__title {
        font-size: 38px;
    }

    .rafly-hero__desc {
        font-size: 14.5px;
    }

    .rafly-hero__metrics {
        justify-content: center;
    }

    .rafly-hero__right {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .rafly-hero__stage {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .rafly-hero__connections {
        display: none;
    }

    .rafly-hub {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 20px 0;
    }

    .rafly-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 360px;
        opacity: 1 !important;
    }

    .rafly-card--commerce {
        transform: none !important;
    }
}
.rafly-card--content .rafly-card__num { color: #2563eb; }
.rafly-card--commerce .rafly-card__num { color: #0230c6; }

.rafly-card__title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #0f172a;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.rafly-card__desc {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Action Button */
.rafly-card__action {
    flex-shrink: 0;
}

.rafly-card__arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(241, 245, 249, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.rafly-card__arrow svg {
    width: 14px;
    height: 14px;
}

/* Card Hover State (Restrained & Subconscious) */
.rafly-card:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(10, 99, 255, 0.3);
    box-shadow: 
        0 16px 36px -10px rgba(10, 99, 255, 0.14),
        0 0 0 1px rgba(10, 99, 255, 0.1),
        0 4px 10px rgba(15, 23, 42, 0.03);
}

.rafly-card:hover .rafly-card__arrow {
    background: #0a63ff;
    color: #ffffff;
    transform: translateX(3px);
}

.rafly-card:hover .rafly-card__icon-box {
    transform: scale(1.05);
}

/* ── 7. RESPONSIVE COMPOSITION ── */
@media (max-width: 1280px) {
    .rafly-hero__stage {
        max-width: 1100px;
        height: 620px;
    }
    .rafly-card {
        width: 300px;
        padding: 14px 16px;
    }
    .rafly-card--web { left: 2%; top: 10%; }
    .rafly-card--security { left: 1%; top: 46%; }
    .rafly-card--marketing { right: 2%; top: 10%; }
    .rafly-card--content { right: 1%; top: 46%; }
    .rafly-card--commerce { top: 78%; width: 290px; }
}

@media (max-width: 1024px) {
    .rafly-hero {
        min-height: auto;
        padding: 100px 20px 60px;
    }
    .rafly-hero__stage {
        height: 560px;
    }
    .rafly-hub {
        width: 180px;
        height: 180px;
    }
    .rafly-hub__sphere {
        width: 130px;
        height: 130px;
    }
    .rafly-hub__logo {
        width: 60px;
        height: 60px;
    }
    .rafly-card {
        width: 270px;
        padding: 12px 14px;
    }
    .rafly-card__desc {
        font-size: 10px;
    }
    .rafly-card--web { left: 1%; top: 8%; }
    .rafly-card--security { left: 0%; top: 44%; }
    .rafly-card--marketing { right: 1%; top: 8%; }
    .rafly-card--content { right: 0%; top: 44%; }
    .rafly-card--commerce { top: 78%; width: 270px; }
}

/* Mobile Layout Structure (< 768px) */
@media (max-width: 768px) {
    .rafly-hero {
        min-height: auto;
        padding: 90px 16px 50px;
        justify-content: flex-start;
    }

    .rafly-hero__top-left,
    .rafly-hero__top-right {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .rafly-hero__brand {
        justify-content: center;
    }

    .rafly-hero__top-right {
        display: none;
    }

    .rafly-hero__connections {
        display: none;
    }

    .rafly-hero__stage {
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        position: relative;
    }

    /* Central Hub Mobile */
    .rafly-hub {
        position: relative;
        left: auto;
        top: auto;
        transform: none !important;
        width: 150px;
        height: 150px;
        margin: 10px 0 20px;
    }

    .rafly-hub__sphere {
        width: 120px;
        height: 120px;
    }

    .rafly-hub__logo {
        width: 54px;
        height: 54px;
    }

    .rafly-hub__orbit--1 { width: 180px; height: 180px; }
    .rafly-hub__orbit--2 { width: 240px; height: 240px; }

    /* Mobile Cards Stack */
    .rafly-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        opacity: 1 !important;
        background: #ffffff !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
        z-index: 15;
    }

    .rafly-hero__bottom-left,
    .rafly-hero__bottom-right {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 32px;
    }

    .rafly-hero__dots {
        justify-content: center;
    }
}

/* ── 8. REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    .rafly-hub__halo,
    .rafly-hub__orbit,
    .rafly-hub__sphere-shine,
    .rafly-path__core,
    .rafly-particle,
    .rafly-hero__beam,
    .rafly-hero__scroll-bar {
        animation: none !important;
    }
    .rafly-card {
        transition: none !important;
        transform: none !important;
    }
}



/* ==========================================================================
   THE HERO FLOOR — a perspective grid receding to a horizon

   Naveen sent OriginKit's hero gallery and asked for this family: the ones
   that put a lit, converging grid behind the words. The aurora gives the hero
   its colour, and colour tells you the mood of a page — a converging grid
   tells you there is a SPACE behind it, which is the thing our hero did not
   have.

   IT IS CSS, AND THAT IS THE POINT. rotateX on a plane of two repeating
   gradients is a real 3-D projection performed by the compositor. It costs no
   JavaScript, no WebGL and no bytes, so it is there for a visitor with scripts
   off, with a refused GL context, and on a phone — where js/gates.js
   deliberately never fetches the shader. The reference does it with geometry;
   this does it with a transform, and at the size it is drawn nothing separates
   them.

   THE LINES TRAVEL by animating background-position on the plane, which reads
   as the ground moving toward you. One property, compositor-only, no rAF.

   CONTRAST. The floor is masked off the left half, because that is where the
   headline is and no line may ever cross a letter. Everything in it is --blue
   as a FILL at 10-22% over paper; inc/tools/shoot.mjs re-measures the hero on
   both viewports, which is the check that keeps that honest.
   ========================================================================== */

.hero-floor {
    position: absolute;
    left: -10%; right: -10%;
    bottom: -4%;
    height: 96%;
    z-index: 1;
    pointer-events: none;
    perspective: 460px;
    perspective-origin: 50% 0%;

    /* Two masks intersected: fade out toward the horizon, and clear the left
       half where the copy lives. A single gradient cannot do both. */
    mask-image:
        linear-gradient(to top, #000 8%, transparent 74%),
        linear-gradient(to right, transparent 4%, #000 38%);
    -webkit-mask-image:
        linear-gradient(to top, #000 8%, transparent 74%),
        linear-gradient(to right, transparent 4%, #000 38%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.hero-floor > * {
    position: absolute;
    inset: 0;
    display: block;
    transform-origin: 50% 100%;
    transform: rotateX(77deg);
    backface-visibility: hidden;
}

/* The grid itself. 64px cells: the same order of magnitude as the 42px module
   js/field.js uses, opened up because these lines are being viewed at a raking
   angle and a tighter grid turns to moire at the horizon. */
.hero-floor-plane {
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--blue) 30%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--blue) 30%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    animation: floor-run 7s linear infinite;
}

/* A brighter point at every intersection, on a slower loop than the lines, so
   the two never march in step. A grid is stationery; points that could be
   connected are infrastructure — the same argument as the page-head field. */
.hero-floor-nodes {
    background-image: radial-gradient(
        color-mix(in srgb, var(--blue) 58%, transparent) 2px, transparent 2px);
    background-size: 64px 64px;
    opacity: .75;
    animation: floor-run 7s linear infinite;
}

@keyframes floor-run { to { background-position: 0 64px; } }

/* The lit horizon. Without it the grid stops at a hard edge and reads as a
   texture that has been cut off; with it, it reads as distance. */
.hero-horizon {
    position: absolute;
    left: 24%; right: -6%;
    bottom: 24%;
    height: 300px;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top,
            color-mix(in srgb, var(--blue) 30%, transparent), transparent 42%),
        radial-gradient(ellipse 56% 100% at 52% 100%,
            color-mix(in srgb, var(--blue) 40%, transparent), transparent 68%);
    filter: blur(38px);
}

@media (max-width: 900px) {
    /* On a phone the copy uses the full width, so a floor masked to the right
       half has nowhere to be. It stays, at half strength, under everything. */
    .hero-floor {
        mask-image: linear-gradient(to top, #000 4%, transparent 78%);
        -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 78%);
        opacity: .5;
        height: 46%;
    }
    .hero-horizon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    /* The grid IS the design; the travel is emphasis on it. */
    .hero-floor-plane,
    .hero-floor-nodes { animation: none; }
}

.hero-scene > .container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center;
}

/* The copy column ignores the pointer so the cards behind it stay reachable;
   the controls inside it opt back in. */
.hero-copy { pointer-events: none; }
.hero-copy a,
.hero-copy button,
.hero-cta { pointer-events: auto; }

/* --- the line-mask reveal ---------------------------------------------
   Each line sits in its own overflow-hidden box and slides up from below it.
   The mask is the point: the line arrives from behind an edge rather than
   fading in, which is what makes it read as typeset instead of animated. */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
    display: block;
    transform: translateY(110%);
    transition: transform var(--dur-5) var(--ease-out);
}
.is-in .line-mask > span,
.no-js .line-mask > span { transform: none; }

/* --- the gradient word -------------------------------------------------
   THE FALLBACK IS DECLARED FIRST AND OUTSIDE THE @supports, deliberately.
   An engine that cannot clip a background to text ignores the whole block
   and keeps this colour. Declared the other way round, that engine paints
   `color: transparent` and the headline disappears — total content loss from
   a decorative effect.

   --accent-fg, not --blue: this is text. */
.grad-word { color: var(--accent-fg); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .grad-word {
        background-image: linear-gradient(104deg,
            var(--blue) 0%, #4b8bff 30%, var(--blue-deep) 62%, var(--blue-abyss) 100%);
        background-size: 230% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: grad-shift 9s var(--ease-in-out) infinite;
    }
}

@keyframes grad-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ==========================================================================
   THE FLOATING CARD CLUSTER

   Real elements, rendered by index.php. js/cluster.js only adds transforms,
   so with no JS the cards are simply there, static, in their final positions.
   ========================================================================== */

.cluster {
    position: relative;
    height: 560px;
    perspective: 1500px;
    transform-style: preserve-3d;
}

.fcard {
    position: absolute;
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    background: color-mix(in srgb, #ffffff 86%, transparent);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid color-mix(in srgb, #ffffff 90%, transparent);
    box-shadow:
        0 30px 70px -28px color-mix(in srgb, var(--ink) 44%, transparent),
        0 2px 10px color-mix(in srgb, var(--ink) 6%, transparent);
    will-change: transform;

    /* The staggered entrance. js/cluster.js sets transition-delay per card;
       without JS .is-live never arrives and the cards are simply visible,
       which is why the opacity is on .cluster.is-live and not on .fcard. */
    opacity: 1;
    transition: opacity var(--dur-4) var(--ease-out);
}
.cluster.is-live .fcard { opacity: 0; animation: fcard-in var(--dur-4) var(--ease-out) forwards; }
@keyframes fcard-in { to { opacity: 1; } }

.fcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}
.fcard-title {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--ink);
}
/* The metadata tier. --ink-3, never --ink-4: this is small text. */
.fcard-meta {
    font-size: 10px;
    letter-spacing: var(--tr-meta);
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: var(--fw-semi);
}

/* A status pill. The logo green is 2.43:1 on paper and can never be text, so
   the label is --success-ink and the green appears only as the 12% fill. */
.fcard-pill {
    font-size: 10px;
    font-weight: var(--fw-semi);
    padding: 4px 9px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--success-ink);
}

.fcard-row { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 0; }
.fcard-av {
    width: 26px; height: 26px; border-radius: var(--r-sm); flex: none;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep));
}
.fcard-av.is-green { background: linear-gradient(135deg, var(--green), var(--success-ink)); }
.fcard-line { height: 7px; border-radius: 4px; background: var(--paper-3); }

.fcard-bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; }
.fcard-bars i {
    flex: 1; border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--blue), #7fb0ff);
}

.fcard-ring {
    width: 60px; height: 60px; border-radius: 50%; position: relative; flex: none;
    background: conic-gradient(var(--blue) var(--p, 72%), var(--paper-3) 0);
}
.fcard-ring::after {
    content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff;
}

.fcard-strip { display: flex; gap: 3px; }
.fcard-strip i { flex: 1; height: 18px; border-radius: 2px; background: var(--green); opacity: .85; }
.fcard-strip i.is-warn { background: var(--warning); }

/* ==========================================================================
   THE SCROLL CUE
   ========================================================================== */

.scroll-cue {
    position: absolute;
    bottom: var(--sp-7);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    pointer-events: none;
}
.scroll-cue .rail {
    width: 1px; height: 56px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, transparent, var(--ink-3));
}
.scroll-cue .rail i {
    position: absolute; top: -56px; left: 0; width: 100%; height: 56px;
    background: var(--blue);
    animation: cue-run 2.1s var(--ease-in-out) infinite;
}
@keyframes cue-run { 0% { top: -56px; } 60%, 100% { top: 56px; } }

/* ==========================================================================
   RESPONSIVE

   The cluster is the first thing to go. On a phone it would either shrink to
   illegibility or push the headline off the fold, and the hero's job there is
   the headline and the CTA. The aurora and the field are already gated off in
   JS at this width, so what remains is the frozen fallback — which is the
   design, standing still.
   ========================================================================== */

@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; }
    .cluster { display: none; }
    .scroll-cue { display: none; }
}

/* ==========================================================================
   REDUCED MOTION

   Everything above stops. Nothing here says anything the markup does not
   already say, so the correct amount of it to keep is none.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .field-canvas { background-image: none; }
    .grad-word { animation: none; }
    .scroll-cue .rail i { animation: none; top: 0; opacity: .5; }
    .line-mask > span { transform: none; transition: none; }
    .cluster.is-live .fcard { opacity: 1; animation: none; }
    .hero-aurora { display: none; }
    .hero-scene.is-live { background-image: var(--hero-still, none); }
}

/* ==========================================================================
   THE PLATFORM — five product surfaces, fanned

   A pinned section: the deck holds still in the middle of the screen while
   the page scrolls past it, and the fan opens across that scroll. 180vh, not
   the prototype's 320 — same choreography, resolved faster, because nobody
   should have to scroll three screens to watch five cards move apart.
   ========================================================================== */

/* OVERFLOW: CLIP, NOT HIDDEN, AND IT IS THE WHOLE SECTION.

   `overflow: hidden` makes the box a SCROLL CONTAINER, and a sticky child
   sticks to its nearest scrolling ancestor. This section does not scroll, so
   the child had nothing to stick to and never pinned — the deck simply drifted
   past with the page while decks.js scrubbed the fan against a viewport it was
   no longer holding still in. It looked almost right, which is why it survived
   a byte-budget pass and a contrast pass: nothing measures whether a thing
   that should be still is moving.

   `overflow: clip` clips identically and creates NO scroll container, so the
   pin works. Where it is unsupported the orbs bleed past the section edge and
   nothing else changes. */
/* ==========================================================================
   THE RAFly SERVICE STUDIO — SECTION 03
   ========================================================================== */
.service-studio {
    position: relative;
    min-height: 720px;
    height: min(82svh, 800px);
    max-height: 820px;
    background: #F7F9FD;
    color: var(--ink);
    overflow: clip;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--sp-6);
    --ss-accent-color: #0a63ff;
    --ss-glow-color: rgba(10, 99, 255, 0.18);
}

/* KINETIC BACKGROUND GHOST TYPOGRAPHY */
.ss-ghost-words {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 4vw;
    overflow: hidden;
}
.ss-ghost {
    font-family: var(--font-mono, monospace);
    font-size: clamp(6rem, 14vw, 16rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--ink);
    opacity: 0.035;
    user-select: none;
    white-space: nowrap;
    will-change: transform;
    transition: transform 0.2s ease-out;
}

/* BACKGROUND TEXTURE SYSTEM */
.ss-bg-env {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.ss-texture-grain {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.ss-texture-dotmatrix {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
}
.ss-texture-grid {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
}
.ss-texture-lines {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, color-mix(in srgb, var(--ink) 4%, transparent) 10px, color-mix(in srgb, var(--ink) 4%, transparent) 11px);
}
.ss-glow-primary {
    position: absolute;
    top: 50%; right: 15%;
    transform: translateY(-50%);
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ss-glow-color, rgba(10, 99, 255, 0.18)) 0%, transparent 70%);
    filter: blur(100px);
    transition: background 0.8s ease;
}
.ss-light-dust {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 80%);
}

/* MAIN CONTAINER & GRID */
.ss-container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.ss-main-grid {
    display: grid;
    grid-template-columns: 36% 64%;
    align-items: center;
    gap: var(--sp-6);
    width: 100%;
}

/* LEFT COLUMN — EDITORIAL CONTENT */
.ss-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 460px;
}

.ss-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: clamp(0.72rem, 0.68rem + 0.25vw, 0.82rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: var(--sp-3);
}
.ss-eyebrow__tag { color: var(--ink); font-weight: 700; }
.ss-eyebrow__sep { color: var(--ss-accent-color, #0a63ff); font-weight: bold; }
.ss-eyebrow__text { color: var(--ink-2); }

.ss-headline {
    font-size: clamp(3.2rem, 4.2vw, 5.2rem);
    line-height: 0.92;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin-bottom: var(--sp-4);
    max-width: 440px;
}
.ss-h-line {
    display: block;
}
.ss-h-line--accent {
    color: var(--ss-accent-color, #0a63ff);
    transition: color 0.5s ease;
}

.ss-body {
    font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.12rem);
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 480px;
    margin-bottom: var(--sp-6);
}

.ss-action {
    display: flex;
    align-items: center;
}
.ss-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
    transition: all 0.3s ease;
}
.ss-cta-link:hover {
    color: var(--ss-accent-color, #0a63ff);
    transform: translateX(4px);
}
.ss-cta-arrow {
    display: inline-flex;
    transition: transform 0.3s ease;
}
.ss-cta-link:hover .ss-cta-arrow {
    transform: translateX(4px);
}

/* RIGHT COLUMN — SERVICE STAGE + RAIL */
.ss-stage-wrapper {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    width: 100%;
    justify-content: flex-end;
}

.ss-stage {
    position: relative;
    width: 100%;
    max-width: 740px;
    height: 500px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--ss-accent-color, #0a63ff) 22%, rgba(10, 20, 40, 0.12));
    box-shadow:
        0 24px 64px rgba(7, 14, 28, 0.09),
        0 6px 24px color-mix(in srgb, var(--ss-accent-color, #0a63ff) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out, border-color 0.4s ease, box-shadow 0.4s ease;
}

.ss-canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ss-stage-overlay {
    position: absolute;
    top: 16px; left: 20px; right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
}

.ssh-tag {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--ss-accent-color, #0a63ff);
    font-weight: 700;
    background: color-mix(in srgb, var(--ss-accent-color, #0a63ff) 10%, transparent);
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--ss-accent-color, #0a63ff) 25%, transparent);
    transition: all 0.4s ease;
}

.ssh-status {
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ssh-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 8px #10b981;
}

/* MINIMAL EDITORIAL SERVICE RAIL */
.ss-service-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 190px;
    flex-shrink: 0;
}

.ss-rail-item {
    background: none;
    border: none;
    text-align: left;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    color: var(--ink-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ss-rail-item:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 3.5%, transparent);
}
.ss-rail-item.is-active {
    color: var(--ink);
    background: color-mix(in srgb, var(--ss-accent-color, #0a63ff) 8%, transparent);
}

.sri-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sri-idx {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    opacity: 0.5;
}
.sri-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.ss-rail-item.is-active .sri-label {
    color: var(--ss-accent-color, #0a63ff);
}
.sri-sub {
    font-size: 0.74rem;
    opacity: 0.7;
    font-family: var(--font-body);
    line-height: 1.3;
}
.sri-indicator {
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--ss-accent-color, #0a63ff);
    opacity: 0;
    transition: opacity 0.3s ease, background 0.4s ease;
}
.ss-rail-item.is-active .sri-indicator {
    opacity: 1;
}

.ss-rail-sep {
    height: 1px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    margin-inline: 10px;
}

/* SUBTLE FOOTER METADATA */
.ss-footer-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    margin-top: var(--sp-5);
    opacity: 0.8;
}
.ss-meta-sep {
    color: var(--ss-accent-color, #0a63ff);
    font-weight: bold;
}

/* RESPONSIVE DESIGN FOR SERVICE STUDIO */
@media (max-width: 991px) {
    .service-studio {
        min-height: auto;
        height: auto;
        max-height: none;
        padding-block: var(--sp-8);
    }
    .ss-main-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
    .ss-content {
        max-width: 100%;
    }
    .ss-stage-wrapper {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .ss-service-rail {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        padding-bottom: var(--sp-2);
        gap: 12px;
    }
    .ss-rail-item {
        flex-shrink: 0;
        width: 140px;
    }
    .ss-rail-sep {
        display: none;
    }
    .ss-stage {
        height: 420px;
        max-width: 100%;
    }
    .ss-ghost-words {
        display: none;
    }
}

/* 1. BACKGROUND TEXTURE SYSTEM (7 LAYERS) */
.atlas-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.atlas-grain {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.atlas-grid {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: 
        linear-gradient(to right, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 20%, transparent 75%);
}

.atlas-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    transition: background 0.8s ease;
}
.atlas-glow.glow-top {
    width: 600px; height: 600px;
    top: 5%; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--atlas-glow-color), transparent 70%);
}
.atlas-glow.glow-center {
    width: 750px; height: 750px;
    top: 45%; left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--atlas-glow-color), transparent 65%);
}
.atlas-glow.glow-bottom {
    width: 500px; height: 500px;
    bottom: 10%; right: 10%;
    background: radial-gradient(circle, color-mix(in srgb, var(--blue-deep) 15%, transparent), transparent 70%);
}

.atlas-micro-particles {
    position: absolute;
    inset: 0;
}
.amp-dot {
    position: absolute;
    left: var(--px);
    top: var(--py);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--blue, #0a63ff);
    opacity: 0.35;
    animation: ampFloat var(--pd) ease-in-out infinite alternate;
}
@keyframes ampFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(12px, -18px); }
}

.atlas-gen-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.atlas-light-dust {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 80%);
}

/* 2. STICKY STAGE CONTAINER */
.atlas-sticky-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: var(--sp-6) var(--sp-6);
    z-index: 2;
    overflow: hidden;
}

/* HEADER SECTION (TOP 25-30%) */
.atlas-header-container {
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
}
.atlas-head {
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}
.atlas-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.85rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: var(--sp-2);
}
.atlas-eyebrow__sep { color: var(--blue, #0a63ff); font-weight: bold; }

.atlas-headline {
    font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.8rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: var(--sp-2);
    color: var(--ink);
}
.atlas-h-row {
    display: block;
}
.atlas-w {
    display: inline-block;
    will-change: transform, opacity, filter;
}
.atlas-w--highlight .atlas-hl-text {
    color: var(--blue, #0a63ff);
    background: linear-gradient(135deg, #0a63ff 0%, #4b8bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.atlas-sub {
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
    color: var(--ink-2);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.5;
}

/* MAIN STAGE GRID (BOTTOM 65-70%) */
.atlas-stage-container {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding-top: var(--sp-4);
}
.atlas-stage-grid {
    display: grid;
    grid-template-columns: 160px 1fr 300px;
    align-items: center;
    gap: var(--sp-6);
    width: 100%;
}

/* CHAPTER NAVIGATION TIMELINE */
.atlas-nav {
    display: flex;
    flex-direction: column;
}
.atlas-nav__track {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    border-left: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent);
    padding-left: var(--sp-4);
}
.atlas-nav__item {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    padding: 6px 0;
    color: var(--ink-3);
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    transition: color 0.3s ease, transform 0.3s ease;
}
.atlas-nav__item:hover {
    color: var(--ink);
    transform: translateX(3px);
}
.atlas-nav__item.is-active {
    color: var(--blue, #0a63ff);
    font-weight: 700;
}
.ani-idx {
    font-size: 0.75rem;
    opacity: 0.7;
}
.ani-bar {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue, #0a63ff);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.atlas-nav__item.is-active .ani-bar {
    opacity: 1;
    transform: scale(1.5);
    box-shadow: 0 0 8px var(--blue, #0a63ff);
}

/* CINEMATIC VISUAL STAGE */
.atlas-visual-stage {
    position: relative;
    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.atlas-3d-scene {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform;
}

.atlas-plane {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    will-change: transform;
}

.atlas-canvas {
    width: 100%;
    max-width: 720px;
    height: 420px;
    object-fit: contain;
}

/* CENTRAL GROWTH CORE (3D ARCHITECTURAL OBJECT) */
.growth-core {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

.gc-shell {
    position: absolute;
    inset: -15px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: radial-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.gc-ring {
    position: absolute;
    inset: -35px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--atlas-accent-color, #0a63ff) 70%, transparent);
    transform: rotateX(72deg) rotateY(15deg);
    box-shadow: 0 0 25px var(--atlas-glow-color, rgba(10,99,255,0.3));
    animation: gcRingSpin 16s linear infinite;
}
@keyframes gcRingSpin {
    0% { transform: rotateX(72deg) rotateZ(0deg); }
    100% { transform: rotateX(72deg) rotateZ(360deg); }
}

.gc-crystal {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: linear-gradient(135deg, #030b1e 0%, #07193d 50%, #020817 100%);
    box-shadow: inset 0 0 25px rgba(10, 99, 255, 0.4), 0 15px 35px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gc-light {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--atlas-accent-color, #0a63ff) 0%, transparent 70%);
    filter: blur(10px);
    animation: gcLightPulse 3s ease-in-out infinite alternate;
}
@keyframes gcLightPulse {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 1.0; }
}

.gc-signal {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 12px #ffffff;
}

.gc-shadow {
    position: absolute;
    bottom: -45px;
    width: 180px;
    height: 35px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0%, transparent 70%);
    filter: blur(8px);
}

/* EDITORIAL ANNOTATION CARD */
.atlas-annotation {
    position: relative;
    height: 240px;
}
.atlas-chapter-card {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    filter: blur(4px);
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1), filter 0.5s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
}
.atlas-chapter-card.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    filter: blur(0px);
    pointer-events: auto;
}
.acc-link {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: color-mix(in srgb, var(--paper-2) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    border-radius: var(--r-xl, 20px);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.acc-link:hover {
    border-color: var(--blue, #0a63ff);
    box-shadow: 0 12px 30px rgba(10, 99, 255, 0.08);
}
.acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.acc-idx {
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--blue, #0a63ff);
    font-weight: 700;
}
.acc-arrow {
    color: var(--ink-2);
    transition: transform 0.3s ease, color 0.3s ease;
}
.acc-link:hover .acc-arrow {
    transform: translate(2px, -2px);
    color: var(--blue, #0a63ff);
}
.acc-title {
    font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
}
.acc-desc {
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.5;
}
.acc-tag {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-top: 4px;
}

/* FINAL PAYOFF OVERLAY */
.atlas-payoff {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1), visibility 0.6s;
    pointer-events: none;
}
.atlas-payoff.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.atlas-payoff__inner {
    text-align: center;
    max-width: 680px;
}
.payoff-title {
    font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: var(--sp-3);
}
.payoff-hl {
    color: var(--blue, #0a63ff);
}
.payoff-sub {
    font-size: 1.05rem;
    color: var(--ink-2);
    margin-bottom: var(--sp-5);
    line-height: 1.5;
}
.payoff-actions {
    display: flex;
    justify-content: center;
}
.btn-atlas-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-weight: 600;
    border-radius: var(--r-full, 9999px);
}

/* RESPONSIVE DESIGN ADAPTATIONS */
@media (max-width: 991px) {
    .growth-atlas {
        min-height: auto;
        padding-block: var(--sp-8);
    }
    .atlas-sticky-stage {
        position: relative;
        height: auto;
        top: auto;
        padding-block: 0;
        overflow: visible;
    }
    .atlas-stage-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
    .atlas-visual-stage {
        height: 320px;
    }
    .atlas-canvas {
        height: 320px;
    }
    .atlas-annotation {
        height: auto;
        position: relative;
    }
    .atlas-chapter-card {
        position: relative;
        opacity: 1;
        visibility: visible;
        transform: none;
        filter: none;
        margin-bottom: var(--sp-4);
        display: none;
    }
    .atlas-chapter-card.is-active {
        display: block;
    }
    .atlas-nav__track {
        flex-direction: row;
        border-left: none;
        border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent);
        padding-left: 0;
        padding-bottom: var(--sp-2);
        overflow-x: auto;
    }
    .atlas-nav__item {
        padding: 4px 8px;
        white-space: nowrap;
    }
    .atlas-payoff {
        position: relative;
        inset: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        margin-top: var(--sp-8);
        padding-top: var(--sp-6);
        border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    }
}

.platform {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 42%, var(--paper) 100%);
}

.platform-sticky { position: relative; z-index: 2; }

/* The five services as links, in their own block. It is a sibling of the
   pinned section rather than a child, because a child sharing the sticky
   parent consumes the deck pinned range from the bottom — the deck scrolled
   away a screen early and left blank paper behind it. */
.platform-list {
    position: relative;
    background: var(--paper);
    padding-block: var(--sp-8) var(--section-y);
    overflow: hidden;
}
/* --- THE BENTO ---------------------------------------------------------

   The five services were a list of rows in a left-hand column with a panel
   beside them, and before that a single column on a full-width ground. Both
   read as the section having run out rather than having finished.

   Six tiles on a three-column grid, and the spans are chosen so there is no
   hole to fill:

       row 1   [ Web — spans 2 ]              [ Security ]
       row 2   [ Marketing ]  [ Content ]     [ Commerce ]
       row 3   [ the panel — spans 3 ]

   The cards themselves are the thing Naveen has asked for at every round —
   glass, a gradient border that arrives on hover, a sheen that follows the
   cursor. Every one of those is a compositor-only property; nothing here
   animates a layout value. */
.svc-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    position: relative;
    z-index: 1;
}

.svc-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 13rem;
    padding: var(--sp-5);
    border-radius: var(--r-xl);
    text-decoration: none;
    color: inherit;
    overflow: hidden;

    background: color-mix(in srgb, #ffffff 76%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid color-mix(in srgb, #ffffff 88%, transparent);
    box-shadow:
        0 24px 60px -34px color-mix(in srgb, var(--ink) 34%, transparent),
        0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);

    transition:
        transform var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out);
}

/* THE LEAD CARD takes two columns. Same padding and the same parts — a bento
   works because one tile has more room, not because one tile is a different
   component.

   Two columns of room is also two columns of EMPTY room if nothing fills it,
   so the lead card carries a pool of its own accent on the right and gives its
   copy a measure to stop against. Nothing is invented to fill the space: the
   pool is light, and the words are the same words. */
.svc-card:first-child {
    grid-column: span 2;
    background-image: radial-gradient(circle at 88% 30%,
        color-mix(in srgb, var(--sc, var(--accent-fg)) 14%, transparent), transparent 58%);
}
.svc-card:first-child .svc-card-name { font-size: var(--fs-h3); }
.svc-card:first-child .svc-card-desc { max-width: 38ch; }

/* THE GRADIENT BORDER. A 1px ring painted as a gradient, achieved by drawing
   the gradient over the whole box and then masking out everything inside the
   padding box — the two masks are composited with `exclude`, which leaves
   exactly the border ring. A gradient `border-image` cannot do this and keep
   a radius; a second absolutely-positioned element could, at the cost of a
   layer per card. */
.svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        var(--sc, var(--accent-fg)),
        color-mix(in srgb, var(--sc, var(--accent-fg)) 20%, transparent) 58%,
        transparent 78%);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
    pointer-events: none;
    z-index: 2;
}

/* THE SHEEN. --mx/--my are written by js/sheen.js on pointermove. They fall
   back to the card's centre, so with no JS at all the hover state is a
   centred glow rather than nothing — a designed state either way. */
.svc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--sc, var(--accent-fg)) 16%, transparent),
        transparent 62%);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
    pointer-events: none;
    z-index: 0;
}

.svc-card:hover,
.svc-card:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 34px 70px -32px color-mix(in srgb, var(--ink) 42%, transparent),
        0 2px 6px color-mix(in srgb, var(--ink) 6%, transparent);
}
.svc-card:hover::before,
.svc-card:focus-visible::before,
.svc-card:focus-within::before { opacity: 1; }
.svc-card:hover::after,
.svc-card:focus-visible::after,
.svc-card:focus-within::after { opacity: 1; }

/* Everything inside sits above the sheen. */
.svc-card > * { position: relative; z-index: 1; }

.svc-card-top { display: flex; align-items: center; justify-content: space-between; }

/* The glyph tile. --sc is a FILL here and never a text colour — two of the
   five service accents (--svc-security, --svc-ecom) are rated for fill only,
   which is the whole reason css/00-tokens.css splits --accent from
   --accent-fg. The glyph on top is white. */
.svc-card-glyph {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    color: #fff;
    background: linear-gradient(135deg,
        var(--sc, var(--accent-fg)),
        color-mix(in srgb, var(--sc, var(--accent-fg)) 62%, #ffffff));
    box-shadow: 0 8px 20px -10px var(--sc, var(--accent-fg));
}
.svc-card-glyph svg { width: 19px; height: 19px; }

.svc-card-idx {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tr-meta);
    color: var(--ink-3);
}

.svc-card-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    color: var(--ink);
}
.svc-card-desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-3);
}

.svc-card-go {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--accent-fg);
}
.svc-card-go svg { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease-out); }
.svc-card:hover .svc-card-go svg { transform: translate(3px, -3px); }

/* The panel closes the grid rather than standing beside it. Across all three
   columns its facts lie in a row, which is what stops a full-width block from
   becoming a wide paragraph. */
.platform-panel {
    grid-column: 1 / -1;
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    background: color-mix(in srgb, #ffffff 76%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid color-mix(in srgb, #ffffff 88%, transparent);
    box-shadow:
        0 24px 60px -30px color-mix(in srgb, var(--ink) 36%, transparent),
        0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);
}

.platform-panel h3 {
    margin: var(--sp-3) 0 var(--sp-5);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    color: var(--ink);
}

.platform-facts {
    margin: 0 0 var(--sp-5);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
}
.platform-facts > div {
    display: grid;
    gap: 2px;
    padding-left: var(--sp-4);
    border-left: 1px solid var(--line);
}
.platform-facts > div:first-child { padding-left: 0; border-left: 0; }

/* The metadata tier. --ink-3, never --ink-4: this is small text, and --ink-4
   is rated for large display only. */
.platform-facts dt {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tr-meta);
    text-transform: uppercase;
    color: var(--ink-3);
}
.platform-facts dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink);
}

.platform-panel-foot {
    margin: 0 0 var(--sp-5);
    max-width: 62ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
}

/* Two columns before one. Five cards at 1fr on a phone is five squares of
   nothing; five cards at full width is a readable stack, and the tablet step
   between them keeps the lead card's span meaningful. */
@media (max-width: 1100px) {
    .svc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-card:first-child { grid-column: span 2; }
    .platform-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .svc-bento { grid-template-columns: 1fr; gap: var(--sp-3); }
    .svc-card:first-child { grid-column: auto; }
    .svc-card { min-height: 0; }
    .platform-facts { grid-template-columns: 1fr; gap: var(--sp-4); }
    .platform-facts > div { padding-left: 0; border-left: 0; }
}

/* A card that lifts and glows on hover has nothing to say to a visitor who
   asked for less movement. The border and the sheen stay — they are state,
   not motion — and only the travel goes. */
@media (prefers-reduced-motion: reduce) {
    .svc-card { transition: none; }
    .svc-card:hover, .svc-card:focus-visible { transform: none; }
    .svc-card:hover .svc-card-go svg { transform: none; }
}


.platform-head { text-align: center; max-width: 39rem; margin: 0 auto; }
.platform-head h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); line-height: var(--lh-tight); }
.platform-head .lead { margin: var(--sp-4) auto 0; max-width: 34rem; }

/* --- the deck -----------------------------------------------------------
   perspective on the CONTAINER, not on the cards. One shared vanishing point
   is what makes five separately-transformed elements read as one scene
   photographed from one place; per-card perspective makes five drawings. */
.deck {
    position: relative;
    width: 100%;
    height: 430px;
    margin-top: var(--sp-6);
    perspective: 1700px;
    transform-style: preserve-3d;
}

.mock {
    position: absolute;
    left: 50%; top: 50%;
    width: 430px; height: 300px;
    margin: -150px 0 0 -215px;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    box-shadow:
        0 34px 76px -28px color-mix(in srgb, var(--ink) 46%, transparent),
        0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
    will-change: transform;

    /* THE COVERFLOW DIM. js/decks.js writes --slot-dim as the fan collapses;
       the side cards fall to 0.60 so the centre one has somewhere to be read.
       It is a custom property rather than an inline opacity precisely so the
       reduced-motion rule at the foot of this file can pin it back to 1 — an
       inline style.opacity would beat any stylesheet trying to undo it. */
    opacity: var(--slot-dim, 1);

    /* THE STILL FORM, and it is a design rather than a fallback shrug. With
       no JS all five cards would sit exactly on top of each other and read as
       one card. This fans them at a third of their full spread, so the deck
       is legible as five. js/decks.js overrides the transform the moment it
       runs, which is why the two use the same slot variables. */
    transform:
        translate3d(calc(var(--slot-x, 0) * 0.34px), 0, 0)
        rotateY(calc(var(--slot-r, 0) * 0.34deg))
        scale(.9);
}
.mock[data-slot="0"] { --slot-x: 0;    --slot-r: 0;   z-index: 6; }
.mock[data-slot="1"] { --slot-x: -250; --slot-r: 15;  z-index: 5; }
.mock[data-slot="2"] { --slot-x: 250;  --slot-r: -15; z-index: 5; }
.mock[data-slot="3"] { --slot-x: -448; --slot-r: 24;  z-index: 4; }
.mock[data-slot="4"] { --slot-x: 448;  --slot-r: -24; z-index: 4; }

/* --- browser chrome --- */
.mock-bar {
    height: 28px;
    background: var(--paper-2);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    display: flex; align-items: center; gap: 5px;
    padding: 0 11px;
}
.mock-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-4); }
.mock-bar span {
    margin-left: 9px;
    font-family: var(--font-mono);
    font-size: 8.5px;
    color: var(--ink-3);
    background: #fff;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}

.mock-app { display: flex; height: calc(100% - 28px); }

.mock-side {
    width: 52px;
    background: var(--paper);
    border-right: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    padding: 11px 0;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.mock-logo {
    width: 20px; height: 20px; border-radius: 6px; display: block;
    background: linear-gradient(135deg, var(--c), var(--c2));
}
.mock-side b { width: 20px; height: 6px; border-radius: 3px; background: var(--paper-3); display: block; }
.mock-side b.is-on { background: color-mix(in srgb, var(--c) 34%, var(--paper-3)); }

/* The bottom padding is the tag's room. .mock-tag is absolutely positioned
   over the card at bottom:11px, so anything the body puts at its own bottom
   edge lands underneath it — which is exactly what happened the first time
   these layouts ended in a row rather than in a chart. */
.mock-body { flex: 1; padding: 12px 14px 32px; display: flex; flex-direction: column; gap: 9px; }
.mock-top { display: flex; align-items: center; justify-content: space-between; }
.mock-top .h { height: 9px; width: 96px; border-radius: 5px; background: var(--paper-4); }
/* --- the five insides ---------------------------------------------------

   Every mock used to render the same three KPI blocks and the same bar chart
   with only the accent changed. Five identical screens tinted five ways read
   as one product screenshotted five times, which is the opposite of what the
   section says. These are five layouts.

   The FRAME does not vary — browser chrome, sidebar, accent — and that is
   deliberate: those are the parts that make five surfaces read as one system,
   which is the argument. Only the body changes.

   NOTHING IN HERE CARRIES A NUMBER. Every bar, ring and row is a shape. The
   only words are states a screen would really show; a figure in a mock is a
   claim nobody made. */

.mock-body > * { flex: none; }

/* shared parts ---------------------------------------------------------- */
.mock-pill {
    font-family: var(--font-display);
    font-size: 8px; font-weight: var(--fw-semi);
    letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 8px; min-width: 8px; min-height: 8px;
    border-radius: var(--r-pill);
    background: var(--paper-3);
    color: var(--ink-3);
}
.mock-pill.is-ok { background: color-mix(in srgb, var(--success) 16%, var(--paper)); color: var(--success-ink); }

/* web — build and deploy ------------------------------------------------- */
.mock-code {
    flex: 1;
    display: flex; gap: 9px;
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: var(--r-sm);
    background: var(--paper);
    padding: 9px;
}
.mock-gut {
    width: 3px; flex: none;
    border-radius: 2px;
    background: repeating-linear-gradient(var(--paper-4) 0 4px, transparent 4px 11px);
}
.mock-code-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.mock-code-lines i { height: 5px; border-radius: 3px; background: var(--paper-4); }
.mock-code-lines i.is-hi { background: color-mix(in srgb, var(--c) 46%, var(--paper-3)); }
.mock-strip { display: flex; gap: 6px; }
.mock-strip .mock-chip {
    flex: 1; height: 16px; border-radius: var(--r-sm);
    background: var(--paper-2);
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.mock-strip .mock-chip.is-on { background: linear-gradient(115deg, var(--c), var(--c2)); border-color: transparent; }

/* security — a scan ------------------------------------------------------ */
.mock-split { flex: 1; display: flex; gap: 11px; align-items: center; }
.mock-ring {
    width: 74px; height: 74px; flex: none;
    border-radius: 50%;
    background: conic-gradient(var(--c) 0 72%, var(--paper-3) 72% 100%);
    position: relative;
}
.mock-ring::after {
    content: '';
    position: absolute; inset: 11px;
    border-radius: 50%;
    background: #fff;
}
.mock-findings { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mock-find { display: flex; align-items: center; gap: 7px; }
.mock-find u { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--paper-4); }
.mock-find u.is-ok   { background: var(--success); }
.mock-find u.is-warn { background: var(--warning); }
.mock-find i { height: 5px; border-radius: 3px; background: var(--paper-4); }
.mock-rowline { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.mock-rowline i { height: 5px; border-radius: 3px; background: var(--paper-4); }

/* marketing — channels --------------------------------------------------- */
.mock-area {
    flex: 1;
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: var(--r-sm);
    background: var(--paper);
    padding: 8px;
    display: flex; align-items: flex-end;
}
/* One shape, drawn as a clipped block rather than as a path: a polygon on a
   gradient is an area chart and needs no SVG to be one. */
.mock-area span {
    display: block; width: 100%; height: 72%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--c) 62%, transparent),
        color-mix(in srgb, var(--c) 6%, transparent));
    clip-path: polygon(0 78%, 14% 58%, 28% 68%, 42% 36%, 56% 48%, 70% 22%, 84% 34%, 100% 8%, 100% 100%, 0 100%);
}
.mock-channels { display: flex; flex-direction: column; gap: 7px; }
.mock-ch { display: flex; align-items: center; gap: 8px; }
.mock-ch i { height: 5px; border-radius: 3px; background: var(--paper-4); flex: none; }
.mock-ch b {
    height: 8px; border-radius: 4px;
    background: linear-gradient(90deg, var(--c), var(--c2));
}

/* content — an editor ---------------------------------------------------- */
.mock-split.is-editor { align-items: stretch; }
.mock-outline {
    width: 52px; flex: none;
    display: flex; flex-direction: column; gap: 8px;
    padding-right: 10px;
    border-right: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}
.mock-outline i { height: 5px; border-radius: 3px; background: var(--paper-3); }
.mock-outline i.is-on { background: color-mix(in srgb, var(--c) 42%, var(--paper-3)); }
.mock-doc { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mock-doc i { height: 5px; border-radius: 3px; background: var(--paper-4); }
.mock-doc i.mock-head { height: 13px; border-radius: 5px; background: var(--paper-4); margin-bottom: 3px; }
.mock-doc i.is-hi { background: color-mix(in srgb, var(--c) 30%, var(--paper-3)); }

/* commerce — orders ------------------------------------------------------ */
.mock-spark {
    height: 56px; flex: none;
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: var(--r-sm);
    background: var(--paper);
    padding: 7px;
    display: flex; align-items: flex-end; gap: 4px;
}
.mock-spark i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--c2), var(--c)); }
.mock-orders { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.mock-order {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: var(--r-sm);
    background: var(--paper);
}
.mock-order u { width: 16px; height: 16px; border-radius: 4px; flex: none;
                background: linear-gradient(135deg, var(--c), var(--c2)); }
.mock-order i { height: 5px; border-radius: 3px; background: var(--paper-4); }

.mock-tag {
    position: absolute; left: 64px; bottom: 11px;
    font-family: var(--font-display);
    font-size: 10px; font-weight: var(--fw-semi);
    letter-spacing: .07em; text-transform: uppercase;
    color: #fff;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(115deg, var(--c), var(--c2));
}

/* ==========================================================================
   APPS — three phones, ON PAPER

   Naveen asked for this section on the light ground, against the prototype,
   which put it on dark ink. He is right: a dark band three quarters of the
   way down read as a different site rather than as the next paragraph.

   The depth the dark ground used to provide comes from perspective and a lit
   top edge instead. The SCREENS stay dark, because a phone screen is dark —
   and that contrast against paper is exactly what makes the shells read as
   objects sitting on the page rather than as drawings of phones.
   ========================================================================== */

/* clip, not hidden — see the note on .platform. The same bug was here. */
.apps {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: var(--paper);
}

.apps-sticky { position: relative; z-index: 2; }

/* CENTRED. The section used to be a paragraph on the left with the phones
   beside it, which makes the phones an illustration of the paragraph. Naveen
   asked for them in the middle, and he is right: this section is about the
   objects, so the objects go in the middle and the words go above and below
   them. It also matches .platform directly above, which is the composition
   this page has settled on for anything that is one thing being shown. */
.apps-head { text-align: center; max-width: 40rem; margin: 0 auto; }
.apps-head h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); line-height: var(--lh-tight); }
.apps-head .lead { margin: var(--sp-4) auto 0; max-width: 36rem; }

/* The three points, in a row under the phones. As a left-hand column they
   were a list beside a picture; across the foot of the section they are a
   caption for it. */
.apps-feat {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 62rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}
.apps-feat li {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
}
.apps-feat li > span {
    width: 26px; height: 26px; border-radius: var(--r-sm); flex: none;
    background: linear-gradient(135deg, var(--blue), #5c93ff);
    display: grid; place-items: center;
    color: #fff;
}
.apps-feat li > span svg { width: 13px; height: 13px; }
.apps-cta { margin: var(--sp-6) 0 0; text-align: center; }

/* --- the phones --- */
.phones {
    position: relative;
    height: 500px;
    perspective: 1600px;
    transform-style: preserve-3d;
}

/* THE SHELL. overflow:hidden lives on .phone-screen, NOT here — a phone with
   its buttons clipped off at the bezel is a drawing of a phone. The screen
   carries the clip and its own inner radius; the frame is free to have
   something on its edge. */
.phone {
    position: absolute;
    left: 50%; top: 50%;
    /* Smaller than the original 236x482. The section is a column now — head,
       phones, points, button — and all four have to sit inside one 100vh
       sticky; at the old size the centre shell ran straight through the row of
       points underneath it. */
    width: 196px; height: 400px;
    margin: -200px 0 0 -98px;
    border-radius: 34px;
    background: var(--ink-chapter-2);
    border: 6px solid var(--ink-chapter-3);
    will-change: transform;
    box-shadow:
        0 40px 90px -30px color-mix(in srgb, var(--ink) 55%, transparent),
        0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);

    /* The still form, at a third of the full spread, including the height
       stagger and the tilt — the no-JS arrangement is the same composition
       held closer, not a different one. */
    transform:
        translate3d(calc(var(--slot-x, 0) * 0.34px), calc(var(--slot-y, 0) * 0.34px), 0)
        rotateY(calc(var(--slot-r, 0) * 0.34deg))
        rotateZ(calc(var(--slot-rz, 0) * 0.34deg))
        scale(.9);
}
.phone[data-slot="0"] { --slot-x: 0;    --slot-y: 26;  --slot-r: 0;   --slot-rz: 0;  z-index: 6; }
.phone[data-slot="1"] { --slot-x: -228; --slot-y: -40; --slot-r: 20;  --slot-rz: 5;  z-index: 5; }
.phone[data-slot="2"] { --slot-x: 228;  --slot-y: -40; --slot-r: -20; --slot-rz: -5; z-index: 5; }

/* The side buttons. Two pseudo-elements rather than two more spans in twelve
   lines of PHP — nothing here is content, and the shells are aria-hidden. */
.phone::after,
.phone::before {
    content: '';
    position: absolute;
    width: 3px;
    border-radius: 2px;
    background: var(--ink-chapter-3);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}
.phone::after  { right: -3px; top: 22%; height: 48px; }   /* power  */
.phone::before { left:  -3px; top: 17%; height: 30px; }   /* volume */

.phone-notch {
    position: absolute; left: 50%; top: 0;
    transform: translateX(-50%);
    width: 88px; height: 20px;
    background: var(--ink-chapter-3);
    border-radius: 0 0 12px 12px;
    z-index: 3;
}
/* --- the screen ---------------------------------------------------------

   WHAT WAS THERE BEFORE WAS A WEB PAGE RENDERED NARROW: a title, a hero block,
   three list rows, four nav squares. Naveen's note was exactly that - "uske
   app ke andar abhi website ka mockup hai". An app has four things a page does
   not, and all four are here now: a status bar it does not own, a title that
   belongs to the screen rather than to the document, a tab bar that persists
   between screens, and a home indicator.

   The status bar, the tab bar and the indicator are identical on all three
   shells. That is what makes them three screens OF ONE APP instead of three
   unrelated products - the same argument the deck above makes with its shared
   browser chrome. */
.phone-screen {
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ink-chapter-2), var(--ink-chapter));
    padding: 8px 12px 10px;
    display: flex; flex-direction: column; gap: 9px;
}

/* Every value in here is a shape. Nothing is a figure, for the same reason
   nothing in the deck is: a number in a mock is a claim nobody made. */
.ph-status {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 6px 0;
    height: 18px; flex: none;
}
.ph-time { width: 26px; height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 42%, transparent); }
.ph-icons { display: flex; align-items: center; gap: 4px; }
.ph-icons i { width: 8px; height: 7px; border-radius: 2px; background: color-mix(in srgb, #fff 34%, transparent); }
.ph-icons i.ph-batt { width: 14px; border-radius: 3px; }

.ph-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 2px 0 0; }
.ph-title { width: 52%; height: 12px; border-radius: 5px; background: color-mix(in srgb, #fff 30%, transparent); }
.ph-av {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c), var(--c2));
}

/* store ------------------------------------------------------------------ */
.ph-search {
    height: 26px; flex: none;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, #fff 8%, transparent);
    border: 1px solid color-mix(in srgb, #fff 8%, transparent);
    display: flex; align-items: center; padding: 0 10px;
}
.ph-search i { width: 46%; height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 18%, transparent); }

.ph-chips { display: flex; gap: 5px; flex: none; }
.ph-chips span {
    flex: 1; height: 14px; border-radius: var(--r-pill);
    background: color-mix(in srgb, #fff 8%, transparent);
}
.ph-chips span.is-on { background: linear-gradient(115deg, var(--c), var(--c2)); }

.ph-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.ph-prod {
    border-radius: 11px;
    background: color-mix(in srgb, #fff 5%, transparent);
    border: 1px solid color-mix(in srgb, #fff 7%, transparent);
    padding: 7px;
    display: flex; flex-direction: column; gap: 5px;
}
.ph-thumb {
    height: 42px; border-radius: 7px;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--c) 78%, transparent),
        color-mix(in srgb, var(--c2) 46%, transparent));
}
.ph-prod i { height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 20%, transparent); }
.ph-prod b { height: 6px; border-radius: 3px; background: color-mix(in srgb, #fff 38%, transparent); }

/* booking ---------------------------------------------------------------- */
.ph-week { display: flex; gap: 4px; flex: none; }
.ph-week span {
    flex: 1;
    border-radius: 9px;
    padding: 7px 0;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: color-mix(in srgb, #fff 5%, transparent);
}
.ph-week span.is-on { background: linear-gradient(160deg, var(--c), var(--c2)); }
.ph-week u { width: 8px; height: 4px; border-radius: 2px; background: color-mix(in srgb, #fff 30%, transparent); }
.ph-week b { width: 11px; height: 6px; border-radius: 3px; background: color-mix(in srgb, #fff 46%, transparent); }

.ph-slots { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ph-slot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px;
    border-radius: 11px;
    background: color-mix(in srgb, #fff 5%, transparent);
    border: 1px solid color-mix(in srgb, #fff 6%, transparent);
}
.ph-slot.is-on { border-color: color-mix(in srgb, var(--c) 62%, transparent); }
.ph-slot i { height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 22%, transparent); }
.ph-pill {
    width: 22px; height: 8px; border-radius: var(--r-pill); flex: none;
    background: color-mix(in srgb, #fff 14%, transparent);
}
.ph-pill.is-on { background: linear-gradient(115deg, var(--c), var(--c2)); }
.ph-cta {
    height: 30px; flex: none;
    border-radius: var(--r-pill);
    background: linear-gradient(115deg, var(--c), var(--c2));
}

/* orders ----------------------------------------------------------------- */
.ph-stats { display: flex; gap: 7px; flex: none; }
.ph-stats > div {
    flex: 1;
    border-radius: 11px;
    padding: 9px;
    background: color-mix(in srgb, #fff 5%, transparent);
    border: 1px solid color-mix(in srgb, #fff 6%, transparent);
    display: flex; flex-direction: column; gap: 6px;
}
.ph-stats i { height: 4px; border-radius: 2px; background: color-mix(in srgb, #fff 18%, transparent); }
.ph-stats b { height: 9px; border-radius: 4px; background: color-mix(in srgb, #fff 40%, transparent); }

.ph-orders { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ph-order {
    border-radius: 11px;
    padding: 9px;
    background: color-mix(in srgb, #fff 5%, transparent);
    border: 1px solid color-mix(in srgb, #fff 6%, transparent);
    display: flex; flex-direction: column; gap: 8px;
}
.ph-order-top { display: flex; align-items: center; justify-content: space-between; }
.ph-order i { height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 22%, transparent); }
.ph-bar { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, #fff 10%, transparent); }
.ph-bar u { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--c), var(--c2)); }

/* the persistent chrome -------------------------------------------------- */
.ph-tabs {
    margin-top: auto;
    flex: none;
    display: flex; justify-content: space-around;
    padding: 11px 0 6px;
    border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
}
.ph-tabs i { width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, #fff 13%, transparent); }
.ph-tabs i.is-on { background: linear-gradient(135deg, var(--c), var(--c2)); }

.ph-home {
    width: 84px; height: 4px; flex: none;
    margin: 0 auto;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, #fff 30%, transparent);
}

/* ==========================================================================
   PINNING

   Only above 960px, and only where there is room. Below that both sections
   are ordinary blocks and both decks are static fans — the same composition,
   just not scrubbed.
   ========================================================================== */

@media (min-width: 961px) {
    /* padding-block: 0 is load-bearing. A sticky child can only stick inside
       its parent CONTENT box, so .section padding at both ends took 288px off
       the deck pinned range — it released a screen early and left blank paper
       where the deck had been. The height IS the range here; the breathing
       room comes from the sticky centring its own content. */
    .platform { height: 150vh; padding-block: 0; }
    .platform-sticky {
        position: sticky; top: 0;
        height: 100vh;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
    }
    /* A column now, not a row: head, phones, points, button. Same shape as
       .platform-sticky above it, which is the point — the two sections either
       side of the gallery should read as the same kind of thing. */
    .apps { height: 170vh; padding-block: 0; }
    .apps-sticky {
        position: sticky; top: 0;
        height: 100vh;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: var(--sp-5);
    }
}

@media (max-width: 960px) {
    .platform, .apps { padding-block: var(--section-y); }
    .deck   { height: 300px; }
    .mock   { width: 300px; height: 210px; margin: -105px 0 0 -150px; }
    /* 520, not 430. Below 960px the section is an ordinary block, but
       js/decks.js still runs: the centre shell sits at z 120, which the 1600px
       perspective magnifies to about 1.08, plus its 26px forward offset. At
       430 it ran straight through the first line of the points underneath. */
    .phones { height: 520px; }
    .apps-feat { grid-template-columns: 1fr; gap: var(--sp-4); max-width: 30rem; }
}

@media (prefers-reduced-motion: reduce) {
    /* The still fan IS the design at rest. Nothing has to move for either
       section to say what it says.

       AND IT RESOLVES TO THE FAN, NOT THE COVERFLOW. Five separated cards are
       legible standing still; five overlapping ones with three of them at 60%
       are a pile. The coverflow is the reward for scrolling, so when there is
       no scrolling there is no coverflow. */
    .platform, .apps { height: auto; padding-block: var(--section-y); }
    .platform-sticky, .apps-sticky { position: static; height: auto; }
    .mock { --slot-dim: 1; }
}

/* ==========================================================================
   THE LAPTOP — a lid that opens as you scroll

   Naveen sent Aceternity's MacbookScroll and asked for the same move with our
   own screen in it. It earns its place on a page that already has five browser
   mocks, a coverflow and three phones by being a different VERB: those fan,
   slide and sit; this one opens.

   THE HINGE IS THE WHOLE TRICK. .mb-lid rotates about its own bottom edge
   inside a perspective container, so the screen swings up out of the base
   exactly as a lid does. Two numbers drive it and js/macbook.js writes both:

       --lid   degrees open. 0 shut, 94 resting just past upright.
       --rig   0 to 1, how far the assembly has come forward.

   THE STILL FORM IS DECLARED HERE, not in the script: --lid and --rig have
   real values on .mb, so with no JavaScript the laptop stands open at 94
   degrees, full size, with the screen readable. The module overrides them.
   That is the same split the deck and the gallery use.

   THE SCREEN IS THE PORTAL, and it is the one surface on this page that is
   allowed to be dark: it is a screen. Everything in it is a shape — the rule
   from partials/deck-mock.php holds here too, and there is more room to break
   it, so it is worth repeating: no figure anywhere, only states.
   ========================================================================== */

.macbook {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 52%, var(--paper) 100%);
}

.mb-sticky { position: relative; z-index: 2; }

.mb-head { text-align: center; max-width: 40rem; margin: 0 auto var(--sp-6); }
.mb-head h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); line-height: var(--lh-tight); }
.mb-head .lead { margin: var(--sp-4) auto 0; max-width: 36rem; }

.mb {
    --lid: 94;
    --rig: 1;
    width: min(820px, 88vw);
    margin: 0 auto;
    perspective: 1400px;
    transform: scale(calc(.78 + var(--rig) * .22)) translateY(calc((1 - var(--rig)) * 40px));
    transform-origin: 50% 30%;
    will-change: transform;
}

/* --- the lid ------------------------------------------------------------
   transform-origin at the bottom edge IS the hinge. Rotating about the centre
   makes the screen rise off the keyboard instead of opening out of it, which
   is the single thing that separates this from a picture of a laptop. */
.mb-lid {
    position: relative;
    transform-origin: 50% 100%;
    transform: rotateX(calc((var(--lid) - 90) * -1deg));
    transform-style: preserve-3d;
}

.mb-shell {
    position: relative;
    border-radius: 16px 16px 4px 4px;
    padding: 12px 12px 16px;
    background: linear-gradient(180deg, #2b3245, #1b2133);
    box-shadow:
        0 30px 70px -30px color-mix(in srgb, var(--ink) 62%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}

/* The camera. Four pixels that do more for the read than the bezel does. */
.mb-cam {
    position: absolute; left: 50%; top: 5px;
    transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: #4b5570;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

.mb-screen {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ink-chapter-2), var(--ink-chapter));
    display: flex;
}

/* --- the base -----------------------------------------------------------
   Foreshortened deliberately: a laptop base seen from in front is mostly
   edge, and drawing it at its true depth makes the whole thing read as a
   plan view. */
.mb-base {
    position: relative;
    height: 22px;
    border-radius: 3px 3px 12px 12px;
    background: linear-gradient(180deg, #3a4258, #232a3d 40%, #171d2c);
    box-shadow: 0 24px 40px -22px color-mix(in srgb, var(--ink) 60%, transparent);
}
/* The notch you put a finger in to lift the lid. */
.mb-base::before {
    content: '';
    position: absolute; left: 50%; top: 0;
    transform: translateX(-50%);
    width: 96px; height: 5px;
    border-radius: 0 0 6px 6px;
    background: color-mix(in srgb, #000 34%, transparent);
}

/* --- what is on the screen ---------------------------------------------- */
.mb-side {
    width: 17%;
    padding: 12px 10px;
    border-right: 1px solid color-mix(in srgb, #fff 7%, transparent);
    display: flex; flex-direction: column; gap: 9px;
}
.mb-logo {
    width: 20px; height: 20px; border-radius: 6px;
    background: linear-gradient(135deg, var(--blue), #5c93ff);
    margin-bottom: 4px;
}
.mb-side i {
    height: 6px; border-radius: 3px;
    background: color-mix(in srgb, #fff 12%, transparent);
}
.mb-side i.is-on { background: color-mix(in srgb, var(--blue) 68%, transparent); }

.mb-main { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mb-bar { display: flex; align-items: center; justify-content: space-between; }
.mb-bar > i { height: 9px; width: 130px; border-radius: 5px; background: color-mix(in srgb, #fff 22%, transparent); }
.mb-bar > u {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #5c93ff);
}

.mb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.mb-card {
    border-radius: 9px;
    padding: 9px;
    background: color-mix(in srgb, #fff 5%, transparent);
    border: 1px solid color-mix(in srgb, #fff 7%, transparent);
    display: flex; flex-direction: column; gap: 6px;
}
.mb-card i { height: 4px; width: 62%; border-radius: 2px; background: color-mix(in srgb, #fff 16%, transparent); }
.mb-card b { height: 9px; width: 78%; border-radius: 4px; background: color-mix(in srgb, #fff 34%, transparent); }
.mb-card s {
    height: 3px; border-radius: 2px; text-decoration: none;
    background: linear-gradient(90deg, var(--sc, var(--blue)), transparent);
}

/* 1.15 against the table's 0.85 below. At flex: 1 with nothing under it the
   chart took most of a 16:10 screen, which is a poster of a bar chart rather
   than a dashboard — a real one is mostly rows. */
.mb-panels { flex: 1.15; display: grid; grid-template-columns: 1.6fr 1fr; gap: 9px; min-height: 0; }
.mb-panel {
    border-radius: 9px;
    padding: 10px;
    background: color-mix(in srgb, #fff 4%, transparent);
    border: 1px solid color-mix(in srgb, #fff 7%, transparent);
    display: flex; flex-direction: column; gap: 8px;
    min-height: 0;
}
.mb-panel > i { height: 5px; width: 44%; border-radius: 3px; background: color-mix(in srgb, #fff 16%, transparent); }
.mb-chart { flex: 1; display: flex; align-items: flex-end; gap: 5px; min-height: 0; }
.mb-chart i {
    flex: 1; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #5c93ff, var(--blue));
}
.mb-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 7px; }
.mb-row { display: flex; align-items: center; gap: 7px; }
.mb-row u { width: 14px; height: 14px; border-radius: 4px; flex: none; background: color-mix(in srgb, #fff 12%, transparent); }
.mb-row u.is-on { background: linear-gradient(135deg, var(--blue), #5c93ff); }
.mb-row i { height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 16%, transparent); }

/* The work list. Four columns of different weights so it reads as a table
   with meaning in it rather than as four equal grey bars. */
.mb-table {
    flex: .85;
    border-radius: 9px;
    padding: 10px;
    background: color-mix(in srgb, #fff 4%, transparent);
    border: 1px solid color-mix(in srgb, #fff 7%, transparent);
    display: flex; flex-direction: column; gap: 8px;
    min-height: 0;
}
.mb-tr {
    display: grid;
    grid-template-columns: 2.2fr 1.2fr 1fr 46px;
    align-items: center;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid color-mix(in srgb, #fff 5%, transparent);
}
.mb-tr:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-tr i { height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 15%, transparent); }
.mb-tr.is-head i { background: color-mix(in srgb, #fff 26%, transparent); height: 4px; }
.mb-tr b {
    height: 9px; border-radius: var(--r-pill);
    background: color-mix(in srgb, #fff 12%, transparent);
}
.mb-tr b.is-on { background: linear-gradient(115deg, var(--blue), #5c93ff); }

@media (min-width: 961px) {
    .macbook { height: 220vh; padding-block: 0; }
    .mb-sticky {
        position: sticky; top: 0;
        height: 100vh;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
    }
    /* Shut, small and low is where the section STARTS on a wide screen; the
       module opens it. These two lines are the only place the closed state
       exists, and they are inside the same query as the pin, so a viewport
       that never pins never shows a shut laptop it cannot open. */
    .mb { --lid: 0; --rig: 0; }
}

@media (max-width: 960px) {
    .macbook { padding-block: var(--section-y); }
    .mb { width: 92vw; }
    .mb-side { width: 22%; }
    .mb-cards { grid-template-columns: 1fr 1fr; }
    .mb-panels { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    /* Open, full size, standing still. The laptop was never the message; what
       is on the screen is. */
    .macbook { height: auto; padding-block: var(--section-y); }
    .mb-sticky { position: static; height: auto; }
    .mb { --lid: 94; --rig: 1; }
}

/* ==========================================================================
   THE GALLERY — OriginKit's coverflow, at its own numbers

   Naveen sent the component's source, so this is not an impression of it. The
   geometry below is lifted from COMPONENT_DEFAULTS and the fixed internals in
   that file, value for value:

       perspective   1600      DEPTH        240 per step back
       tilt          12deg     rotateY, away from centre
       sideTilt       8deg     rotateZ, the thing that makes it a lean
       gap            8   ->   240px of travel per step (gap * 30)
       SCALE_STEP     0.16     per step
       radius         3   ->   30px  (radius/20 * min(w,h)/2)
       opacity       60%       inactive, as a black veil over the art
       transition    0.6s cubic-bezier(0.22, 1, 0.36, 1)

   WHAT IS NOT LIFTED IS THE PICTURES. The component ships photographs, and
   this site deleted 24 stock photographs on the argument that they were other
   companies' premises standing in for our work. So every cover here is drawn:
   a gradient ground and an abstract of the thing that kind of build produces.
   Nothing is fetched, nothing is a photograph of somebody else's business, and
   the moment there are real screenshots of real work they drop straight into
   the same slot.

   THE MATHS LIVES IN CSS, NOT IN JS. js/gallery.js writes two numbers per card
   — --rel (signed offset from centre) and --az (its absolute value) — and
   every transform below is a calc() on those. That is what lets the still form
   be real: css sets --rel per data-slot, so with no JavaScript at all the
   coverflow is laid out exactly as it would be with card one active.
   ========================================================================== */

.gallery {
    position: relative;
    overflow: clip;               /* clip, never hidden — see .platform */
    isolation: isolate;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 46%, var(--paper) 100%);
}

.gallery-sticky { position: relative; z-index: 2; }

.gallery-head { text-align: center; max-width: 40rem; margin: 0 auto var(--sp-7); }
.gallery-head h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); line-height: var(--lh-tight); }
.gallery-head .lead { margin: var(--sp-4) auto 0; max-width: 36rem; }

.cf {
    position: relative;
    height: 400px;
    display: grid;
    place-items: center;
    perspective: 1600px;
}

.cf-track {
    position: relative;
    width: 400px; height: 400px;
    transform-style: preserve-3d;
}

.cf-card {
    position: absolute;
    left: 50%; top: 50%;
    width: 400px; height: 400px;
    border-radius: 30px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: center center;
    background: var(--ink-chapter);
    box-shadow: 0 40px 90px -34px color-mix(in srgb, var(--ink) 58%, transparent);
    cursor: pointer;

    transform:
        translate(-50%, -50%)
        translateX(calc(var(--rel, 0) * 240px))
        translateZ(calc(var(--az, 0) * -240px))
        rotateY(calc(var(--rel, 0) * -12deg))
        rotateZ(calc(var(--rel, 0) * 8deg))
        scale(calc(1 - var(--az, 0) * 0.16));

    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.cf-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* THE STILL FORM. Five cards, card one active, exactly where JS would put
   them. min(--az, 1) is what turns 0/1/2 into "is this one dimmed" without a
   conditional — CSS has no ternary and this is the arithmetic that replaces
   one. */
.cf-card[data-slot="0"] { --rel:  0; --az: 0; }
.cf-card[data-slot="1"] { --rel:  1; --az: 1; }
.cf-card[data-slot="2"] { --rel:  2; --az: 2; }
.cf-card[data-slot="3"] { --rel: -2; --az: 2; }
.cf-card[data-slot="4"] { --rel: -1; --az: 1; }

/* The veil. 60% inactive opacity in the reference is a black overlay at 40%,
   not a transparency on the card — which matters, because a transparent card
   would let the one behind it show through and the stack would turn to mud. */
.cf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: calc(min(var(--az, 0), 1) * .4);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
    z-index: 3;
}

/* --- the drawn covers --------------------------------------------------
   One ground and one glass sheet per card; the arrangement inside the sheet
   is what differs, and it is the shape of the thing that build produces. */
.cf-art {
    position: absolute;
    inset: 0;
    background: linear-gradient(152deg, var(--c), var(--c2));
    display: grid;
    place-items: center;
}
/* A plotting grid over the ground, so a flat gradient reads as a surface. */
.cf-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, #fff 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, #fff 12%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 78%);
}

.cf-sheet {
    position: relative;
    width: 68%;
    padding: 16px;
    border-radius: 16px;
    background: color-mix(in srgb, #fff 18%, transparent);
    border: 1px solid color-mix(in srgb, #fff 26%, transparent);
    /* NO backdrop-filter, deliberately. A backdrop-filtered element moves the
       BACKDROP ROOT, and this site has already shipped that bug once: a fixed
       canvas at z-index 0 made Chrome sample the hidden consultation modal
       into the header's blur and the modal's form labels ghosted through on
       every page. Inside a preserve-3d coverflow it did the same thing again,
       painting the lead form across the top of this section. The sheet sits on
       a flat gradient it owns, so a blur of that gradient looks identical to a
       plain translucent white — there is nothing to gain and a whole class of
       compositing bug to lose. */
    display: grid;
    gap: 8px;
}
.cf-sheet i { display: block; border-radius: 6px; background: color-mix(in srgb, #fff 62%, transparent); }
.cf-sheet i.is-dim { background: color-mix(in srgb, #fff 28%, transparent); }

/* Six shapes are rendered and each layout uses as many as it needs. One
   markup shape for five covers is worth four hidden elements; five different
   loops in index.php to save them would not be. */
.cf-sheet.is-grid  i:nth-child(n+5),
.cf-sheet.is-rows  i:nth-child(n+5),
.cf-sheet.is-copy  i:nth-child(n+5),
.cf-sheet.is-phone i:nth-child(n+4) { display: none; }

/* store — a catalogue: four tiles */
.cf-sheet.is-grid  { grid-template-columns: 1fr 1fr; }
.cf-sheet.is-grid i { height: 54px; }
/* booking — a week: four bars of different lengths */
.cf-sheet.is-rows  i { height: 16px; }
.cf-sheet.is-rows  i:nth-child(2) { width: 74%; }
.cf-sheet.is-rows  i:nth-child(3) { width: 52%; }
.cf-sheet.is-rows  i:nth-child(4) { width: 86%; }
/* brand — a headline and its paragraph */
.cf-sheet.is-copy  i:first-child { height: 34px; width: 78%; }
.cf-sheet.is-copy  i { height: 10px; }
.cf-sheet.is-copy  i:last-child { width: 46%; }
/* dashboard — a chart */
.cf-sheet.is-chart { grid-template-columns: repeat(6, 1fr); align-items: end; height: 118px; }
.cf-sheet.is-chart i:nth-child(1) { height: 42%; }
.cf-sheet.is-chart i:nth-child(2) { height: 66%; }
.cf-sheet.is-chart i:nth-child(3) { height: 51%; }
.cf-sheet.is-chart i:nth-child(4) { height: 82%; }
.cf-sheet.is-chart i:nth-child(5) { height: 64%; }
.cf-sheet.is-chart i:nth-child(6) { height: 96%; }
/* mobile — a shell */
.cf-sheet.is-phone { width: 40%; padding: 22px 14px; border-radius: 26px; }
.cf-sheet.is-phone i { height: 12px; }
.cf-sheet.is-phone i:first-child { height: 62px; }

/* The label. A scrim under it because it is white type over artwork, and the
   artwork is a gradient that gets light at one corner. */
.cf-card-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 22px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent 88%);
    color: #fff;
}
.cf-card-label b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.cf-card-label span {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: color-mix(in srgb, #fff 82%, transparent);
}

/* The dots are the only part of this a keyboard needs: five real buttons that
   move the page to the scroll depth where that card is centred, which keeps
   ONE source of truth for which card is active. */
.cf-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.cf-dot {
    width: 34px; height: 4px;
    border: 0; padding: 0;
    border-radius: var(--r-pill);
    background: var(--paper-4);
    cursor: pointer;
    transition: background var(--dur-2) var(--ease);
}
.cf-dot[aria-current="true"] { background: var(--accent); }
.cf-dot:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (min-width: 961px) {
    .gallery { height: 260vh; padding-block: 0; }
    .gallery-sticky {
        position: sticky; top: 0;
        height: 100vh;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
    }
}

@media (max-width: 960px) {
    .gallery { padding-block: var(--section-y); }
    .cf, .cf-track, .cf-card { width: 300px; height: 300px; }
    .cf { width: auto; }
    .cf-card {
        transform:
            translate(-50%, -50%)
            translateX(calc(var(--rel, 0) * 170px))
            translateZ(calc(var(--az, 0) * -200px))
            rotateY(calc(var(--rel, 0) * -12deg))
            rotateZ(calc(var(--rel, 0) * 8deg))
            scale(calc(1 - var(--az, 0) * 0.16));
    }
    .cf-card-label b { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery { height: auto; padding-block: var(--section-y); }
    .gallery-sticky { position: static; height: auto; }
    .cf-card, .cf-card::after { transition: none; }
}
/* ==========================================================================
   HOME SCENES — the homepage's own compositions
   ==========================================================================

   Split out of css/09-scenes.css, and the reason is a measurement rather than
   a preference. 09-scenes is a CORE stylesheet: every one of the sixteen
   routes downloads it. The hero and its floor, the glass cluster, the product
   deck, the service bento, the phones and the coverflow gallery are rendered
   by index.php and by nothing else — eleven pages were carrying roughly 30 KB
   of rules for markup they do not contain, and the per-route CSS budget in
   inc/tools/perf-budget.json failed at 215 KB because of it.

   WHAT STAYED IN 09-scenes: the page-wide field canvas, the three textures,
   the orb, the .has-tex rule and the head field — everything that more than
   one route actually uses.

   The one hard rule is inherited unchanged: THIS FILE MAY NEVER DEFINE A
   GROUND TOKEN. Not --surface, not --accent-fg, not --paper, not --ink. It
   may read any of them. Grounds are css/08-ground.css's job.

   Loaded via $page['styles'] in index.php, which means it arrives AFTER
   09-scenes and after css/pages/home.css.
   ========================================================================== */

/* ==========================================================================
   01 — THE RAFly GROWTH STUDIO HERO
   Concept: "Growth Reactor / Growth Lens"
   ONE visual idea. ONE material language. ONE motion language.

   Loaded via $page['styles'] in index.php, arriving AFTER
   css/09-scenes.css and after css/pages/home.css.
   Do NOT override base ground tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Local design variables (hero-scope only)
   -------------------------------------------------------------------------- */
/* ==========================================================================
   THE RAFly SIGNAL FIELD — HERO SECTION
   ========================================================================== */
.sig-hero {
    position: relative;
    height: min(820px, 90svh);
    min-height: 680px;
    max-height: 820px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper, #f7f9fd);
    color: var(--ink, #050f33);
    overflow: clip;
    isolation: isolate;
    padding-top: calc(var(--header-h, 74px) + 1.25rem);
    padding-bottom: 2rem;
}

/* ENVIRONMENT SYSTEM (8 RICH CINEMATIC LAYERS) */
.sig-env {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.sig-env__grain {
    position: absolute;
    inset: 0;
    opacity: 0.038;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.sig-env__grid {
    position: absolute;
    inset: -15%;
    opacity: 0.08;
    background-image:
        linear-gradient(to right, #0a63ff 1px, transparent 1px),
        linear-gradient(to bottom, #0a63ff 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 82%);
    transform: perspective(900px) rotateX(12deg);
    animation: sigGridDrift 28s linear infinite alternate;
}

@keyframes sigGridDrift {
    0% { transform: perspective(900px) rotateX(12deg) translateY(0); }
    100% { transform: perspective(900px) rotateX(12deg) translateY(22px); }
}

.sig-env__dots {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: radial-gradient(#050f33 1.2px, transparent 1.2px);
    background-size: 22px 22px;
}

.sig-env__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    will-change: transform, opacity;
}

.sig-env__glow.glow-primary {
    width: 720px; height: 720px;
    top: 50%; right: -6%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(10, 99, 255, 0.16) 0%, rgba(2, 48, 198, 0.06) 45%, transparent 72%);
    animation: sigAuraPulse 9s ease-in-out infinite alternate;
}

.sig-env__glow.glow-secondary {
    width: 520px; height: 520px;
    top: 10%; left: 8%;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.12) 0%, rgba(97, 52, 201, 0.04) 50%, transparent 70%);
}

@keyframes sigAuraPulse {
    0% { transform: translateY(-50%) scale(0.96); opacity: 0.85; }
    100% { transform: translateY(-50%) scale(1.06); opacity: 1; }
}

.sig-env__scanbeam {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(10, 99, 255, 0.45), transparent);
    opacity: 0.5;
    animation: sigScan 14s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes sigScan {
    0% { transform: translateY(-10px); opacity: 0; }
    15% { opacity: 0.5; }
    85% { opacity: 0.5; }
    100% { transform: translateY(820px); opacity: 0; }
}

.sig-env__blueprint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sig-env__blueprint .sig-bp-line {
    stroke-dasharray: 8 6;
    animation: sigBpDash 30s linear infinite;
}

@keyframes sigBpDash {
    to { stroke-dashoffset: -400; }
}

.sig-env__ghost-words {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 4vw;
    padding: 0 4%;
    overflow: hidden;
    pointer-events: none;
}

.sig-ghost {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: clamp(6rem, 16vw, 18rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #050f33;
    opacity: 0.022;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    will-change: transform;
    transform: translateX(var(--ghost-x, 0px));
}

/* LAYOUT GRID */
.sig-container {
    position: relative;
    z-index: 3;
    width: 100%;
}
.sig-grid {
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3.5rem);
    width: 100%;
}

/* LEFT SIDE — EDITORIAL CONTENT */
.sig-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 580px;
    z-index: 5;
}

.sig-eyebrow {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3, #5b6384);
    margin-bottom: 1.25rem;
}

.sig-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.sig-eyebrow__label { font-weight: 700; color: var(--ink, #050f33); }
.sig-eyebrow__sep { opacity: 0.4; }

/* Headline */
.sig-headline {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: clamp(3.6rem, 5.0vw, 5.8rem);
    line-height: 0.90;
    letter-spacing: -0.06em;
    font-weight: 800;
    color: #050f33;
    margin: 0 0 1.25rem;
}

.sig-h-line {
    display: block;
    overflow: hidden;
}

.sig-h-inner {
    display: block;
    transform: translateY(0);
    filter: none;
    will-change: transform, filter;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease;
}

.js .sig-hero:not(.sig-hero--entered) .sig-h-inner {
    transform: translateY(110%);
    filter: blur(8px);
}

.sig-hero--entered .sig-h-line[data-line="1"] .sig-h-inner { transform: translateY(0); filter: none; transition-delay: 0.18s; }
.sig-hero--entered .sig-h-line[data-line="2"] .sig-h-inner { transform: translateY(0); filter: none; transition-delay: 0.28s; }
.sig-hero--entered .sig-h-line[data-line="3"] .sig-h-inner { transform: translateY(0); filter: none; transition-delay: 0.38s; }

.sig-h-line--accent .sig-h-inner { color: #0a63ff; }

/* Light sweep on "Scale smarter." */
.sig-h-focus {
    display: inline;
    background: linear-gradient(110deg,
        #0a63ff 0%,
        #0a63ff 35%,
        #60a5fa 50%,
        #0a63ff 65%,
        #0a63ff 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sig-h-focus.is-sweeping {
    animation: sigSweep 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes sigSweep {
    0% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* Body Copy */
.sig-body {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
    line-height: 1.5;
    color: #3a4468;
    max-width: 500px;
    margin: 0 0 1.75rem;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease 0.48s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.48s;
}
.js .sig-hero:not(.sig-hero--entered) .sig-body { opacity: 0; transform: translateY(16px); }
.sig-hero--entered .sig-body { opacity: 1; transform: translateY(0); }

/* CTAs */
.sig-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease 0.56s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.56s;
}
.js .sig-hero:not(.sig-hero--entered) .sig-actions { opacity: 0; transform: translateY(16px); }
.sig-hero--entered .sig-actions { opacity: 1; transform: translateY(0); }

.sig-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
    padding: 0.78rem 1.45rem;
    border-radius: var(--r-sm, 8px);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

.sig-btn--primary {
    background: #050f33;
    color: #f6f8fc;
    box-shadow: 0 1px 2px rgba(5,15,51,0.18), 0 6px 18px rgba(5,15,51,0.14);
}
.sig-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(5,15,51,0.22);
}
.sig-btn--primary:hover .sig-btn__arrow { transform: translateX(4px); }

.sig-btn--secondary {
    background: rgba(255,255,255,0.85);
    color: #050f33;
    border: 1px solid rgba(5,15,51,0.14);
    backdrop-filter: blur(12px);
}
.sig-btn--secondary:hover {
    transform: translateY(-2px);
    border-color: #0a63ff;
    box-shadow: 0 4px 16px rgba(10,99,255,0.12);
}

.sig-btn__arrow { display: inline-flex; transition: transform 0.22s ease; }
.sig-btn__arrow .icon { width: 1rem; height: 1rem; }

/* Trust Row */
.sig-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: #5b6384;
}
.sig-trust__dot { color: #0a63ff; opacity: 0.75; }
.sig-trust__sep { opacity: 0.3; }

/* RIGHT SIDE — VISUAL STAGE */
.sig-visual {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.sig-stage {
    position: relative;
    width: clamp(340px, 48vw, 620px);
    height: clamp(340px, 48vw, 620px);
}
.sig-3d-scene {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.sig-canvas {
    width: 100%; height: 100%;
    display: block;
    border-radius: 50%;
}

.sig-annot-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
}
.sig-leader {
    stroke: rgba(10, 99, 255, 0.25);
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
    transition: stroke 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}
.sig-leader.is-active {
    stroke: rgba(10, 99, 255, 0.75);
    stroke-dasharray: none;
    opacity: 1;
}

/* Legacy sig-tag rules removed */
.sig-tag { display: none !important; }

/* Scroll Cue */
.sig-scroll {
    position: absolute;
    bottom: 1.5rem; left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    z-index: 4;
}
.sig-scroll__label {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
    color: rgba(5,15,51,0.4);
}
.sig-scroll__line {
    width: 1px; height: 36px;
    background: rgba(5,15,51,0.12);
    position: relative;
    overflow: hidden;
}
.sig-scroll__line i {
    position: absolute;
    top: -36px; left: 0;
    width: 100%; height: 36px;
    background: #0a63ff;
    animation: sigScroll 2.4s ease-in-out infinite;
}
@keyframes sigScroll {
    0% { top: -36px; }
    60%, 100% { top: 36px; }
}

@media (max-width: 900px) {
    .sig-hero {
        height: auto;
        min-height: auto;
        max-height: none;
        padding-block: calc(var(--header-h, 74px) + 1.5rem) 3rem;
    }
    .sig-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .sig-content { align-items: center; text-align: center; max-width: 100%; }
    .sig-headline { font-size: clamp(2.6rem, 8vw, 3.8rem); }
    .sig-actions { justify-content: center; }
    .sig-trust { justify-content: center; }
    .sig-scroll { display: none; }
}
.dw-eyebrow__sep { color: var(--blue, #0a63ff); font-weight: bold; }
.dw-eyebrow__tag { color: var(--ink); font-weight: 700; }

.dw-headline {
    font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: var(--sp-4);
    max-width: 520px;
}
.dw-h-line {
    display: block;
    overflow: hidden;
}
.dw-h-mask {
    display: block;
}
.dw-h-inner {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    filter: blur(8px);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.dw-hero--entered .dw-h-line[data-line="1"] .dw-h-inner {
    transform: translateY(0); opacity: 1; filter: blur(0); transition-delay: 0.1s;
}
.dw-hero--entered .dw-h-line[data-line="2"] .dw-h-inner {
    transform: translateY(0); opacity: 1; filter: blur(0); transition-delay: 0.22s;
}
.dw-hero--entered .dw-h-line[data-line="3"] .dw-h-inner {
    transform: translateY(0); opacity: 1; filter: blur(0); transition-delay: 0.34s;
}

.dw-h-focus {
    color: var(--blue, #0a63ff);
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #0a63ff 0%, #3b82f6 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dw-h-focus.is-sweeping::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    mix-blend-mode: overlay;
    animation: dwSweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes dwSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.dw-body {
    font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
    color: var(--ink-2);
    line-height: 1.52;
    margin-bottom: var(--sp-6);
    max-width: 480px;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
    transition: opacity 0.8s ease 0.45s, transform 0.8s ease 0.45s, filter 0.8s ease 0.45s;
}
.dw-hero--entered .dw-body {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.dw-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease 0.58s, transform 0.8s ease 0.58s;
}
.dw-hero--entered .dw-actions {
    opacity: 1;
    transform: translateY(0);
}

.dw-btn {
    height: 54px;
    padding: 0 var(--sp-6);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.dw-btn--primary {
    background: var(--ink, #070e1c);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(7, 14, 28, 0.25);
}
.dw-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(10, 99, 255, 0.35);
    border-color: rgba(10, 99, 255, 0.6);
}
.dw-btn--secondary {
    background: color-mix(in srgb, var(--paper-2) 70%, transparent);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.dw-btn--secondary:hover {
    border-color: var(--blue, #0a63ff);
    color: var(--blue, #0a63ff);
    transform: translateY(-2px);
}
.dw-btn__arrow {
    display: inline-flex;
    transition: transform 0.3s ease;
}
.dw-btn:hover .dw-btn__arrow {
    transform: translateX(3px);
}

.dw-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-family: var(--font-mono, monospace);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    opacity: 0;
    transition: opacity 0.8s ease 0.7s;
}
.dw-hero--entered .dw-trust {
    opacity: 0.85;
}
.dw-trust__cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dw-trust__dot {
    color: var(--blue, #0a63ff);
    font-size: 0.7rem;
}
.dw-trust__sep {
    color: var(--ink-3);
    opacity: 0.4;
}

/* RIGHT SIDE — SIGNATURE DIGITAL WORKSPACE SLAB */
.dw-visual {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dw-stage {
    position: relative;
    width: 100%;
    max-width: 580px;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.dw-3d-scene {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.dw-plane {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    will-change: transform;
}

.dw-arch-svg {
    width: 100%;
    height: 100%;
    max-width: 540px;
}

/* ARCHITECTURAL COMPUTATIONAL SLAB */
.dw-slab {
    position: relative;
    width: 380px;
    height: 380px;
    border-radius: 36px;
    transform-style: preserve-3d;
    transform: rotateX(12deg) rotateY(-16deg) rotateZ(2deg);
    transition: transform 0.15s ease-out;
}

.dw-slab__glass {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: radial-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.12),
        0 10px 25px rgba(10, 99, 255, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

.dw-slab__edge {
    position: absolute;
    inset: -2px;
    border-radius: 38px;
    border: 1.5px solid color-mix(in srgb, var(--blue, #0a63ff) 40%, transparent);
    opacity: 0.6;
}

.dw-slab__inner {
    position: absolute;
    inset: 16px;
    border-radius: 26px;
    background: linear-gradient(145deg, #030a1c 0%, #07173b 60%, #020817 100%);
    box-shadow: inset 0 0 35px rgba(10, 99, 255, 0.35);
    display: flex;
    align-items: flex-end;
    padding: 24px;
}

.dw-slab__mark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.dw-slab__logo {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.dw-slab__status {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--blue, #0a63ff);
    background: rgba(10, 99, 255, 0.15);
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(10, 99, 255, 0.3);
}

.dw-slab__shadow {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 45px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0%, transparent 70%);
    filter: blur(12px);
}

.dw-canvas {
    width: 100%;
    max-width: 580px;
    height: 520px;
    object-fit: contain;
}

.dw-fg-glow {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 99, 255, 0.15), transparent 70%);
    filter: blur(60px);
}

.dw-scroll {
    position: absolute;
    bottom: var(--sp-3);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.8s ease 0.9s;
}
.dw-hero--entered .dw-scroll { opacity: 0.65; }
.dw-scroll__label {
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--ink-3);
}
.dw-scroll__line {
    width: 1.5px;
    height: 24px;
    background: color-mix(in srgb, var(--ink) 15%, transparent);
    overflow: hidden;
    position: relative;
}
.dw-scroll__line i {
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: var(--blue, #0a63ff);
    animation: dwScrollLine 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes dwScrollLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(200%); }
}

/* RESPONSIVE DESIGN FOR HERO */
@media (max-width: 991px) {
    .dw-hero {
        min-height: auto;
        max-height: none;
        padding-top: calc(var(--header-h, 74px) + 2rem);
        padding-bottom: var(--sp-8);
    }
    .dw-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }
    .dw-content {
        max-width: 100%;
    }
    .dw-stage {
        height: 380px;
    }
    .dw-slab {
        width: 300px;
        height: 300px;
        transform: rotateX(8deg) rotateY(-10deg);
    }
    .dw-canvas {
        height: 380px;
    }
    .dw-scroll {
        display: none;
    }
}

.grs-hero {
    --grs-paper:      #f7f9fd;
    --grs-navy:       #050f33;
    --grs-blue:       #0a63ff;
    --grs-blue-soft:  rgba(10, 99, 255, 0.12);
    --grs-glow:       radial-gradient(ellipse 80% 60% at 60% 50%, rgba(10,99,255,0.10) 0%, transparent 72%);
    --grs-border:     rgba(10, 99, 255, 0.14);
    --grs-shadow:     0 24px 64px rgba(5,15,51,0.10);
}

/* --------------------------------------------------------------------------
   SECTION shell
   -------------------------------------------------------------------------- */
.grs-hero {
    position: relative;
    height: min(900px, 100svh);
    min-height: 760px;
    max-height: 900px;
    display: flex;
    align-items: center;
    overflow: clip;
    isolation: isolate;
    box-sizing: border-box;
    background-color: var(--grs-paper);
    padding-block: calc(var(--header-h, 74px) + 1.75rem) 2.5rem;
}

/* --------------------------------------------------------------------------
   ENVIRONMENT LAYERS  (z-index 0 — always behind content)
   -------------------------------------------------------------------------- */
.grs-env {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Layer 1: micro paper grain */
.grs-env__grain {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

/* Layer 2: fine technical blueprint grid with subtle perspective */
.grs-env__grid {
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(90deg, rgba(10,99,255,0.04) 1px, transparent 1px),
        linear-gradient(rgba(10,99,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 88% 76% at 50% 50%, #000 18%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 88% 76% at 50% 50%, #000 18%, transparent 78%);
    opacity: 0.65;
    transform: perspective(800px) rotateX(12deg);
    transform-origin: center center;
}

/* Layer 3: soft atmospheric glow behind the reactor */
.grs-env__glow {
    position: absolute;
    width: clamp(480px, 50vw, 820px);
    height: clamp(480px, 50vw, 820px);
    right: -6%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(10,99,255,0.10) 0%,
        rgba(2,48,198,0.05) 42%,
        transparent 68%);
    filter: blur(72px);
    will-change: transform;
}

/* Layer 4 (optional secondary glow left side) */
.grs-env__glow::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    left: -30%;
    top: 5%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,255,255,0.85) 0%,
        rgba(92,158,255,0.07) 45%,
        transparent 70%);
    filter: blur(56px);
}

/* Layer 5: ghost background typography */
.grs-env__ghost-words {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 5vw;
    padding: 0 6%;
    overflow: hidden;
    pointer-events: none;
}

.grs-ghost {
    font-family: var(--font-display);
    font-size: clamp(6rem, 16vw, 18rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--grs-navy);
    opacity: 0.02;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    will-change: transform;
    transform: translateX(var(--ghost-x, 0px));
    transition: transform 0.1s linear;
}

/* --------------------------------------------------------------------------
   LAYOUT GRID
   -------------------------------------------------------------------------- */
.grs-container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.grs-grid {
    display: grid;
    grid-template-columns: 50fr 50fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    min-height: calc(100svh - calc(var(--header-h, 74px) + 4.5rem));
    max-height: 800px;
}

/* --------------------------------------------------------------------------
   LEFT — EDITORIAL CONTENT  (z-index 5)
   -------------------------------------------------------------------------- */
.grs-content {
    position: relative;
    z-index: 5;
    max-width: 38rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Eyebrow */
.grs-eyebrow {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
    padding: 0.38rem 0.95rem;
    border-radius: var(--r-pill, 999px);
    background: rgba(255,255,255,0.84);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--grs-border);
    box-shadow: 0 3px 12px -3px rgba(10,99,255,0.10);
    margin-bottom: 1.25rem;
    width: fit-content;
}

.grs-eyebrow__beacon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2.5px rgba(16,185,129,0.25);
    animation: grs-beacon-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
    flex-shrink: 0;
}

@keyframes grs-beacon-pulse {
    0%, 100% { box-shadow: 0 0 0 2.5px rgba(16,185,129,0.25); }
    50%       { box-shadow: 0 0 0 4.5px rgba(16,185,129,0.10); }
}

.grs-eyebrow__text {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    color: var(--grs-navy);
    text-transform: uppercase;
}

.grs-eyebrow__sep {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: rgba(5,15,51,0.35);
}

/* Headline */
.grs-headline {
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 1.8rem + 4.5vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: var(--grs-navy);
    margin: 0 0 1.25rem;
}

.grs-headline__line {
    display: block;
    overflow: hidden;
}

.grs-headline__inner {
    display: block;
    transform: translateY(108%);
    filter: blur(12px);
    will-change: transform, filter;
    transition: transform 0.75s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter 0.75s ease;
}

/* Entered state (JS adds .grs-hero--entered) */
.grs-hero--entered .grs-headline__line[data-line="1"] .grs-headline__inner {
    transform: translateY(0);
    filter: blur(0);
    transition-delay: 0.20s;
}
.grs-hero--entered .grs-headline__line[data-line="2"] .grs-headline__inner {
    transform: translateY(0);
    filter: blur(0);
    transition-delay: 0.28s;
}
.grs-hero--entered .grs-headline__line[data-line="3"] .grs-headline__inner {
    transform: translateY(0);
    filter: blur(0);
    transition-delay: 0.36s;
}

/* Line 3 accent styling */
.grs-headline__line--accent .grs-headline__inner { color: var(--grs-blue); }

/* Kinetic light sweep on "Scale Smarter." */
.grs-headline__focus {
    display: inline;
    background: linear-gradient(110deg,
        var(--grs-blue) 0%,
        var(--grs-blue) 35%,
        #4b8bff 50%,
        var(--grs-blue) 65%,
        var(--grs-blue) 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grs-headline__focus.is-sweeping {
    animation: grs-sweep 2.2s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes grs-sweep {
    0%   { background-position: 100% center; }
    100% { background-position: 0%   center; }
}

/* Body copy */
.grs-body {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink-2, #3a4468);
    max-width: 560px;
    margin: 0 0 1.75rem;
}

/* CTA Group */
.grs-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.grs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
    padding: 0.78rem 1.45rem;
    border-radius: var(--r-sm, 8px);
    transition:
        transform 0.22s var(--ease-out, cubic-bezier(.16,1,.3,1)),
        box-shadow 0.22s ease;
    will-change: transform;
}

.grs-btn--primary {
    background: var(--grs-navy);
    color: #f6f8fc;
    box-shadow: 0 1px 2px rgba(5,15,51,0.18),
                0 6px 18px rgba(5,15,51,0.14),
                inset 0 0 0 1px rgba(10,99,255,0.18);
}

.grs-btn--primary:hover,
.grs-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(5,15,51,0.14),
                0 12px 28px rgba(5,15,51,0.18),
                inset 0 0 0 1px rgba(10,99,255,0.30);
}

.grs-btn--primary:hover .grs-btn__arrow,
.grs-btn--primary:focus-visible .grs-btn__arrow {
    transform: translate(4px, 0);
}

/* Sheen sweep on hover */
.grs-btn__sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 0s;
}

.grs-btn--primary:hover .grs-btn__sheen {
    transform: translateX(100%);
    transition: transform 0.55s ease;
}

.grs-btn--secondary {
    background: rgba(255,255,255,0.76);
    color: var(--grs-navy);
    border: 1px solid rgba(5,15,51,0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(5,15,51,0.08);
}

.grs-btn--secondary:hover,
.grs-btn--secondary:focus-visible {
    transform: translateY(-2px);
    border-color: var(--grs-blue);
    box-shadow: 0 4px 16px rgba(10,99,255,0.12);
}

.grs-btn__arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.22s var(--ease-out);
    flex-shrink: 0;
}

.grs-btn__arrow .icon {
    width: 1rem;
    height: 1rem;
}

/* Trust row */
.grs-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
}

.grs-trust__cell {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--ink-3, #5b6384);
    letter-spacing: 0.02em;
}

.grs-trust__dot {
    font-size: 0.55rem;
    color: var(--grs-blue);
    opacity: 0.7;
}

.grs-trust__sep {
    font-size: 0.65rem;
    color: rgba(5,15,51,0.25);
}

/* --------------------------------------------------------------------------
   RIGHT — GROWTH REACTOR VISUAL  (z-index 2)
   -------------------------------------------------------------------------- */
.grs-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grs-reactor {
    position: relative;
    width: clamp(340px, 50vw, 640px);
    height: clamp(340px, 50vw, 640px);
    flex-shrink: 0;
    will-change: transform;
}

/* Canvas2D — main animated reactor */
.grs-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

/* SVG annotation layer — sits above canvas */
.grs-annot-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

/* Leader lines */
.grs-leader {
    stroke: rgba(10,99,255,0.20);
    stroke-width: 1px;
    fill: none;
    stroke-dasharray: 3 5;
    transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease;
    opacity: 0;
}

.grs-leader.is-visible {
    opacity: 1;
}

.grs-leader.is-active {
    stroke: rgba(10,99,255,0.65);
    stroke-width: 1.4px;
    stroke-dasharray: none;
    opacity: 1;
}

/* Floating annotation badges */
.grs-annot {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    padding: 0.4rem 0.75rem 0.4rem 0.65rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(10,99,255,0.12);
    box-shadow: 0 4px 16px -3px rgba(5,15,51,0.09);
    text-decoration: none;
    z-index: 3;
    transition:
        transform 0.32s var(--ease-out, cubic-bezier(.16,1,.3,1)),
        box-shadow 0.32s ease,
        border-color 0.22s ease;
    transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0);
}

.grs-annot:hover,
.grs-annot.is-active {
    transform: translate3d(var(--ax, 0px), calc(var(--ay, 0px) - 3px), 0) scale(1.04);
    border-color: rgba(10,99,255,0.35);
    box-shadow: 0 8px 24px -4px rgba(10,99,255,0.18);
}

.grs-annot.is-dimmed {
    opacity: 0.38;
    transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) scale(0.96);
}

.grs-annot__idx {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--grs-blue);
    letter-spacing: 0.06em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.grs-annot__sep {
    color: rgba(5,15,51,0.30);
    font-size: 0.5rem;
    margin-inline: 0.1rem;
}

.grs-annot__label {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--grs-navy);
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.grs-annot__sub {
    font-family: var(--font-mono);
    font-size: 0.575rem;
    color: var(--ink-3, #5b6384);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Annotation positions (% of .grs-reactor dimensions) */
.grs-annot--web      { top: 10%;  left: -2%;   transform-origin: left top; }
.grs-annot--security { top: 44%;  left: -6%;   transform-origin: left center; }
.grs-annot--marketing{ top: 10%;  right: -2%;  transform-origin: right top; }
.grs-annot--content  { top: 44%;  right: -6%;  transform-origin: right center; }
.grs-annot--commerce { bottom: 3%; left: 50%;  transform: translateX(-50%); transform-origin: center bottom; }
/* Re-apply translate after base positioning (commerce uses translateX base) */
.grs-annot--commerce.is-active,
.grs-annot--commerce:hover {
    transform: translateX(calc(-50% + var(--ax, 0px))) translateY(calc(-3px + var(--ay, 0px))) scale(1.04);
}
.grs-annot--commerce.is-dimmed {
    transform: translateX(-50%) scale(0.96);
}

/* Contact shadow below reactor */
.grs-reactor__shadow {
    position: absolute;
    bottom: -6%;
    left: 10%;
    right: 10%;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(5,15,51,0.12) 0%, transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

/* --------------------------------------------------------------------------
   SCROLL CUE
   -------------------------------------------------------------------------- */
.grs-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.grs-hero--entered .grs-scroll {
    opacity: 1;
    transition-delay: 1.1s;
}

.grs-scroll__label {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.20em;
    color: rgba(5,15,51,0.45);
    text-transform: uppercase;
    white-space: nowrap;
}

.grs-scroll__line {
    display: block;
    width: 1px;
    height: 44px;
    background: rgba(5,15,51,0.12);
    position: relative;
    overflow: hidden;
}

.grs-scroll__line i {
    position: absolute;
    top: -44px;
    left: 0;
    width: 100%;
    height: 44px;
    background: var(--grs-blue);
    animation: grs-scroll-run 2.6s ease-in-out infinite;
}

@keyframes grs-scroll-run {
    0%        { top: -44px; }
    60%, 100% { top: 44px; }
}

/* --------------------------------------------------------------------------
   ENTRANCE ANIMATION — data-r="rise" elements
   The existing motion.js handles [data-r="rise"] via IntersectionObserver.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .grs-scroll__line i,
    .grs-eyebrow__beacon,
    .grs-headline__focus,
    .grs-ghost { animation: none !important; }

    .grs-headline__inner {
        transform: none !important;
        transition: none !important;
    }

    .grs-btn,
    .grs-annot { transition: none !important; }

    .grs-hero--entered .grs-scroll { opacity: 1; transition: none; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — 1024px (laptop)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .grs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .grs-reactor {
        width: clamp(280px, 44vw, 500px);
        height: clamp(280px, 44vw, 500px);
    }
    .grs-annot--web,
    .grs-annot--marketing { top: 6%; }
    .grs-annot--security,
    .grs-annot--content   { left: -4%; right: -4%; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — 900px (tablet landscape / small laptop)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .grs-hero {
        min-height: auto;
        max-height: none;
        padding-block: calc(var(--header-h, 74px) + 2rem) 3.5rem;
    }

    .grs-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .grs-content {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .grs-headline {
        font-size: clamp(2.4rem, 8.5vw, 3.6rem);
    }

    .grs-body {
        margin-inline: auto;
        max-width: 44rem;
    }

    .grs-actions { justify-content: center; }
    .grs-trust   { justify-content: center; }

    .grs-visual {
        max-width: 460px;
        margin-inline: auto;
    }

    .grs-reactor {
        width: min(86vw, 420px);
        height: min(86vw, 420px);
    }

    .grs-scroll { display: none; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — 540px (mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 540px) {
    .grs-hero { padding-block: calc(var(--header-h, 74px) + 1.5rem) 3rem; }

    .grs-headline {
        font-size: clamp(2.15rem, 8vw, 2.8rem);
    }

    .grs-trust {
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }

    .grs-trust__sep { display: none; }

    .grs-reactor {
        width: min(88vw, 340px);
        height: min(88vw, 340px);
    }

    /* Compact annotation layout on mobile — hide sub-text, stack horizontally */
    .grs-annot__sub { display: none; }
    .grs-annot {
        padding: 0.3rem 0.55rem;
    }
    .grs-annot--commerce { bottom: -2%; }

    .grs-env__ghost-words { display: none; }
}


/* ==========================================================================
   THE PLATFORM — five product surfaces, fanned

   A pinned section: the deck holds still in the middle of the screen while
   the page scrolls past it, and the fan opens across that scroll. 180vh, not
   the prototype's 320 — same choreography, resolved faster, because nobody
   should have to scroll three screens to watch five cards move apart.
   ========================================================================== */

/* OVERFLOW: CLIP, NOT HIDDEN, AND IT IS THE WHOLE SECTION.

   `overflow: hidden` makes the box a SCROLL CONTAINER, and a sticky child
   sticks to its nearest scrolling ancestor. This section does not scroll, so
   the child had nothing to stick to and never pinned — the deck simply drifted
   past with the page while decks.js scrubbed the fan against a viewport it was
   no longer holding still in. It looked almost right, which is why it survived
   a byte-budget pass and a contrast pass: nothing measures whether a thing
   that should be still is moving.

   `overflow: clip` clips identically and creates NO scroll container, so the
   pin works. Where it is unsupported the orbs bleed past the section edge and
   nothing else changes. */
.platform {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 42%, var(--paper) 100%);
}

.platform-sticky { position: relative; z-index: 2; }

/* The five services as links, in their own block. It is a sibling of the
   pinned section rather than a child, because a child sharing the sticky
   parent consumes the deck pinned range from the bottom — the deck scrolled
   away a screen early and left blank paper behind it. */
.platform-list {
    position: relative;
    background: var(--paper);
    padding-block: var(--sp-8) var(--section-y);
    overflow: hidden;
}
/* --- THE BENTO ---------------------------------------------------------

   The five services were a list of rows in a left-hand column with a panel
   beside them, and before that a single column on a full-width ground. Both
   read as the section having run out rather than having finished.

   Six tiles on a three-column grid, and the spans are chosen so there is no
   hole to fill:

       row 1   [ Web — spans 2 ]              [ Security ]
       row 2   [ Marketing ]  [ Content ]     [ Commerce ]
       row 3   [ the panel — spans 3 ]

   The cards themselves are the thing Naveen has asked for at every round —
   glass, a gradient border that arrives on hover, a sheen that follows the
   cursor. Every one of those is a compositor-only property; nothing here
   animates a layout value. */
.svc-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    position: relative;
    z-index: 1;
}

.svc-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 13rem;
    padding: var(--sp-5);
    border-radius: var(--r-xl);
    text-decoration: none;
    color: inherit;
    overflow: hidden;

    background: color-mix(in srgb, #ffffff 76%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid color-mix(in srgb, #ffffff 88%, transparent);
    box-shadow:
        0 24px 60px -34px color-mix(in srgb, var(--ink) 34%, transparent),
        0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);

    transition:
        transform var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out);
}

/* THE LEAD CARD takes two columns. Same padding and the same parts — a bento
   works because one tile has more room, not because one tile is a different
   component.

   Two columns of room is also two columns of EMPTY room if nothing fills it,
   so the lead card carries a pool of its own accent on the right and gives its
   copy a measure to stop against. Nothing is invented to fill the space: the
   pool is light, and the words are the same words. */
.svc-card:first-child {
    grid-column: span 2;
    background-image: radial-gradient(circle at 88% 30%,
        color-mix(in srgb, var(--sc, var(--accent-fg)) 14%, transparent), transparent 58%);
}
.svc-card:first-child .svc-card-name { font-size: var(--fs-h3); }
.svc-card:first-child .svc-card-desc { max-width: 38ch; }

/* THE GRADIENT BORDER. A 1px ring painted as a gradient, achieved by drawing
   the gradient over the whole box and then masking out everything inside the
   padding box — the two masks are composited with `exclude`, which leaves
   exactly the border ring. A gradient `border-image` cannot do this and keep
   a radius; a second absolutely-positioned element could, at the cost of a
   layer per card. */
.svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        var(--sc, var(--accent-fg)),
        color-mix(in srgb, var(--sc, var(--accent-fg)) 20%, transparent) 58%,
        transparent 78%);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
    pointer-events: none;
    z-index: 2;
}

/* THE SHEEN. --mx/--my are written by js/sheen.js on pointermove. They fall
   back to the card's centre, so with no JS at all the hover state is a
   centred glow rather than nothing — a designed state either way. */
.svc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--sc, var(--accent-fg)) 16%, transparent),
        transparent 62%);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
    pointer-events: none;
    z-index: 0;
}

.svc-card:hover,
.svc-card:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 34px 70px -32px color-mix(in srgb, var(--ink) 42%, transparent),
        0 2px 6px color-mix(in srgb, var(--ink) 6%, transparent);
}
.svc-card:hover::before,
.svc-card:focus-visible::before,
.svc-card:focus-within::before { opacity: 1; }
.svc-card:hover::after,
.svc-card:focus-visible::after,
.svc-card:focus-within::after { opacity: 1; }

/* Everything inside sits above the sheen. */
.svc-card > * { position: relative; z-index: 1; }

.svc-card-top { display: flex; align-items: center; justify-content: space-between; }

/* The glyph tile. --sc is a FILL here and never a text colour — two of the
   five service accents (--svc-security, --svc-ecom) are rated for fill only,
   which is the whole reason css/00-tokens.css splits --accent from
   --accent-fg. The glyph on top is white. */
.svc-card-glyph {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    color: #fff;
    background: linear-gradient(135deg,
        var(--sc, var(--accent-fg)),
        color-mix(in srgb, var(--sc, var(--accent-fg)) 62%, #ffffff));
    box-shadow: 0 8px 20px -10px var(--sc, var(--accent-fg));
}
.svc-card-glyph svg { width: 19px; height: 19px; }

.svc-card-idx {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tr-meta);
    color: var(--ink-3);
}

.svc-card-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    color: var(--ink);
}
.svc-card-desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-3);
}

.svc-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.svc-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--sc, var(--accent-fg)) 9%, #ffffff);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--sc, var(--accent-fg)) 22%, transparent);
}

.svc-card-go {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--accent-fg);
}
.svc-card-go svg { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease-out); }
.svc-card:hover .svc-card-go svg { transform: translate(3px, -3px); }

/* The panel closes the grid rather than standing beside it. Across all three
   columns its facts lie in a row, which is what stops a full-width block from
   becoming a wide paragraph. */
.platform-panel {
    grid-column: 1 / -1;
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    background: color-mix(in srgb, #ffffff 76%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid color-mix(in srgb, #ffffff 88%, transparent);
    box-shadow:
        0 24px 60px -30px color-mix(in srgb, var(--ink) 36%, transparent),
        0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);
}

.platform-panel h3 {
    margin: var(--sp-3) 0 var(--sp-5);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    color: var(--ink);
}

.platform-facts {
    margin: 0 0 var(--sp-5);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
}
.platform-facts > div {
    display: grid;
    gap: 2px;
    padding-left: var(--sp-4);
    border-left: 1px solid var(--line);
}
.platform-facts > div:first-child { padding-left: 0; border-left: 0; }

/* The metadata tier. --ink-3, never --ink-4: this is small text, and --ink-4
   is rated for large display only. */
.platform-facts dt {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tr-meta);
    text-transform: uppercase;
    color: var(--ink-3);
}
.platform-facts dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink);
}

.platform-panel-foot {
    margin: 0 0 var(--sp-5);
    max-width: 62ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--ink-2);
}

/* Two columns before one. Five cards at 1fr on a phone is five squares of
   nothing; five cards at full width is a readable stack, and the tablet step
   between them keeps the lead card's span meaningful. */
@media (max-width: 1100px) {
    .svc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-card:first-child { grid-column: span 2; }
    .platform-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .svc-bento { grid-template-columns: 1fr; gap: var(--sp-3); }
    .svc-card:first-child { grid-column: auto; }
    .svc-card { min-height: 0; }
    .platform-facts { grid-template-columns: 1fr; gap: var(--sp-4); }
    .platform-facts > div { padding-left: 0; border-left: 0; }
}

/* A card that lifts and glows on hover has nothing to say to a visitor who
   asked for less movement. The border and the sheen stay — they are state,
   not motion — and only the travel goes. */
@media (prefers-reduced-motion: reduce) {
    .svc-card { transition: none; }
    .svc-card:hover, .svc-card:focus-visible { transform: none; }
    .svc-card:hover .svc-card-go svg { transform: none; }
}


.platform-head { text-align: center; max-width: 39rem; margin: 0 auto; }
.platform-head h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); line-height: var(--lh-tight); }
.platform-head .lead { margin: var(--sp-4) auto 0; max-width: 34rem; }

/* Deck Interactive Controls */
.deck-controls {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--sp-6);
    padding: 4px 6px;
    background: color-mix(in srgb, #ffffff 85%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: var(--r-pill);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--ink) 8%, transparent);
}

.deck-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    transition: all var(--dur-2) var(--ease);
}

.deck-tab .tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tab-c, var(--blue));
    opacity: 0.5;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.deck-tab:hover {
    color: var(--ink);
    background: color-mix(in srgb, #ffffff 90%, transparent);
}

.deck-tab:hover .tab-dot {
    opacity: 0.9;
    transform: scale(1.2);
}

.deck-tab.is-active {
    background: #ffffff;
    color: var(--ink);
    box-shadow:
        0 2px 8px -2px color-mix(in srgb, var(--ink) 14%, transparent),
        0 0 0 1px color-mix(in srgb, var(--tab-c, var(--blue)) 35%, transparent);
}

.deck-tab.is-active .tab-dot {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 6px var(--tab-c, var(--blue));
}

/* --- the deck -----------------------------------------------------------
   perspective on the CONTAINER, not on the cards. One shared vanishing point
   is what makes five separately-transformed elements read as one scene
   photographed from one place; per-card perspective makes five drawings. */
.deck {
    position: relative;
    width: 100%;
    height: 430px;
    margin-top: var(--sp-6);
    perspective: 1700px;
    transform-style: preserve-3d;
}

.mock {
    position: absolute;
    left: 50%; top: 50%;
    width: 430px; height: 300px;
    margin: -150px 0 0 -215px;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    box-shadow:
        0 34px 76px -28px color-mix(in srgb, var(--ink) 46%, transparent),
        0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
    will-change: transform;
    transition: box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);

    /* THE COVERFLOW DIM. js/decks.js writes --slot-dim as the fan collapses;
       the side cards fall to 0.60 so the centre one has somewhere to be read. */
    opacity: var(--slot-dim, 1);

    /* THE STILL FORM */
    transform:
        translate3d(calc(var(--slot-x, 0) * 0.34px), 0, 0)
        rotateY(calc(var(--slot-r, 0) * 0.34deg))
        scale(.9);
}
.mock[data-slot="0"] { --slot-x: 0;    --slot-r: 0;   z-index: 6; }
.mock[data-slot="1"] { --slot-x: -250; --slot-r: 15;  z-index: 5; }
.mock[data-slot="2"] { --slot-x: 250;  --slot-r: -15; z-index: 5; }
.mock[data-slot="3"] { --slot-x: -448; --slot-r: 24;  z-index: 4; }
.mock[data-slot="4"] { --slot-x: 448;  --slot-r: -24; z-index: 4; }

.mock.is-focused {
    border-color: var(--c) !important;
    box-shadow:
        0 40px 90px -20px color-mix(in srgb, var(--c) 35%, transparent),
        0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent),
        0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent) !important;
}

/* --- browser chrome --- */
.mock-bar {
    height: 30px;
    background: color-mix(in srgb, var(--paper-2) 90%, #ffffff);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px;
}
.mock-window-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}
.mock-window-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.mock-window-dots i:nth-child(1) { background: #ff5f56; }
.mock-window-dots i:nth-child(2) { background: #ffbd2e; }
.mock-window-dots i:nth-child(3) { background: #27c93f; }

.mock-url {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    color: var(--ink-2);
    background: #ffffff;
    padding: 2.5px 8px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.mock-telemetry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    color: var(--success-ink, #0e6f31);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.telem-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--success-ink, #0e6f31);
    box-shadow: 0 0 5px var(--success-ink, #0e6f31);
    animation: livePulse 2s infinite;
}

.mock-app { display: flex; height: calc(100% - 30px); }

.mock-side {
    width: 52px;
    background: var(--paper);
    border-right: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    padding: 11px 0;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.mock-logo {
    width: 20px; height: 20px; border-radius: 6px; display: block;
    background: linear-gradient(135deg, var(--c), var(--c2));
}
.mock-side b { width: 20px; height: 6px; border-radius: 3px; background: var(--paper-3); display: block; }
.mock-side b.is-on { background: color-mix(in srgb, var(--c) 34%, var(--paper-3)); }

.mock-body { flex: 1; padding: 12px 14px 32px; display: flex; flex-direction: column; gap: 9px; }
.mock-top { display: flex; align-items: center; justify-content: space-between; }
.mock-title-group { display: flex; align-items: center; gap: 6px; }
.mock-title-dot { width: 6px; height: 6px; border-radius: 50%; }
.mock-top .h {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.04em;
    height: auto;
    width: auto;
    background: transparent;
}

.mock-body > * { flex: none; }

/* shared parts ---------------------------------------------------------- */
.mock-pill {
    font-family: var(--font-display);
    font-size: 8px; font-weight: var(--fw-semi);
    letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 8px; min-width: 8px; min-height: 8px;
    border-radius: var(--r-pill);
    background: var(--paper-3);
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
}
.mock-pill.is-ok { background: color-mix(in srgb, var(--success) 16%, var(--paper)); color: var(--success-ink); }
.mock-pill.is-shield { background: color-mix(in srgb, #0230c6 14%, var(--paper)); color: #0230c6; }
.mock-pill.is-growth { background: color-mix(in srgb, #1b6bff 14%, var(--paper)); color: #0b52d8; }
.mock-pill.is-draft { background: color-mix(in srgb, #001a7a 12%, var(--paper)); color: #001a7a; }

.mock-pill .pill-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    margin-right: 3px;
}

/* web — build and deploy ------------------------------------------------- */
.mock-code {
    flex: 1;
    display: flex; gap: 9px;
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: var(--r-sm);
    background: var(--paper);
    padding: 9px;
}
.mock-gut {
    width: 3px; flex: none;
    border-radius: 2px;
    background: repeating-linear-gradient(var(--paper-4) 0 4px, transparent 4px 11px);
}
.mock-code-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.code-line { display: flex; align-items: center; }
.mock-code-lines i { height: 5px; border-radius: 3px; background: var(--paper-4); }
.mock-code-lines i.is-hi { background: color-mix(in srgb, var(--c) 46%, var(--paper-3)); }
.code-cursor {
    display: inline-block;
    width: 4px;
    height: 8px;
    background: var(--c);
    margin-left: 4px;
    animation: cursorBlink 1.2s infinite;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.mock-strip { display: flex; gap: 6px; }
.mock-strip .mock-chip {
    flex: 1; height: 18px; border-radius: var(--r-sm);
    background: var(--paper-2);
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    display: inline-flex; align-items: center; padding: 0 8px;
    font-family: var(--font-mono); font-size: 8px; color: var(--ink-2);
}
.chip-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--ink-3); display: inline-block; margin-right: 3px;
}
.chip-pulse {
    width: 5px; height: 5px; border-radius: 50%;
    background: #ffffff; box-shadow: 0 0 6px #ffffff;
    display: inline-block; margin-right: 4px;
    animation: livePulse 1.8s infinite;
}
.mock-strip .mock-chip.is-on {
    background: linear-gradient(115deg, var(--c), var(--c2));
    border-color: transparent;
    color: #ffffff;
}

/* security — a scan ------------------------------------------------------ */
.mock-split { flex: 1; display: flex; gap: 11px; align-items: center; }
.mock-ring-wrap {
    position: relative; width: 74px; height: 74px; flex: none;
    display: grid; place-items: center;
}
.mock-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--c) 0 76%, var(--paper-3) 76% 100%);
    animation: ringSpin 16s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.mock-ring-core {
    position: relative; z-index: 2; width: 48px; height: 48px;
    border-radius: 50%; background: #ffffff;
    color: var(--c); display: grid; place-items: center;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}
.mock-ring-core svg { width: 16px; height: 16px; }

.mock-findings { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mock-find { display: flex; align-items: center; gap: 6px; }
.mock-find u { width: 6px; height: 6px; border-radius: 2px; flex: none; background: var(--paper-4); }
.mock-find u.is-ok   { background: var(--success); }
.mock-find i { height: 5px; border-radius: 3px; background: var(--paper-4); }
.find-tag {
    font-family: var(--font-mono); font-size: 7.5px;
    color: var(--ink-3); margin-left: auto;
}

.mock-rowline { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.sec-status-text {
    display: flex; align-items: center; gap: 4px;
    font-family: var(--font-mono); font-size: 8px; color: var(--ink-2); font-weight: 500;
}
.sec-status-text .dot-live {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--success-ink); box-shadow: 0 0 5px var(--success-ink);
}

/* marketing — channels --------------------------------------------------- */
.mock-area {
    flex: 1;
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: var(--r-sm);
    background: var(--paper);
    padding: 8px;
    display: flex; align-items: flex-end;
}
.mock-area-curve {
    width: 100%; height: 100%; position: relative;
    display: flex; align-items: flex-end;
}
.mock-area-curve span {
    display: block; width: 100%; height: 72%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--c) 62%, transparent),
        color-mix(in srgb, var(--c) 6%, transparent));
    clip-path: polygon(0 78%, 14% 58%, 28% 68%, 42% 36%, 56% 48%, 70% 22%, 84% 34%, 100% 8%, 100% 100%, 0 100%);
}
.chart-peak-dot {
    position: absolute; right: 4px; top: 12px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c); box-shadow: 0 0 8px var(--c);
    animation: livePulse 2s infinite;
}
.mock-channels { display: flex; flex-direction: column; gap: 6px; }
.mock-ch { display: flex; align-items: center; gap: 8px; }
.mock-ch i { height: 5px; border-radius: 3px; background: var(--paper-4); flex: none; }
.mock-ch b {
    height: 8px; border-radius: 4px;
    background: linear-gradient(90deg, var(--c), var(--c2));
}
.mock-ch .ch-val {
    font-family: var(--font-mono); font-size: 7.5px;
    color: var(--ink-3); margin-left: auto;
}

/* content — an editor ---------------------------------------------------- */
.mock-split.is-editor { align-items: stretch; }
.mock-outline {
    width: 52px; flex: none;
    display: flex; flex-direction: column; gap: 7px;
    padding-right: 10px;
    border-right: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}
.mock-outline i { height: 5px; border-radius: 3px; background: var(--paper-3); }
.mock-outline i.is-on { background: color-mix(in srgb, var(--c) 42%, var(--paper-3)); }
.mock-doc { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.mock-head-line { display: flex; align-items: center; }
.mock-doc i { height: 5px; border-radius: 3px; background: var(--paper-4); }
.mock-doc i.mock-head { height: 12px; border-radius: 5px; background: var(--paper-4); }
.doc-badge {
    font-family: var(--font-mono); font-size: 7px; padding: 1px 4px;
    border-radius: 3px; background: var(--paper-3); color: var(--ink-3); margin-left: 6px;
}
.mock-typing-line { display: flex; align-items: center; position: relative; }
.mock-doc i.is-hi { background: color-mix(in srgb, var(--c) 30%, var(--paper-3)); }
.typing-marker {
    width: 2px; height: 8px; background: var(--c); margin-left: 3px;
    animation: cursorBlink 1s infinite;
}
.mock-doc-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.doc-stat { font-family: var(--font-mono); font-size: 7.5px; color: var(--ink-3); }

/* commerce — orders ------------------------------------------------------ */
.mock-spark {
    height: 52px; flex: none;
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: var(--r-sm);
    background: var(--paper);
    padding: 6px;
    display: flex; align-items: flex-end; gap: 4px;
}
.mock-spark i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--c2), var(--c)); }
.mock-orders { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mock-order {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: var(--r-sm);
    background: var(--paper);
}
.mock-order u { width: 14px; height: 14px; border-radius: 4px; flex: none;
                background: linear-gradient(135deg, var(--c), var(--c2)); }
.mock-order i { height: 5px; border-radius: 3px; background: var(--paper-4); }
.order-type { font-family: var(--font-mono); font-size: 7.5px; color: var(--ink-3); margin-left: 4px; }

.mock-tag {
    position: absolute; left: 64px; bottom: 11px;
    font-family: var(--font-display);
    font-size: 10px; font-weight: var(--fw-semi);
    letter-spacing: .07em; text-transform: uppercase;
    color: #fff;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(115deg, var(--c), var(--c2));
}

/* ==========================================================================
   03b — VIRAL REELS & SHORT-FORM VIDEO CONTENT ENGINE (GEN-Z CALIBER)
   IDEA → CONTENT → DISTRIBUTION → RESPONSE → CONVERSION
   ========================================================================== */

.reels-engine-section {
    position: relative;
    min-height: 230vh;
    background: var(--paper);
    overflow: clip;
    isolation: isolate;
}

/* Sticky Viewport Container: Stays Anchored During the 5-Phase Scroll Reveal */
.reels-sticky-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(0.6rem, 1.4vh, 1.1rem) 0;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

/* UNIFIED REELS-STYLE ANCHORED BACKGROUND SYSTEM FOR HOMEPAGE SECTIONS */
.has-reels-bg {
    position: relative;
    background: var(--paper);
    overflow: clip;
    isolation: isolate;
}
.has-reels-bg > .container {
    position: relative;
    z-index: 10;
}
.has-reels-bg .tex-apps-grid,
.has-reels-bg .tex-apps-dots {
    background-attachment: fixed;
}

/* Background Layer 1: Architectural Engineering Grid & Crosses */
.tex-apps-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.055;
    background-size: 36px 36px;
    background-image:
        linear-gradient(to right, var(--ink) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ink) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 48%, #000 35%, transparent 88%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 48%, #000 35%, transparent 88%);
}

.tex-apps-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.09;
    background-size: 48px 48px;
    background-image: radial-gradient(var(--blue) 1.5px, transparent 1.5px);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 48%, #000 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 48%, #000 25%, transparent 85%);
}

.tex-apps-hatch {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.025;
    background-image: repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 14px);
}

/* Background Layer 2: Dual Ambient Atmospheric Auras */
.reels-ambient-aura {
    position: absolute;
    width: 680px;
    height: 680px;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--blue) 16%, transparent) 0%, color-mix(in srgb, #6134c9 7%, transparent) 40%, color-mix(in srgb, var(--blue) 3%, transparent) 60%, transparent 75%);
    pointer-events: none;
    filter: blur(70px);
    z-index: 2;
    opacity: 0.6;
    will-change: transform, opacity;
}

/* Technical Coordinate Markers */
.reels-tech-marker {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    z-index: 6;
    pointer-events: none;
}

.reels-tech-marker.top-left {
    top: 0.9rem;
    left: 1.75rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.reels-tech-marker .rtm-dot {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: var(--blue);
    animation: livePulse 2s infinite;
}

.reels-tech-marker.top-right {
    top: 0.9rem;
    right: 1.75rem;
}

.reels-tech-marker.top-right b {
    color: var(--blue);
    font-weight: 700;
}

/* Main Structured Container */
.reels-main-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding-inline: clamp(0.8rem, 2vw, 1.8rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   ZONE 1: SECTION EDITORIAL HEADER (Compact, Zero Collisions)
   ========================================================================== */

.reels-header-zone {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    flex: none;
}

.reels-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}

.reels-sys-tag {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-fg);
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
    padding: 2px 6.5px;
    border-radius: var(--r-pill);
    text-transform: uppercase;
}

.reels-pipe-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tr-meta);
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
}

.reels-badge-pill {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 600;
    padding: 1.5px 6px;
    border-radius: var(--r-pill);
    background: var(--paper-3);
    color: var(--ink-2);
}

.reels-heading {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-align: center;
    margin: 0 0 0.2rem 0;
}

.rh-line {
    display: block;
}

.rh-accent {
    background: linear-gradient(135deg, var(--blue-ink, #002277), var(--blue, #0a63ff));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reels-subhead {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(11px, 0.82vw, 13px);
    color: var(--ink-2);
    line-height: 1.32;
    font-weight: 400;
}

/* ==========================================================================
   PROCESS NAVIGATION STRIP
   ========================================================================== */

.reels-process-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: clamp(0.25rem, 0.7vh, 0.5rem);
    padding: 0.18rem 0.22rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, #ffffff 88%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    box-shadow: 0 3px 14px -3px rgba(0, 15, 50, 0.05);
}

.rpn-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.rpn-tab:hover {
    color: var(--ink);
    background: color-mix(in srgb, #ffffff 70%, transparent);
}

.rpn-tab.is-active {
    background: #ffffff;
    color: var(--ink);
    font-weight: var(--fw-semi);
    border-color: color-mix(in srgb, var(--blue) 35%, transparent);
    box-shadow: 0 3px 12px -3px color-mix(in srgb, var(--blue) 22%, transparent);
}

.rpn-num {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    color: var(--blue);
}

.rpn-label {
    letter-spacing: 0.01em;
}

.rpn-indicator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0;
    transform: scale(0.4);
    transition: all 0.2s ease;
}

.rpn-tab.is-active .rpn-indicator {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   ZONE 2: CENTRAL VISUAL COMPOSITION (Dedicated 3D Stage)
   ========================================================================== */

.reels-visual-stage {
    position: relative;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    height: clamp(290px, 37vh, 355px);
    perspective: 1600px;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
    flex: 1;
}

.reels-stage-glow {
    position: absolute;
    width: 560px;
    height: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--blue) 18%, transparent) 0%, color-mix(in srgb, var(--blue) 5%, transparent) 50%, transparent 72%);
    pointer-events: none;
    filter: blur(55px);
    z-index: 1;
}

/* Floating Proof Badges (Placed strictly in outer negative space) */
.reels-proof-badge {
    position: absolute;
    background: color-mix(in srgb, #ffffff 92%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--ink) 9%, transparent);
    z-index: 18;
    will-change: transform, opacity;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reels-proof-badge:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--blue) 22%, transparent);
}

.badge-top-left  { top: 4%;  left: 0%; }
.badge-top-right { top: 6%;  right: 0%; }
.badge-bot-left  { bottom: 6%;  left: 0%; }
.badge-bot-right { bottom: 4%;  right: 0%; }

.rpb-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--blue) 12%, transparent);
    display: grid;
    place-items: center;
    color: var(--blue);
    flex: none;
}

.rpb-icon .icon { width: 10px; height: 10px; }
.rpb-icon.is-insta  { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: #ffffff; }
.rpb-icon.is-green  { background: color-mix(in srgb, #1bba3a 14%, transparent); color: #0e6f31; }
.rpb-icon.is-blue   { background: color-mix(in srgb, #0a63ff 14%, transparent); color: #0a63ff; }
.rpb-icon.is-purple { background: color-mix(in srgb, #6134c9 14%, transparent); color: #6134c9; }

.rpb-info strong {
    display: block;
    font-size: 9px;
    font-weight: var(--fw-semi);
    color: var(--ink);
    line-height: 1.2;
}

.rpb-info span {
    font-size: 7.5px;
    color: var(--ink-3);
    line-height: 1.2;
}

/* Base iPhone Pro Surface Chassis */
.iphone-pro-surface {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition: box-shadow 0.35s ease;
}

/* 5 SURFACE BASE DIMENSIONS IN 3D SPACE (Compact & Proportional) */

/* Center Hero Phone (Dominant Surface) */
.phone-hero-center {
    width: 172px;
    height: 350px;
    margin-left: -86px;
    margin-top: -175px;
    z-index: 10;
}

/* Mid Left (Story Hook) */
.phone-mid-left {
    width: 154px;
    height: 312px;
    margin-left: -77px;
    margin-top: -156px;
    z-index: 8;
}

/* Mid Right (Case Study) */
.phone-mid-right {
    width: 154px;
    height: 312px;
    margin-left: -77px;
    margin-top: -156px;
    z-index: 8;
}

/* Rear Left (4K Motion Studio) */
.phone-rear-left {
    width: 138px;
    height: 280px;
    margin-left: -69px;
    margin-top: -140px;
    z-index: 6;
}

/* Rear Right (Commerce Ledger) */
.phone-rear-right {
    width: 138px;
    height: 280px;
    margin-left: -69px;
    margin-top: -140px;
    z-index: 6;
}

/* Titanium Outer Chassis */
.surface-chassis {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    background: linear-gradient(145deg, #24272e, #101215);
    padding: 5px;
    position: relative;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 0 0 2px rgba(0, 0, 0, 0.65),
        0 16px 40px -8px rgba(0, 8, 30, 0.4);
}

.phone-hero-center .surface-chassis {
    border-radius: 32px;
    padding: 6px;
    background: linear-gradient(145deg, #2a2d34, #121417);
    box-shadow:
        inset 0 0 0 1.2px rgba(255, 255, 255, 0.28),
        inset 0 0 0 2.5px rgba(0, 0, 0, 0.7),
        0 22px 55px -10px rgba(0, 10, 40, 0.55),
        0 0 35px -6px rgba(10, 99, 255, 0.25);
}

/* Hardware Buttons */
.hw-btn {
    position: absolute;
    width: 2.5px;
    background: #3a3e46;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 2;
}

.btn-action   { left: -2.5px; top: 54px; height: 13px; border-radius: 2px 0 0 2px; }
.btn-vol-up   { left: -2.5px; top: 76px; height: 24px; border-radius: 2px 0 0 2px; }
.btn-vol-down { left: -2.5px; top: 106px; height: 24px; border-radius: 2px 0 0 2px; }
.btn-power    { right: -2.5px; top: 82px; height: 38px; border-radius: 0 2px 2px 0; }

/* Inner Bezel */
.surface-bezel {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background: #000000;
    overflow: hidden;
    position: relative;
    border: 1.5px solid #000000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.phone-hero-center .surface-bezel {
    border-radius: 25px;
}

/* Dynamic Island */
.dynamic-island {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 16px;
    border-radius: 9px;
    background: #000000;
    z-index: 10;
    padding: 1.5px 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
}

.phone-hero-center .dynamic-island {
    top: 5px;
    width: 78px;
    height: 18px;
    border-radius: 10px;
}

.di-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.di-camera {
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #1a233a 20%, #050810 80%);
    box-shadow: inset 0 0 2px #0a63ff;
}

.di-live-pill {
    display: flex;
    align-items: center;
    gap: 2.5px;
}

.di-dot {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: #1bba3a;
    box-shadow: 0 0 4px #1bba3a;
    animation: livePulse 2s infinite;
}

.di-text {
    font-family: var(--font-mono);
    font-size: 5.5px;
    color: #ffffff;
    white-space: nowrap;
    font-weight: 500;
}

/* Status Bar */
.surface-status-bar {
    position: absolute;
    top: 6px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: 600;
}

.phone-hero-center .surface-status-bar {
    top: 8px;
    font-size: 7.5px;
}

.sb-bars { display: inline-flex; gap: 1px; align-items: flex-end; height: 5px; }
.sb-bars i { width: 1.2px; background: #ffffff; border-radius: 0.5px; }
.sb-bars i:nth-child(1) { height: 1.5px; }
.sb-bars i:nth-child(2) { height: 2.5px; }
.sb-bars i:nth-child(3) { height: 3.8px; }
.sb-bars i:nth-child(4) { height: 5px; }

.sb-wifi { font-size: 6.5px; font-weight: 700; }
.sb-batt {
    display: inline-block;
    width: 10px;
    height: 5.5px;
    border: 1px solid #ffffff;
    border-radius: 1.5px;
    padding: 0.8px;
    position: relative;
}
.sb-batt::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 1px;
    width: 1px;
    height: 1.8px;
    background: #ffffff;
    border-radius: 0 1px 1px 0;
}
.sb-batt i { display: block; width: 100%; height: 100%; background: #1bba3a; border-radius: 0.5px; }

/* Screen Viewport */
.surface-screen {
    position: absolute;
    inset: 0;
    background: #000000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.surface-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #000000;
}

.screen-glare {
    position: absolute;
    top: 0;
    left: -100%;
    width: 160%;
    height: 100%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0.02) 54%, transparent 60%);
    pointer-events: none;
    z-index: 8;
}

.surface-shadow {
    position: absolute;
    width: 140px;
    height: 16px;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0, 5, 20, 0.4) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    z-index: 1;
}

.surface-shadow.is-hero-shadow {
    width: 165px;
    height: 18px;
    bottom: -16px;
    background: radial-gradient(ellipse, rgba(0, 5, 20, 0.55) 0%, transparent 70%);
    filter: blur(10px);
}

.home-indicator {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
    z-index: 10;
}

/* ==========================================================================
   PHONE 01: HERO REELS PLAYER (Compact Proportions)
   ========================================================================== */

.screen-reels {
    background: radial-gradient(circle at center, #111827 0%, #030712 100%);
}

.reels-header-meta {
    position: absolute;
    top: 25px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 8;
    color: #ffffff;
}

.reels-logo-text {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.reels-trend-pill {
    font-family: var(--font-mono);
    font-size: 6.5px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 1px 4.5px;
    color: #ffffff;
}

.reels-sidebar-actions {
    position: absolute;
    right: 6px;
    bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 8;
}

.reels-action-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: #ffffff;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.rau-icon .icon {
    width: 13px;
    height: 13px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

.rau-icon.is-liked .icon {
    color: #ff2d55;
    fill: #ff2d55;
}

.rau-val {
    font-family: var(--font-mono);
    font-size: 6.5px;
    font-weight: 700;
    color: #ffffff;
}

.reels-spinning-vinyl {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #151515;
    border: 1.4px solid rgba(255, 255, 255, 0.35);
    display: grid;
    place-items: center;
    animation: discSpin 4s linear infinite;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

@keyframes discSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vinyl-art {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    object-fit: cover;
}

.reels-content-footer {
    position: absolute;
    left: 8px;
    right: 36px;
    bottom: 10px;
    z-index: 8;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.reels-creator-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 2px;
}

.reels-av-ring {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #ff2d55;
    padding: 0.8px;
    background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
    flex: none;
}

.reels-av-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.reels-handle {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 7.5px;
    font-weight: 700;
    color: #ffffff;
}

.verif-tag .icon {
    width: 8px;
    height: 8px;
    color: #38bdf8;
    fill: #38bdf8;
}

.reels-follow-btn {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    padding: 0.5px 4px;
    font-size: 7px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}

.reels-caption {
    font-size: 7px;
    line-height: 1.2;
    margin: 0 0 1.5px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.95);
}

.reels-tags {
    font-size: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-mono);
    margin-bottom: 1.5px;
}

.reels-audio-badge {
    display: flex;
    align-items: center;
    gap: 2.5px;
    font-size: 6px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.45);
    padding: 1px 4px;
    border-radius: 6px;
    width: fit-content;
    max-width: 100%;
}

.audio-note .icon {
    width: 7px;
    height: 7px;
}

/* ==========================================================================
   PHONE 02: STORY HOOK VIEW (Mid-Left)
   ========================================================================== */

.story-progress-strip {
    position: absolute;
    top: 25px;
    left: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
    z-index: 8;
}

.sps-bar {
    flex: 1;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
    overflow: hidden;
}

.sps-bar.is-done i   { display: block; width: 100%; height: 100%; background: #ffffff; }
.sps-bar.is-active i { display: block; width: 65%; height: 100%; background: #ffffff; }

.story-profile-head {
    position: absolute;
    top: 30px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 8;
    color: #ffffff;
}

.story-author { display: flex; align-items: center; gap: 3px; }

.story-ring {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
    padding: 1px;
    flex: none;
}

.story-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.story-user-meta { display: flex; align-items: center; gap: 2px; }
.story-name { font-size: 7px; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 2px; }
.story-name .icon { width: 7px; height: 7px; color: #38bdf8; fill: #38bdf8; }
.story-age { font-size: 6px; color: rgba(255, 255, 255, 0.6); font-family: var(--font-mono); }
.story-close .icon { width: 8px; height: 8px; color: rgba(255, 255, 255, 0.8); }

.story-media-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.story-stickers {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-align: center;
}

.sticker-highlight {
    background: linear-gradient(135deg, #ff0844, #ffb199);
    color: #ffffff;
    font-weight: 800;
    font-size: 7px;
    padding: 2.5px 6px;
    border-radius: 4px;
    transform: rotate(-3deg);
    box-shadow: 0 4px 10px rgba(255, 8, 68, 0.4);
}

.sticker-quote {
    background: rgba(18, 22, 32, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 4.5px;
    color: #ffffff;
    font-size: 6.5px;
    line-height: 1.2;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
}

.sticker-verified {
    display: block;
    font-family: var(--font-mono);
    font-size: 6px;
    color: #4ade80;
    font-weight: 700;
    margin-top: 1.5px;
}

.sticker-swipe {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 2.5px 6px;
    font-size: 6.5px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 2px;
}

.sticker-swipe .icon { width: 7px; height: 7px; }

.story-reply-bar {
    position: absolute;
    bottom: 8px;
    left: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 2.5px;
    z-index: 8;
}

.story-input-fake {
    flex: 1;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 6.5px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.35);
}

.story-btns { display: flex; gap: 2px; }
.story-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 1px;
}
.story-btn .icon { width: 10px; height: 10px; }
.story-btn.is-heart .icon { color: #ff2d55; fill: #ff2d55; }

/* ==========================================================================
   PHONE 03: FEED CASE STUDY VIEW (Mid-Right)
   ========================================================================== */

.feed-header-row {
    position: absolute;
    top: 25px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 8;
    color: #ffffff;
}

.feed-poster-info { display: flex; align-items: center; gap: 3px; }

.feed-av-wrap {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
    padding: 1px;
    flex: none;
}

.feed-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.feed-name { font-size: 7px; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 2px; }
.feed-name .icon { width: 7px; height: 7px; color: #38bdf8; fill: #38bdf8; }
.feed-sub { font-size: 6px; color: rgba(255, 255, 255, 0.6); font-family: var(--font-mono); display: block; }
.feed-dots { font-size: 6.5px; color: rgba(255, 255, 255, 0.6); }

.feed-media-viewport {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    height: 145px;
    overflow: hidden;
}

.feed-kpi-badge {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
}

.kpi-card {
    background: rgba(10, 14, 24, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(10, 99, 255, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
}

.kpi-label {
    font-family: var(--font-mono);
    font-size: 5.5px;
    color: #38bdf8;
    text-transform: uppercase;
    display: block;
}

.kpi-card strong {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    display: block;
    margin: 1px 0;
}

.kpi-pill {
    font-size: 6px;
    font-weight: 700;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    padding: 1px 3.5px;
    border-radius: 3px;
}

.feed-counter {
    position: absolute;
    top: 4px;
    right: 5px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    padding: 1px 3.5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 5.5px;
    color: #ffffff;
    z-index: 5;
}

.feed-actions-strip {
    position: absolute;
    top: 195px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 8;
    color: #ffffff;
}

.feed-left-btns { display: flex; gap: 3px; }
.feed-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 1px;
}
.feed-btn .icon { width: 10px; height: 10px; }
.feed-btn.is-heart .icon { color: #ff2d55; fill: #ff2d55; }

.feed-caption-box {
    position: absolute;
    top: 214px;
    left: 6px;
    right: 6px;
    z-index: 8;
    color: #ffffff;
    font-size: 6.5px;
    line-height: 1.18;
}

.feed-likes { font-weight: 600; margin-bottom: 1.5px; }
.feed-text { margin: 0; color: rgba(255, 255, 255, 0.9); }

/* ==========================================================================
   PHONE 04: STUDIO CANVAS VIEW (Rear-Left)
   ========================================================================== */

.screen-studio {
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
}

.studio-meta-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 7px;
    z-index: 6;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.9) 0%, transparent 60%);
    color: #ffffff;
}

.studio-hud-tag {
    font-family: var(--font-mono);
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #38bdf8;
    margin-bottom: 4px;
}

.studio-eq-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 15px;
    margin-bottom: 5px;
}

.studio-eq-bars i {
    flex: 1;
    background: linear-gradient(to top, var(--blue), #38bdf8);
    border-radius: 1px;
    animation: eqBounce 1.2s ease-in-out infinite alternate;
}

.studio-eq-bars i:nth-child(1) { height: 40%; animation-delay: 0.1s; }
.studio-eq-bars i:nth-child(2) { height: 80%; animation-delay: 0.3s; }
.studio-eq-bars i:nth-child(3) { height: 60%; animation-delay: 0.15s; }
.studio-eq-bars i:nth-child(4) { height: 100%; animation-delay: 0.4s; }
.studio-eq-bars i:nth-child(5) { height: 75%; animation-delay: 0.25s; }
.studio-eq-bars i:nth-child(6) { height: 50%; animation-delay: 0.35s; }
.studio-eq-bars i:nth-child(7) { height: 90%; animation-delay: 0.2s; }
.studio-eq-bars i:nth-child(8) { height: 35%; animation-delay: 0.05s; }

@keyframes eqBounce {
    0%   { transform: scaleY(0.4); }
    100% { transform: scaleY(1); }
}

.studio-codec-tag {
    font-family: var(--font-mono);
    font-size: 6px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    width: fit-content;
}

/* ==========================================================================
   PHONE 05: REVENUE LEDGER VIEW (Rear-Right)
   ========================================================================== */

.screen-ledger {
    background: radial-gradient(circle at center, #064e3b 0%, #022c22 100%);
}

.ledger-meta-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 7px;
    z-index: 6;
    background: linear-gradient(to top, rgba(2, 44, 34, 0.92) 0%, transparent 60%);
    color: #ffffff;
}

.ledger-hud-tag {
    font-family: var(--font-mono);
    font-size: 6.5px;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.ledger-metric-box strong {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    display: block;
    color: #ffffff;
    line-height: 1.15;
}

.ledger-metric-box span {
    font-size: 6.5px;
    color: #86efac;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.ledger-status-tag {
    font-family: var(--font-mono);
    font-size: 6px;
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #ffffff;
    padding: 1px 4px;
    border-radius: 3px;
    width: fit-content;
}

/* ==========================================================================
   ZONE 3: FIVE SERVICE STAGE CARDS & CTA BAR (Compact & Equal Proportions)
   ========================================================================== */

.reels-footer-zone {
    position: relative;
    z-index: 25;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    flex: none;
}

.reels-service-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.reels-service-card {
    background: color-mix(in srgb, #ffffff 82%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 3px 10px -3px rgba(0, 15, 50, 0.04);
}

.reels-service-card:hover,
.reels-service-card.is-active {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--blue) 45%, transparent);
    box-shadow: 0 6px 18px -3px color-mix(in srgb, var(--blue) 20%, transparent);
    transform: translateY(-2px);
}

.rsc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rsc-number {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    color: var(--blue);
}

.rsc-category {
    font-family: var(--font-mono);
    font-size: 7.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

.rsc-arrow {
    font-size: 10px;
    color: var(--ink-3);
    transition: transform 0.25s ease, color 0.25s ease;
}

.reels-service-card:hover .rsc-arrow,
.reels-service-card.is-active .rsc-arrow {
    color: var(--blue);
    transform: translateX(2px);
}

.rsc-title {
    font-size: 10.5px;
    font-weight: var(--fw-semi);
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rsc-desc {
    font-size: 8.5px;
    color: var(--ink-2);
    line-height: 1.22;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rsc-footer {
    margin-top: auto;
    padding-top: 0.2rem;
}

.rsc-tag {
    font-family: var(--font-mono);
    font-size: 7.5px;
    font-weight: 600;
    color: #0e6f31;
    background: rgba(14, 111, 49, 0.08);
    padding: 1px 4.5px;
    border-radius: 3px;
    display: inline-block;
}

/* Section CTA Bar */
.reels-cta-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: clamp(0.25rem, 0.6vh, 0.45rem);
}

.reels-cta-bar .btn {
    padding: 0.35rem 0.95rem;
    font-size: 11px;
    border-radius: var(--r-pill);
    font-weight: var(--fw-semi);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS & ADAPTIVE LAYOUT
   ========================================================================== */

@media (max-width: 1150px) {
    .reels-visual-stage {
        max-width: 900px;
        height: 320px;
    }
    .reels-proof-badge {
        display: none !important;
    }
    .reels-service-rail {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
}

@media (max-width: 900px) {
    .reels-engine-section {
        min-height: auto;
        padding: 3.5rem 0;
    }
    .reels-sticky-viewport {
        position: relative;
        height: auto;
        min-height: 0;
        padding: 0;
    }
    .reels-visual-stage {
        height: 330px;
    }
    .phone-rear-left,
    .phone-rear-right {
        display: none !important;
    }
    .phone-mid-left {
        transform: translate3d(-115px, 6px, -35px) rotateY(13deg) scale(0.82) !important;
        opacity: 0.9 !important;
    }
    .phone-mid-right {
        transform: translate3d(115px, 6px, -35px) rotateY(-13deg) scale(0.82) !important;
        opacity: 0.9 !important;
    }
    .phone-hero-center {
        transform: translate3d(0, 0, 45px) scale(0.96) !important;
        opacity: 1 !important;
    }
    .reels-service-rail {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .reels-tech-marker {
        display: none;
    }
}

@media (max-width: 640px) {
    .reels-process-nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 0.2rem;
    }
    .rpn-tab {
        white-space: nowrap;
        flex: none;
        font-size: 10px;
    }
    .phone-mid-left,
    .phone-mid-right {
        display: none !important;
    }
    .phone-hero-center {
        position: relative;
        left: auto;
        margin-left: 0;
        margin-top: 0;
        transform: none !important;
        width: 165px;
        height: 335px;
    }
    .reels-service-rail {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reels-engine-section {
        min-height: auto;
        padding: 4rem 0;
    }
    .reels-sticky-viewport {
        position: relative;
        height: auto;
    }
    .reels-ambient-aura,
    .reels-stage-glow,
    .studio-eq-bars i,
    .reels-spinning-vinyl {
        animation: none !important;
    }
    .iphone-pro-surface {
        transition: none !important;
    }
}

/* ==========================================================================
   THE LAPTOP — a lid that opens as you scroll

   Naveen sent Aceternity's MacbookScroll and asked for the same move with our
   own screen in it. It earns its place on a page that already has five browser
   mocks, a coverflow and three phones by being a different VERB: those fan,
   slide and sit; this one opens.

   THE HINGE IS THE WHOLE TRICK. .mb-lid rotates about its own bottom edge
   inside a perspective container, so the screen swings up out of the base
   exactly as a lid does. Two numbers drive it and js/macbook.js writes both:

       --lid   degrees open. 0 shut, 94 resting just past upright.
       --rig   0 to 1, how far the assembly has come forward.

   THE STILL FORM IS DECLARED HERE, not in the script: --lid and --rig have
   real values on .mb, so with no JavaScript the laptop stands open at 94
   degrees, full size, with the screen readable. The module overrides them.
   That is the same split the deck and the gallery use.

   THE SCREEN IS THE PORTAL, and it is the one surface on this page that is
   allowed to be dark: it is a screen. Everything in it is a shape — the rule
   from partials/deck-mock.php holds here too, and there is more room to break
   it, so it is worth repeating: no figure anywhere, only states.
   ========================================================================== */

.macbook {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 52%, var(--paper) 100%);
}

.mb-sticky { position: relative; z-index: 2; }

.mb-head { text-align: center; max-width: 40rem; margin: 0 auto var(--sp-6); }
.mb-head h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); line-height: var(--lh-tight); }
.mb-head .lead { margin: var(--sp-4) auto 0; max-width: 36rem; }

.mb {
    --lid: 94;
    --rig: 1;
    width: min(820px, 88vw);
    margin: 0 auto;
    perspective: 1400px;
    transform: scale(calc(.78 + var(--rig) * .22)) translateY(calc((1 - var(--rig)) * 40px));
    transform-origin: 50% 30%;
    will-change: transform;
}

/* --- the lid ------------------------------------------------------------
   transform-origin at the bottom edge IS the hinge. Rotating about the centre
   makes the screen rise off the keyboard instead of opening out of it, which
   is the single thing that separates this from a picture of a laptop. */
.mb-lid {
    position: relative;
    transform-origin: 50% 100%;
    transform: rotateX(calc((var(--lid) - 90) * -1deg));
    transform-style: preserve-3d;
}

.mb-shell {
    position: relative;
    border-radius: 16px 16px 4px 4px;
    padding: 12px 12px 16px;
    background: linear-gradient(180deg, #2b3245, #1b2133);
    box-shadow:
        0 30px 70px -30px color-mix(in srgb, var(--ink) 62%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}

/* The camera. Four pixels that do more for the read than the bezel does. */
.mb-cam {
    position: absolute; left: 50%; top: 5px;
    transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: #4b5570;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

.mb-screen {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ink-chapter-2), var(--ink-chapter));
    display: flex;
}

/* --- the base -----------------------------------------------------------
   Foreshortened deliberately: a laptop base seen from in front is mostly
   edge, and drawing it at its true depth makes the whole thing read as a
   plan view. */
.mb-base {
    position: relative;
    height: 22px;
    border-radius: 3px 3px 12px 12px;
    background: linear-gradient(180deg, #3a4258, #232a3d 40%, #171d2c);
    box-shadow: 0 24px 40px -22px color-mix(in srgb, var(--ink) 60%, transparent);
}
/* The notch you put a finger in to lift the lid. */
.mb-base::before {
    content: '';
    position: absolute; left: 50%; top: 0;
    transform: translateX(-50%);
    width: 96px; height: 5px;
    border-radius: 0 0 6px 6px;
    background: color-mix(in srgb, #000 34%, transparent);
}

/* --- what is on the screen ---------------------------------------------- */
.mb-side {
    width: 17%;
    padding: 12px 10px;
    border-right: 1px solid color-mix(in srgb, #fff 7%, transparent);
    display: flex; flex-direction: column; gap: 9px;
}
.mb-logo {
    width: 20px; height: 20px; border-radius: 6px;
    background: linear-gradient(135deg, var(--blue), #5c93ff);
    margin-bottom: 4px;
}
.mb-side i {
    height: 6px; border-radius: 3px;
    background: color-mix(in srgb, #fff 12%, transparent);
}
.mb-side i.is-on { background: color-mix(in srgb, var(--blue) 68%, transparent); }

.mb-main { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mb-bar { display: flex; align-items: center; justify-content: space-between; }
.mb-bar > i { height: 9px; width: 130px; border-radius: 5px; background: color-mix(in srgb, #fff 22%, transparent); }
.mb-bar > u {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #5c93ff);
}

.mb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.mb-card {
    border-radius: 9px;
    padding: 9px;
    background: color-mix(in srgb, #fff 5%, transparent);
    border: 1px solid color-mix(in srgb, #fff 7%, transparent);
    display: flex; flex-direction: column; gap: 6px;
}
.mb-card i { height: 4px; width: 62%; border-radius: 2px; background: color-mix(in srgb, #fff 16%, transparent); }
.mb-card b { height: 9px; width: 78%; border-radius: 4px; background: color-mix(in srgb, #fff 34%, transparent); }
.mb-card s {
    height: 3px; border-radius: 2px; text-decoration: none;
    background: linear-gradient(90deg, var(--sc, var(--blue)), transparent);
}

/* 1.15 against the table's 0.85 below. At flex: 1 with nothing under it the
   chart took most of a 16:10 screen, which is a poster of a bar chart rather
   than a dashboard — a real one is mostly rows. */
.mb-panels { flex: 1.15; display: grid; grid-template-columns: 1.6fr 1fr; gap: 9px; min-height: 0; }
.mb-panel {
    border-radius: 9px;
    padding: 10px;
    background: color-mix(in srgb, #fff 4%, transparent);
    border: 1px solid color-mix(in srgb, #fff 7%, transparent);
    display: flex; flex-direction: column; gap: 8px;
    min-height: 0;
}
.mb-panel > i { height: 5px; width: 44%; border-radius: 3px; background: color-mix(in srgb, #fff 16%, transparent); }
.mb-chart { flex: 1; display: flex; align-items: flex-end; gap: 5px; min-height: 0; }
.mb-chart i {
    flex: 1; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #5c93ff, var(--blue));
}
.mb-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 7px; }
.mb-row { display: flex; align-items: center; gap: 7px; }
.mb-row u { width: 14px; height: 14px; border-radius: 4px; flex: none; background: color-mix(in srgb, #fff 12%, transparent); }
.mb-row u.is-on { background: linear-gradient(135deg, var(--blue), #5c93ff); }
.mb-row i { height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 16%, transparent); }

/* The work list. Four columns of different weights so it reads as a table
   with meaning in it rather than as four equal grey bars. */
.mb-table {
    flex: .85;
    border-radius: 9px;
    padding: 10px;
    background: color-mix(in srgb, #fff 4%, transparent);
    border: 1px solid color-mix(in srgb, #fff 7%, transparent);
    display: flex; flex-direction: column; gap: 8px;
    min-height: 0;
}
.mb-tr {
    display: grid;
    grid-template-columns: 2.2fr 1.2fr 1fr 46px;
    align-items: center;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid color-mix(in srgb, #fff 5%, transparent);
}
.mb-tr:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-tr i { height: 5px; border-radius: 3px; background: color-mix(in srgb, #fff 15%, transparent); }
.mb-tr.is-head i { background: color-mix(in srgb, #fff 26%, transparent); height: 4px; }
.mb-tr b {
    height: 9px; border-radius: var(--r-pill);
    background: color-mix(in srgb, #fff 12%, transparent);
}
.mb-tr b.is-on { background: linear-gradient(115deg, var(--blue), #5c93ff); }

@media (min-width: 961px) {
    .macbook { height: 220vh; padding-block: 0; }
    .mb-sticky {
        position: sticky; top: 0;
        height: 100vh;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
    }
    /* Shut, small and low is where the section STARTS on a wide screen; the
       module opens it. These two lines are the only place the closed state
       exists, and they are inside the same query as the pin, so a viewport
       that never pins never shows a shut laptop it cannot open. */
    .mb { --lid: 0; --rig: 0; }
}

@media (max-width: 960px) {
    .macbook { padding-block: var(--section-y); }
    .mb { width: 92vw; }
    .mb-side { width: 22%; }
    .mb-cards { grid-template-columns: 1fr 1fr; }
    .mb-panels { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    /* Open, full size, standing still. The laptop was never the message; what
       is on the screen is. */
    .macbook { height: auto; padding-block: var(--section-y); }
    .mb-sticky { position: static; height: auto; }
    .mb { --lid: 94; --rig: 1; }
}

/* ==========================================================================
   03c — WHAT WE BUILD: FIVE KINDS OF BUILD, ONE CONNECTED TEAM
/* ==========================================================================
   03 — THE BUILD SYSTEM: FIVE CAPABILITIES, ONE LIVING SYSTEM
   Editorial Art Direction × Interactive Product Experience × Cinematic Motion
   ========================================================================== */

.build-system-section {
    position: relative;
    min-height: 260vh;
    background: #fbfdff;
    overflow: clip;
    isolation: isolate;
}

/* Sticky Viewport Container during Scroll Assembly */
.build-system-viewport {
    position: sticky;
    top: 0;
    height: 100svh;
    max-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: calc(var(--header-h) + 0.4rem) 1.2rem;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

/* Atmospheric Generative Background */
.bs-bg-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bs-bg-glow {
    position: absolute;
    width: clamp(540px, 55vw, 900px);
    height: clamp(540px, 55vw, 900px);
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--blue, #0a63ff) 9%, transparent) 0%,
        color-mix(in srgb, #0230c6 3%, transparent) 45%,
        transparent 70%);
    filter: blur(75px);
    will-change: transform;
}

.bs-bg-glow-secondary {
    position: absolute;
    width: 500px;
    height: 500px;
    right: 5%;
    top: 25%;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, #7c3aed 5%, transparent) 0%,
        transparent 65%);
    filter: blur(65px);
}

.bs-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--blue) 5%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--blue) 5%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    opacity: 0.55;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, #000 30%, transparent 80%);
}

.bs-bg-grain {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.bs-bg-floor {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -5%;
    height: 55%;
    pointer-events: none;
    perspective: 480px;
    perspective-origin: 50% 0%;
    mask-image: linear-gradient(to top, #000 4%, transparent 80%);
    -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 80%);
}

.bs-bg-floor-plane {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    transform: rotateX(80deg);
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--blue) 18%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--blue) 18%, transparent) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: engine-floor-run 10s linear infinite;
}

/* Main Container */
.bs-main-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   ZONE 1: EDITORIAL HEADER
   ========================================================================== */

.bs-header-zone {
    text-align: center;
    max-width: 50rem;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    flex: none;
}

.bs-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.32rem 0.85rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, #ffffff 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
    box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--blue) 14%, transparent);
    margin-bottom: 0.35rem;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    width: fit-content;
}

.bs-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px color-mix(in srgb, #10b981 30%, transparent);
    animation: live-pulse 2s infinite;
}

.bs-eyebrow-text {
    font-weight: 700;
    color: #050f33;
    font-size: 11px;
}

.bs-headline {
    font-family: var(--font-display);
    font-size: clamp(24px, 1.4rem + 1.8vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: #050f33;
    margin: 0;
    text-align: center;
}

.bs-h-line {
    display: block;
    overflow: hidden;
}

.bs-h-inner {
    display: block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
}

.bs-h-accent {
    color: #0a63ff;
    display: inline-block;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .bs-h-accent {
        background-image: linear-gradient(
            108deg,
            #0a63ff 0%,
            #4b8bff 35%,
            #0230c6 70%,
            #0a63ff 100%
        );
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: focus-gradient-sweep 8s ease-in-out infinite;
    }
}

.bs-subhead {
    max-width: 580px;
    margin: 0.35rem auto 0 auto;
    font-size: clamp(12px, 0.9vw, 13.5px);
    line-height: 1.4;
    color: #3a4468;
    text-align: center;
}

/* ==========================================================================
   ZONE 2: IMMERSIVE BUILD SYSTEM CANVAS (75% WIDTH)
   ========================================================================== */

.bs-canvas-stage {
    position: relative;
    width: 100%;
    perspective: 1600px;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    z-index: 15;
    padding-block: 0.4rem;
}

.bs-canvas {
    position: relative;
    width: clamp(680px, 76vw, 980px);
    height: clamp(320px, 46vh, 430px);
    border-radius: 20px;
    background: color-mix(in srgb, #ffffff 92%, transparent);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid color-mix(in srgb, #ffffff 96%, transparent);
    box-shadow:
        0 35px 80px -20px color-mix(in srgb, #050f33 16%, transparent),
        0 0 0 1px color-mix(in srgb, var(--blue, #0a63ff) 12%, transparent);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease;
}

.bs-canvas.is-synchronized {
    box-shadow:
        0 40px 95px -20px color-mix(in srgb, #0a63ff 32%, transparent),
        0 0 0 2px #0a63ff;
}

/* Chrome Header Bar */
.bs-canvas-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.2rem;
    background: color-mix(in srgb, var(--paper-2, #f5f8fc) 75%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--line, #e2e8f0) 80%, transparent);
    flex: none;
}

.bs-chrome-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.cd-red   { background: #ff5f56; }
.cd-amber { background: #ffbd2e; }
.cd-green { background: #27c93f; }

.bs-chrome-pill {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: #3a4468;
    background: color-mix(in srgb, #ffffff 80%, transparent);
    padding: 2px 10px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    letter-spacing: 0.04em;
}

.bs-chrome-status {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cs-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: live-pulse 2s infinite;
}

.cs-tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: #0230c6;
    letter-spacing: 0.04em;
}

/* Canvas Body & 5 Living Layers */
.bs-canvas-body {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bs-layer {
    position: absolute;
    inset: 0;
    padding: 1.1rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    pointer-events: none;
    transition:
        opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.42s ease;
}

.bs-layer.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.bs-layer.is-base {
    opacity: 0.28;
    filter: blur(1px) grayscale(25%);
}

.bs-layer.is-active {
    opacity: 1;
    filter: none;
    z-index: 5;
}

.bs-layer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    flex: none;
}

.bs-layer-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    color: #050f33;
    letter-spacing: 0.05em;
}

.bs-layer-tagline {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    color: #0230c6;
}

/* --- LAYER 01: WEB --- */
.bs-web-viewport {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.6rem;
}

.bw-nav-wire {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    background: color-mix(in srgb, #ffffff 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.bwn-brand {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #050f33;
}

.bwn-links {
    display: flex;
    gap: 5px;
}
.bwn-links i {
    width: 18px;
    height: 4px;
    border-radius: 2px;
    background: #94a3b8;
    display: inline-block;
}

.bw-content-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.75rem;
    flex: 1;
}

.bw-flagship-card {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #edf4ff 100%);
    border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.bfc-ambient {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 99, 255, 0.18) 0%, transparent 70%);
}

.bfc-eyebrow {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: #0a63ff;
    letter-spacing: 0.06em;
}

.bfc-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #050f33;
    margin: 0.2rem 0;
}

.bfc-vitals-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bvb-item {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: #3a4468;
}

.bvb-item strong {
    color: #0a63ff;
    font-weight: 700;
}

.bw-sub-blocks {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bw-block {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bb-code {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    color: #0a63ff;
}

.bb-lines i {
    width: 60%;
    height: 3.5px;
    border-radius: 2px;
    background: #cbd5e1;
    display: block;
    margin-top: 3px;
}
.bb-lines i:last-child { width: 40%; }

.bb-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: #4b5563;
}

.bb-swatches {
    display: flex;
    gap: 4px;
}
.bb-swatches span {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}
.bb-swatches .s1 { background: #0a63ff; }
.bb-swatches .s2 { background: #050f33; }
.bb-swatches .s3 { background: #10b981; }

/* --- LAYER 02: SECURITY --- */
.bs-security-shield-zone {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0.6rem;
}

.bss-perimeter-shield {
    position: absolute;
    inset: 4px;
    border-radius: 16px;
    border: 1.5px solid color-mix(in srgb, #10b981 40%, transparent);
    background: color-mix(in srgb, #10b981 4%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, #10b981 14%, transparent);
    pointer-events: none;
    overflow: hidden;
}

.bss-shield-border {
    position: absolute;
    inset: 0;
    border: 1px dashed color-mix(in srgb, #10b981 30%, transparent);
    border-radius: 15px;
}

.bss-sweep-beam {
    position: absolute;
    top: 0;
    left: -50%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.25), transparent);
    animation: sweepRun 3.5s ease-in-out infinite;
}

@keyframes sweepRun {
    0%   { left: -50%; }
    100% { left: 120%; }
}

.bss-badges-cluster {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.bss-shield-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid color-mix(in srgb, #10b981 45%, transparent);
    border-radius: 14px;
    padding: 0.8rem 1.4rem;
    box-shadow: 0 12px 30px -6px rgba(16, 185, 129, 0.18);
}

.sb-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, #10b981 16%, transparent);
    color: #10b981;
    display: grid;
    place-items: center;
}
.sb-icon .icon { width: 1.25rem; height: 1.25rem; }

.sb-info {
    display: flex;
    flex-direction: column;
}
.sb-info strong {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: #050f33;
}
.sb-info span {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #0a6e4d;
    font-weight: 600;
}

.bss-crypto-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.bc-chip {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    color: #3a4468;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    border-radius: var(--r-pill);
    padding: 3px 10px;
}

/* --- LAYER 03: MARKETING --- */
.bs-marketing-signal-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.6rem;
}

.bms-chart-card {
    position: relative;
    width: 100%;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, #8b5cf6 30%, transparent);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    box-shadow: 0 14px 35px -8px rgba(139, 92, 246, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bms-curve-svg {
    width: 100%;
    height: 110px;
    overflow: visible;
}

.bms-node-dot {
    fill: #ffffff;
    stroke: #8b5cf6;
    stroke-width: 2.5px;
}
.bms-node-dot.active-dot {
    fill: #06b6d4;
    stroke: #ffffff;
    stroke-width: 2px;
    filter: drop-shadow(0 0 6px #06b6d4);
}

.bms-metric-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6rem;
    padding-top: 0.4rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.bmb-val {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: #5b21b6;
}

.bmb-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: #4b5563;
}

/* --- LAYER 04: CONTENT --- */
.bs-content-media-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.6rem;
}

.bcs-plate-stack {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0.85rem;
    width: 100%;
}

.bcs-plate {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    box-shadow: 0 12px 30px -6px rgba(245, 158, 11, 0.12);
}

.bcs-plate-story {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cps-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.cps-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: #b45309;
    letter-spacing: 0.05em;
}

.cps-waveform {
    display: flex;
    align-items: center;
    gap: 2.5px;
}
.cps-waveform i {
    width: 2.5px;
    border-radius: 1px;
    background: #f59e0b;
    display: inline-block;
}
.cps-waveform i:nth-child(1) { height: 6px; }
.cps-waveform i:nth-child(2) { height: 12px; }
.cps-waveform i:nth-child(3) { height: 18px; }
.cps-waveform i:nth-child(4) { height: 8px; }
.cps-waveform i:nth-child(5) { height: 14px; }
.cps-waveform i:nth-child(6) { height: 10px; }
.cps-waveform i:nth-child(7) { height: 16px; }
.cps-waveform i:nth-child(8) { height: 7px; }

.cps-headline {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: #050f33;
    line-height: 1.35;
    margin: 0;
}

.bcs-plate-video {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050f33;
    border-color: #050f33;
}

.cpv-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cpv-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    color: #050f33;
    display: grid;
    place-items: center;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}
.cpv-icon .icon { width: 1.1rem; height: 1.1rem; margin-left: 2px; }

.cpv-res {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #94a3b8;
}

/* --- LAYER 05: COMMERCE --- */
.bs-commerce-transaction-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.6rem;
}

.bcom-card {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, #06b6d4 35%, transparent);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    box-shadow: 0 15px 40px -10px rgba(6, 182, 212, 0.16);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.bcom-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bch-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, #06b6d4 15%, transparent);
    color: #095c73;
    display: grid;
    place-items: center;
}
.bch-icon .icon { width: 1.1rem; height: 1.1rem; }

.bch-val {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: #095c73;
}

.bch-pill {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    color: #0a6e4d;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 8px;
    border-radius: var(--r-pill);
}

.bcom-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--paper-2);
    overflow: hidden;
}

.bcom-progress-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #0a63ff, #06b6d4, #10b981);
    border-radius: 3px;
}

.bcom-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
}

.bfm-check {
    color: #0a6e4d;
    font-weight: 600;
}

.bfm-time {
    color: #4b5563;
}

/* --- SYNCHRONIZED CLIMAX LAYER --- */
.bs-layer-compound {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    padding: 1.5rem;
}

.bs-layer-compound.is-active {
    opacity: 1;
    pointer-events: auto;
}

.bsc-synchronized-wrap {
    position: relative;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.bsc-burst-beam {
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle at 50% 50%, rgba(10, 99, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
    animation: live-pulse 2.5s infinite;
}

.bsc-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0a63ff;
}

.bsc-payoff-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #050f33;
    margin: 0;
}

.bsc-payoff-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: #3a4468;
    margin: 0;
}

.bsc-payoff-btn {
    margin-top: 0.5rem;
    padding: 0.75rem 1.6rem;
    font-size: 13.5px;
}

/* ==========================================================================
   ZONE 3: CAPABILITY NAVIGATION RAIL
   ========================================================================== */

.build-system-rail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto;
    padding: 0.28rem 0.55rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, #ffffff 90%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    box-shadow: 0 6px 20px -4px rgba(5, 15, 51, 0.06);
    flex: none;
    z-index: 10;
}

.bs-rail-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.32rem 0.85rem;
    border-radius: var(--r-pill);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.25s ease;
}

.bs-ri-idx {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    color: #4b5563;
    letter-spacing: 0.04em;
}

.bs-ri-name {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: #3a4468;
    letter-spacing: 0.02em;
}

.bs-ri-bar {
    width: 0%;
    height: 2px;
    border-radius: 1px;
    background: #0a63ff;
    transition: width 0.3s ease;
    margin-top: 2px;
}

.bs-rail-item:hover {
    background: rgba(255, 255, 255, 0.7);
}

.bs-rail-item.is-active {
    background: #ffffff;
    box-shadow: 0 4px 14px -3px rgba(10, 99, 255, 0.22);
}

.bs-rail-item.is-active .bs-ri-idx {
    color: #0a63ff;
}

.bs-rail-item.is-active .bs-ri-name {
    color: #050f33;
    font-weight: 700;
}

.bs-rail-item.is-active .bs-ri-bar {
    width: 80%;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1024px) {
    .bs-canvas {
        width: 88vw;
    }
}

@media (max-width: 768px) {
    .build-system-section {
        min-height: auto;
        padding-block: 4rem 3rem;
    }

    .build-system-viewport {
        position: relative;
        height: auto;
        max-height: none;
        padding-block: 0;
        gap: 1.8rem;
    }

    .bs-canvas-stage {
        perspective: none;
        padding: 0;
    }

    .bs-canvas {
        width: 100%;
        height: auto;
        min-height: 400px;
        transform: none !important;
    }

    .bs-layer {
        position: relative;
        inset: auto;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        margin-bottom: 1.5rem;
    }

    .bw-content-grid,
    .bcs-plate-stack {
        grid-template-columns: 1fr;
    }

    .build-system-rail {
        flex-wrap: wrap;
        border-radius: 14px;
        padding: 0.4rem;
    }

    .bs-layer-compound {
        position: relative;
        opacity: 1 !important;
        margin-top: 1rem;
        border-radius: 14px;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .bs-bg-floor-plane,
    .bs-eyebrow-dot,
    .cs-live-dot,
    .bss-sweep-beam,
    .bsc-burst-beam {
        animation: none !important;
    }

    .bs-h-inner {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .bs-canvas,
    .bs-layer {
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   02 — THE DIFFERENCE (MANIFESTO SCENE)
   Apple editorial × high-end digital systems studio × generative systems.
   ========================================================================== */

.manifesto-scene {
    position: relative;
    width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: clip;
    isolation: isolate;
    box-sizing: border-box;
    padding-block: clamp(var(--sp-7), 6.5vw, var(--sp-9));
    background-color: var(--paper);
    /* Layered cool white / subtle blue environment */
    background-image:
        radial-gradient(ellipse 90% 70% at 50% 50%, #ffffff 0%, color-mix(in srgb, var(--paper) 85%, #ffffff) 50%, var(--paper) 100%);
    contain: layout style paint;
}

/* Background Generative Container */
.manifesto-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Layer A — Atmospheric Glow */
.manifesto-ambient {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.manifesto-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.manifesto-glow.glow-tr {
    width: clamp(380px, 55vw, 820px);
    height: clamp(380px, 55vw, 820px);
    right: -10%;
    top: -15%;
    background: radial-gradient(circle, color-mix(in srgb, #4b8bff 22%, transparent) 0%, transparent 68%);
    filter: blur(75px);
    animation: m-glow-tr 24s ease-in-out infinite alternate;
}

.manifesto-glow.glow-bl {
    width: clamp(360px, 50vw, 760px);
    height: clamp(360px, 50vw, 760px);
    left: -12%;
    bottom: -15%;
    background: radial-gradient(circle, color-mix(in srgb, var(--blue-deep) 16%, transparent) 0%, transparent 70%);
    filter: blur(85px);
    animation: m-glow-bl 28s ease-in-out infinite alternate;
}

.manifesto-glow.glow-center {
    width: clamp(320px, 45vw, 680px);
    height: clamp(260px, 35vw, 520px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, color-mix(in srgb, var(--blue) 12%, transparent) 0%, transparent 66%);
    filter: blur(60px);
    animation: m-glow-center 20s ease-in-out infinite alternate;
}

@keyframes m-glow-tr {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-40px, 35px, 0) scale(1.08); }
    100% { transform: translate3d(25px, -20px, 0) scale(0.94); }
}

@keyframes m-glow-bl {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(35px, -30px, 0) scale(1.06); }
    100% { transform: translate3d(-20px, 25px, 0) scale(0.95); }
}

@keyframes m-glow-center {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50%  { transform: translate(-50%, -46%) scale(1.12); opacity: 1; }
    100% { transform: translate(-50%, -54%) scale(0.92); opacity: 0.75; }
}

/* Layer B — Micro Technical Grid */
.manifesto-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--blue) 8%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--blue) 8%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center center;
    opacity: 0.75;
    mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, #000 20%, transparent 75%);
    animation: m-grid-drift 35s linear infinite;
}

@keyframes m-grid-drift {
    from { background-position: 0 0; }
    to   { background-position: 56px 56px; }
}

/* Layer C — System Topology Visualization */
.manifesto-system {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    opacity: 0.85;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.manifesto-topo-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.topo-node {
    fill: color-mix(in srgb, var(--blue) 60%, transparent);
    transition: transform 0.4s ease;
}

.topo-node.node-primary {
    fill: var(--blue);
}

.topo-node.node-pulse {
    animation: m-node-pulse 4s ease-in-out infinite alternate;
}

@keyframes m-node-pulse {
    0%   { r: 3.5px; opacity: 0.6; }
    100% { r: 4.8px; opacity: 1; }
}

.topo-packet {
    offset-rotate: auto;
}

.packet-1 {
    offset-path: path("M120,340 C240,280 280,210 400,210 C520,210 560,390 680,390 C800,390 840,230 960,230 C1040,230 1080,300 1140,320");
    animation: m-packet-run-1 14s linear infinite;
}

.packet-2 {
    offset-path: path("M180,180 C300,180 340,360 460,360 C580,360 620,180 740,180 C860,180 900,370 1020,370 L1100,380");
    animation: m-packet-run-2 18s linear infinite;
}

.packet-3 {
    offset-path: path("M220,440 L380,440 C480,440 520,260 600,260 C680,260 720,450 820,450 L980,450");
    animation: m-packet-run-3 16s linear infinite;
}

@keyframes m-packet-run-1 {
    0%   { offset-distance: 0%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

@keyframes m-packet-run-2 {
    0%   { offset-distance: 0%; opacity: 0; }
    12%  { opacity: 0.9; }
    88%  { opacity: 0.9; }
    100% { offset-distance: 100%; opacity: 0; }
}

@keyframes m-packet-run-3 {
    0%   { offset-distance: 0%; opacity: 0; }
    15%  { opacity: 0.85; }
    85%  { opacity: 0.85; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* Layer D — Micro Particles */
.manifesto-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    will-change: transform;
}

.m-particle {
    position: absolute;
    left: var(--px);
    top: var(--py);
    width: var(--ps);
    height: var(--ps);
    border-radius: 50%;
    background: var(--blue);
    opacity: 0.22;
    filter: blur(0.6px);
    animation: m-particle-float var(--pd, 22s) ease-in-out infinite alternate;
}

@keyframes m-particle-float {
    0%   { transform: translate3d(0, 0, 0); opacity: 0.15; }
    50%  { transform: translate3d(14px, -18px, 0); opacity: 0.32; }
    100% { transform: translate3d(-10px, 16px, 0); opacity: 0.18; }
}

/* Layer E — Fine Grain */
.manifesto-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0.038;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

/* Technical Corner Annotations */
.manifesto-coords {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tr-meta);
    text-transform: uppercase;
    color: var(--ink-3);
    z-index: 6;
    pointer-events: none;
    opacity: 0.65;
    transition: opacity var(--dur-3) var(--ease);
}

.manifesto-coords.top-left {
    top: clamp(var(--sp-3), 2.5vh, var(--sp-5));
    left: clamp(var(--sp-4), 4vw, var(--sp-8));
}

.manifesto-coords.top-right {
    top: clamp(var(--sp-3), 2.5vh, var(--sp-5));
    right: clamp(var(--sp-4), 4vw, var(--sp-8));
}

.coord-crosshair {
    color: var(--accent-fg);
    font-weight: 600;
}

/* Container & Editorial Typography */
.manifesto-container {
    position: relative;
    z-index: 6;
    max-width: 1040px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: var(--sp-4);
}

/* Eyebrow */
.manifesto-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-bottom: clamp(var(--sp-3), 2.5vh, var(--sp-5));
}

.eyebrow-accent-line {
    width: 28px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--blue-ink));
    border-radius: 1px;
    transform-origin: right center;
    transition: transform 0.8s var(--ease-out);
}

.manifesto-meta {
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 0.68rem + 0.18vw, 0.8125rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue-ink);
    font-weight: var(--fw-bold);
    margin: 0;
    line-height: 1;
}

.eyebrow-node {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 8px color-mix(in srgb, var(--blue) 80%, transparent);
}

/* Main Editorial Headline */
.manifesto-headline {
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 1.15rem + 4.8vw, 5.0rem);
    line-height: 1.02;
    letter-spacing: var(--tr-display);
    font-weight: var(--fw-bold);
    color: var(--ink);
    margin: 0 0 clamp(var(--sp-4), 3vh, var(--sp-6)) 0;
    max-width: 19ch;
    text-align: center;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.headline-row {
    display: block;
}

.m-word {
    display: inline-block;
    vertical-align: baseline;
    opacity: 0.04;
    transform: translate3d(0, 32px, 0) scale(0.96);
    filter: blur(12px);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--w-idx, 0) * 125ms);
    will-change: opacity, transform, filter;
}

.is-revealed .m-word {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* Word Emphasis on "digital systems" */
.m-emp {
    position: relative;
    display: inline-block;
}

.m-emp-inner {
    position: relative;
    display: inline-block;
    transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.is-revealed .m-emp-inner {
    filter: drop-shadow(0 0 24px color-mix(in srgb, var(--blue) 45%, transparent));
}

.m-emp-gradient {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--ink) 0%,
        var(--blue-ink) 18%,
        #2563eb 40%,
        #3b82f6 52%,
        #60a5fa 68%,
        var(--blue-ink) 85%,
        var(--ink) 100%
    );
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.25s ease-out;
}

@keyframes m-emp-sweep {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Luminous light beam sweeping across "digital systems" */
.m-emp-beam {
    position: absolute;
    inset: -10% -20%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, #60a5fa 40%, transparent) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    mix-blend-mode: overlay;
    border-radius: 4px;
}

.is-revealed .m-emp-beam {
    animation: m-beam-pass 4.5s ease-in-out infinite 0.4s;
}

@keyframes m-beam-pass {
    0%   { background-position: -100% 0; opacity: 0; }
    20%  { opacity: 0.75; }
    60%  { opacity: 0.75; }
    80%, 100% { background-position: 200% 0; opacity: 0; }
}

/* Supporting Paragraph */
.manifesto-sub {
    max-width: 640px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 0.96rem + 0.38vw, 1.22rem);
    line-height: var(--lh-body);
    color: var(--ink-2);
    text-align: center;
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    filter: blur(8px);
    transition:
        opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s,
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s,
        filter 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
    will-change: opacity, transform, filter;
}

.is-revealed .manifesto-sub {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* Bottom Technical Status Bar */
.manifesto-status-bar {
    position: relative;
    margin-top: clamp(var(--sp-4), 3vh, var(--sp-6));
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    pointer-events: none;
    opacity: 0.68;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--tr-meta);
    color: var(--ink-3);
    text-transform: uppercase;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 8px var(--blue);
    animation: status-dot-blink 3s ease-in-out infinite alternate;
}

@keyframes status-dot-blink {
    0%   { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

.status-meter {
    width: 140px;
    height: 2px;
    background: color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 1px;
    overflow: hidden;
}

.status-meter-bar {
    display: block;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, var(--blue), #5c93ff);
    border-radius: 1px;
    transition: width 0.3s ease-out;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
    .manifesto-scene {
        padding-block: clamp(var(--sp-6), 8vh, var(--sp-8));
    }
    .manifesto-coords {
        display: none;
    }
    .manifesto-headline {
        font-size: clamp(2.2rem, 1rem + 6.2vw, 4.2rem);
        max-width: 20ch;
    }
    .manifesto-status-bar {
        margin-top: var(--sp-5);
    }
}

@media (max-width: 640px) {
    .manifesto-scene {
        padding-block: var(--sp-6);
    }
    .manifesto-grid {
        background-size: 40px 40px;
        opacity: 0.5;
    }
    .manifesto-headline {
        font-size: clamp(1.95rem, 8.5vw, 3.0rem);
        line-height: 1.06;
    }
    .headline-row {
        display: inline;
    }
    .manifesto-sub {
        font-size: var(--fs-base);
        line-height: 1.55;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .manifesto-ambient,
    .manifesto-glow,
    .manifesto-grid,
    .manifesto-system,
    .manifesto-particles,
    .m-particle,
    .m-word,
    .m-emp-gradient,
    .m-emp-beam,
    .manifesto-sub,
    .status-dot,
    .status-meter-bar {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
    .manifesto-sub {
        opacity: 1 !important;
    }
    .m-word {
        opacity: 1 !important;
    }
}

/* ==========================================================================
   03 — THE GROWTH FIELD
   Editorial × Architectural Landscape × Cinematic Motion
   BUILD → PROTECT → CREATE → CONVERT → COMPOUND
   ========================================================================== */

/* ==========================================================================
   SECTION BASE
   ========================================================================== */

.growth-field-section {
    position: relative;
    min-height: clamp(110vh, 125vh, 135vh);
    background: var(--paper, #F7F9FD);
    overflow: clip;
    isolation: isolate;
}

/* Sticky Viewport — remains pinned while user scrolls through the section */
.gf-sticky-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 600px;
    max-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

/* ==========================================================================
   LAYER A: UNIFIED ATMOSPHERIC ENVIRONMENT
   ========================================================================== */

.gf-ambient-env {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Soft large light field — blue-white, no neon */
.gf-radial-glow {
    position: absolute;
    width: 130%;
    height: 130%;
    top: -15%;
    left: -15%;
    background:
        radial-gradient(ellipse 65% 55% at 28% 38%, rgba(10, 99, 255, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 78% 65%, rgba(124, 58, 237, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,255,255,0.7) 0%, transparent 80%);
    pointer-events: none;
}

/* Volumetric depth aura behind the slab */
.gf-volumetric-aura {
    position: absolute;
    width: 80%;
    height: 60%;
    top: 20%;
    left: 10%;
    background: radial-gradient(ellipse at 50% 50%, rgba(10, 99, 255, 0.05) 0%, transparent 70%);
    filter: blur(60px);
    transform: translateZ(0);
}

/* Fine architectural grid — fades to edges, no blueprint look */
.gf-architectural-grid {
    position: absolute;
    inset: 0;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--ink, #0a0f1e) 3%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--ink, #0a0f1e) 3%, transparent) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
    opacity: 0.55;
}

/* Horizontal light sweep — barely visible, activated on scroll via JS */
.gf-light-sweep {
    position: absolute;
    top: 42%;
    left: -30%;
    width: 160%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(10, 99, 255, 0.18) 40%, rgba(255,255,255, 0.35) 50%, rgba(10, 99, 255, 0.18) 60%, transparent 100%);
    opacity: 0;
    filter: blur(1px);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Micro film grain — opacity 0.02, felt but not seen */
.gf-micro-grain {
    position: absolute;
    inset: 0;
    opacity: 0.022;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    pointer-events: none;
}

/* Kinetic Oversized Background Typography (0.02 opacity) */
.gf-kinetic-typography {
    position: absolute;
    top: 52%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 5rem);
    font-family: var(--font-display, 'Inter', sans-serif);
    font-size: clamp(60px, 10vw, 140px);
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink, #0a0f1e);
    opacity: 0.022;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    will-change: transform;
}

.gf-kw { display: inline-block; }
.gf-kw-sep { opacity: 0.4; font-weight: 300; }

/* Micro drift particles — only 4, slow, no sci-fi */
.gf-particles-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gfp-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--blue, #0a63ff);
    opacity: 0.3;
    animation: gfDotFloat 14s ease-in-out infinite alternate;
}

.gfp-dot.p1 { top: 18%; left: 22%; animation-duration: 11s; }
.gfp-dot.p2 { top: 70%; right: 20%; animation-duration: 16s; }
.gfp-dot.p3 { bottom: 22%; left: 38%; animation-duration: 13s; animation-delay: 2s; }
.gfp-dot.p4 { top: 38%; right: 38%; animation-duration: 18s; animation-delay: 4s; }

@keyframes gfDotFloat {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.2; }
    50%  { transform: translate(8px, -12px) scale(1.4); opacity: 0.45; }
    100% { transform: translate(-6px, 8px) scale(0.8); opacity: 0.2; }
}

/* ==========================================================================
   STAGE CONTAINER (max 1400px, same grid as rest of site)
   ========================================================================== */

.gf-stage-container {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: clamp(1.5rem, 3vh, 2.5rem);
    max-width: 1400px;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    box-sizing: border-box;
}

/* ==========================================================================
   LAYER A: EDITORIAL HEADER
   ========================================================================== */

.gf-header-zone {
    flex: none;
    max-width: 860px;
}

/* Eyebrow line */
.gf-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.gf-eyebrow-bar {
    display: inline-block;
    width: 18px;
    height: 1.5px;
    background: var(--blue, #0a63ff);
    border-radius: 1px;
    flex: none;
}

.gf-eyebrow-text {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: clamp(8px, 0.62vw, 10px);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink-3, #8a9ab8);
    text-transform: uppercase;
}

/* LARGE CONFIDENT HEADLINE */
.gf-headline {
    font-family: var(--font-display, 'Inter', sans-serif);
    font-size: clamp(38px, 5.5vw, 84px);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -0.032em;
    color: var(--ink, #0a0f1e);
    margin: 0 0 0.6rem 0;
}

.gfh-line { display: block; }

.gfh-word {
    display: inline-block;
    will-change: transform, opacity;
}

/* Only "compound." in blue */
.gfh-accent { position: relative; display: inline-block; }

.gfh-accent-text {
    color: var(--blue, #0a63ff);
    position: relative;
}

/* Single subtle light sweep on "compound." — one sweep every 7 seconds */
.gfh-accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(10, 99, 255, 0.25) 50%, transparent 100%);
    transform: translateX(-110%);
    animation: gfAccentSweep 7s cubic-bezier(0.4, 0, 0.2, 1) 2.5s infinite;
    border-radius: 2px;
    pointer-events: none;
}

@keyframes gfAccentSweep {
    0%, 70%  { transform: translateX(-110%); opacity: 0; }
    72%      { opacity: 1; }
    85%      { transform: translateX(110%); opacity: 0; }
    100%     { transform: translateX(110%); opacity: 0; }
}

/* Supporting copy */
.gf-subhead {
    font-size: clamp(13px, 1vw, 15.5px);
    color: var(--ink-2, #4b5875);
    line-height: 1.45;
    max-width: 520px;
    margin: 0;
    font-weight: 400;
}

/* ==========================================================================
   LAYER B: THE GROWTH SLAB (Dominant Visual — One Architectural Object)
   ========================================================================== */

.gf-visual-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    padding-block: 0.5rem;
}

.gf-growth-slab {
    position: relative;
    width: 100%;
    max-width: 1300px;
    height: clamp(300px, 46vh, 440px);
    perspective: 1600px;
    transform-style: preserve-3d;
}

/* Physical ceramic-white bezel + frosted glass */
.gf-slab-chassis {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(241,246,255,0.85) 100%);
    border: 1px solid rgba(10, 99, 255, 0.12);
    box-shadow:
        0 2px 0 0 rgba(255,255,255,0.9) inset,
        0 40px 80px -20px rgba(10, 20, 60, 0.10),
        0 0 0 1px rgba(10, 20, 60, 0.04);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

/* Perimeter security boundary — animated via JS on scroll */
.gf-perimeter-boundary {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 1.5px solid transparent;
    transition: border-color 0.8s ease, box-shadow 0.8s ease;
    pointer-events: none;
    z-index: 30;
}

.gf-perimeter-boundary.is-active {
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: 0 0 20px -4px rgba(13, 148, 136, 0.15) inset;
}

/* Inner cavity where everything lives */
.gf-slab-cavity {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Topographic SVG Paths */
.gf-topo-paths {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.gf-topo-line {
    fill: none;
    stroke: color-mix(in srgb, var(--ink, #0a0f1e) 5%, transparent);
    stroke-width: 1px;
}

.gf-signal-line {
    fill: none;
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-dasharray: 6 4;
    opacity: 0;
    transition: opacity 0.8s ease, stroke-dashoffset 0.8s ease;
    stroke-dashoffset: 200;
}

.gf-signal-line.is-active {
    opacity: 0.65;
    stroke-dashoffset: 0;
}

/* Master energy pulse */
.gf-master-pulse {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(10, 99, 255, 0.14) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 25;
    transition: opacity 0.5s ease;
}

.gf-master-pulse.is-pulsing {
    animation: gfMasterPulse 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gfMasterPulse {
    0%   { opacity: 0.8; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.1); }
}

/* ==========================================================================
   FIVE INTEGRATED CAPABILITY ZONES
   ========================================================================== */

.gf-zone {
    position: absolute;
    border-radius: 10px;
    border: 1px solid rgba(10, 20, 60, 0.06);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    will-change: transform, opacity;
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        filter 0.4s ease;
    z-index: 10;
}

.gf-zone.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Zone hover — deepen, reveal label, dim others */
.gf-zone:hover {
    border-color: rgba(10, 99, 255, 0.22);
    box-shadow: 0 12px 32px -8px rgba(10, 20, 60, 0.12);
    z-index: 20;
    transform: translateY(-3px) scale(1.01) !important;
}

.gf-zone.is-dimmed {
    filter: brightness(0.94) saturate(0.7);
    opacity: 0.65;
}

.gf-zone-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 12px 8px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

/* Zone metadata row */
.gf-zone-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(10, 20, 60, 0.06);
}

.gf-zone-idx {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 700;
    color: var(--zone-acc, var(--blue, #0a63ff));
    letter-spacing: 0.06em;
}

.gf-zone-status {
    font-family: var(--font-mono, monospace);
    font-size: 6.5px;
    font-weight: 600;
    color: var(--ink-3, #8a9ab8);
    letter-spacing: 0.04em;
}

/* Zone content area */
.gf-zone-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

/* Zone label (bottom of each zone) */
.gf-zone-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
    margin-top: 4px;
    border-top: 1px solid rgba(10, 20, 60, 0.05);
}

.gzl-title {
    font-family: var(--font-mono, monospace);
    font-size: 7px;
    font-weight: 700;
    color: var(--ink, #0a0f1e);
    letter-spacing: 0.04em;
}

.gzl-hint {
    font-family: var(--font-mono, monospace);
    font-size: 6.5px;
    color: var(--zone-acc, var(--blue));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gf-zone:hover .gzl-hint { opacity: 1; }

/* ==========================================================================
   ZONE POSITIONING (5 zones, asymmetric like an environment, not 5 cards)
   ========================================================================== */

/* WEB — tall dominant left-side zone */
.gf-zone-web {
    --zone-acc: #0a63ff;
    top: 6%;
    left: 1.8%;
    width: 28%;
    height: 88%;
}

/* SECURITY — compact, top-right cluster */
.gf-zone-security {
    --zone-acc: #0d9488;
    top: 6%;
    left: 32%;
    width: 21%;
    height: 42%;
}

/* MARKETING — wider, mid-right, taller */
.gf-zone-marketing {
    --zone-acc: #7c3aed;
    top: 6%;
    left: 55%;
    width: 25%;
    height: 42%;
}

/* CONTENT — lower-center, wide */
.gf-zone-content {
    --zone-acc: #d97706;
    top: 54%;
    left: 32%;
    width: 22%;
    height: 40%;
}

/* COMMERCE — lower-right anchor */
.gf-zone-commerce {
    --zone-acc: #0891b2;
    top: 54%;
    left: 56%;
    width: 24%;
    height: 40%;
}

/* Far-right thin architectural column (implied perimeter) */
.gf-zone-web::before,
.gf-zone-marketing::before,
.gf-zone-commerce::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 70%, color-mix(in srgb, var(--zone-acc) 4%, transparent));
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   01 / WEB ZONE INTERNALS: Viewport Geometry
   ========================================================================== */

.gf-viewport-geometry {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid rgba(10, 20, 60, 0.08);
    overflow: hidden;
}

.gvg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(10, 20, 60, 0.06);
    background: rgba(247, 249, 253, 0.9);
    flex: none;
}

.gvg-dots { display: flex; gap: 3px; }
.gvg-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(10,20,60,0.12); }
.gvg-dots span:first-child { background: #ef4444; }
.gvg-dots span:nth-child(2) { background: #f59e0b; }
.gvg-dots span:nth-child(3) { background: #22c55e; }

.gvg-url {
    font-family: var(--font-mono, monospace);
    font-size: 6.5px;
    color: var(--ink-3, #8a9ab8);
    letter-spacing: 0.02em;
}

.gvg-body {
    flex: 1;
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}

.gvg-editorial-block {
    flex: 1;
    background: linear-gradient(145deg, #051235, #0a2060);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 60px;
    overflow: hidden;
}

.geb-kicker {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 6px;
    font-weight: 700;
    color: #4b8bff;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}

.geb-title {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(9px, 0.75vw, 12px);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.gvg-spec-grid {
    display: flex;
    gap: 4px;
    flex: none;
}

.gsg-item {
    flex: 1;
    background: rgba(10, 99, 255, 0.05);
    border: 1px solid rgba(10, 99, 255, 0.12);
    border-radius: 4px;
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gsg-item span {
    font-family: var(--font-mono, monospace);
    font-size: 5.5px;
    color: var(--ink-3, #8a9ab8);
    line-height: 1;
}

.gsg-item strong {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 700;
    color: var(--blue, #0a63ff);
    line-height: 1;
}

/* ==========================================================================
   02 / SECURITY ZONE INTERNALS: Radar Perimeter
   ========================================================================== */

.gf-security-perimeter-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.gspc-radar {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.04);
}

.gspc-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(13, 148, 136, 0.35);
}
.gspc-ring.r1 { inset: 0; animation: gfRadarSpin 18s linear infinite; }
.gspc-ring.r2 { inset: 8px; border-style: dotted; animation: gfRadarSpin 10s linear infinite reverse; }

.gspc-beam {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(13, 148, 136, 0.28) 100%);
    animation: gfRadarSpin 3.8s linear infinite;
}

.gspc-shield-glyph {
    position: relative;
    z-index: 2;
    width: 18px;
    height: 18px;
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gspc-shield-glyph svg { width: 100%; height: 100%; }

@keyframes gfRadarSpin {
    to { transform: rotate(360deg); }
}

.gspc-telemetry {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gt-badge {
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 7.5px;
    font-weight: 700;
    color: #0d9488;
}

.gt-code {
    font-family: var(--font-mono, monospace);
    font-size: 6px;
    color: var(--ink-3, #8a9ab8);
    letter-spacing: 0.04em;
}

/* ==========================================================================
   03 / MARKETING ZONE INTERNALS: Trajectory Curve
   ========================================================================== */

.gf-trajectory-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gtc-curve-box {
    width: 100%;
    height: 52px;
    position: relative;
}

.gtc-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.gtc-metric { display: flex; flex-direction: column; gap: 1px; }

.gm-num {
    font-family: var(--font-display, sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: #7c3aed;
    line-height: 1;
}

/* ==========================================================================
   04 — THE RAFly BUILD MATRIX (#matrix)
   ========================================================================== */
.build-matrix {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5.5rem);
    background: var(--paper, #f7f9fd);
    color: var(--ink, #050f33);
    overflow: clip;
    isolation: isolate;
}

.bm-bg-env {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.bm-grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.bm-grid {
    position: absolute;
    inset: -10%;
    opacity: 0.06;
    background-image:
        linear-gradient(to right, #0a63ff 1px, transparent 1px),
        linear-gradient(to bottom, #0a63ff 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    transform: perspective(900px) rotateX(12deg);
}

.bm-dots {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: radial-gradient(#050f33 1px, transparent 1px);
    background-size: 24px 24px;
}

.bm-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
}
.bm-glow.glow-primary {
    width: 650px; height: 650px;
    top: 40%; right: -5%;
    background: radial-gradient(circle, rgba(10, 99, 255, 0.14) 0%, transparent 70%);
}
.bm-glow.glow-secondary {
    width: 480px; height: 480px;
    top: 10%; left: 5%;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.10) 0%, transparent 70%);
}

.bm-scanbeam {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(10, 99, 255, 0.4), transparent);
    opacity: 0.4;
    animation: bmScan 14s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes bmScan {
    0% { transform: translateY(-10px); opacity: 0; }
    15% { opacity: 0.4; }
    85% { opacity: 0.4; }
    100% { transform: translateY(900px); opacity: 0; }
}

.bm-blueprint {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.bm-ghost-words {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 4vw;
    padding: 0 4%;
    overflow: hidden;
    pointer-events: none;
}
.bm-ghost {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(6rem, 15vw, 17rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #050f33;
    opacity: 0.02;
    line-height: 1;
    white-space: nowrap;
}

/* CONTAINER & HEADER */
.bm-container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.bm-header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.bm-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5b6384;
}

.bm-sys-tag {
    color: #0a63ff;
    font-weight: 700;
}

.bm-editorial-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.bm-sep { opacity: 0.35; }

.bm-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.bm-ind-num { color: #0a63ff; font-weight: 700; }

.bm-header-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bm-headline {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(2.4rem, 4.2vw, 3.8rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: #050f33;
    margin: 0;
}
.bm-h-line { display: block; }
.bm-h-line--accent { color: #0a63ff; }

.bm-sub {
    font-family: var(--font-body, sans-serif);
    font-size: clamp(1.0rem, 0.9rem + 0.3vw, 1.18rem);
    line-height: 1.5;
    color: #3a4468;
    max-width: 580px;
    margin: 0;
}

/* HORIZONTAL EDITORIAL NAVIGATION INDEX */
.bm-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.bm-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(10, 99, 255, 0.10);
    backdrop-filter: blur(12px);
    cursor: pointer;
    text-align: left;
    min-height: 52px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.bm-nav-item:hover {
    transform: translateY(-2px);
    border-color: rgba(10, 99, 255, 0.3);
    background: rgba(255, 255, 255, 0.92);
}

.bm-nav-item.is-active {
    background: #ffffff;
    border-color: #0a63ff;
    box-shadow: 0 4px 20px rgba(10, 99, 255, 0.12);
}

.bmn-num {
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    font-weight: 700;
    color: #0a63ff;
    letter-spacing: 0.05em;
}

.bmn-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bmn-title {
    font-family: var(--font-display, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: #050f33;
    letter-spacing: -0.01em;
}

.bmn-desc {
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    color: #5b6384;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bmn-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: #0a63ff;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.bm-nav-item.is-active .bmn-line {
    opacity: 1;
    transform: scaleX(1);
}

/* MAIN BUILD CANVAS STAGE */
.bm-stage-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.bm-stage {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: clamp(460px, 52vh, 600px);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(10, 99, 255, 0.14);
    box-shadow: 0 24px 64px rgba(5, 15, 51, 0.08);
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
}

.bm-surface {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(246,248,252,0.85) 100%);
    pointer-events: none;
}

.bm-shadow {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 32px;
    background: linear-gradient(to top, rgba(5, 15, 51, 0.04) 0%, transparent 100%);
    pointer-events: none;
}

.bm-canvas {
    width: 100%; height: 100%;
    display: block;
    border-radius: 16px;
}

.bm-stage-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bm-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    color: #050f33;
}

.bmo-code {
    font-weight: 700;
    color: #0a63ff;
    letter-spacing: 0.08em;
}

.bmo-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.625rem;
    color: #5b6384;
}
.bmo-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.bm-overlay-corners {
    position: absolute;
    font-family: var(--font-mono, monospace);
    font-size: 0.5625rem;
    color: rgba(5, 15, 51, 0.35);
    letter-spacing: 0.06em;
}
.bm-overlay-corners.top-left { top: 1.25rem; left: 1.25rem; }
.bm-overlay-corners.top-right { top: 1.25rem; right: 1.25rem; }
.bm-overlay-corners.bottom-left { bottom: 1.25rem; left: 1.25rem; }
.bm-overlay-corners.bottom-right { bottom: 1.25rem; right: 1.25rem; }

/* FOOTER META */
.bm-footer-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.75rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    color: #5b6384;
    text-transform: uppercase;
}
.bm-meta-sep { opacity: 0.3; }

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
    .bm-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bm-nav {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scroll-snap-type: x mandatory;
    }
    .bm-nav-item {
        flex: 0 0 160px;
        scroll-snap-align: start;
    }
    .bm-stage {
        height: 380px;
    }
}

.gm-tag {
    font-family: var(--font-mono, monospace);
    font-size: 6px;
    color: var(--ink-3, #8a9ab8);
}

/* ==========================================================================
   04 / CONTENT ZONE INTERNALS: Editorial Fragments
   ========================================================================== */

.gf-content-fragments { width: 100%; }

.gcf-plate-stack {
    position: relative;
    width: 100%;
    height: 72px;
}

.gcf-plate {
    position: absolute;
    border-radius: 6px;
    border: 1px solid rgba(10, 20, 60, 0.08);
    background: var(--paper, #f7f9fd);
}

.gcf-plate.p1 {
    inset: 0 4px 4px 0;
    opacity: 0.35;
}

.gcf-plate.p2 {
    inset: 5px 0 0 4px;
    background: #ffffff;
    border-color: rgba(217, 119, 6, 0.2);
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.gcf-wave-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gw-type {
    font-family: var(--font-mono, monospace);
    font-size: 6.5px;
    font-weight: 700;
    color: #d97706;
}

.gw-bars { display: flex; align-items: flex-end; gap: 2px; }
.gw-bars i {
    display: block;
    width: 2px;
    border-radius: 1px;
    background: #d97706;
    animation: gfWaveBar 1.3s ease-in-out infinite alternate;
}
.gw-bars i:nth-child(1) { height: 6px; }
.gw-bars i:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.gw-bars i:nth-child(3) { height: 7px; animation-delay: 0.3s; }
.gw-bars i:nth-child(4) { height: 12px; animation-delay: 0.1s; }
.gw-bars i:nth-child(5) { height: 5px; animation-delay: 0.4s; }

@keyframes gfWaveBar {
    0%   { transform: scaleY(0.5); }
    100% { transform: scaleY(1.2); }
}

.gw-desc {
    font-size: 7px;
    line-height: 1.4;
    color: var(--ink-2, #4b5875);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   05 / COMMERCE ZONE INTERNALS: Conversion Flow
   ========================================================================== */

.gf-commerce-card {
    width: 100%;
    background: var(--paper, #f7f9fd);
    border: 1px solid rgba(8, 145, 178, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gcc-tx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gcc-cart-icon {
    width: 14px;
    height: 14px;
    color: #0891b2;
    display: flex;
    align-items: center;
}
.gcc-cart-icon svg { width: 100%; height: 100%; }

.gcc-val {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    color: var(--ink, #0a0f1e);
    letter-spacing: -0.01em;
}

.gcc-meter {
    height: 3px;
    border-radius: 1.5px;
    background: rgba(8, 145, 178, 0.12);
    overflow: hidden;
}

.gcc-fill {
    width: 88%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0891b2, #22d3ee);
    animation: gfFillPulse 3s ease-in-out infinite alternate;
}

@keyframes gfFillPulse {
    0%   { width: 82%; }
    100% { width: 92%; }
}

.gcc-reconciled {
    font-family: var(--font-mono, monospace);
    font-size: 6.5px;
    color: #0d9488;
    font-weight: 600;
}

/* ==========================================================================
   LAYER C: MINIMAL CAPABILITY NAVIGATION RAIL
   ========================================================================== */

.gf-capability-rail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.4rem, 1.5vw, 1rem);
    flex: none;
    padding-top: 0.5rem;
}

.gf-rail-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.gfr-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-3, #8a9ab8);
    opacity: 0;
    transition: all 0.3s ease;
    flex: none;
}

.gfr-idx {
    font-family: var(--font-mono, monospace);
    font-size: 8.5px;
    font-weight: 600;
    color: var(--ink-3, #8a9ab8);
    transition: color 0.25s ease;
}

.gfr-name {
    font-family: var(--font-mono, monospace);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink-3, #8a9ab8);
    letter-spacing: 0.04em;
    transition: color 0.25s ease;
}

/* Active rail tab */
.gf-rail-tab.is-active .gfr-dot {
    opacity: 1;
    background: var(--blue, #0a63ff);
    box-shadow: 0 0 6px rgba(10, 99, 255, 0.4);
}

.gf-rail-tab.is-active .gfr-idx,
.gf-rail-tab.is-active .gfr-name {
    color: var(--ink, #0a0f1e);
    font-weight: 700;
}

.gf-rail-tab:hover .gfr-name,
.gf-rail-tab:hover .gfr-idx {
    color: var(--ink-2, #4b5875);
}

/* Separator dots between tabs */
.gf-rail-tab + .gf-rail-tab::before {
    content: '';
    position: absolute;
    left: calc(clamp(0.4rem, 1.5vw, 1rem) / -2);
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--ink-3, #8a9ab8);
    opacity: 0.3;
}

/* ==========================================================================
   FOOTER: STATEMENT & CTA
   ========================================================================== */

.gf-footer-zone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(10, 20, 60, 0.07);
}

.gf-statement-wrap { flex: 1; }

.gfs-kicker {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--blue, #0a63ff);
    margin-bottom: 3px;
}

.gfs-text {
    font-size: clamp(11.5px, 0.85vw, 13px);
    color: var(--ink-2, #4b5875);
    margin: 0;
    line-height: 1.4;
}

.gf-cta-wrap { flex: none; }

.gf-cta-btn {
    font-size: 11.5px;
    padding: 7px 18px;
    white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1280px) {
    .gf-zone-web { width: 26%; }
    .gf-zone-security { width: 22%; left: 30%; }
    .gf-zone-marketing { left: 54%; width: 24%; }
    .gf-zone-content { left: 30%; width: 23%; }
    .gf-zone-commerce { left: 55%; width: 23%; }
}

@media (max-width: 1024px) {
    .gf-growth-slab { height: clamp(280px, 44vh, 380px); }

    .gf-zone-web { width: 30%; height: 86%; }
    .gf-zone-security { left: 33%; width: 22%; height: 40%; }
    .gf-zone-marketing { left: 57%; width: 22%; height: 40%; }
    .gf-zone-content { top: 52%; left: 33%; width: 23%; height: 42%; }
    .gf-zone-commerce { top: 52%; left: 58%; width: 21%; height: 42%; }

    .gf-headline { font-size: clamp(32px, 4.5vw, 60px); }
}

/* TABLET: simplify layout */
@media (max-width: 768px) {
    .growth-field-section {
        min-height: auto;
    }

    .gf-sticky-viewport {
        position: relative;
        height: auto;
        min-height: 0;
    }

    .gf-stage-container {
        padding-block: 3rem;
        gap: 1.5rem;
        justify-content: flex-start;
    }

    .gf-kinetic-typography {
        display: none;
    }

    /* On tablet/mobile, slab becomes a vertical scroll stack */
    .gf-visual-stage {
        flex: none;
        align-items: flex-start;
    }

    .gf-growth-slab {
        height: auto;
        perspective: none;
        min-height: auto;
    }

    .gf-slab-chassis {
        border-radius: 14px;
    }

    .gf-slab-cavity {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .gf-topo-paths { display: none; }
    .gf-master-pulse { display: none; }

    /* Zones become stacked blocks */
    .gf-zone {
        position: relative;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 110px;
        opacity: 1 !important;
        transform: none !important;
    }

    .gf-zone-inner { padding: 12px 14px 10px; }

    .gcf-plate-stack { height: 80px; }

    .gf-capability-rail {
        flex-wrap: wrap;
        gap: 8px;
    }

    .gf-footer-zone {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* MOBILE: dedicated mobile composition */
@media (max-width: 480px) {
    .gf-headline { font-size: clamp(30px, 8vw, 44px); }
    .gf-subhead { font-size: 13px; }
    .gf-eyebrow-text { font-size: 7.5px; }

    .gvg-spec-grid { flex-direction: row; }
    .gsg-item { min-width: 0; }

    .gf-zone { min-height: 96px; }

    .gf-rail-tab + .gf-rail-tab::before { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .growth-field-section {
        min-height: auto;
    }

    .gf-sticky-viewport {
        position: relative;
        height: auto;
    }

    .gfp-dot,
    .gspc-ring,
    .gspc-beam,
    .gw-bars i,
    .gcc-fill,
    .gfh-accent::after {
        animation: none !important;
    }

    .gf-zone {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .gf-slab-chassis {
        transform: none !important;
        transition: none !important;
    }

    .gf-signal-line {
        opacity: 0.4;
        stroke-dashoffset: 0;
        transition: none !important;
    }
}

/* ==========================================================================
   FANNED BUILD DECK SECTION ("WHAT WE BUILD")
   ========================================================================== */
.platform-deck-section {
    position: relative;
    min-height: 200vh;
    background-color: var(--paper, #f7f9fd);
    background-image: repeating-linear-gradient(45deg, rgba(10, 99, 255, 0.025) 0, rgba(10, 99, 255, 0.025) 1px, transparent 0, transparent 12px);
    color: var(--ink, #050f33);
    overflow: clip;
    isolation: isolate;
}

.pd-sticky-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: clamp(1rem, 3vh, 2.5rem);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 10;
}

.platform-deck-section {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5rem);
    background: var(--paper);
    color: var(--ink, #050f33);
    overflow: clip;
    isolation: isolate;
}

/* 8-LAYER ENVIRONMENT & TEXTURE SYSTEM */
.pd-bg-env {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.pd-grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.pd-grid {
    position: absolute;
    inset: -10%;
    opacity: 0.06;
    background-image:
        linear-gradient(to right, #0a63ff 1px, transparent 1px),
        linear-gradient(to bottom, #0a63ff 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    transform: perspective(900px) rotateX(12deg);
}

.pd-dots {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: radial-gradient(#050f33 1px, transparent 1px);
    background-size: 24px 24px;
}

.pd-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
}
.pd-glow.glow-primary {
    width: 750px; height: 750px;
    top: 20%; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(10, 99, 255, 0.18) 0%, transparent 65%);
}
.pd-glow.glow-secondary {
    width: 550px; height: 550px;
    bottom: 5%; right: 5%;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.14) 0%, transparent 70%);
}

.pd-scanbeam {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(10, 99, 255, 0.4), transparent);
    opacity: 0.4;
    animation: pdScan 14s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pdScan {
    0% { transform: translateY(-10px); opacity: 0; }
    15% { opacity: 0.4; }
    85% { opacity: 0.4; }
    100% { transform: translateY(800px); opacity: 0; }
}

.pd-blueprint {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.pd-ghost-words {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 4vw;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.pd-ghost {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(6rem, 14vw, 15rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    color: rgba(5, 15, 51, 0.022);
    line-height: 0.8;
}

.pd-container {
    position: relative;
    z-index: 3;
}

.pd-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.pd-eyebrow {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a63ff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.pd-eyebrow::before, .pd-eyebrow::after {
    content: '';
    width: 18px;
    height: 1px;
    background: rgba(10, 99, 255, 0.4);
}

.pd-heading {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: #050f33;
    margin: 0;
}
.pd-accent { color: #0a63ff; }

.pd-subhead {
    font-family: var(--font-body, sans-serif);
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.125rem);
    line-height: 1.5;
    color: #5b6384;
    max-width: 580px;
    margin: 0;
}

.pd-deck-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pd-deck {
    position: relative;
    width: 100%;
    max-width: 1050px;
    height: clamp(340px, 44vh, 420px);
    margin-block: 0.5rem 1rem;
    perspective: 1600px;
    transform-style: preserve-3d;
}

.pd-card {
    position: absolute;
    left: 50%; top: 50%;
    width: clamp(270px, 29vw, 350px);
    height: clamp(340px, 40vh, 410px);
    margin: clamp(-170px, -20vh, -205px) 0 0 clamp(-135px, -14.5vw, -175px);
    border-radius: 20px;
    overflow: hidden;
    background: var(--card-bg, #0e6f31);
    box-shadow: 0 24px 56px -12px rgba(5, 15, 51, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.22);
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.35rem;
    color: #ffffff;
    box-sizing: border-box;
}

/* Card Slot Positions for 3D Fan Spread */
.pd-card[data-slot="0"] {
    transform: translate3d(0, 0, 100px) rotateY(0deg) scale(1.02);
    z-index: 6;
    background: linear-gradient(160deg, #10b981 0%, #064e3b 100%);
}
.pd-card[data-slot="1"] {
    transform: translate3d(-190px, 12px, -70px) rotateY(15deg) rotateZ(2.5deg) scale(0.92);
    z-index: 5;
    background: linear-gradient(160deg, #0891b2 0%, #044a56 100%);
}
.pd-card[data-slot="2"] {
    transform: translate3d(190px, 12px, -70px) rotateY(-15deg) rotateZ(-2.5deg) scale(0.92);
    z-index: 5;
    background: linear-gradient(160deg, #3b82f6 0%, #1e3a8a 100%);
}
.pd-card[data-slot="3"] {
    transform: translate3d(-340px, 28px, -190px) rotateY(24deg) rotateZ(5deg) scale(0.84);
    z-index: 4;
    background: linear-gradient(160deg, #1e40af 0%, #0c2340 100%);
}
.pd-card[data-slot="4"] {
    transform: translate3d(340px, 28px, -190px) rotateY(-24deg) rotateZ(-5deg) scale(0.84);
    z-index: 4;
    background: linear-gradient(160deg, #7c3aed 0%, #4c1d95 100%);
}

/* Technical Corner Markers for Section 05 */
.pd-tech-marker {
    position: absolute;
    top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: #5b6384;
    z-index: 4;
    pointer-events: none;
}
.pd-tech-marker.top-left { left: 4%; }
.pd-tech-marker.top-right { right: 4%; }
.ptm-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #0a63ff;
    box-shadow: 0 0 8px #0a63ff;
}

.pd-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* CARD HEADERS & BADGES */
.pd-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.4rem;
}
.pd-card-tag { font-weight: 700; color: #ffffff; }
.pd-card-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* CARD GRAPHIC STAGE CONTAINER */
.pd-card-graphic {
    position: relative;
    width: 100%;
    height: 165px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* E-COMMERCE CARD STYLES */
.pd-ecom-nav {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}
.pd-cart-pill {
    background: rgba(255, 255, 255, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
}
.pd-ecom-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.pd-ecom-thumb {
    width: 38px; height: 38px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.pd-ecom-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.pd-ecom-title { font-size: 0.72rem; font-weight: 700; color: #ffffff; }
.pd-ecom-stars { font-size: 0.62rem; color: #fde047; }
.pd-ecom-price-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 2px;
}
.pd-ecom-price { font-size: 0.75rem; font-weight: 800; color: #ffffff; }
.pd-ecom-btn {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    font-weight: 800;
    background: #ffffff;
    color: #064e3b;
    padding: 2px 7px;
    border-radius: 4px;
}
.pd-ecom-metric {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    background: rgba(16, 185, 129, 0.25);
    padding: 3px 6px;
    border-radius: 4px;
    text-align: center;
}

/* MOBILE APP CARD STYLES */
.pd-app-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}
.pd-phone-mock {
    width: 110px;
    height: 115px;
    border-radius: 12px 12px 0 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom: none;
    background: rgba(15, 23, 42, 0.85);
    padding: 6px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.pd-phone-island {
    width: 24px; height: 5px;
    border-radius: 5px;
    background: #ffffff;
    margin: 0 auto 6px;
    opacity: 0.8;
}
.pd-phone-screen {
    display: flex; flex-direction: column; gap: 6px;
}
.pd-ps-header {
    display: flex; align-items: center; gap: 6px;
}
.pd-ps-avatar {
    width: 16px; height: 16px; border-radius: 50%;
    background: #0891b2;
}
.pd-ps-lines span {
    display: block; height: 3px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}
.pd-ps-lines span:first-child { width: 35px; }
.pd-ps-lines span:last-child { width: 20px; }
.pd-ps-widget {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 6px;
}
.pd-ps-val {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem; font-weight: 700; color: #38bdf8;
    display: block; margin-bottom: 3px;
}
.pd-ps-bars {
    display: flex; align-items: flex-end; gap: 3px; height: 20px;
}
.pd-ps-bars i {
    flex: 1; background: #38bdf8; border-radius: 2px;
}
.pd-ps-bars i:nth-child(1) { height: 40%; }
.pd-ps-bars i:nth-child(2) { height: 65%; }
.pd-ps-bars i:nth-child(3) { height: 85%; }
.pd-ps-bars i:nth-child(4) { height: 100%; }
.pd-ps-bars i:nth-child(5) { height: 75%; }

.pd-app-badge {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem; font-weight: 700;
    color: #ffffff; background: rgba(8, 145, 178, 0.35);
    padding: 2px 8px; border-radius: 4px;
}

/* MARKETING CARD STYLES */
.pd-mkt-stage {
    display: flex; flex-direction: column; justify-content: space-between; height: 100%;
}
.pd-mkt-hero {
    display: flex; flex-direction: column; gap: 4px;
}
.pd-mkt-tag {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem; font-weight: 700; color: #60a5fa;
}
.pd-mkt-hline {
    height: 8px; width: 85%; border-radius: 4px;
    background: #ffffff;
}
.pd-mkt-subline {
    height: 5px; width: 60%; border-radius: 3px;
    background: rgba(255, 255, 255, 0.5);
}
.pd-mkt-btns {
    display: flex; gap: 6px; margin-top: 6px;
}
.pd-btn-p {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem; font-weight: 800;
    background: #ffffff; color: #1e3a8a;
    padding: 3px 8px; border-radius: 4px;
}
.pd-btn-s {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem; font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.5); color: #ffffff;
    padding: 3px 8px; border-radius: 4px;
}
.pd-mkt-metric {
    font-family: var(--font-mono, monospace);
    font-size: 0.62rem; font-weight: 700; color: #fde047;
    background: rgba(255, 255, 255, 0.15);
    padding: 3px 8px; border-radius: 4px; text-align: center;
}

/* DASHBOARD CARD STYLES */
.pd-dash-stage {
    display: flex; flex-direction: column; justify-content: space-between; height: 100%;
}
.pd-dash-top {
    display: flex; gap: 8px;
}
.pd-dash-kpi {
    flex: 1; background: rgba(255, 255, 255, 0.15);
    border-radius: 6px; padding: 4px 6px;
    display: flex; flex-direction: column;
}
.pd-dash-kpi span { font-family: var(--font-mono, monospace); font-size: 0.55rem; color: rgba(255, 255, 255, 0.7); }
.pd-dash-kpi strong { font-size: 0.78rem; font-weight: 800; color: #ffffff; }

.pd-dash-chart {
    display: flex; align-items: flex-end; gap: 6px; height: 45px;
    padding-inline: 10px;
}
.pd-chart-bar {
    flex: 1; height: var(--h); background: linear-gradient(180deg, #60a5fa, #1d4ed8);
    border-radius: 3px 3px 0 0;
}
.pd-dash-status {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-mono, monospace); font-size: 0.58rem; font-weight: 700; color: #93c5fd;
}
.pd-ds-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 6px #60a5fa;
}

/* CONTENT CARD STYLES */
.pd-cnt-stage {
    display: flex; flex-direction: column; justify-content: space-between; height: 100%;
}
.pd-video-mock {
    height: 70px; border-radius: 8px;
    background: linear-gradient(135deg, #2e1065, #581c87);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative; padding: 6px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.pd-video-badge {
    font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
    color: #c084fc; background: rgba(0, 0, 0, 0.5);
    padding: 1px 5px; border-radius: 3px; width: fit-content;
}
.pd-video-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.9);
    display: flex; align-items: center; justify-content: center;
}
.pd-play-icon {
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #581c87;
    margin-left: 2px;
}
.pd-video-track {
    height: 3px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; overflow: hidden;
}
.pd-video-fill {
    width: 65%; height: 100%; background: #c084fc;
}

.pd-audio-bars {
    display: flex; align-items: center; gap: 3px; height: 18px; justify-content: center;
}
.pd-audio-bars i {
    width: 3px; background: #c084fc; border-radius: 2px;
    animation: pdAudioPulse 1.2s ease-in-out infinite alternate;
}
.pd-audio-bars i:nth-child(1) { height: 40%; animation-delay: 0.1s; }
.pd-audio-bars i:nth-child(2) { height: 75%; animation-delay: 0.3s; }
.pd-audio-bars i:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.pd-audio-bars i:nth-child(4) { height: 50%; animation-delay: 0.5s; }
.pd-audio-bars i:nth-child(5) { height: 90%; animation-delay: 0.4s; }
.pd-audio-bars i:nth-child(6) { height: 60%; animation-delay: 0.6s; }
.pd-audio-bars i:nth-child(7) { height: 85%; animation-delay: 0.15s; }
.pd-audio-bars i:nth-child(8) { height: 45%; animation-delay: 0.35s; }
.pd-audio-bars i:nth-child(9) { height: 70%; animation-delay: 0.25s; }
.pd-audio-bars i:nth-child(10) { height: 95%; animation-delay: 0.45s; }

@keyframes pdAudioPulse {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1.0); }
}

.pd-cnt-badge {
    font-family: var(--font-mono, monospace);
    font-size: 0.58rem; font-weight: 700; color: #e9d5ff;
    background: rgba(124, 58, 237, 0.3); padding: 2px 6px;
    border-radius: 4px; text-align: center;
}

.pd-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pd-card-title {
    font-family: var(--font-display, sans-serif);
    font-size: 1.1875rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.pd-card-sub {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.38;
    margin: 0;
}

/* Dots indicator */
.pd-nav-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.pd-dot {
    width: 24px; height: 3px;
    border-radius: 99px;
    background: rgba(5, 15, 51, 0.15);
    transition: background 0.22s ease, width 0.22s ease;
}
.pd-dot.is-active {
    width: 36px;
    background: #0a63ff;
}

@media (max-width: 900px) {
    .pd-deck {
        height: 350px;
    }
    .pd-card[data-slot="1"] { transform: translate3d(-110px, 10px, -50px) rotateY(12deg) scale(0.9); }
    .pd-card[data-slot="2"] { transform: translate3d(110px, 10px, -50px) rotateY(-12deg) scale(0.9); }
    .pd-card[data-slot="3"] { transform: translate3d(-200px, 20px, -140px) rotateY(18deg) scale(0.8); }
    .pd-card[data-slot="4"] { transform: translate3d(200px, 20px, -140px) rotateY(-18deg) scale(0.8); }
}

/* ==========================================================================
   RE-IMAGINED EDITORIAL SECTIONS 06–12 DESIGN SYSTEM
   ========================================================================== */

/* GLOBAL EDITORIAL HEADINGS */
.bl-head, .tk-head, .ws-head, .bs-head, .uc-head, .pe-head, .ce-copy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.bl-kicker, .tk-kicker, .ws-kicker, .bs-kicker, .uc-kicker, .pe-kicker, .ce-kicker {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a63ff;
}
.bl-title, .tk-title, .ws-title, .bs-title, .uc-title, .pe-title, .ce-title {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #050f33;
    line-height: 1.06;
    margin: 0;
}
.ws-title { color: #ffffff; }
.bl-sub, .tk-sub, .ws-sub, .bs-sub, .pe-sub, .ce-lead {
    font-family: var(--font-body, sans-serif);
    font-size: clamp(1rem, 1.15vw, 1.25rem);
    line-height: 1.5;
    color: #5b6384;
    max-width: 600px;
    margin: 0;
}
.ws-sub { color: rgba(255, 255, 255, 0.75); }

/* SECTION 06: BUILD WORKFLOW (MOTION SCULPTURE & EDITORIAL NARRATIVE) */
.build-loop-section {
    padding-block: clamp(2.25rem, 4vw, 3.5rem);
    background: #f6f8fc !important;
    position: relative;
    overflow: hidden;
}

.bl-ghost-text {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

.bl-split-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 42% 58%;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
}

.bl-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0a63ff;
    margin-bottom: 0.65rem;
}
.bl-dot-live { color: #10b981; font-size: 0.55rem; animation: pulseLive 2s infinite; }

.bl-headline {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: #06122f;
    margin: 0 0 0.75rem;
}
.bl-h-accent { color: #0a63ff; text-shadow: 0 0 20px rgba(10, 99, 255, 0.2); }

.bl-desc {
    font-family: var(--font-body, sans-serif);
    font-size: 0.92rem;
    line-height: 1.5;
    color: #34405f;
    margin: 0 0 1.25rem;
    max-width: 440px;
}

.bl-proof-annotation {
    background: #ffffff !important;
    border: 1px solid rgba(6, 18, 47, 0.14) !important;
    border-radius: 12px;
    padding: 0.85rem 1.15rem;
    box-shadow: 0 4px 16px rgba(6, 18, 47, 0.05);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bl-pa-label { font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 800; color: #0a63ff; letter-spacing: 0.1em; }
.bl-pa-val { font-family: var(--font-display, sans-serif); font-size: 1.15rem; font-weight: 800; color: #06122f; }
.bl-pa-sub { font-family: var(--font-mono, monospace); font-size: 0.65rem; color: #34405f; }

/* ABSTRACT MOTION SCULPTURE VIEWPORT (RIGHT 58%) */
.bl-sculpture-wrapper {
    position: relative;
    background: #ffffff !important;
    border: 1px solid rgba(6, 18, 47, 0.14) !important;
    border-radius: 18px;
    padding: 1.15rem;
    box-shadow: 0 4px 16px rgba(6, 18, 47, 0.04), 0 20px 48px -12px rgba(6, 18, 47, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bl-stage-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.bl-stage-node {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.65rem;
    background: #f6f8fc !important;
    border: 1px solid rgba(6, 18, 47, 0.12) !important;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
}
.bl-stage-node:hover, .bl-stage-node.is-active {
    background: #ffffff !important;
    border-color: #0a63ff !important;
    box-shadow: 0 6px 18px -4px rgba(10, 99, 255, 0.18);
    transform: translateY(-1px);
}
.bl-sn-num { font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 800; color: #0a63ff; }
.bl-sn-info strong { display: block; font-family: var(--font-display, sans-serif); font-size: 0.78rem; font-weight: 800; color: #06122f; }
.bl-sn-info small { font-family: var(--font-mono, monospace); font-size: 0.6rem; color: #34405f; display: block; }

.bl-sculpture-viewport {
    position: relative;
    background: #f8fafc !important;
    border: 1px solid rgba(6, 18, 47, 0.12) !important;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bl-sculpture-svg { width: 100%; height: 150px; }

.bl-stage-copy-box { min-height: 48px; margin-top: 0.35rem; }
.bl-stage-copy h4 { font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 800; color: #0a63ff; margin: 0 0 3px; }
.bl-stage-copy p { font-size: 0.85rem; color: #34405f; margin: 0; line-height: 1.4; }

.bl-sculpture-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 800;
    color: #0a63ff;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(10, 99, 255, 0.2);
}
.bl-sf-line { flex: 1; height: 2px; background: rgba(10, 99, 255, 0.15); margin: 0 10px; position: relative; overflow: hidden; }
.bl-sf-pulse { position: absolute; inset: 0; width: 30%; background: #0a63ff; animation: linePulse 2.5s infinite linear; }

/* SECTION 07: DIGITAL ENGINE (MATERIAL COMPOSITION) */
.toolkit-section {
    padding-block: clamp(2.25rem, 4vw, 3.5rem);
    background: #ffffff !important;
    position: relative;
    overflow: hidden;
}

.tk-ghost-text { display: none; }

.tk-editorial-head { margin-bottom: 1.25rem; max-width: 600px; }
.tk-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: #0a63ff; letter-spacing: 0.12em; display: block; margin-bottom: 0.35rem; }
.tk-title { font-family: var(--font-display, sans-serif); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.035em; color: #06122f; margin: 0 0 0.5rem; }
.tk-h-accent { color: #0a63ff; }
.tk-sub { font-size: 0.92rem; line-height: 1.45; color: #34405f; margin: 0; }

.dm-composition-container {
    display: grid;
    grid-template-columns: 32% 68%;
    gap: 1.25rem;
    align-items: start;
}

.dm-sculpture-core {
    display: flex;
    flex-direction: column;
    gap: 8px;
    perspective: 800px;
}
.dm-layer {
    background: #f6f8fc !important;
    border: 1px solid rgba(6, 18, 47, 0.14) !important;
    border-radius: 10px;
    padding: 9px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.dm-l-tag { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: #06122f; }
.dm-layer:hover, .dm-layer.is-active {
    transform: translate3d(0, -2px, 8px) scale(1.01);
    border-color: #0a63ff !important;
    box-shadow: 0 8px 20px rgba(10, 99, 255, 0.15);
}

.dm-specimen-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
.dm-spec-group {
    background: #ffffff !important;
    border: 1px solid rgba(6, 18, 47, 0.12) !important;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(6, 18, 47, 0.02);
}
.dm-sg-label { font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 800; color: #0a63ff; letter-spacing: 0.08em; padding-bottom: 4px; border-bottom: 1px dashed rgba(10, 99, 255, 0.2); }
.dm-sg-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.dm-spec-node {
    background: #f8fafc !important;
    border: 1px solid rgba(6, 18, 47, 0.1) !important;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.dm-sn-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid rgba(10, 99, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a63ff;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.dm-sn-svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.dm-sn-content { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dm-sn-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dm-sn-name { font-family: var(--font-display, sans-serif); font-size: 0.82rem; font-weight: 800; color: #06122f; }
.dm-sn-badge {
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    font-weight: 800;
    color: #0a63ff;
    background: rgba(10, 99, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
}
.dm-sn-desc {
    font-size: 0.72rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.dm-spec-node:hover, .dm-spec-node.is-connected {
    transform: translateY(-2px);
    border-color: #0a63ff !important;
    box-shadow: 0 6px 18px rgba(10, 99, 255, 0.16);
    background: #ffffff !important;
}
.dm-spec-node:hover .dm-sn-icon-wrap {
    background: #0a63ff;
    color: #ffffff;
}

.dm-inspector {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: #06122f !important;
    color: #ffffff;
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #0a63ff;
    box-shadow: 0 12px 32px rgba(6, 18, 47, 0.25);
    display: none;
    flex-direction: column;
    gap: 3px;
    z-index: 99;
}
.dm-inspector.is-active { display: flex; }
.dm-ins-cat { font-family: var(--font-mono, monospace); font-size: 0.65rem; font-weight: 800; color: #38bdf8; letter-spacing: 0.08em; }
.dm-ins-name { font-family: var(--font-display, sans-serif); font-size: 1.1rem; font-weight: 800; margin: 0; }
.dm-ins-desc { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); margin: 0; }

@media (max-width: 960px) {
    .bl-split-grid { grid-template-columns: 1fr; }
    .dm-composition-container { grid-template-columns: 1fr; }
    .dm-specimen-wall { grid-template-columns: 1fr; }
}

.bl-board-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 800;
    color: #0a63ff;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(10, 99, 255, 0.25);
}
.bl-hud-status { color: #10b981; }

.bl-blueprint-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0.35rem; }
.bl-bp-node { background: #ffffff; border: 1px solid rgba(10, 99, 255, 0.25); padding: 4px 10px; border-radius: 6px; font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 700; color: #0a63ff; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.bl-code-box code { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: #0230c6; background: #eff6ff; padding: 6px 12px; border-radius: 6px; display: inline-block; }
.bl-shield-tag { display: inline-flex; align-items: center; font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 700; color: #065f46; background: #ecfdf5; border: 1px solid #10b981; padding: 6px 12px; border-radius: 6px; }

/* SECTION 07: MATERIAL LIBRARY (TECH SPECIMENS) */
.tk-head { margin-bottom: 1.5rem; }
.tk-wall { display: flex; flex-direction: column; gap: 1.25rem; }
.tk-group { border-bottom: 1px solid rgba(5, 15, 51, 0.1); padding-bottom: 1.25rem; }
.tk-group-label { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: #0a63ff; display: block; margin-bottom: 0.75rem; }
.tk-items { display: flex; flex-wrap: wrap; gap: 0.85rem 1.75rem; }
.tk-item { position: relative; cursor: pointer; }
.tk-item-name { font-family: var(--font-display, sans-serif); font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -0.03em; color: #050f33; transition: all 0.2s ease; display: inline-block; }
.tk-item:hover .tk-item-name { color: #0a63ff; transform: translateY(-2px); border-bottom: 2px solid #0a63ff; }

.tk-inspector { background: #050f33; color: #ffffff; padding: 1rem 1.35rem; border-radius: 12px; border: 1px solid #0a63ff; margin-bottom: 1.5rem; box-shadow: 0 16px 36px rgba(10, 99, 255, 0.18); display: none; flex-direction: column; gap: 3px; }
.tk-inspector.is-active { display: flex; }
.tk-inspect-cat { font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 800; color: #38bdf8; letter-spacing: 0.1em; }
.tk-inspect-name { font-family: var(--font-display, sans-serif); font-size: 1.25rem; font-weight: 800; margin: 0; }
.tk-inspect-meta { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); margin: 0; }

/* SECTION 08: WORK SHOWCASE (DARK CHAPTER) */
.work-showcase-section {
    padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
    background: #090d16 !important;
    color: #ffffff;
}
.ws-head { margin-bottom: 1.25rem; }
.ws-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: #38bdf8; letter-spacing: 0.12em; display: block; margin-bottom: 0.35rem; }
.ws-title { font-family: var(--font-display, sans-serif); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 900; color: #ffffff; margin: 0 0 0.35rem; }
.ws-sub { font-size: 0.92rem; color: rgba(255, 255, 255, 0.75); margin: 0; }
.ws-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.ws-case-card {
    background: #111726;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 1.15rem 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.85rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ws-case-card.is-featured {
    border-color: rgba(10, 99, 255, 0.6);
    box-shadow: 0 16px 40px rgba(10, 99, 255, 0.18);
}
.ws-case-card:hover {
    transform: translateY(-3px);
    border-color: #0a63ff;
    box-shadow: 0 20px 48px rgba(10, 99, 255, 0.24);
}
.ws-card-header { display: flex; justify-content: space-between; font-family: var(--font-mono, monospace); font-size: 0.68rem; color: rgba(255, 255, 255, 0.65); }
.ws-card-title { font-family: var(--font-display, sans-serif); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; color: #ffffff; margin: 0; line-height: 1.15; }
.ws-card-desc { font-size: 0.88rem; line-height: 1.45; color: rgba(255, 255, 255, 0.8); margin: 0; }
.ws-card-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 0.82rem; font-weight: 700; color: #38bdf8; text-decoration: none; transition: gap 0.2s ease; }
.ws-card-link:hover { gap: 10px; color: #ffffff; }

/* SECTION 09: BOUNDARIES (WHERE WE DRAW THE LINE) */
.boundaries-section { padding-block: clamp(2.25rem, 4vw, 3.5rem); background: var(--paper, #f6f8fc); }
.bs-split-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.bs-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: #0a63ff; letter-spacing: 0.12em; display: block; }
.bs-main-title { font-family: var(--font-display, sans-serif); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.035em; color: #050f33; line-height: 1.06; margin: 0.35rem 0 0; }
.bs-main-sub { font-size: 0.92rem; color: #5b6384; margin: 0.25rem 0 0; max-width: 520px; }
.bs-filter-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.85rem; }
.bs-pill { font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: #ffffff; border: 1px solid rgba(5, 15, 51, 0.14); color: #050f33; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 4px rgba(5,15,51,0.03); }
.bs-pill.is-active, .bs-pill:hover { background: #050f33; color: #ffffff; border-color: #050f33; }

.bs-board-wrap { position: relative; padding-left: 18px; }
.bs-laser-line { position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(180deg, #0a63ff 0%, #38bdf8 100%); box-shadow: 0 0 10px #0a63ff; border-radius: 2px; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0.85rem; }
.bs-card { background: #ffffff; border: 1px solid rgba(5, 15, 51, 0.12); border-radius: 14px; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.65rem; box-shadow: 0 2px 6px rgba(5,15,51,0.03); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bs-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(5,15,51,0.08); }
.bs-dont-label, .bs-instead-label { font-family: var(--font-mono, monospace); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; }
.bs-dont-label { color: #ef4444; }
.bs-dont-title { font-family: var(--font-display, sans-serif); font-size: 1.05rem; font-weight: 700; color: #050f33; margin: 2px 0; text-decoration: line-through; text-decoration-color: #ef4444; }
.bs-dont-desc { font-size: 0.82rem; color: #5b6384; margin: 0; line-height: 1.4; }
.bs-instead-label { color: #0a63ff; }
.bs-instead-text { font-size: 0.85rem; font-weight: 600; color: #050f33; margin: 2px 0 0; line-height: 1.4; }

/* SECTION 10: UNIFIED COMPARISON */
.unified-comparison-block { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(5, 15, 51, 0.12); }
.uc-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: #0a63ff; letter-spacing: 0.12em; }
.uc-title { font-family: var(--font-display, sans-serif); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; color: #050f33; margin: 0.2rem 0 0; }
.uc-sub { font-size: 0.92rem; color: #5b6384; margin-top: 0.2rem; }
.uc-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.uc-col { background: #ffffff; border: 1px solid rgba(5, 15, 51, 0.12); border-radius: 16px; padding: 1.15rem 1.35rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.85rem; box-shadow: 0 3px 12px rgba(5,15,51,0.03); }
.uc-col.is-rafly { background: #050f33; color: #ffffff; border-color: #0a63ff; box-shadow: 0 16px 40px rgba(10, 99, 255, 0.18); }
.uc-col-badge { font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 800; color: #5b6384; letter-spacing: 0.08em; }
.uc-col-badge.is-accent { color: #38bdf8; }
.uc-node { padding: 8px 12px; background: #f1f5f9; border-radius: 8px; display: flex; justify-content: space-between; font-weight: 700; font-size: 0.85rem; color: #050f33; }
.uc-arrow { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: #94a3b8; margin-block: 4px; text-align: center; }
.uc-flow-unified { display: flex; flex-direction: column; gap: 0.85rem; }
.uc-u-core { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: 4px; }
.uc-u-core strong { font-family: var(--font-display, sans-serif); font-size: 1.25rem; color: #ffffff; }
.uc-u-core span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
.uc-u-pillars { display: flex; gap: 8px; flex-wrap: wrap; }
.uc-u-pillars span { font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 800; background: rgba(56, 189, 248, 0.2); color: #38bdf8; padding: 4px 8px; border-radius: 6px; }
.uc-verdict { font-size: 0.88rem; color: #5b6384; margin: 0; line-height: 1.45; }
.uc-verdict.is-accent { color: rgba(255, 255, 255, 0.92); }

/* SECTION 11: PRICING & FAQ */
.pricing-editorial-section { padding-block: clamp(2.5rem, 5vw, 4rem); background: #f6f8fc !important; }
.pe-head { margin-bottom: 1.75rem; text-align: left; }
.pe-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: #0a63ff; letter-spacing: 0.12em; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0.35rem; }
.pe-title { font-family: var(--font-display, sans-serif); font-size: clamp(1.8rem, 3.5vw, 2.75rem); font-weight: 900; letter-spacing: -0.035em; color: #06122f; margin: 0 0 0.4rem; }
.pe-sub { font-size: 0.95rem; color: #34405f; margin: 0; max-width: 580px; }

.pe-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
.pe-tier-card {
    background: #ffffff !important;
    border: 1px solid rgba(6, 18, 47, 0.14) !important;
    border-radius: 18px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    position: relative;
    box-shadow: 0 4px 16px rgba(6, 18, 47, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pe-tier-card:hover {
    transform: translateY(-4px);
    border-color: rgba(10, 99, 255, 0.4) !important;
    box-shadow: 0 16px 36px -8px rgba(6, 18, 47, 0.12);
}
.pe-tier-card.is-recommended {
    background: #ffffff !important;
    border: 2px solid #0a63ff !important;
    box-shadow: 0 16px 44px -8px rgba(10, 99, 255, 0.22);
    transform: translateY(-4px);
}
.pe-tier-top-tag { margin-bottom: 0.5rem; }
.pe-rec-badge {
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    font-weight: 800;
    color: #0a63ff;
    background: #eff6ff;
    border: 1px solid rgba(10, 99, 255, 0.25);
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.08em;
}
.pe-tier-card.is-recommended .pe-rec-badge {
    background: #0a63ff;
    color: #ffffff;
    border-color: #0a63ff;
    box-shadow: 0 4px 12px rgba(10, 99, 255, 0.3);
}

.pe-card-name { font-family: var(--font-display, sans-serif); font-size: 1.45rem; font-weight: 800; color: #06122f; margin: 0; }
.pe-card-sub { font-size: 0.85rem; color: #475569; margin: 4px 0 0; line-height: 1.4; }

.pe-price-row { margin-top: 1rem; display: flex; flex-direction: column; gap: 2px; }
.pe-price { font-family: var(--font-display, sans-serif); font-size: 1.85rem; font-weight: 900; color: #06122f; letter-spacing: -0.02em; }
.pe-price-sub { font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 700; color: #0a63ff; letter-spacing: 0.05em; text-transform: uppercase; }

.pe-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed rgba(6,18,47,0.1); padding-top: 1rem; }
.pe-feature-list li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: #1e293b; line-height: 1.35; }
.pe-check-circle {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #10b981;
    border: 1px solid #10b981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 900;
    flex-shrink: 0;
}
.pe-btn { width: 100%; text-align: center; justify-content: center; margin-top: 0.5rem; font-weight: 700; }
.pe-btn.btn-accent-glow { background: #0a63ff !important; color: #ffffff !important; box-shadow: 0 8px 24px -4px rgba(10, 99, 255, 0.35); border-color: #0a63ff !important; }
.pe-btn.btn-accent-glow:hover { background: #0842ad !important; transform: translateY(-2px); }

/* FAQ ACCORDION */
.pe-faq-wrap { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(6, 18, 47, 0.12); }
.pe-faq-head { margin-bottom: 1.5rem; }
.pe-faq-title-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-top: 0.25rem; }
.pe-faq-main-title { font-family: var(--font-display, sans-serif); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: #06122f; margin: 0; }
.pe-faq-sub { font-size: 0.9rem; color: #475569; margin: 4px 0 0; }

.pe-wa-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #22c55e;
    padding: 6px 14px;
    border-radius: 99px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12);
}
.pe-wa-badge:hover { background: #dcfce7; transform: translateY(-1px); color: #166534; box-shadow: 0 6px 16px rgba(34, 197, 94, 0.22); }
.pe-wa-dot { color: #22c55e; font-size: 0.55rem; animation: pulseLive 2s infinite; }

.pe-accordion { display: flex; flex-direction: column; gap: 10px; }
.pe-acc-item {
    background: #ffffff !important;
    border: 1px solid rgba(6, 18, 47, 0.12) !important;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(6, 18, 47, 0.02);
}
.pe-acc-item:hover { border-color: #0a63ff !important; box-shadow: 0 6px 18px rgba(10, 99, 255, 0.08); }
.pe-acc-item.is-active { border-color: #0a63ff !important; box-shadow: 0 8px 24px rgba(10, 99, 255, 0.12); }

.pe-acc-trigger {
    width: 100%;
    padding: 0.95rem 1.25rem;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}
.pe-acc-left { display: flex; align-items: center; gap: 12px; }
.pe-acc-num { font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 800; color: #0a63ff; background: #eff6ff; padding: 2px 7px; border-radius: 6px; }
.pe-acc-title { font-family: var(--font-display, sans-serif); font-size: 0.98rem; font-weight: 700; color: #06122f; }

.pe-acc-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid rgba(6, 18, 47, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.pe-acc-icon::before, .pe-acc-icon::after {
    content: '';
    position: absolute;
    background: #0a63ff;
    border-radius: 1px;
    transition: transform 0.3s ease;
}
.pe-acc-icon::before { width: 10px; height: 2px; }
.pe-acc-icon::after { width: 2px; height: 10px; }

.pe-acc-item.is-active .pe-acc-icon {
    background: #0a63ff;
    border-color: #0a63ff;
    transform: rotate(180deg);
}
.pe-acc-item.is-active .pe-acc-icon::before { background: #ffffff; }
.pe-acc-item.is-active .pe-acc-icon::after { transform: rotate(90deg); opacity: 0; background: #ffffff; }

.pe-acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden !important;
}
.pe-acc-item.is-active .pe-acc-panel {
    grid-template-rows: 1fr;
}

.pe-acc-body {
    min-height: 0;
    overflow: hidden;
    padding: 0 1.25rem 0 2.75rem;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.55;
    background: #f8fafc;
    border-left: 3px solid transparent;
    margin-left: 1.25rem;
    transition: padding 0.3s ease, border-color 0.3s ease;
}
.pe-acc-item.is-active .pe-acc-body {
    padding: 0.5rem 1.25rem 1.15rem 2.75rem;
    border-left-color: #0a63ff;
}
.pe-acc-body p { margin: 0; }

/* SECTION 12: CLOSE & LEAD FORM */
.close-editorial-section { padding-block: clamp(2.5rem, 5vw, 4rem); background: #f6f8fc !important; }
.ce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; align-items: start; }
.ce-copy { display: flex; flex-direction: column; gap: 0.85rem; }
.ce-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: #0a63ff; letter-spacing: 0.12em; display: block; }
.ce-title { font-family: var(--font-display, sans-serif); font-size: clamp(1.8rem, 3.5vw, 2.75rem); font-weight: 900; letter-spacing: -0.035em; color: #06122f; line-height: 1.05; margin: 0; }
.ce-lead { font-size: 0.95rem; line-height: 1.55; color: #475569; margin: 0; }
.ce-commitments { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; border-left: 2px solid #0a63ff; padding-left: 1rem; }
.ce-comm-item { display: flex; flex-direction: column; gap: 2px; }
.ce-comm-item strong { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: #0a63ff; letter-spacing: 0.1em; }
.ce-comm-item span { font-size: 0.88rem; color: #06122f; font-weight: 700; }

.ce-form-wrap {
    background: #ffffff !important;
    border: 1px solid rgba(10, 99, 255, 0.2) !important;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(6, 18, 47, 0.04), 0 24px 56px -12px rgba(10, 99, 255, 0.12);
    position: relative;
    overflow: hidden;
}
.form-hud-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 800;
    color: #0a63ff;
    padding-bottom: 0.75rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px dashed rgba(10, 99, 255, 0.2);
}
.form-hud-pulse { color: #10b981; font-size: 0.55rem; animation: pulseLive 2s infinite; }
.form-hud-sla { color: #475569; }

.lead-form-premium { display: flex; flex-direction: column; gap: 1.15rem; }
.lead-form-premium .field { display: flex; flex-direction: column; gap: 5px; }
.lead-form-premium .field label { font-family: var(--font-display, sans-serif); font-size: 0.82rem; font-weight: 800; color: #06122f; }
.lead-form-premium .field label .req { color: #0a63ff; font-weight: 900; }
.field-label-row { display: flex; justify-content: space-between; align-items: center; }
.field-quick-hint { font-family: var(--font-mono, monospace); font-size: 0.65rem; color: #0a63ff; font-weight: 700; }

.form-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px 6px; }
.form-tag-chip {
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: #0a63ff;
    background: #eff6ff;
    border: 1px solid rgba(10, 99, 255, 0.25);
    padding: 3px 9px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.form-tag-chip:hover, .form-tag-chip.is-selected {
    background: #0a63ff;
    color: #ffffff;
    border-color: #0a63ff;
    box-shadow: 0 2px 8px rgba(10, 99, 255, 0.25);
}

.lead-form-premium .form-control {
    background: #f8fafc !important;
    border: 1px solid rgba(6, 18, 47, 0.15) !important;
    border-radius: 10px;
    padding: 0.75rem 0.95rem;
    font-size: 0.88rem;
    color: #06122f;
    transition: all 0.25s ease;
}
.lead-form-premium .form-control:focus {
    background: #ffffff !important;
    border-color: #0a63ff !important;
    box-shadow: 0 0 0 3px rgba(10, 99, 255, 0.16) !important;
    outline: none;
}
.lead-form-premium textarea.form-control { resize: vertical; min-height: 90px; }

.btn-lead-submit {
    width: 100%;
    padding: 0.95rem 1.5rem;
    background: #06122f !important;
    color: #ffffff !important;
    border: 1px solid #06122f !important;
    border-radius: 99px;
    font-family: var(--font-display, sans-serif);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 24px -4px rgba(6, 18, 47, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-lead-submit:hover {
    background: #0a63ff !important;
    border-color: #0a63ff !important;
    box-shadow: 0 12px 32px -4px rgba(10, 99, 255, 0.4);
    transform: translateY(-2px);
}

@media (max-width: 960px) {
    .bl-split-grid { grid-template-columns: 1fr; }
    .bl-table-tabs { grid-template-columns: 1fr 1fr; }
    .uc-split-grid { grid-template-columns: 1fr; }
    .ce-grid { grid-template-columns: 1fr; }
}

/* ARCHITECTURAL CANVAS FIELD (SECTION 06) */
.bl-architectural-stage {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(5, 15, 51, 0.12);
    border-radius: 20px;
    padding: clamp(1.5rem, 3vw, 3rem);
    box-shadow: 0 24px 64px -16px rgba(5, 15, 51, 0.08);
    overflow: hidden;
}
.bl-canvas-hud {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    color: #0a63ff;
    margin-bottom: 1rem;
    border-bottom: 1px dashed rgba(10, 99, 255, 0.2);
    padding-bottom: 0.5rem;
}
.bl-svg-canvas {
    width: 100%;
    height: 120px;
    margin-block: 0.5rem;
}
.bl-blueprint-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.bl-bp-node {
    background: rgba(10, 99, 255, 0.06);
    border: 1px solid rgba(10, 99, 255, 0.2);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    color: #0a63ff;
}

/* MATERIAL SPECIMEN INSPECTOR (SECTION 07) */
.tk-inspector {
    background: #050f33;
    color: #ffffff;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    border: 1px solid #0a63ff;
    margin-bottom: 2rem;
    box-shadow: 0 16px 40px rgba(10, 99, 255, 0.2);
    display: none;
    flex-direction: column;
    gap: 4px;
}
.tk-inspector.is-active {
    display: flex;
}
.tk-inspect-cat {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.1em;
}
.tk-inspect-name {
    font-family: var(--font-display, sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
}
.tk-inspect-meta {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* SPATIAL BOUNDARY BOARD & LASER LINE (SECTION 09) */
.bs-split-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.bs-main-title {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #050f33;
    line-height: 1.06;
    margin: 0.5rem 0 0;
}
.bs-main-sub {
    font-size: 1.05rem;
    color: #5b6384;
    margin: 0.5rem 0 0;
}
.bs-board-wrap {
    position: relative;
    padding-left: 24px;
}
.bs-laser-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0%;
    background: linear-gradient(180deg, #0a63ff 0%, #38bdf8 100%);
    box-shadow: 0 0 12px #0a63ff;
    transition: height 0.1s linear;
}

/* ARCHITECTURAL LEVEL TIERS (SECTION 11) */
.pe-tier-card.tier-foundation { min-height: 380px; }
.pe-tier-card.tier-growth { min-height: 420px; transform: scale(1.03); }
.pe-tier-card.tier-scale { min-height: 400px; }

/* ==========================================================================
   MULTI-PLANE ATMOSPHERE & CINEMATIC MOTION SYSTEM
   ========================================================================== */
:root {
    --ease-primary: cubic-bezier(.16,1,.3,1);
    --ease-secondary: cubic-bezier(.22,1,.36,1);
    --ease-soft: cubic-bezier(.25,.8,.25,1);
}

.rafly-atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.atmos-grain {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
    opacity: 0.5;
    animation: grainOffset 8s steps(10) infinite;
}

@keyframes grainOffset {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

.atmos-grid {
    position: absolute;
    inset: 0;
    background-size: 60px 60px;
    background-image: linear-gradient(to right, rgba(5, 15, 51, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(5, 15, 51, 0.03) 1px, transparent 1px);
    transition: transform 0.1s ease-out;
}

.atmos-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(10, 99, 255, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}

.atmos-ghost-type {
    position: absolute;
    inset: 0;
    font-family: var(--font-display, sans-serif);
    font-size: 16vw;
    font-weight: 900;
    color: rgba(5, 15, 51, 0.015);
    line-height: 1;
    user-select: none;
    overflow: hidden;
}

.gt-word {
    position: absolute;
    white-space: nowrap;
    letter-spacing: -0.05em;
}

.atmos-dust-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.atmos-light-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(10, 99, 255, 0.04) 50%, transparent 100%);
    transform: skewX(-25deg);
}

.atmos-light-sweep.is-active {
    animation: lightSweep 1.2s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes lightSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* CUSTOM MAGNETIC CURSOR (Defined in master 07-fx.css) */

/* SCAN SWEEP ON BOUNDARY CARD HOVER */
.bs-card {
    position: relative;
    overflow: hidden;
}

.bs-card-scan-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(10, 99, 255, 0.1) 50%, transparent 100%);
    animation: cardScan 0.6s var(--ease-primary) forwards;
    pointer-events: none;
}

@keyframes cardScan {
    0% { left: -100%; }
    100% { left: 100%; }
}