/* Prototype-derived reusable visual components */

body.cinematic-shell,
.vc-app-shell {
    background:
        radial-gradient(ellipse at top, rgba(139, 92, 246, 0.18), transparent 42%),
        linear-gradient(180deg, #020204 0%, #050509 42%, #070711 100%);
}

.vc-section-wrapper {
    transform-style: preserve-3d;
}

.vc-animated-grid {
    align-items: stretch;
}

.vc-particle-layer {
    display: block;
}

.vc-particle-layer .grid-overlay {
    display: block;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
}

.vc-particle-layer .gradient-orb {
    display: block;
    filter: blur(92px);
    opacity: 0.52;
}

.vc-particle-layer .orb-a {
    background: rgba(139, 92, 246, 0.28);
}

.vc-particle-layer .orb-b {
    background: rgba(99, 102, 241, 0.2);
}

.vc-particle-layer .orb-c {
    background: rgba(217, 70, 239, 0.16);
}

.vc-orbit-core {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(500px, 78vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transform-style: preserve-3d;
    perspective: 1000px;
    z-index: 1;
}

.vc-orbit-glow {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.22);
    filter: blur(92px);
}

.vc-orbit-ring {
    position: absolute;
    border-radius: 999px;
    transform-style: preserve-3d;
}

.vc-orbit-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.vc-orbit-ring-outer {
    inset: 0;
    transform: rotateX(75deg) rotateY(15deg);
}

.vc-orbit-ring-outer::before {
    border: 2px solid rgba(139, 92, 246, 0.24);
    box-shadow: inset 0 0 40px rgba(139, 92, 246, 0.16);
}

.vc-orbit-ring-middle {
    inset: 8%;
    transform: rotateX(65deg) rotateY(-45deg);
}

.vc-orbit-ring-middle::before {
    border: 1px solid rgba(217, 70, 239, 0.34);
    box-shadow: inset 0 0 30px rgba(217, 70, 239, 0.18);
}

.vc-orbit-ring-inner {
    inset: 16%;
    transform: rotateX(55deg) rotateY(60deg);
}

.vc-orbit-ring-inner::before {
    border: 1.5px dashed rgba(129, 140, 248, 0.44);
}

.vc-orbit-prism {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 112px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.vc-orbit-prism-glow,
.vc-orbit-prism-shell,
.vc-orbit-prism-core {
    position: absolute;
    inset: 0;
    transform: rotate(45deg);
}

.vc-orbit-prism-glow {
    background: linear-gradient(135deg, #8b5cf6, #d946ef, #4f46e5);
    filter: blur(18px);
    opacity: 0.72;
}

.vc-orbit-prism-shell {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.84), rgba(217, 70, 239, 0.76), rgba(79, 70, 229, 0.82));
    box-shadow: 0 0 54px rgba(139, 92, 246, 0.62);
    transition: transform 300ms ease;
}

.vc-orbit-core:hover .vc-orbit-prism-shell {
    transform: rotate(90deg) scale(1.1);
}

.vc-orbit-prism-core {
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(3, 3, 8, 0.52);
}

.vc-orbit-sphere {
    position: absolute;
    inset: 18%;
    border-radius: 999px;
    transform-style: preserve-3d;
}

.vc-sphere-glow,
.vc-sphere-shell,
.vc-sphere-wire,
.vc-sphere-core {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform-style: preserve-3d;
}

.vc-sphere-glow {
    inset: -12%;
    background:
        radial-gradient(circle at 38% 44%, rgba(217, 70, 239, 0.48), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.24), transparent 62%);
    filter: blur(30px);
    opacity: 0.92;
}

.vc-sphere-shell {
    background:
        radial-gradient(circle at 36% 38%, rgba(255, 255, 255, 0.22), transparent 7%),
        radial-gradient(circle at 50% 50%, rgba(188, 86, 255, 0.62), rgba(132, 70, 255, 0.38) 36%, rgba(20, 13, 42, 0.28) 62%, rgba(5, 5, 12, 0.08) 100%);
    box-shadow:
        inset -42px -28px 70px rgba(0, 0, 0, 0.42),
        inset 28px 24px 64px rgba(217, 70, 239, 0.28),
        0 0 90px rgba(139, 92, 246, 0.34);
    opacity: 0.72;
}

.vc-sphere-core {
    inset: 28%;
    background: radial-gradient(circle at 42% 38%, rgba(255, 255, 255, 0.18), rgba(196, 72, 255, 0.88) 36%, rgba(139, 92, 246, 0.76) 100%);
    filter: blur(0.2px);
    box-shadow: 0 0 54px rgba(217, 70, 239, 0.56);
    opacity: 0.9;
}

.vc-sphere-wire {
    border: 1px solid rgba(167, 139, 250, 0.28);
    box-shadow:
        inset 0 0 34px rgba(139, 92, 246, 0.08),
        0 0 18px rgba(139, 92, 246, 0.12);
}

.vc-wire-lat-1 {
    transform: rotateX(72deg) scaleY(0.34);
}

.vc-wire-lat-2 {
    transform: rotateX(64deg) scaleY(0.58);
}

.vc-wire-lat-3 {
    transform: rotateX(84deg) scaleY(0.16);
}

.vc-wire-lon-1 {
    transform: rotateY(0deg);
}

.vc-wire-lon-2 {
    transform: rotateY(58deg);
}

.vc-wire-lon-3 {
    transform: rotateY(-58deg);
}

.vc-orbit-node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.62);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.vc-orbit-node span {
    width: 21px;
    height: 21px;
    border-radius: 0.35rem;
    border: 1px solid rgba(196, 181, 253, 0.8);
    box-shadow: 0 0 18px rgba(196, 181, 253, 0.38);
}

.vc-node-database {
    left: 0;
    top: 26%;
}

.vc-node-cpu {
    right: 0;
    bottom: 26%;
}

.vc-node-network {
    left: 50%;
    top: -4%;
    width: 48px;
    height: 48px;
    transform: translateX(-50%);
}

.vc-node-server {
    left: 25%;
    bottom: 3%;
    width: 48px;
    height: 48px;
}

.vc-ai-hero,
.vc-glass-card,
.vc-feature-panel,
.vc-command-card,
.vc-dashboard-panel,
.vc-floating-panel {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        rgba(0, 0, 0, 0.32);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
}

body.cinematic-shell :is(.glass-card, .page-intro, .auth-shell, .form-shell, .contact-highlights, .chat-panel, .profile-hero, .profile-panel, .dashboard-welcome-card, .dashboard-usage, .agent-module-summary, .ticket-conversation-panel, .tab-shell, .overview-panel, .overview-note, .overview-kpi-card, .agent-builder-shell, .agent-builder-sidebar, .agent-checkout-shell).vc-glass-card {
    border-color: rgba(255, 255, 255, 0.11);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
        rgba(3, 5, 12, 0.44);
    box-shadow:
        0 28px 84px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page='home'] .hero-visual-stage .vc-orbit-core {
    z-index: 0;
    opacity: 0.82;
}

body[data-page='home'] .home-dashboard-preview {
    z-index: 1;
}

body[data-page='home'] .hero-floating-card {
    z-index: 3;
}

body[data-page='home'] .home-stage-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.74fr);
    min-height: clamp(560px, 68vh, 780px);
}

body[data-page='home'] .hero-copy {
    position: relative;
    min-height: clamp(500px, 62vh, 720px);
    align-content: center;
    isolation: isolate;
    overflow: visible;
    max-width: none;
}

body[data-page='home'] .hero-core-backdrop {
    position: absolute;
    left: min(54%, 34rem);
    top: 50%;
    width: min(760px, 82vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.86;
    perspective: 1400px;
}

body[data-page='home'] .hero-core-backdrop::before {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.18), transparent 65%);
    filter: blur(12px);
}

body[data-page='home'] .hero-core-backdrop .vc-orbit-core {
    position: absolute;
    inset: 0;
    width: 100%;
    transform: none;
    opacity: 1;
}

body[data-page='home'] .hero-core-backdrop .vc-orbit-ring-outer {
    inset: 1%;
}

body[data-page='home'] .hero-core-backdrop .vc-orbit-ring-middle {
    inset: 12%;
}

body[data-page='home'] .hero-core-backdrop .vc-orbit-ring-inner {
    inset: 22%;
}

body[data-page='home'] .hero-core-light {
    position: absolute;
    width: 18px;
    aspect-ratio: 1;
    border-radius: 999px;
    background: rgba(232, 221, 255, 0.9);
    box-shadow: 0 0 28px rgba(196, 181, 253, 0.6);
}

body[data-page='home'] .hero-core-light-a {
    left: 36%;
    top: 16%;
}

body[data-page='home'] .hero-core-light-b {
    right: 18%;
    bottom: 24%;
}

body[data-page='home'] .hero-core-light-c {
    left: 13%;
    bottom: 16%;
}

body[data-page='home'] .hero-copy-content,
body[data-page='home'] .hero-proof-grid {
    position: relative;
    z-index: 2;
}

body[data-page='home'] .hero-copy-content {
    display: grid;
    gap: 1.15rem;
    max-width: 45rem;
}

body[data-page='home'] .hero-command-stack {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 0.85rem;
    align-self: center;
}

body[data-page='home'] .hero-command-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    min-height: 78px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background:
        linear-gradient(110deg, rgba(139, 92, 246, 0.2), rgba(255, 255, 255, 0.035) 34%, rgba(255, 255, 255, 0.015)),
        rgba(3, 4, 11, 0.56);
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body[data-page='home'] .hero-command-card:nth-child(2) {
    transform: translateX(1.8rem);
}

body[data-page='home'] .hero-command-card:nth-child(3) {
    transform: translateX(1rem);
}

body[data-page='home'] .hero-command-card strong,
body[data-page='home'] .hero-command-card p {
    margin: 0;
}

body[data-page='home'] .hero-command-card strong {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.2;
}

body[data-page='home'] .hero-command-card p {
    margin-top: 0.26rem;
    color: rgba(225, 231, 255, 0.72);
    font-size: 0.9rem;
    line-height: 1.35;
}

body[data-page='home'] .hero-command-icon {
    width: 2.4rem;
    aspect-ratio: 1;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.88), rgba(217, 70, 239, 0.72));
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.34);
    position: relative;
}

body[data-page='home'] .hero-command-icon::before,
body[data-page='home'] .hero-command-icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
}

body[data-page='home'] .hero-command-icon::before {
    width: 46%;
    height: 46%;
    border: 1px solid rgba(255, 255, 255, 0.82);
}

body[data-page='home'] .hero-command-icon::after {
    width: 14%;
    height: 14%;
    background: rgba(255, 255, 255, 0.9);
}

/* Obsidian refinement pass: lightweight, violet-only, shared across pages. */
body.cinematic-shell {
    --obsidian-950: #050510;
    --obsidian-900: #08080F;
    --obsidian-850: #0B0B16;
    --obsidian-800: #111122;
    --violet-soft-shadow: 0 24px 80px rgba(139, 92, 246, 0.1);
    --violet-soft-shadow-hover: 0 30px 90px rgba(139, 92, 246, 0.2);
    background:
        radial-gradient(circle at 50% -12%, rgba(139, 92, 246, 0.16), transparent 34%),
        linear-gradient(180deg, var(--obsidian-950), var(--obsidian-900) 45%, var(--obsidian-850));
    color: #ffffff;
}

body.cinematic-shell .background-shell {
    background:
        radial-gradient(circle at 22% 16%, rgba(139, 92, 246, 0.13), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(167, 139, 250, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(5, 5, 16, 0.9), rgba(8, 8, 15, 0.96));
}

body.cinematic-shell :is(
    .glass-card,
    .page-intro,
    .auth-shell,
    .auth-copy,
    .form-shell,
    .contact-highlights,
    .chat-panel,
    .profile-hero,
    .profile-panel,
    .dashboard-welcome-card,
    .dashboard-usage,
    .agent-module-summary,
    .ticket-conversation-panel,
    .tab-shell,
    .metric-card,
    .overview-panel,
    .overview-note,
    .overview-kpi-card,
    .agent-builder-shell,
    .agent-builder-sidebar,
    .agent-builder-wizard,
    .agent-builder-config,
    .agent-builder-deploy,
    .agent-builder-pricing,
    .agent-checkout-shell,
    .pricing-v2-card,
    .pricing-proof-card,
    .pricing-stage-signal,
    .ticket-summary-card,
    .history-item,
    .workspace-flow-step,
    .hero-proof-card,
    .hero-command-card,
    .feature-card,
    .stat-card,
    .timeline-card,
    .functionality-stage,
    .delivery-stage,
    .workspace-stage,
    .workspace-stage-panel,
    .workspace-stage-metric
) {
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.05);
    box-shadow: var(--violet-soft-shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background 300ms ease,
        box-shadow 300ms ease,
        color 300ms ease;
    will-change: transform;
}

body.cinematic-shell :is(
    .glass-card,
    .page-intro,
    .auth-shell,
    .auth-copy,
    .form-shell,
    .chat-panel,
    .profile-hero,
    .profile-panel,
    .ticket-summary-card,
    .history-item,
    .workspace-flow-step,
    .hero-proof-card,
    .hero-command-card,
    .feature-card,
    .stat-card,
    .pricing-v2-card,
    .workspace-stage-panel,
    .workspace-stage-metric
):hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(167, 139, 250, 0.4);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
        rgba(255, 255, 255, 0.08);
    box-shadow: var(--violet-soft-shadow-hover);
}

body.cinematic-shell :is(.button, .pricing-v2-segment-btn, .filter-pill, .tab-button) {
    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background 300ms ease,
        box-shadow 300ms ease,
        color 300ms ease;
    transform: translate3d(var(--magnetic-x, 0), var(--magnetic-y, 0), 0);
}

body.cinematic-shell :is(.button, .pricing-v2-segment-btn, .filter-pill, .tab-button):hover {
    border-color: rgba(167, 139, 250, 0.4);
    color: #c4b5fd;
    box-shadow: 0 16px 44px rgba(139, 92, 246, 0.18);
}

body[data-page='home'] .home-stage {
    background:
        radial-gradient(circle at 42% 34%, rgba(139, 92, 246, 0.16), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        rgba(5, 5, 16, 0.72);
}

body[data-page='home'] .hero-copy-content {
    gap: 1.35rem;
    max-width: 36rem;
}

body[data-page='home'] .hero-copy h1 {
    max-width: 9.4ch;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.9;
}

body[data-page='home'] .hero-lead {
    max-width: 36rem;
    color: rgb(212, 212, 216);
    line-height: 1.75;
}

body[data-page='home'] .hero-title-accent {
    background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 42%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body[data-page='home'] .hero-signal-pill,
body.cinematic-shell .eyebrow {
    border-color: rgba(139, 92, 246, 0.22);
    background: rgba(17, 17, 34, 0.72);
    color: #c4b5fd;
}

body[data-page='home'] .hero-command-stack {
    gap: 1rem;
}

body[data-page='home'] .hero-proof-grid {
    gap: 1rem;
}

.vc-glow-border {
    position: relative;
}

.vc-glow-border::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(167, 139, 250, 0.24);
    box-shadow: 0 0 42px rgba(139, 92, 246, 0.2);
    pointer-events: none;
}

body.cinematic-shell .button.vc-premium-button,
.vc-premium-button {
    position: relative;
    overflow: hidden;
}

body.cinematic-shell .button.vc-premium-button::before,
.vc-premium-button::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: transform 0.5s ease;
    pointer-events: none;
}

body.cinematic-shell .button.vc-premium-button:hover::before,
.vc-premium-button:hover::before {
    transform: translateX(110%);
}

body.cinematic-shell .button.vc-premium-button > * {
    position: relative;
    z-index: 1;
}

.vc-feature-panel,
.vc-command-card,
.vc-dashboard-panel,
.vc-floating-panel {
    position: relative;
    overflow: hidden;
}

.vc-feature-panel::before,
.vc-command-card::before,
.vc-dashboard-panel::before,
.vc-floating-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(139, 92, 246, 0.08));
    opacity: 0.38;
    pointer-events: none;
}

.vc-command-card:hover,
.vc-feature-panel:hover,
.vc-dashboard-panel:hover {
    border-color: rgba(167, 139, 250, 0.32);
}

@media (max-width: 860px) {
    .vc-orbit-core {
        position: relative;
        inset: auto;
        width: min(420px, 88vw);
        margin-inline: auto;
        transform: none;
    }

    body[data-page='home'] .home-stage-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    body[data-page='home'] .hero-copy {
        min-height: clamp(520px, 78vh, 680px);
    }

    body[data-page='home'] .hero-core-backdrop {
        left: 50%;
        top: 46%;
        width: min(560px, 116vw);
        opacity: 0.74;
    }

    body[data-page='home'] .hero-command-card,
    body[data-page='home'] .hero-command-card:nth-child(2),
    body[data-page='home'] .hero-command-card:nth-child(3) {
        transform: none;
    }
}

/* Final all-page obsidian pass. This intentionally sits last so older page CSS cannot pull pages apart. */
body.cinematic-shell :is(.site-main, .app-main) {
    background: transparent;
}

body.cinematic-shell :is(.site-main, .app-main) > :where(.section, .app-page) {
    width: min(100%, 80rem);
    margin-inline: auto;
    padding-block: clamp(4.5rem, 8vw, 8rem);
    padding-inline: clamp(1.5rem, 3vw, 2.5rem);
}

body.cinematic-shell :is(.section-heading, .section-copy, .page-intro, .pricing-v2-head, .workspace-stage-copy, .auth-copy, .profile-hero-copy) :is(h1, h2) {
    color: #ffffff;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.92;
}

body.cinematic-shell :is(.section-heading, .section-copy, .page-intro, .pricing-v2-head, .workspace-stage-copy, .auth-copy, .profile-hero-copy) p {
    color: #d4d4d8;
    line-height: 1.75;
}

body.cinematic-shell :is(
    .profile-page .profile-hero,
    .profile-page .profile-panel,
    .profile-summary-card,
    .profile-form-shell,
    .billing-history-block,
    .profile-info-row,
    .form-section,
    .subscription-highlight,
    .usage-progress-card,
    .profile-stat-card,
    .profile-note-item,
    .activity-entry,
    .dashboard-pane,
    .history-card,
    .history-item,
    .chat-panel,
    .dashboard-welcome-card,
    .dashboard-usage,
    .dashboard-usage-stat,
    .agent-module-summary,
    .workspace-stage,
    .workspace-stage-panel,
    .workspace-stage-metric,
    .support-stage-meta span,
    .contact-highlights,
    .contact-highlights article,
    .ticket-list-header,
    .ticket-summary-card,
    .ticket-conversation-panel,
    .ticket-access-shell,
    .ticket-success-shell,
    .pricing-v2-card,
    .pricing-stage-signal,
    .pricing-proof-card,
    .auth-proof-item,
    .auth-shell,
    .form-shell,
    .tab-shell,
    .metric-card,
    .overview-panel,
    .overview-note,
    .overview-kpi-card,
    .agent-builder-shell,
    .agent-builder-sidebar,
    .agent-builder-wizard,
    .agent-builder-config,
    .agent-builder-deploy,
    .agent-builder-pricing,
    .agent-builder-card,
    .agent-builder-choice,
    .agent-builder-feature,
    .agent-builder-toggle,
    .agent-checkout-shell,
    .agent-checkout-card,
    .data-table,
    .table-wrap
) {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 1.5rem !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.05) !important;
    box-shadow:
        0 24px 80px rgba(139, 92, 246, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

body.cinematic-shell :is(
    .profile-page .profile-hero,
    .profile-page .profile-panel,
    .dashboard-pane,
    .history-item,
    .chat-panel,
    .ticket-summary-card,
    .ticket-conversation-panel,
    .pricing-v2-card,
    .auth-shell,
    .form-shell,
    .metric-card,
    .overview-panel,
    .overview-kpi-card,
    .agent-builder-card,
    .agent-builder-choice,
    .agent-builder-feature,
    .agent-checkout-card
):hover {
    transform: translate3d(0, -4px, 0) !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
        rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 90px rgba(139, 92, 246, 0.2) !important;
}

body.cinematic-shell :is(input, textarea, select, .dashboard-preview-input, .chat-form textarea) {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(17, 17, 34, 0.7);
    color: #ffffff;
}

body.cinematic-shell :is(input, textarea, select):focus {
    border-color: rgba(167, 139, 250, 0.46);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

body.cinematic-shell :is(.button-primary, .pricing-v2-segment-btn.is-active, .tab-button.is-active, .filter-pill.is-active) {
    border-color: rgba(196, 181, 253, 0.34);
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #ffffff;
    box-shadow: 0 18px 52px rgba(139, 92, 246, 0.24);
}

body.cinematic-shell :is(.button-secondary, .button-ghost, .pricing-v2-segment-btn, .tab-button, .filter-pill) {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e7;
}

body.cinematic-shell :is(.status-pill, .info-pill, .profile-mini-pill, .profile-plan-pill, .subscription-plan-tag, .pricing-v2-save, .notification-badge) {
    border-color: rgba(139, 92, 246, 0.22);
    background: rgba(139, 92, 246, 0.12);
    color: #ddd6fe;
}

body[data-page='home'] .home-stage {
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

body[data-page='home'] .home-stage-grid {
    min-height: clamp(440px, 56vh, 640px);
    align-items: center;
}

body[data-page='home'] .hero-copy {
    min-height: clamp(420px, 52vh, 620px);
}

body[data-page='home'] .hero-core-backdrop {
    left: min(58%, 34rem);
    width: min(660px, 76vw);
    opacity: 0.64;
}

body[data-page='home'] .hero-copy-content {
    max-width: 38rem;
}

body[data-page='home'] .hero-copy h1 {
    max-width: 10ch;
    font-size: clamp(3.15rem, 6.2vw, 6rem);
}

body[data-page='home'] .hero-proof-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

body[data-page='home'] .hero-proof-card {
    min-height: 100%;
    padding: 1rem;
}

body[data-page='home'] .hero-proof-card strong {
    font-size: 0.96rem;
    line-height: 1.45;
}

body[data-page='home'] .stat-strip {
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

body[data-page='home'] .hero-command-card:nth-child(2),
body[data-page='home'] .hero-command-card:nth-child(3) {
    transform: none;
}

body[data-page='home'] .hero-command-stack {
    max-width: 30rem;
    margin-inline: auto 0;
}

@media (max-width: 1180px) {
    body[data-page='home'] .hero-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page='home'] .hero-command-stack {
        max-width: none;
        margin-inline: 0;
    }
}

@media (max-width: 760px) {
    body.cinematic-shell :is(.site-main, .app-main) > :where(.section, .app-page) {
        padding-block: 4rem;
        padding-inline: 1rem;
    }

    body[data-page='home'] .hero-proof-grid {
        grid-template-columns: 1fr;
    }

    body[data-page='home'] .hero-copy {
        min-height: auto;
        padding-block: 3rem;
    }

    body[data-page='home'] .hero-core-backdrop {
        opacity: 0.38;
        width: min(520px, 120vw);
    }
}