:root {
  color-scheme: dark;
  --bg: #000;
  --white: #fff;
  --line: rgba(255, 255, 255, 0.18);
  --px: 50%;
  --py: 46%;
  --light-power: 0;
  --cta-content-gap: clamp(20px, 2.8vh, 30px);
}

/* Mobile production lock 2026-06-25: scroll-first layout, stable spacing. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100vw - 48px), 356px) !important;
  }

  body .site-shell,
  body .pages,
  body .page {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body .page.content-page,
  body #about.page.content-page,
  body #ai-tools.page.content-page,
  body #ai-sites.page.content-page,
  body #ai-design.page.content-page,
  body #contacts.page.content-page {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    touch-action: pan-y !important;
  }

  body #about.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout.tools-layout,
  body #ai-sites.page.content-page .section-layout,
  body #ai-design.page.content-page .section-layout,
  body #contacts.page.content-page .section-layout {
    position: relative !important;
    inset: auto !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 34px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body #about.page.content-page .section-copy,
  body #ai-tools.page.content-page .section-copy,
  body #ai-sites.page.content-page .section-copy,
  body #ai-design.page.content-page .section-copy,
  body #contacts.page.content-page .section-copy {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }

  body #about.page.content-page .rocket-scene {
    order: 1 !important;
    width: 100% !important;
    height: clamp(212px, 29svh, 260px) !important;
    margin: 0 auto -4px !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #about.page.content-page .rocket-asset,
  body #about.page.content-page .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(39vw, 158px) !important;
    max-height: 96% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate(-50%, -50%) !important;
  }

  body #about.page.content-page .section-copy {
    order: 2 !important;
    margin-top: -8px !important;
  }

  body #ai-tools.page.content-page .tools-lab {
    order: 1 !important;
    width: 100% !important;
    height: clamp(150px, 24svh, 210px) !important;
    margin: 0 auto -2px !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #ai-sites.page.content-page .ai-laptop-stage {
    order: 1 !important;
    width: 100% !important;
    height: clamp(172px, 27svh, 230px) !important;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #ai-design.page.content-page .design-hourglass-scene {
    order: 1 !important;
    width: 100% !important;
    height: clamp(212px, 31svh, 280px) !important;
    margin: 0 auto -2px !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #contacts.page.content-page .contact-jet-scene {
    order: 1 !important;
    width: 100% !important;
    height: clamp(180px, 28svh, 252px) !important;
    margin: 0 auto -2px !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #ai-tools.page.content-page .section-copy,
  body #ai-sites.page.content-page .section-copy,
  body #ai-design.page.content-page .section-copy,
  body #contacts.page.content-page .section-copy {
    order: 2 !important;
  }

  body .section-kicker {
    margin-top: 0 !important;
  }

  body .section-copy h2 {
    max-width: 100% !important;
  }

  body #ai-tools.page.content-page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page.content-page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page.content-page .section-copy h2 {
    order: 2 !important;
    margin-bottom: 0 !important;
  }

  body #ai-tools.page.content-page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page.content-page .tool-copy-stack {
    order: 4 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page.content-page .tool-cta {
    order: 5 !important;
    align-self: flex-start !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-disabled {
    order: 6 !important;
    min-height: 56px !important;
    margin-top: 10px !important;
  }

  body .metric-row,
  body .site-benefits,
  body .contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 22px !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 18px !important;
    align-items: center !important;
    padding: 13px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 74px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    place-self: center !important;
    display: grid !important;
    place-items: center !important;
    line-height: 34px !important;
    text-align: center !important;
  }

  body .tool-tab > span:first-child {
    font-size: 9px !important;
    padding-top: 1px !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body .action-link {
    align-self: flex-start !important;
    margin-top: 26px !important;
    margin-bottom: 0 !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 34px auto max(18px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body .mobile-page-legal a,
  body .mobile-page-legal span {
    text-align: center !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    right: auto !important;
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    width: min(calc(100vw - 56px), 320px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  body .page-home .brand-lockup {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100vw - 72px), 328px) !important;
    max-width: min(calc(100vw - 72px), 328px) !important;
    aspect-ratio: 2.92 / 1 !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body .page-home .logo-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform: translateX(1.9%) !important;
  }

  body .page-home .logo-viewport {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  body .page-home .logo-pass {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.25% !important;
    right: 13.15% !important;
    bottom: 15.2% !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) clamp(27px, 7.6vw, 36px) repeat(7, max-content) !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: clamp(7px, 2vw, 9.5px) !important;
    letter-spacing: 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    width: clamp(27px, 7.6vw, 36px) !important;
    flex: 0 0 clamp(27px, 7.6vw, 36px) !important;
  }

  body .page-home .wave-print {
    opacity: 0.94 !important;
    filter: contrast(1.18) brightness(1.1) !important;
  }

  body .page-home .home-cinema-trails {
    opacity: 0.28 !important;
  }

  body .side-rail:not(.is-open) {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    left: 19px !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    margin: 0 10px 14px auto !important;
  }

  body .side-rail.is-open .menu-toggle span {
    left: 11px !important;
    width: 17px !important;
  }

  body .brand-lockup img,
  body .glass-visual img,
  body .direct-bolid-object,
  body .glass-rocket,
  body .ai-laptop-device,
  body .design-hourglass-image,
  body .contact-jet-image {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
  }
}

@media (max-width: 380px) {
  body {
    --mobile-page-width: min(calc(100vw - 36px), 344px) !important;
  }
}

/* Mobile production stabilizer 2026-06-25: scroll-first layout, centered content. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100vw - 52px), 352px) !important;
  }

  body .site-shell {
    width: 100% !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  body .page {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body .page.content-page.is-active {
    height: 100svh !important;
    min-height: 100svh !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  body .content-page .section-layout,
  body .content-page .section-layout-reverse,
  body #ai-tools.page.content-page .section-layout.tools-layout,
  body #ai-sites.page.content-page .section-layout,
  body #ai-design.page.content-page .section-layout,
  body #contacts.page.content-page .section-layout {
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 24px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
  }

  body .section-copy {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  body .section-visual,
  body .glass-visual,
  body .tools-lab {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  body .section-kicker {
    margin-top: 0 !important;
  }

  body .section-copy h2 {
    max-width: 100% !important;
  }

  body .section-copy p {
    max-width: 100% !important;
  }

  body #about.page.content-page .section-layout {
    padding-top: 12px !important;
    gap: 10px !important;
  }

  body #about.page.content-page .visual-about {
    height: 250px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  body #about.page.content-page .rocket-scene {
    width: 100% !important;
    height: 250px !important;
  }

  body #about.page.content-page .rocket-halo {
    left: 50% !important;
    top: 52% !important;
    width: 240px !important;
    height: 240px !important;
    transform: translate(-50%, -50%) !important;
  }

  body #about.page.content-page .glass-rocket {
    left: 50% !important;
    top: 0 !important;
    width: auto !important;
    height: 232px !important;
    max-height: 232px !important;
    max-width: 70% !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: translateX(-50%) !important;
  }

  body #about.page.content-page .visual-metric-row {
    display: none !important;
  }

  body #ai-tools.page.content-page .section-layout.tools-layout {
    padding-top: 14px !important;
    gap: 14px !important;
  }

  body #ai-tools.page.content-page .tools-lab {
    height: 174px !important;
    margin: 0 auto !important;
  }

  body #ai-tools.page.content-page .direct-bolid-scene,
  body #ai-tools.page.content-page .racer-build-scene {
    width: 100% !important;
    height: 174px !important;
    overflow: visible !important;
  }

  body #ai-tools.page.content-page .direct-bolid-object {
    left: 50% !important;
    top: 0 !important;
    width: 112% !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
  }

  body #ai-tools.page.content-page .section-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body #ai-tools.page.content-page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page.content-page h2 {
    order: 2 !important;
    margin-bottom: 0 !important;
  }

  body #ai-tools.page.content-page .tool-tabs {
    order: 3 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-active {
    order: 1 !important;
  }

  body #ai-tools.page.content-page .tool-copy-stack {
    order: 4 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body #ai-tools.page.content-page .tool-panel {
    margin: 0 !important;
  }

  body #ai-tools.page.content-page .tool-panel p {
    margin: 0 !important;
  }

  body #ai-tools.page.content-page .tool-cta {
    margin: 22px 0 0 !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-disabled {
    order: 6 !important;
    min-height: 56px !important;
    opacity: 0.42 !important;
  }

  body #ai-tools.page.content-page .tool-points {
    display: none !important;
  }

  body #ai-sites.page.content-page .section-layout,
  body #ai-design.page.content-page .section-layout,
  body #contacts.page.content-page .section-layout {
    padding-top: 18px !important;
  }

  body #ai-sites.page.content-page .visual-sites {
    height: 222px !important;
  }

  body #ai-sites.page.content-page .ai-laptop-stage {
    transform: none !important;
  }

  body #ai-sites.page.content-page .ai-laptop-device {
    width: 108% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body #ai-design.page.content-page .visual-design {
    height: 258px !important;
  }

  body #ai-design.page.content-page .design-hourglass-image {
    height: 250px !important;
    max-width: 78% !important;
    object-fit: contain !important;
  }

  body #contacts.page.content-page .visual-contacts {
    height: 226px !important;
  }

  body #contacts.page.content-page .contact-jet-image {
    width: 108% !important;
    max-width: none !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .site-benefits,
  body .design-metric-row,
  body .contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 20px 0 0 !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 18px !important;
    align-items: center !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 68px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    place-self: center !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body .tool-tab > span:first-child {
    padding: 0 !important;
    font-size: 8px !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body .tool-tab strong,
  body .tool-tab small {
    line-height: 1.25 !important;
  }

  body .tool-cta,
  body .action-link {
    align-self: flex-start !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    position: static !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 28px auto max(18px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body .mobile-page-legal a,
  body .mobile-page-legal span {
    text-align: center !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    right: auto !important;
    left: 50% !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    width: min(calc(100vw - 52px), 330px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  body .page-home .brand-lockup {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100vw - 56px), 332px) !important;
    max-width: min(calc(100vw - 56px), 332px) !important;
    aspect-ratio: 3.05 / 1 !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body .page-home .logo-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  body .page-home .logo-viewport {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  body .page-home .logo-pass {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 6.2% !important;
    right: 6.2% !important;
    bottom: 9.2% !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) clamp(35px, 9.2vw, 43px) repeat(7, max-content) !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: clamp(6.5px, 1.82vw, 8.5px) !important;
    letter-spacing: 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    width: clamp(35px, 9.2vw, 43px) !important;
    flex: 0 0 clamp(35px, 9.2vw, 43px) !important;
  }

  body .page-home .wave-print {
    opacity: 0.96 !important;
    filter: contrast(1.2) brightness(1.1) !important;
  }

  body .page-home .home-cinema-trails {
    opacity: 0.2 !important;
  }

  body .side-rail:not(.is-open) {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    left: 19px !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  body .side-rail.is-open .menu-toggle span {
    left: 11px !important;
    width: 16px !important;
  }

  body .brand-lockup img,
  body .glass-visual img,
  body .direct-bolid-object,
  body .glass-rocket,
  body .ai-laptop-device,
  body .design-hourglass-image,
  body .contact-jet-image {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
  }
}

@media (max-width: 380px) {
  body {
    --mobile-page-width: min(calc(100vw - 36px), 338px) !important;
  }
}

/* Mobile final layout lock 2026-06-25.
   Mobile is allowed to scroll; keep composition centered, readable and stable. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100vw - 48px), 356px) !important;
    --mobile-card-icon: 52px !important;
    --mobile-card-divider: 88px !important;
    --mobile-card-gap: 18px !important;
  }

  body .site-shell,
  body .hero,
  body .page {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body .content-page {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body .content-page::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  body #about.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout.tools-layout,
  body #ai-sites.page.content-page .section-layout,
  body #ai-design.page.content-page .section-layout,
  body #contacts.page.content-page .section-layout {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: var(--mobile-page-width) !important;
    min-width: 0 !important;
    max-width: var(--mobile-page-width) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: max(56px, env(safe-area-inset-top)) 0 42px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body #about.page.content-page .section-copy,
  body #ai-tools.page.content-page .section-copy,
  body #ai-sites.page.content-page .section-copy,
  body #ai-design.page.content-page .section-copy,
  body #contacts.page.content-page .section-copy {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .section-kicker {
    margin: 0 0 15px !important;
  }

  body .section-copy h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(34px, 10vw, 47px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
  }

  body .section-copy p,
  body .tool-copy-stack p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
  }

  body #about.page.content-page .rocket-scene,
  body #ai-tools.page.content-page .tools-lab,
  body #ai-sites.page.content-page .ai-laptop-stage,
  body #ai-design.page.content-page .design-hourglass-scene,
  body #contacts.page.content-page .contact-jet-scene {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body #about.page.content-page .rocket-scene {
    height: clamp(214px, 29svh, 260px) !important;
    margin-bottom: 10px !important;
  }

  body #about.page.content-page .glass-rocket {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(42vw, 170px) !important;
    max-width: 170px !important;
    transform: translate(-50%, -50%) !important;
  }

  body #about.page.content-page .visual-metric-row {
    display: none !important;
  }

  body #ai-tools.page.content-page .tools-lab {
    height: clamp(172px, 25svh, 226px) !important;
    margin-bottom: 18px !important;
  }

  body #ai-tools.page.content-page .direct-bolid-object {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(100%, 356px) !important;
    transform: translate(-50%, -50%) !important;
  }

  body #ai-sites.page.content-page .ai-laptop-stage {
    height: clamp(204px, 30svh, 270px) !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
  }

  body #ai-sites.page.content-page .ai-laptop-device {
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(94%, 330px) !important;
    max-width: 330px !important;
    transform: translateX(-50%) !important;
  }

  body #ai-design.page.content-page .design-hourglass-scene {
    height: clamp(226px, 32svh, 286px) !important;
    margin-bottom: 22px !important;
  }

  body #contacts.page.content-page .contact-jet-scene {
    height: clamp(184px, 27svh, 238px) !important;
    margin-bottom: 22px !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel,
  body .tool-tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    position: relative !important;
    display: grid !important;
    grid-template-columns: var(--mobile-card-icon) minmax(0, 1fr) !important;
    column-gap: var(--mobile-card-gap) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 15px 20px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: var(--mobile-card-divider) !important;
    top: 18px !important;
    bottom: 18px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    place-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body #ai-tools.page.content-page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page.content-page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page.content-page .section-copy h2 {
    order: 2 !important;
    margin-bottom: 0 !important;
  }

  body #ai-tools.page.content-page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 20px !important;
  }

  body #ai-tools.page.content-page .tool-copy-stack {
    order: 4 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page.content-page .tool-cta {
    order: 5 !important;
    align-self: flex-start !important;
    margin-top: 26px !important;
    margin-bottom: 24px !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-disabled {
    order: 6 !important;
    min-height: 58px !important;
    margin-top: 10px !important;
    opacity: 0.52 !important;
  }

  body .action-link {
    align-self: flex-start !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 34px auto max(22px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body .mobile-page-legal a,
  body .mobile-page-legal span,
  body .site-legal a,
  body .site-legal span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    position: fixed !important;
    right: auto !important;
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    width: min(calc(100vw - 56px), 320px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  body:has(.page-home.is-active) .site-legal::before {
    content: none !important;
    display: none !important;
  }

  body .page-home .brand-lockup {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100vw - 94px), 342px) !important;
    max-width: min(calc(100vw - 94px), 342px) !important;
    height: auto !important;
    aspect-ratio: 2.28 / 1 !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
  }

  body .page-home .logo-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  body .page-home .logo-canvas {
    display: none !important;
  }

  body .page-home .logo-viewport {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: 100% !important;
    height: 79% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
  }

  body .page-home .logo-pass {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 0 !important;
    right: 0 !important;
    top: 78.5% !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) clamp(40px, 10vw, 54px) repeat(7, max-content) !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    font-size: clamp(7px, 1.9vw, 9.5px) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    width: clamp(40px, 10vw, 54px) !important;
    flex: 0 0 clamp(40px, 10vw, 54px) !important;
  }

  body .page-home .wave-print {
    opacity: 0.96 !important;
    filter: contrast(1.2) brightness(1.12) !important;
  }

  body .page-home .home-cinema-trails,
  body .page-home .home-light-trace {
    opacity: 0.22 !important;
  }

  body .side-rail:not(.is-open) {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    left: 19px !important;
    right: auto !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  body .side-rail.is-open .menu-toggle span {
    left: 11px !important;
    width: 17px !important;
  }

  body .brand-lockup img,
  body .glass-visual img,
  body .glass-rocket,
  body .direct-bolid-object,
  body .ai-laptop-device,
  body .design-hourglass-scene img,
  body .contact-jet-scene img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
  }
}


* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.preloader {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(52, 62, 85, 0.28), transparent 34%),
    radial-gradient(circle at 50% 118%, rgba(110, 148, 255, 0.13), transparent 38%),
    #000;
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity 760ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 760ms ease;
}

.preloader::before {
  content: "";
  position: absolute;
  inset: -10vmax;
  background-image: url("assets/waves.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.22;
  filter: grayscale(1) contrast(1.55) brightness(0.54) blur(3px);
  transform: scale(1.16);
  animation: preloaderWaves 2600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 24%, transparent 66%, rgba(0, 0, 0, 0.82)),
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.72) 100%);
}

.preloader.is-hidden {
  opacity: 0;
  transform: scale(1.025);
  filter: blur(16px);
}

.preloader__vignette,
.preloader__beam {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.preloader__vignette {
  background:
    radial-gradient(circle at 50% 48%, transparent 0 22%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0.88) 100%),
    repeating-radial-gradient(circle at 48% 50%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px);
  opacity: 0.46;
  mix-blend-mode: soft-light;
}

.preloader__beam {
  background:
    linear-gradient(103deg, transparent 0 36%, rgba(255, 255, 255, 0.12) 45%, rgba(118, 166, 255, 0.06) 50%, transparent 62%),
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.18), transparent 19%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: preloaderBeam 1750ms 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.preloader__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(72vw, 900px);
}

.preloader__welcome {
  position: absolute;
  z-index: 4;
  top: calc(50% - clamp(40px, 5.8vh, 62px));
  left: 50%;
  display: block;
  width: min(58vw, 680px);
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(12px, 1.35vw, 20px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: clamp(0.18em, 0.9vw, 0.46em);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.96) 34%,
      rgba(175, 204, 255, 0.72) 58%,
      rgba(255, 255, 255, 0.78));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.22),
    0 0 22px rgba(190, 214, 255, 0.18),
    0 10px 32px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translate(-50%, 8px);
  animation: preloaderWelcomeFade 1800ms 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.preloader__welcome::after {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: 0;
  width: clamp(54px, 8vw, 118px);
  transform: translateX(-120%) skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  filter: blur(12px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: preloaderTextGlint 1500ms 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.preloader__slit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(86px, 13vh, 136px);
}

.preloader__slit::before,
.preloader__slit::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}

.preloader__slit::before {
  width: min(86vw, 1120px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  box-shadow:
    0 0 26px rgba(255, 255, 255, 0.18),
    0 0 76px rgba(127, 163, 255, 0.12);
  opacity: 0.72;
  animation: preloaderSlitPulse 1900ms ease-in-out both;
}

.preloader__slit::after {
  width: min(58vw, 720px);
  height: clamp(52px, 8vh, 86px);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.18), transparent 52%),
    linear-gradient(90deg, transparent, rgba(108, 148, 255, 0.09), transparent);
  filter: blur(18px);
  opacity: 0.64;
  mix-blend-mode: screen;
  animation: preloaderHalo 1900ms ease-in-out both;
}

.preloader__track {
  position: relative;
  z-index: 2;
  display: block;
  width: min(58vw, 680px);
  height: 2px;
  overflow: visible;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  box-shadow:
    0 0 1px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(255, 255, 255, 0.2),
    0 0 46px rgba(116, 159, 255, 0.16);
}

.preloader__track::before,
.preloader__track::after,
.preloader__track span {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.preloader__track::before {
  transform: scaleX(0.98);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0.28;
}

.preloader__track::after {
  inset: -10px 0;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 0.48), transparent 7%),
    radial-gradient(circle at 84% 50%, rgba(122, 170, 255, 0.36), transparent 8%);
  filter: blur(7px);
  opacity: 0;
  animation: preloaderTrackSparks 1900ms ease both;
}

.preloader__track span {
  width: 100%;
  transform: translateX(-105%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.98), rgba(148, 184, 255, 0.68), transparent);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.72),
    0 0 34px rgba(130, 170, 255, 0.34);
  animation: preloaderLine 1900ms 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.preloader__spark {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 0;
  width: clamp(92px, 14vw, 220px);
  height: clamp(48px, 7vh, 82px);
  pointer-events: none;
  transform: translate(-52%, -50%);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.88), rgba(180, 209, 255, 0.36) 16%, transparent 58%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  filter: blur(10px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: preloaderSpark 2200ms 160ms linear both;
}

.site-shell {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.05), transparent 31%),
    radial-gradient(circle at 18% 78%, rgba(66, 88, 128, 0.12), transparent 27%),
    #000;
  cursor: crosshair;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-loading .site-shell {
  opacity: 0.45;
  transform: scale(1.018);
}

body.is-loading .logo-stage {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
}

body.is-loading .side-rail {
  opacity: 0;
  transform: translate(-18px, -50%) scale(0.98);
}

body.is-loading .right-claim {
  opacity: 0;
  transform: translate(22px, -50%);
}

.wave-canvas,
.wave-print,
.cinema-light,
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wave-canvas {
  z-index: -5;
  width: 100%;
  height: 100%;
  opacity: 0.96;
  filter: contrast(1.12) brightness(0.88);
}

.wave-print {
  z-index: -4;
  inset: -11vmax;
  background-image: url("assets/waves.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.54;
  filter: grayscale(1) contrast(1.42) brightness(0.78) blur(2px);
  transform: translate3d(-2.5vw, 1vh, 0) scale(1.16);
  animation: printDrift 28s ease-in-out infinite;
}

.cinema-light {
  z-index: -3;
  background:
    radial-gradient(circle clamp(260px, 32vw, 620px) at var(--px) var(--py),
      rgba(198, 213, 255, calc(var(--light-power) * 0.15)),
      rgba(74, 87, 125, calc(var(--light-power) * 0.06)) 34%,
      transparent 68%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.86) 0%,
      transparent 20%,
      transparent 70%,
      rgba(0, 0, 0, 0.82) 100%),
    radial-gradient(ellipse at center,
      transparent 47%,
      rgba(0, 0, 0, 0.72) 100%);
}

.grain {
  z-index: 20;
  opacity: 0.1;
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.16), transparent),
    repeating-radial-gradient(circle at 17% 23%,
      rgba(255, 255, 255, 0.18) 0 1px,
      transparent 1px 4px);
  background-size: 300% 300%, 9px 9px;
  animation: grainBreath 7s steps(2, end) infinite;
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(72px, 8vh, 108px) clamp(118px, 10vw, 180px);
  text-align: center;
}

.page {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: inherit;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 28px, 0) scale(0.985);
  transition:
    opacity 1040ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page.is-active {
  z-index: 4;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.page.is-exiting {
  z-index: 3;
  visibility: visible;
  opacity: 0;
  pointer-events: none;
}

.page:not(.is-active):not(.is-exiting) {
  z-index: 1;
}

.site-shell[data-direction="next"] .page.is-exiting {
  transform: translate3d(0, -46px, 0) scale(0.982);
}

.site-shell[data-direction="prev"] .page.is-exiting {
  transform: translate3d(0, 46px, 0) scale(0.982);
}

.page-home {
  overflow: hidden;
  text-align: center;
}

.home-cinema-trails {
  position: absolute;
  inset: -12vh -20vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-light-trace {
  position: absolute;
  left: -52vw;
  width: clamp(380px, 44vw, 760px);
  height: 1px;
  border-radius: 999px;
  opacity: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(92, 127, 180, 0.015) 18%,
      rgba(214, 232, 255, 0.19) 50%,
      rgba(139, 166, 218, 0.045) 76%,
      transparent 100%);
  filter:
    blur(0.6px)
    drop-shadow(0 0 14px rgba(112, 153, 215, 0.08));
  transform: translate3d(0, 0, 0) rotate(-12deg) scaleX(0.74);
  animation: homeLightTracePass 26s cubic-bezier(0.2, 0.62, 0.22, 1) infinite;
}

.trace-a {
  top: 16%;
  animation-delay: 4.2s;
}

.trace-b {
  top: 44%;
  width: clamp(300px, 36vw, 640px);
  opacity: 0;
  animation-delay: 15.6s;
  animation-duration: 31s;
}

.trace-c {
  top: 72%;
  width: clamp(260px, 32vw, 560px);
  animation-delay: 24.8s;
  animation-duration: 37s;
}

.content-page {
  text-align: left;
}

.section-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 0.96fr) minmax(360px, 0.74fr);
  align-items: center;
  gap: clamp(46px, 5.2vw, 92px);
  width: min(80vw, 1280px);
  min-height: min(58vh, 560px);
}

.section-layout-reverse {
  grid-template-columns: minmax(360px, 0.74fr) minmax(420px, 0.96fr);
}

.section-layout-reverse .section-copy {
  order: 2;
}

.section-copy {
  position: relative;
  z-index: 2;
  max-width: 660px;
}

.section-kicker {
  display: inline-grid;
  grid-template-columns: 54px auto;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vh, 30px);
  color: rgba(255, 255, 255, 0.56);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 400;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.54), transparent);
}

.section-copy h2 {
  max-width: 640px;
  margin: 0 0 clamp(18px, 3vh, 30px);
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(32px, 3.75vw, 58px);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-shadow:
    0 0 18px rgba(170, 198, 255, 0.08),
    0 18px 54px rgba(0, 0, 0, 0.58);
}

.text-accent {
  color: transparent;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.96),
      rgba(185, 211, 255, 0.82) 36%,
      rgba(239, 151, 255, 0.78) 70%,
      rgba(255, 255, 255, 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 360;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(130, 174, 255, 0.12));
}

.section-copy p {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(14px, 1.04vw, 17px);
  font-weight: 300;
  line-height: 1.72;
}

.metric-row,
.glass-list,
.quote-stack,
.contact-panel {
  display: grid;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 42px);
}

.metric-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 700px;
  gap: 14px;
}

.section-copy > .metric-row {
  display: grid;
}

.metric-card {
  position: relative;
  overflow: hidden;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.metric-card::before,
.metric-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.metric-card::before {
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.1), transparent 30%),
    linear-gradient(112deg, transparent 25%, rgba(255, 255, 255, 0.11), transparent 44%);
  opacity: 0.28;
  mix-blend-mode: screen;
}

.metric-card::after {
  top: 11px;
  bottom: 11px;
  left: 64px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.metric-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 44px;
  overflow: visible;
  color: rgba(236, 246, 255, 0.82);
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 18px rgba(128, 176, 255, 0.18));
}

.metric-icon path,
.metric-icon rect,
.metric-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.95;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.metric-icon text {
  fill: currentColor;
  stroke: none;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 8.8px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0.92;
}

.metric-card span {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  min-width: 0;
}

.metric-card em {
  color: rgba(255, 255, 255, 0.58);
  font-style: normal;
  font-size: 9.4px;
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
}

.metric-row div,
.glass-list span,
.quote-stack blockquote,
.contact-panel a {
  min-height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.012) 54%, rgba(119, 154, 255, 0.034)),
    rgba(6, 8, 12, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 38px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

.metric-row div {
  display: grid;
  align-content: center;
  padding: 13px 16px 13px 15px;
}

.metric-row strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(19px, 1.8vw, 30px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.04em;
}

.metric-row span,
.glass-list span,
.quote-stack blockquote,
.contact-panel a {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.glass-list span,
.contact-panel a {
  display: flex;
  align-items: center;
  padding: 0 18px;
}

.quote-stack blockquote {
  margin: 0;
  padding: 18px 20px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 300;
}

.quote-stack cite {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 700px;
  gap: 14px;
}

.contact-panel .contact-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 66px;
  overflow: hidden;
  padding: 13px 16px 13px 15px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition:
    border-color 260ms ease,
    background 260ms ease,
    transform 260ms ease,
    box-shadow 260ms ease;
}

.contact-panel .contact-card::before,
.contact-panel .contact-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.contact-panel .contact-card::before {
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.1), transparent 30%),
    linear-gradient(112deg, transparent 25%, rgba(255, 255, 255, 0.1), transparent 44%);
  opacity: 0.3;
  mix-blend-mode: screen;
}

.contact-panel .contact-card::after {
  top: 11px;
  bottom: 11px;
  left: 64px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.contact-panel .contact-card:hover {
  border-color: rgba(212, 232, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.014) 54%, rgba(119, 154, 255, 0.05)),
    rgba(6, 8, 12, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 44px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(124, 171, 234, 0.08);
  transform: translateY(-1px);
}

.contact-icon {
  z-index: 1;
  width: 42px;
  height: 42px;
}

.contact-panel .contact-card span {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: 3px;
}

.contact-panel .contact-card strong,
.contact-panel .contact-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-panel .contact-card strong {
  color: rgba(255, 255, 255, 0.64);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-panel .contact-card em {
  color: rgba(240, 246, 255, 0.86);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.03em;
}

.glass-visual {
  position: relative;
  justify-self: center;
  width: clamp(260px, 27vw, 500px);
  aspect-ratio: 1;
  border-radius: 999px;
  filter:
    drop-shadow(0 30px 70px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 52px rgba(139, 173, 255, 0.12));
}

.glass-visual::before,
.glass-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.glass-visual::before {
  inset: 12%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: inherit;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.32), transparent 18%),
    radial-gradient(circle at 72% 74%, rgba(140, 175, 255, 0.18), transparent 32%),
    rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 0 0 2px rgba(255, 255, 255, 0.6),
    inset 18px 0 42px rgba(255, 255, 255, 0.08),
    inset -18px 0 46px rgba(123, 162, 255, 0.12),
    0 0 42px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: glassBreath 7s ease-in-out infinite;
}

.glass-visual::after {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, 0.34), transparent 52%);
  opacity: 0.24;
  mix-blend-mode: screen;
  animation: glassSweep 6.8s ease-in-out infinite;
}

.glass-ring,
.glass-core,
.visual-tools span,
.browser-frame,
.browser-line,
.browser-orb,
.design-shard,
.quote-glass,
.contact-orbit,
.contact-dot {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 28px rgba(160, 190, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.glass-ring {
  inset: 7%;
  border-radius: 999px;
}

.glass-ring-small {
  inset: 30%;
  border-color: rgba(255, 255, 255, 0.38);
}

.glass-core {
  top: 43%;
  left: 43%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.34),
    0 0 60px rgba(145, 178, 255, 0.24);
}

.visual-tools span {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 10px;
  transform: rotate(45deg);
}

.visual-tools span:nth-child(1) { top: 9%; left: 16%; }
.visual-tools span:nth-child(2) { top: 28%; right: 12%; }
.visual-tools span:nth-child(3) { bottom: 15%; left: 18%; }
.visual-tools span:nth-child(4) {
  right: 24%;
  bottom: 24%;
  width: 22%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.browser-frame {
  inset: 12% 7%;
  border-radius: 18px;
}

.browser-line {
  left: 20%;
  right: 20%;
  height: 1px;
}

.line-one { top: 38%; }
.line-two { top: 52%; }

.browser-orb {
  right: 16%;
  bottom: 18%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(145, 178, 255, 0.2);
}

.design-shard {
  border-radius: 12px;
  transform-origin: center;
}

.shard-one {
  inset: 13% 34% 15% 34%;
  transform: rotate(18deg);
}

.shard-two {
  inset: 26% 10% 26% 52%;
  transform: rotate(-24deg);
}

.shard-three {
  inset: 48% 48% 18% 12%;
  transform: rotate(42deg);
}

.quote-glass {
  left: 16%;
  right: 16%;
  height: 24%;
  border-radius: 12px;
}

.quote-a { top: 18%; }
.quote-b { top: 39%; left: 10%; right: 26%; }
.quote-c { bottom: 18%; left: 26%; right: 10%; }

.contact-orbit {
  inset: 13%;
  border-radius: 999px;
}

.contact-dot {
  width: 12%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}

.dot-one { top: 22%; left: 29%; }
.dot-two { right: 21%; top: 46%; }
.dot-three { left: 42%; bottom: 18%; }

.rocket-scene {
  --rocket-x: 50%;
  --rocket-y: 46%;
  --rocket-light: 0.2;
  --rocket-tilt-x: 0deg;
  --rocket-tilt-y: 0deg;
  --rocket-tilt-z: 0deg;
  justify-self: end;
  width: clamp(500px, 37vw, 690px);
  aspect-ratio: 1.2;
  border-radius: 999px;
  perspective: 920px;
  transform-style: preserve-3d;
  margin-right: clamp(-20px, -1.4vw, -6px);
  transform: translateX(clamp(8px, 1.4vw, 24px));
  filter:
    drop-shadow(0 34px 84px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 36px rgba(133, 178, 255, 0.1));
}

.rocket-scene::before {
  content: "";
  inset: 16% 9% 12% 15%;
  border-radius: 999px;
  background:
    conic-gradient(from 218deg at 56% 50%, transparent 0 13%, rgba(255, 255, 255, 0.1) 14%, transparent 16% 35%, rgba(138, 177, 255, 0.08) 37%, transparent 39% 64%, rgba(255, 255, 255, 0.07) 66%, transparent 69%),
    radial-gradient(ellipse at 56% 50%, transparent 0 37%, rgba(255, 255, 255, 0.07) 37.4%, transparent 38.2% 51%, rgba(151, 190, 255, 0.06) 51.4%, transparent 52.2%);
  opacity: 0.34;
  filter: blur(0.2px);
  mix-blend-mode: screen;
  animation: orbitDetailRotate 18s linear infinite;
}

.rocket-scene::after {
  inset: -4% -5%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 56% 48%, rgba(168, 198, 255, 0.07), transparent 42%),
    radial-gradient(ellipse at 56% 72%, rgba(255, 189, 104, 0.045), transparent 30%),
    linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.025) 47%, rgba(150, 186, 255, 0.018) 56%, transparent 70%);
  opacity: 0.14;
  filter: blur(5px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 45%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 45%, transparent 78%);
  animation: rocketSceneLight 7.4s ease-in-out infinite;
}

.rocket-scene > span,
.glass-rocket {
  position: absolute;
  display: block;
  pointer-events: none;
}

.rocket-halo {
  inset: 11% 7% 9% 14%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 56% 48%, rgba(255, 255, 255, 0.055), transparent 18%),
    radial-gradient(circle at 56% 58%, rgba(116, 170, 255, 0.065), transparent 40%),
    radial-gradient(circle at 45% 42%, rgba(230, 107, 255, 0.032), transparent 32%);
  filter: blur(26px);
  opacity: 0.24;
  mix-blend-mode: screen;
  animation: glassPulse 6.6s ease-in-out infinite;
}

.rocket-grid {
  left: 56%;
  top: 50%;
  width: 72%;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.24;
}

.grid-one { transform: translate(-50%, -50%) rotate(-28deg); }
.grid-two { transform: translate(-50%, -50%) rotate(24deg); opacity: 0.34; }

.ai-orbit {
  left: 56%;
  top: 49%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-18deg);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.04),
    0 0 22px rgba(138, 178, 255, 0.08);
}

.orbit-one {
  width: 60%;
  height: 35%;
  animation: orbitFloat 8s ease-in-out infinite;
}

.orbit-two {
  width: 42%;
  height: 64%;
  transform: translate(-50%, -50%) rotate(32deg);
  opacity: 0.72;
  animation: orbitFloat 8s 1.6s ease-in-out infinite reverse;
}

.ai-node {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 9px rgba(255, 255, 255, 0.36),
    0 0 24px rgba(142, 190, 255, 0.24);
}

.node-a { left: 29%; top: 34%; animation: nodeSpark 4.6s ease-in-out infinite; }
.node-b { right: 14%; top: 42%; animation: nodeSpark 5.2s 0.8s ease-in-out infinite; }
.node-c { left: 43%; bottom: 21%; animation: nodeSpark 4.8s 1.4s ease-in-out infinite; }

.visual-metric-row {
  display: none;
}

.visual-metric-row .metric-card {
  min-height: 44px;
  border-radius: 10px;
  background:
    radial-gradient(circle at var(--rocket-x) var(--rocket-y), rgba(255, 255, 255, calc(var(--rocket-light) * 0.16)), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 48%, rgba(115, 151, 255, 0.075)),
    rgba(8, 10, 15, 0.22);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 16px 38px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(132, 178, 255, 0.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.visual-metric-row .metric-card:nth-child(2) {
  transform: translateX(14px);
}

.visual-metric-row .metric-card:nth-child(3) {
  transform: translateX(4px);
}

.visual-metric-row .metric-icon {
  width: 31px;
  height: 31px;
}

.visual-metric-row .metric-card::after {
  left: 48px;
}

.visual-metric-row .metric-card em {
  font-size: 8.1px;
  color: rgba(255, 255, 255, 0.66);
}

.glass-rocket {
  z-index: 3;
  left: 56%;
  top: 49%;
  width: clamp(370px, 27vw, 520px);
  aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%) scaleX(1.08);
  transform-origin: 50% 58%;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.14))
    drop-shadow(0 0 54px rgba(87, 164, 255, 0.18))
    drop-shadow(0 34px 80px rgba(0, 0, 0, 0.72));
  animation: none;
}

.glass-rocket > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.glass-rocket::before,
.glass-rocket::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle clamp(90px, 12vw, 210px) at var(--rocket-x) var(--rocket-y),
      rgba(208, 231, 255, calc(var(--rocket-light) * 0.52)),
      rgba(89, 154, 255, calc(var(--rocket-light) * 0.34)) 26%,
      rgba(90, 117, 255, calc(var(--rocket-light) * 0.16)) 48%,
      transparent 70%),
    linear-gradient(116deg, transparent 18%, rgba(255, 255, 255, 0.26) 31%, transparent 43%),
    radial-gradient(circle at 38% 23%, rgba(255, 255, 255, 0.18), transparent 19%);
  mix-blend-mode: screen;
  -webkit-mask-image: url("assets/rocket-premium-body-final-mask.png?v=20260608-64");
  mask-image: url("assets/rocket-premium-body-final-mask.png?v=20260608-64");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.glass-rocket::before,
.glass-rocket::after,
.rocket-render-light {
  display: none;
}

.glass-rocket::before {
  opacity: calc(0.18 + var(--rocket-light) * 0.32);
  filter: blur(0.3px);
  animation: none;
}

.glass-rocket::after {
  z-index: 6;
  background:
    radial-gradient(circle clamp(70px, 9vw, 170px) at var(--rocket-x) var(--rocket-y),
      rgba(194, 224, 255, calc(var(--rocket-light) * 0.42)),
      rgba(89, 157, 255, calc(var(--rocket-light) * 0.22)) 38%,
      transparent 68%),
    linear-gradient(104deg, transparent 0 35%, rgba(255, 255, 255, 0.72) 43%, rgba(172, 212, 255, 0.22) 48%, transparent 58%),
    linear-gradient(24deg, transparent 48%, rgba(255, 255, 255, 0.2), transparent 61%);
  opacity: calc(0.14 + var(--rocket-light) * 0.2);
  filter: blur(0.25px);
  animation: rocketSpecularPass 8.6s ease-in-out infinite;
}

.rocket-svg {
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-style: preserve-3d;
}

.rocket-render {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
  opacity: 1;
  filter:
    grayscale(0.02)
    brightness(0.96)
    contrast(1.1)
    saturate(1.03)
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.09))
    drop-shadow(0 0 22px rgba(91, 170, 255, 0.1));
  transform: translateZ(18px);
  animation: none;
}

.rocket-render-light {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle clamp(110px, 12vw, 230px) at var(--rocket-x) var(--rocket-y),
      rgba(255, 255, 255, calc(var(--rocket-light) * 0.7)),
      rgba(182, 221, 255, calc(var(--rocket-light) * 0.52)) 20%,
      rgba(91, 165, 255, calc(var(--rocket-light) * 0.36)) 42%,
      rgba(105, 116, 255, calc(var(--rocket-light) * 0.18)) 58%,
      transparent 72%),
    linear-gradient(122deg, transparent 18%, rgba(255, 255, 255, calc(var(--rocket-light) * 0.2)), transparent 38%);
  opacity: 1;
  mix-blend-mode: screen;
  filter: blur(0.6px);
  -webkit-mask-image: url("assets/rocket-premium-body-final-mask.png?v=20260608-64");
  mask-image: url("assets/rocket-premium-body-final-mask.png?v=20260608-64");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.rocket-render-light::before,
.rocket-render-light::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: url("assets/rocket-premium-body-final-mask.png?v=20260608-64");
  mask-image: url("assets/rocket-premium-body-final-mask.png?v=20260608-64");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.rocket-render-light::before {
  background:
    radial-gradient(circle at 44% 21%, rgba(255, 255, 255, 0.3), transparent 14%),
    radial-gradient(circle at 58% 36%, rgba(118, 190, 255, 0.28), transparent 20%),
    linear-gradient(160deg, transparent 22%, rgba(255, 255, 255, 0.2) 34%, transparent 47%);
  opacity: calc(0.16 + var(--rocket-light) * 0.36);
  animation: none;
}

.rocket-render-light::after {
  background:
    linear-gradient(94deg, transparent 0 42%, rgba(255, 255, 255, 0.72) 48%, transparent 55%),
    radial-gradient(circle at 51% 69%, rgba(255, 202, 137, 0.22), transparent 16%);
  opacity: calc(0.08 + var(--rocket-light) * 0.2);
  animation: none;
}

.rocket-flame-layer {
  display: block;
  position: absolute;
  z-index: 5;
  left: 49.45%;
  top: 66.25%;
  width: 24%;
  height: 30%;
  border-radius: 999px;
  pointer-events: none;
  transform-origin: 50% 0;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}

.rocket-flame-layer.flame-glow {
  background:
    radial-gradient(ellipse at 50% 5%, rgba(255, 255, 255, 0.9) 0 7%, rgba(255, 231, 165, 0.86) 17%, rgba(255, 172, 63, 0.6) 31%, transparent 48%),
    radial-gradient(ellipse at 50% 30%, rgba(255, 177, 55, 0.78) 0 18%, rgba(255, 96, 25, 0.54) 43%, rgba(255, 97, 24, 0.2) 61%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 194, 80, 0.54) 28%, rgba(255, 99, 28, 0.32) 63%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 33% 88% at 50% 35%, #000 0 43%, rgba(0, 0, 0, 0.7) 58%, rgba(0, 0, 0, 0.2) 75%, transparent 88%);
  mask-image: radial-gradient(ellipse 33% 88% at 50% 35%, #000 0 43%, rgba(0, 0, 0, 0.7) 58%, rgba(0, 0, 0, 0.2) 75%, transparent 88%);
  filter:
    blur(0.95px)
    saturate(1.12)
    brightness(1.06)
    drop-shadow(0 0 18px rgba(255, 160, 62, 0.34))
    drop-shadow(0 20px 44px rgba(255, 104, 29, 0.14));
  opacity: 0.86;
  animation: rocketPhotoFlame 820ms ease-in-out infinite alternate;
}

.rocket-flame-layer.flame-core {
  left: 49.45%;
  top: 67.9%;
  width: 8.7%;
  height: 22%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.98), rgba(255, 247, 207, 0.92) 25%, rgba(255, 209, 96, 0.64) 55%, rgba(255, 135, 34, 0.16) 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 42% 84% at 50% 34%, #000 0 46%, rgba(0, 0, 0, 0.62) 62%, transparent 84%);
  mask-image: radial-gradient(ellipse 42% 84% at 50% 34%, #000 0 46%, rgba(0, 0, 0, 0.62) 62%, transparent 84%);
  filter: blur(1.15px);
  opacity: 0.76;
  animation: rocketPhotoFlameCore 720ms ease-in-out infinite alternate;
}

.rocket-flame-layer.flame-spark {
  left: 50%;
  top: 86.5%;
  width: 3px;
  height: 3px;
  background: rgba(255, 232, 176, 0.86);
  box-shadow:
    -28px 18px 0 rgba(255, 189, 104, 0.26),
    24px 24px 0 rgba(139, 177, 255, 0.2),
    3px 44px 0 rgba(255, 222, 162, 0.18),
    0 0 16px rgba(255, 196, 108, 0.4);
  animation: rocketPhotoSparks 1.5s ease-in-out infinite;
}

.rocket-3d-shadow {
  opacity: 0.28;
  filter: blur(1.6px);
  mix-blend-mode: screen;
}

.rocket-shadow-body,
.rocket-shadow-fin {
  fill: rgba(146, 178, 224, 0.08);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 3;
}

.rocket-body-fill,
.rocket-nose-fill,
.rocket-fin-glass {
  fill: url(#rocketGlassFill);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}

.rocket-rim {
  fill: none;
  stroke: url(#rocketGlassRim);
  stroke-width: 6.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.74;
  animation: rocketEdgeShimmer 4.8s ease-in-out infinite;
}

.rocket-fin-rim {
  stroke-width: 5;
  opacity: 0.68;
}

.rocket-inner-line,
.rocket-nose-line,
.rocket-engine-rings path,
.rocket-bright-lines path {
  fill: none;
  stroke: url(#rocketGlassRim);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.rocket-inner-line {
  stroke-width: 2.8;
  opacity: 0.34;
}

.rocket-inner-line.right {
  opacity: 0.5;
}

.rocket-nose-line {
  stroke-width: 2.2;
  opacity: 0.46;
}

.rocket-engine-rings path {
  stroke-width: 4.2;
  opacity: 0.5;
}

.rocket-bright-lines path {
  stroke-width: 2.2;
  opacity: 0.44;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.34));
  animation: rocketLineShine 3.8s ease-in-out infinite;
}

.rocket-window-outer,
.rocket-window-inner {
  fill: url(#rocketWindowGlass);
  stroke: url(#rocketGlassRim);
  vector-effect: non-scaling-stroke;
}

.rocket-window-outer {
  stroke-width: 6;
  filter: drop-shadow(0 0 13px rgba(255, 255, 255, 0.34));
}

.rocket-window-inner {
  stroke-width: 1.6;
  opacity: 0.84;
}

.rocket-window-glint {
  fill: rgba(255, 255, 255, 0.84);
  filter: blur(0.3px);
  opacity: calc(0.34 + var(--rocket-light) * 0.44);
}

.rocket-cursor-wash {
  opacity: calc(0.08 + var(--rocket-light) * 0.56);
  mix-blend-mode: screen;
  filter: blur(0.5px);
}

.rocket-cursor-wash path {
  fill: url(#rocketCursorLight);
}

.rocket-glass-sweep {
  fill: rgba(255, 255, 255, 0.18);
  opacity: 0.12;
  mix-blend-mode: screen;
  filter: blur(0.5px);
  animation: rocketGlassSweep 6.8s ease-in-out infinite;
}

.rocket-flame-group {
  transform-box: fill-box;
  transform-origin: center top;
  mix-blend-mode: screen;
}

.rocket-flame-haze,
.rocket-flame-core,
.rocket-flame-white {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.rocket-flame-haze {
  fill: url(#rocketFlameMain);
  opacity: 0.46;
  animation: rocketFlameHaze 560ms ease-in-out infinite alternate;
}

.rocket-flame-core {
  fill: url(#rocketFlameMain);
  opacity: 0.86;
  animation: rocketFlameCore 340ms ease-in-out infinite alternate;
}

.rocket-flame-white {
  fill: rgba(255, 246, 224, 0.92);
  opacity: 0.78;
  filter: blur(0.5px);
  animation: rocketFlameWhite 420ms ease-in-out infinite alternate;
}

.rocket-trail {
  z-index: 1;
  width: 1px;
  height: 62%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 236, 190, 0.62), rgba(128, 179, 255, 0.18) 34%, transparent);
  filter: blur(1.8px);
  opacity: 0.64;
}

.trail-one {
  left: 42%;
  top: 56%;
  transform: rotate(24deg);
  animation: trailBreathe 1.9s ease-in-out infinite;
}

.trail-two {
  left: 49%;
  top: 60%;
  height: 50%;
  transform: rotate(29deg);
  opacity: 0.36;
  animation: trailBreathe 2.4s 0.4s ease-in-out infinite;
}

.rocket-particle {
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 235, 196, 0.78);
  box-shadow:
    0 0 10px rgba(255, 218, 156, 0.5),
    0 0 22px rgba(138, 184, 255, 0.2);
  opacity: 0;
}

.particle-one { left: 43%; bottom: 27%; animation: particleRise 3.8s ease-in-out infinite; }
.particle-two { left: 50%; bottom: 20%; animation: particleRise 4.2s 0.9s ease-in-out infinite; }
.particle-three { left: 38%; bottom: 16%; animation: particleRise 3.6s 1.6s ease-in-out infinite; }

.rocket-label {
  display: none;
  right: 5%;
  bottom: 3%;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(9px, 0.82vw, 12px);
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.18),
    0 0 24px rgba(255, 190, 120, 0.14);
}

.glass-device {
  width: clamp(300px, 29vw, 530px);
  aspect-ratio: 1.08;
  border-radius: 26px;
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 34px 80px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 42px rgba(120, 166, 255, 0.12));
}

.glass-device::before {
  inset: 8%;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.12), transparent 22%, transparent 68%, rgba(147, 184, 255, 0.08)),
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.18), transparent 20%),
    rgba(255, 255, 255, 0.012);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 16px 0 42px rgba(255, 255, 255, 0.06),
    inset -20px 0 48px rgba(114, 160, 255, 0.11),
    0 0 54px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  opacity: 0.94;
}

.glass-device::after {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.34), transparent 44%),
    linear-gradient(18deg, transparent 52%, rgba(132, 183, 255, 0.12), transparent 68%);
  opacity: 0.22;
  mix-blend-mode: screen;
  animation: glassSweep 8.8s ease-in-out infinite;
}

.glass-device > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.visual-tools.glass-device > span {
  inset: auto;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  transform: none;
}

.glass-aura {
  inset: 1%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 54% 45%, rgba(255, 255, 255, 0.22), transparent 14%),
    radial-gradient(circle at 64% 58%, rgba(126, 174, 255, 0.18), transparent 34%),
    radial-gradient(circle at 34% 30%, rgba(236, 102, 255, 0.12), transparent 28%);
  filter: blur(18px);
  opacity: 0.8;
  mix-blend-mode: screen;
  animation: glassPulse 7s ease-in-out infinite;
}

.glass-plate,
.assistant-shell,
.site-frame,
.site-wave {
  z-index: 1;
}

.glass-device .glass-ring,
.glass-device .glass-core,
.glass-ray,
.assistant-message,
.assistant-orb,
.site-node,
.site-line,
.glass-label {
  z-index: 2;
}

.glass-plate,
.assistant-shell,
.site-frame {
  border: 1px solid rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(132deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.026) 34%, rgba(111, 160, 255, 0.09) 72%, rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    inset 10px 0 34px rgba(255, 255, 255, 0.08),
    inset -14px 0 42px rgba(118, 169, 255, 0.14),
    0 0 24px rgba(255, 255, 255, 0.12),
    0 0 48px rgba(111, 154, 255, 0.12);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.glass-plate::before,
.assistant-shell::before,
.site-frame::before,
.glass-plate::after,
.assistant-shell::after,
.site-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.glass-plate::before,
.assistant-shell::before,
.site-frame::before {
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.06);
}

.glass-plate::after,
.assistant-shell::after,
.site-frame::after {
  inset: 0;
  background: linear-gradient(110deg, transparent 26%, rgba(255, 255, 255, 0.34), transparent 42%);
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: glassLineSweep 9s ease-in-out infinite;
}

.plate-main {
  inset: 16% 27% 15% 27%;
  border-radius: 24px;
  transform: perspective(760px) rotateY(-16deg) rotateZ(-7deg);
}

.plate-back {
  inset: 20% 20% 20% 36%;
  border-radius: 22px;
  opacity: 0.42;
  transform: perspective(760px) rotateY(19deg) rotateZ(11deg) translateX(4%);
}

.glass-device .glass-ring {
  inset: 27%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.016);
  box-shadow:
    inset 0 0 1px rgba(255, 255, 255, 0.92),
    inset 0 0 24px rgba(255, 255, 255, 0.1),
    0 0 26px rgba(255, 255, 255, 0.16),
    0 0 46px rgba(120, 169, 255, 0.14);
}

.glass-device .glass-core {
  top: 45%;
  left: 45%;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.72),
    0 0 40px rgba(155, 195, 255, 0.38),
    0 0 68px rgba(222, 106, 255, 0.2);
}

.glass-ray {
  left: 50%;
  top: 50%;
  width: 1px;
  height: 54%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent);
  opacity: 0.46;
}

.ray-one { transform: rotate(45deg); }
.ray-two { transform: rotate(-49deg); }

.assistant-shell,
.visual-tools.glass-device .assistant-shell {
  inset: 9% 19% 12% 19%;
  border-radius: 30px;
  transform: perspective(820px) rotateY(11deg) rotateX(3deg);
}

.assistant-message,
.visual-tools.glass-device .assistant-message {
  left: 29%;
  right: 28%;
  height: 12%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(126, 178, 255, 0.12), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 0 18px rgba(255, 255, 255, 0.1),
    0 0 30px rgba(122, 174, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.message-one,
.visual-tools.glass-device .message-one { top: 28%; transform: translateX(-10%); }

.message-two,
.visual-tools.glass-device .message-two { top: 43%; transform: translateX(8%); opacity: 0.84; }

.message-three,
.visual-tools.glass-device .message-three { top: 58%; transform: translateX(-4%); opacity: 0.7; }

.assistant-orb,
.visual-tools.glass-device .assistant-orb {
  right: 20%;
  bottom: 18%;
  width: 18%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.92), rgba(185, 211, 255, 0.26) 24%, transparent 62%),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 0 28px rgba(255, 255, 255, 0.16),
    0 0 54px rgba(140, 184, 255, 0.22);
}

.site-frame {
  inset: 13% 8% 15% 8%;
  border-radius: 28px;
  transform: perspective(880px) rotateY(-10deg) rotateX(2deg);
}

.site-wave {
  left: 13%;
  right: 13%;
  bottom: 23%;
  height: 22%;
  border-radius: 999px 999px 34px 34px;
  background:
    radial-gradient(ellipse at 58% 30%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(162deg, transparent 10%, rgba(145, 186, 255, 0.16), rgba(255, 255, 255, 0.08) 54%, transparent 84%);
  filter: blur(0.4px);
  opacity: 0.86;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 26px rgba(130, 178, 255, 0.13);
}

.site-node {
  width: 8%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 22px rgba(255, 255, 255, 0.18),
    0 0 46px rgba(126, 178, 255, 0.2);
}

.node-one { left: 26%; top: 27%; }
.node-two { right: 24%; top: 38%; }
.node-three { left: 48%; bottom: 25%; }

.site-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform-origin: left center;
  opacity: 0.52;
}

.site-line-one {
  left: 31%;
  top: 33%;
  width: 36%;
  transform: rotate(10deg);
}

.site-line-two {
  left: 52%;
  top: 55%;
  width: 28%;
  transform: rotate(-32deg);
}

.glass-label {
  right: 10%;
  bottom: 8%;
  color: rgba(255, 255, 255, 0.54);
  font-size: clamp(9px, 0.82vw, 12px);
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.16),
    0 0 24px rgba(126, 178, 255, 0.14);
}

.visual-tools .glass-label,
.visual-tools.glass-device .glass-label {
  top: 15%;
  right: auto;
  bottom: auto;
  left: 22%;
}

.site-metric-row {
  width: min(100%, 700px);
}

.site-metric-row .metric-card {
  min-height: 60px;
}

.site-metric-row .metric-icon {
  width: 36px;
  height: 36px;
}

.site-metric-row .metric-card em {
  color: rgba(255, 255, 255, 0.62);
}

.site-laptop-scene {
  justify-self: end;
  width: clamp(480px, 37vw, 680px);
  aspect-ratio: 1.18;
  border-radius: 999px;
  perspective: 960px;
  transform-style: preserve-3d;
  margin-right: clamp(-18px, -1.1vw, -4px);
  transform: translateX(clamp(6px, 1vw, 18px));
  filter:
    drop-shadow(0 34px 84px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 36px rgba(133, 178, 255, 0.1));
}

.site-laptop-scene::before {
  inset: 16% 9% 12% 15%;
  border: 0;
  border-radius: 999px;
  background:
    conic-gradient(from 218deg at 56% 50%, transparent 0 13%, rgba(255, 255, 255, 0.1) 14%, transparent 16% 35%, rgba(138, 177, 255, 0.08) 37%, transparent 39% 64%, rgba(255, 255, 255, 0.07) 66%, transparent 69%),
    radial-gradient(ellipse at 56% 50%, transparent 0 37%, rgba(255, 255, 255, 0.07) 37.4%, transparent 38.2% 51%, rgba(151, 190, 255, 0.06) 51.4%, transparent 52.2%);
  box-shadow: none;
  opacity: 0.34;
  filter: blur(0.2px);
  mix-blend-mode: screen;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: orbitDetailRotate 18s linear infinite;
}

.site-laptop-scene::after {
  inset: -4% -5%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 56% 48%, rgba(168, 198, 255, 0.07), transparent 42%),
    radial-gradient(ellipse at 56% 72%, rgba(255, 189, 104, 0.045), transparent 30%),
    linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.025) 47%, rgba(150, 186, 255, 0.018) 56%, transparent 70%);
  opacity: 0.14;
  filter: blur(5px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 45%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 45%, transparent 78%);
  animation: rocketSceneLight 7.4s ease-in-out infinite;
}

.site-laptop-scene > span,
.premium-laptop {
  position: absolute;
  display: block;
  pointer-events: none;
}

.site-laptop-scene .rocket-halo {
  inset: 11% 7% 9% 14%;
}

.premium-laptop {
  z-index: 4;
  left: 51%;
  top: 51%;
  width: min(92%, 620px);
  aspect-ratio: 1.34;
  transform: translate(-50%, -50%) perspective(980px) rotateX(4deg) rotateY(-9deg);
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 26px 66px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 34px rgba(121, 174, 255, 0.13));
}

.laptop-display {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  top: 4%;
  height: 66%;
  border: 1px solid rgba(210, 226, 255, 0.24);
  border-radius: 22px 22px 15px 15px;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035) 28%, rgba(91, 119, 160, 0.08) 70%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, #151a24 0%, #080a10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.82),
    inset 14px 0 36px rgba(255, 255, 255, 0.045),
    inset -18px 0 42px rgba(104, 151, 215, 0.09),
    0 0 30px rgba(185, 210, 255, 0.08);
}

.laptop-display::before,
.laptop-display::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.laptop-display::before {
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.045),
    0 0 18px rgba(122, 176, 255, 0.06);
}

.laptop-display::after {
  inset: 0;
  background:
    linear-gradient(112deg, transparent 12%, rgba(255, 255, 255, 0.26) 26%, transparent 39%),
    radial-gradient(circle at 27% 18%, rgba(214, 141, 255, 0.14), transparent 22%);
  opacity: 0.26;
  mix-blend-mode: screen;
  animation: glassLineSweep 9.4s ease-in-out infinite;
}

.laptop-screen {
  position: absolute;
  inset: 8.6% 7.8% 10%;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 68% 38%, rgba(111, 164, 255, 0.16), transparent 28%),
    radial-gradient(circle at 27% 30%, rgba(215, 112, 235, 0.13), transparent 28%),
    linear-gradient(145deg, #0c1017, #020305 74%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 18px 44px rgba(255, 255, 255, 0.025),
    inset 0 -22px 58px rgba(0, 0, 0, 0.72);
}

.laptop-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.18;
}

.ai-chat-demo,
.image-carousel-demo {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.ai-chat-demo {
  animation: siteChatCycle 8.8s ease-in-out infinite;
}

.image-carousel-demo {
  animation: siteCarouselCycle 8.8s ease-in-out infinite;
}

.chat-line,
.chat-bubble,
.chat-cursor,
.carousel-card {
  position: absolute;
  display: block;
  pointer-events: none;
}

.chat-line {
  left: 10%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(224, 236, 255, 0.65), rgba(135, 180, 255, 0.24), transparent);
  box-shadow: 0 0 12px rgba(154, 194, 255, 0.16);
  transform-origin: left center;
  animation: siteTypingLine 2.6s ease-in-out infinite;
}

.chat-line.line-one {
  top: 20%;
  width: 38%;
}

.chat-line.line-two {
  top: 29%;
  width: 52%;
  animation-delay: 0.38s;
}

.chat-bubble {
  min-width: 36%;
  height: 17%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.13), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(135, 172, 255, 0.05)),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 22px rgba(120, 174, 255, 0.08);
}

.user-bubble {
  right: 9%;
  top: 40%;
  width: 42%;
}

.ai-bubble {
  left: 9%;
  top: 61%;
  width: 54%;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(157, 180, 255, 0.12), rgba(210, 117, 235, 0.07)),
    rgba(255, 255, 255, 0.02);
}

.chat-cursor {
  left: 17%;
  top: 68.3%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(242, 247, 255, 0.9);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.42),
    0 0 30px rgba(144, 188, 255, 0.28);
  animation: siteCursorBlink 1.1s ease-in-out infinite;
}

.carousel-card {
  top: 20%;
  width: 42%;
  height: 58%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 38%),
    radial-gradient(circle at 50% 32%, rgba(214, 141, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(90, 126, 185, 0.18), rgba(5, 7, 12, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 36px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(130, 178, 255, 0.08);
  animation: siteCarouselCards 8.8s ease-in-out infinite;
}

.carousel-card::before,
.carousel-card::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(150, 190, 255, 0.18), transparent);
}

.carousel-card::before { bottom: 22%; }
.carousel-card::after { bottom: 15%; width: 44%; right: auto; }

.carousel-card.card-one {
  left: 9%;
  transform: translateX(-12%) scale(0.88);
  opacity: 0.42;
}

.carousel-card.card-two {
  left: 29%;
  z-index: 2;
  transform: scale(1);
  opacity: 0.86;
}

.carousel-card.card-three {
  right: 9%;
  transform: translateX(12%) scale(0.88);
  opacity: 0.42;
}

.laptop-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  height: 21%;
  transform: translateZ(-8px) perspective(700px) rotateX(58deg);
  transform-origin: 50% 0;
  border-radius: 8px 8px 42px 42px;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(255, 255, 255, 0.16) 14%, rgba(44, 53, 68, 0.88) 38%, rgba(10, 12, 18, 0.96) 60%, rgba(176, 203, 255, 0.14) 86%, transparent 100%),
    linear-gradient(180deg, rgba(44, 51, 66, 0.96), rgba(3, 4, 7, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -8px 24px rgba(0, 0, 0, 0.82),
    0 20px 48px rgba(0, 0, 0, 0.62);
}

.base-glow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -16%;
  height: 40%;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(128, 176, 255, 0.16), transparent 68%);
  filter: blur(14px);
  opacity: 0.72;
}

.site-laptop-scene .glass-label {
  z-index: 5;
  right: 11%;
  bottom: 9%;
}

@keyframes siteChatCycle {
  0%,
  42% {
    opacity: 1;
    transform: translateY(0);
  }

  52%,
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes siteCarouselCycle {
  0%,
  44% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  56%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes siteTypingLine {
  0%,
  100% {
    transform: scaleX(0.64);
    opacity: 0.38;
  }

  46% {
    transform: scaleX(1);
    opacity: 0.9;
  }
}

@keyframes siteCursorBlink {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.86);
  }

  48% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes siteCarouselCards {
  0%,
  100% {
    filter: brightness(0.9) saturate(0.95);
  }

  50% {
    filter: brightness(1.08) saturate(1.08);
  }
}

/* AI sites laptop polish */
.site-laptop-scene {
  width: clamp(520px, 40vw, 730px);
  aspect-ratio: 1.14;
  margin-right: clamp(-34px, -2vw, -14px);
}

.site-laptop-scene::before {
  inset: 9% 5% 6% 8%;
  opacity: 0.42;
}

.site-laptop-scene::after {
  inset: -7% -8%;
  opacity: 0.2;
}

.site-laptop-scene .rocket-halo {
  inset: 6% 4% 6% 8%;
  opacity: 0.54;
}

.site-laptop-scene .rocket-grid {
  opacity: 0.28;
}

.site-laptop-scene .orbit-one {
  inset: 16% 5% 16% 10%;
  transform: rotate(-13deg);
}

.site-laptop-scene .orbit-two {
  inset: 21% 11% 17% 18%;
  transform: rotate(19deg);
  opacity: 0.24;
}

.site-laptop-scene .node-a { left: 19%; top: 37%; }
.site-laptop-scene .node-b { right: 14%; top: 43%; }
.site-laptop-scene .node-c { left: 52%; bottom: 15%; }

.premium-laptop {
  left: 53%;
  top: 50%;
  width: min(96%, 680px);
  transform: translate(-50%, -50%) perspective(1100px) rotateX(5deg) rotateY(-8deg);
  filter:
    drop-shadow(0 34px 76px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 38px rgba(128, 177, 255, 0.16));
}

.premium-laptop::before,
.premium-laptop::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 5;
  border-radius: 999px;
  mix-blend-mode: screen;
}

.premium-laptop::before {
  left: 18%;
  right: 18%;
  top: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), rgba(135, 181, 255, 0.28), transparent);
  filter: blur(0.3px);
  opacity: 0.58;
}

.premium-laptop::after {
  left: 13%;
  right: 12%;
  bottom: 21%;
  height: 10px;
  background: radial-gradient(ellipse, rgba(126, 173, 255, 0.2), transparent 70%);
  filter: blur(9px);
  opacity: 0.8;
}

.laptop-display {
  left: 5.2%;
  right: 5.2%;
  top: 1.4%;
  height: 69%;
  border-radius: 28px 28px 18px 18px;
  border-color: rgba(232, 241, 255, 0.26);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035) 23%, rgba(33, 42, 56, 0.58) 53%, rgba(126, 164, 220, 0.12) 77%, rgba(255, 255, 255, 0.09)),
    linear-gradient(180deg, #151a23 0%, #05070b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 -2px 0 rgba(0, 0, 0, 0.88),
    inset 18px 0 42px rgba(255, 255, 255, 0.055),
    inset -22px 0 46px rgba(101, 151, 214, 0.11),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 42px rgba(185, 210, 255, 0.1);
}

.laptop-display::before {
  inset: 10px;
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 24px rgba(255, 255, 255, 0.055),
    0 0 22px rgba(122, 176, 255, 0.07);
}

.laptop-display::after {
  background:
    linear-gradient(111deg, transparent 11%, rgba(255, 255, 255, 0.3) 24%, transparent 37%),
    linear-gradient(16deg, transparent 48%, rgba(142, 185, 255, 0.12) 58%, transparent 71%),
    radial-gradient(circle at 27% 18%, rgba(214, 141, 255, 0.14), transparent 22%);
  opacity: 0.32;
}

.laptop-screen {
  inset: 9.8% 8.4% 10.5%;
  border-radius: 17px;
  background:
    radial-gradient(circle at 70% 36%, rgba(111, 164, 255, 0.22), transparent 28%),
    radial-gradient(circle at 27% 30%, rgba(215, 112, 235, 0.16), transparent 28%),
    linear-gradient(145deg, #0d121a, #020305 72%);
}

.laptop-screen::after {
  content: "";
  position: absolute;
  inset: -12% -20%;
  background: linear-gradient(100deg, transparent 36%, rgba(255, 255, 255, 0.16) 47%, rgba(122, 171, 255, 0.08) 52%, transparent 64%);
  opacity: 0.18;
  transform: translateX(-32%);
  mix-blend-mode: screen;
  animation: siteScreenScan 8.8s ease-in-out infinite;
}

.ai-chat-demo::before,
.ai-chat-demo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.ai-chat-demo::before {
  left: 9%;
  top: 13%;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.78), transparent 22%),
    linear-gradient(135deg, rgba(174, 197, 255, 0.52), rgba(199, 103, 230, 0.36));
  box-shadow: 0 0 24px rgba(148, 188, 255, 0.22);
  opacity: 0.72;
}

.ai-chat-demo::after {
  right: 10%;
  top: 16%;
  width: 34%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(181, 210, 255, 0.24), rgba(255, 255, 255, 0.06), transparent);
  box-shadow: 0 0 16px rgba(127, 178, 255, 0.11);
}

.chat-line {
  left: 18%;
}

.chat-bubble::before,
.chat-bubble::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.chat-bubble::before {
  left: 11%;
  right: 16%;
  top: 36%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(147, 188, 255, 0.22), transparent);
}

.chat-bubble::after {
  left: 11%;
  top: 54%;
  width: 44%;
  height: 1px;
  background: linear-gradient(90deg, rgba(213, 230, 255, 0.46), transparent);
}

.carousel-card {
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 36%),
    radial-gradient(circle at 52% 28%, rgba(214, 141, 255, 0.2), transparent 27%),
    radial-gradient(circle at 32% 68%, rgba(112, 173, 255, 0.2), transparent 31%),
    linear-gradient(180deg, rgba(90, 126, 185, 0.22), rgba(5, 7, 12, 0.42));
}

.carousel-card.card-two {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(130, 178, 255, 0.12);
}

.laptop-base {
  bottom: 6.4%;
  height: 24%;
  border-radius: 10px 10px 46px 46px;
}

.laptop-base::before,
.laptop-base::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.laptop-base::before {
  left: 36%;
  right: 36%;
  top: 16%;
  height: 18%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.11), rgba(149, 183, 255, 0.09)),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.laptop-base::after {
  left: 8%;
  right: 8%;
  top: 45%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), rgba(137, 178, 255, 0.14), transparent);
  opacity: 0.68;
}

@keyframes siteScreenScan {
  0%,
  48% {
    transform: translateX(-36%);
    opacity: 0.08;
  }

  64% {
    transform: translateX(8%);
    opacity: 0.2;
  }

  100% {
    transform: translateX(42%);
    opacity: 0.06;
  }
}

.tools-layout {
  grid-template-columns: minmax(520px, 1fr) minmax(360px, 0.72fr);
  gap: clamp(46px, 5.2vw, 92px);
}

.tools-layout .section-copy {
  max-width: 690px;
}

.tools-layout .section-copy h2 {
  max-width: 680px;
  font-size: clamp(31px, 3.35vw, 52px);
}

.tool-lead {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.7);
}

.tool-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 620px);
  max-width: 620px;
  margin-top: clamp(18px, 2.6vh, 26px);
}

.tool-tab {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  min-height: 68px;
  padding: 0 18px 0 15px;
  column-gap: 15px;
  row-gap: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012) 58%, rgba(105, 145, 255, 0.04)),
    rgba(5, 7, 11, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 14px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(136%);
  -webkit-backdrop-filter: blur(18px) saturate(136%);
  cursor: pointer;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.tool-tab::before,
.tool-tab::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tool-tab::before {
  inset: 0;
  background: linear-gradient(112deg, transparent 24%, rgba(255, 255, 255, 0.16), transparent 44%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}

.tool-tab::after {
  left: 62px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.tool-tab span {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.tool-tab strong {
  position: relative;
  z-index: 1;
  grid-column: 2;
  align-self: end;
  justify-self: start;
  min-width: 0;
  font-size: 9.8px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.105em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.tool-tab small {
  position: relative;
  z-index: 1;
  grid-column: 2;
  align-self: start;
  justify-self: start;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.32);
  font-size: 7.8px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}

.tool-tab.is-disabled,
.tool-tab:disabled {
  cursor: default;
  opacity: 0.52;
  color: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.045), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008) 58%, rgba(105, 145, 255, 0.018)),
    rgba(5, 7, 11, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.16);
}

.tool-tab.is-disabled:hover,
.tool-tab:disabled:hover {
  transform: none;
  color: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.045), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008) 58%, rgba(105, 145, 255, 0.018)),
    rgba(5, 7, 11, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.16);
}

.tool-tab.is-disabled::before,
.tool-tab:disabled::before {
  opacity: 0;
}

.tool-tab:hover,
.tool-tab.is-active {
  color: rgba(255, 255, 255, 0.84);
  border-color: rgba(203, 220, 255, 0.24);
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.018) 58%, rgba(124, 166, 255, 0.08)),
    rgba(8, 11, 18, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 42px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(122, 174, 255, 0.08);
}

.tool-tab:hover::before,
.tool-tab.is-active::before {
  opacity: 0.36;
}

.tool-tab.is-active span {
  color: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 16px rgba(142, 185, 255, 0.18);
}

.tool-copy-stack {
  position: relative;
  max-width: 640px;
  min-height: 196px;
  margin-top: clamp(18px, 2.8vh, 26px);
}

.tool-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 280ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tool-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tool-panel[hidden] {
  display: block;
  visibility: hidden;
}

.tool-panel p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(13px, 0.98vw, 16px);
  line-height: 1.66;
}

.tool-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  width: fit-content;
  margin-top: var(--cta-content-gap);
  padding: 0 24px 0 0;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  background: none;
  box-shadow: none;
  text-decoration: none;
  transition:
    transform 260ms ease,
    color 260ms ease;
}

.tool-cta::before,
.tool-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tool-cta::before {
  left: 0;
  top: 50%;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(218, 142, 255, 0.34), rgba(128, 160, 255, 0.18) 46%, transparent 70%);
  opacity: 0;
  transform: translate3d(0, -50%, 0) scale(0.82);
  mix-blend-mode: screen;
  z-index: 0;
}

.tool-cta::after {
  left: 0;
  top: 50%;
  z-index: 0;
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, 0.34), transparent 32%),
    linear-gradient(135deg, #cddaff 0%, #8e9fff 34%, #b16bdb 66%, #f0adff 100%);
  background-size: 100% 100%, 220% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(72, 48, 116, 0.36),
    0 13px 30px rgba(0, 0, 0, 0.36),
    0 0 26px rgba(160, 178, 255, 0.18),
    0 0 22px rgba(204, 112, 235, 0.16);
  opacity: 1;
  transform: translate3d(0, -50%, 0);
  transform-origin: left center;
  animation: toolCtaGradient 4.8s ease-in-out infinite;
  transition:
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms ease,
    filter 280ms ease;
}

.tool-cta span {
  position: relative;
  z-index: 1;
  color: rgba(242, 246, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    color 240ms ease,
    transform 240ms ease;
}

.tool-cta svg {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  padding: 17px;
  border: 0;
  border-radius: 999px;
  background: none;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  box-shadow: none;
  animation: none;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease,
    filter 260ms ease;
}

.tool-cta:hover {
  color: #fff;
  transform: translateY(-1px);
}

.tool-cta:hover span {
  color: rgba(255, 255, 255, 0.98);
  transform: translateX(2px);
}

.tool-cta:hover::after {
  width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(72, 48, 116, 0.42),
    0 15px 34px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(166, 190, 255, 0.24),
    0 0 28px rgba(212, 126, 240, 0.22);
  filter: saturate(1.08) brightness(1.04);
}

.tool-cta:hover svg {
  filter: brightness(1.05);
}

.tool-cta:active svg {
  transform: scale(0.92);
}

.tool-cta.is-pressed::before {
  animation: toolCtaClickPulse 560ms ease-out;
}

.tool-cta.is-pressed svg {
  animation: toolCtaClick 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

  50% {
    background-position: 0 0, 100% 50%;
  }
}

@keyframes toolCtaClick {
  0% {
    transform: scale(1);
  }

  36% {
    transform: scale(0.88);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes toolCtaClickPulse {
  0% {
    opacity: 0.42;
    transform: translate3d(0, -50%, 0) scale(0.86);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(1.55);
  }
}

.tool-points {
  display: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.tool-points span {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
    rgba(5, 7, 11, 0.1);
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 26px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tools-lab {
  --tool-hue: 210deg;
  --tool-x: 52%;
  --tool-y: 47%;
  justify-self: end;
  width: clamp(360px, 28vw, 500px);
  aspect-ratio: 1.05;
  border-radius: 999px;
  overflow: visible;
  isolation: isolate;
  transform-style: preserve-3d;
  perspective: 1000px;
  filter:
    drop-shadow(0 34px 86px rgba(0, 0, 0, 0.66))
    drop-shadow(0 0 58px hsla(var(--tool-hue), 90%, 70%, 0.13));
}

.tools-lab[data-tool-visual="qualifier"] { --tool-hue: 176deg; }
.tools-lab[data-tool-visual="content"] { --tool-hue: 292deg; }
.tools-lab[data-tool-visual="crm"] { --tool-hue: 224deg; }

.tools-lab[data-tool-visual="direct"] {
  --tool-hue: 206deg;
  width: clamp(430px, 33vw, 610px);
  aspect-ratio: 1.28;
  transform: translateX(clamp(10px, 1.8vw, 30px));
}

.tools-lab::before,
.tools-lab::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tools-lab::before {
  inset: 10% 4% 10% 6%;
  border-radius: 46% 54% 50% 50% / 45% 50% 52% 55%;
  background:
    radial-gradient(circle at 53% 48%, rgba(212, 234, 255, 0.12), transparent 26%),
    radial-gradient(circle at 56% 53%, hsla(var(--tool-hue), 100%, 75%, 0.16), transparent 39%),
    radial-gradient(ellipse at 50% 54%, rgba(255, 255, 255, 0.08), transparent 61%);
  opacity: 0.52;
  mix-blend-mode: screen;
}

.tools-lab[data-tool-visual="direct"]::before {
  inset: 4% 2% 5% 6%;
  border-radius: 48% 52% 50% 50% / 46% 48% 54% 52%;
  background:
    radial-gradient(ellipse at 53% 48%, rgba(210, 232, 255, 0.12), transparent 34%),
    radial-gradient(ellipse at 56% 54%, rgba(94, 153, 255, 0.13), transparent 58%),
    linear-gradient(128deg, transparent 13%, rgba(255, 255, 255, 0.055) 36%, transparent 61%);
  border: 1px solid rgba(190, 220, 255, 0.13);
  box-shadow:
    inset 0 0 72px rgba(126, 174, 255, 0.055),
    0 0 54px rgba(85, 143, 255, 0.08);
  opacity: 0.58;
  filter: blur(0.15px);
  mix-blend-mode: screen;
  animation: toolDirectHaloBreath 7.2s ease-in-out infinite;
}

.tools-lab::after {
  inset: -4%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 54% 50%, hsla(var(--tool-hue), 100%, 70%, 0.1), transparent 42%);
  filter: blur(18px);
  opacity: 0.38;
  mix-blend-mode: screen;
  animation: toolLabBreath 7.2s ease-in-out infinite;
}

.tools-lab[data-tool-visual="direct"]::after {
  inset: 3% 1% 7% 4%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 53% 58%, rgba(186, 222, 255, 0.13), transparent 40%),
    linear-gradient(96deg, transparent 18%, rgba(255, 255, 255, 0.038) 45%, transparent 72%);
  opacity: 0.3;
  filter: blur(12px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 52% 54%, #000 0 42%, transparent 78%);
  mask-image: radial-gradient(ellipse at 52% 54%, #000 0 42%, transparent 78%);
  animation: none;
}

.visual-tools.tools-lab > span,
.tools-lab > span {
  position: absolute;
  display: block;
  inset: auto;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  transform: none;
  pointer-events: none;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ai-engine-svg {
  position: absolute;
  z-index: 4;
  inset: -8% -7% -5% -8%;
  width: 115%;
  height: 113%;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.1))
    drop-shadow(0 0 64px hsla(var(--tool-hue), 100%, 70%, 0.18))
    drop-shadow(0 38px 82px rgba(0, 0, 0, 0.72));
}

.ai-engine-backlight {
  opacity: 0.94;
  mix-blend-mode: screen;
}

.ai-engine-orbits {
  transform-origin: 368px 363px;
  animation: aiEngineOrbit 18s linear infinite;
}

.ai-engine-object {
  transform-origin: 368px 363px;
  animation: aiEngineFloat 6.8s ease-in-out infinite;
}

.ai-crystal-face {
  vector-effect: non-scaling-stroke;
}

.face-left {
  opacity: 0.78;
}

.face-right {
  opacity: 0.68;
}

.face-front {
  opacity: 0.82;
}

.ai-core {
  mix-blend-mode: screen;
  animation: aiCorePulse 4.2s ease-in-out infinite;
}

.ai-core-shell {
  opacity: 0.78;
}

.ai-filament,
.ai-edge-line {
  fill: none;
  stroke: url(#aiGlassEdge);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.42;
  vector-effect: non-scaling-stroke;
}

.ai-filament {
  stroke: url(#aiPrismLine);
  stroke-width: 1.6;
  opacity: 0.6;
  stroke-dasharray: 9 12;
  animation: aiFilamentFlow 4.4s linear infinite;
}

.filament-two {
  animation-delay: -1.4s;
}

.filament-three {
  animation-delay: -2.2s;
}

.ai-sheen {
  opacity: 0.2;
  mix-blend-mode: screen;
  animation: aiPrismSheen 7.2s ease-in-out infinite;
}

.ai-engine-nodes {
  animation: aiNodeFloat 5.8s ease-in-out infinite;
}

.tool-field {
  inset: 16% 13% 13% 13%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 255, 255, 0.11), transparent 18%),
    radial-gradient(circle at 57% 55%, hsla(var(--tool-hue), 90%, 70%, 0.16), transparent 43%),
    radial-gradient(circle at 37% 35%, rgba(236, 109, 255, 0.06), transparent 32%);
  filter: blur(24px);
  opacity: 1;
  mix-blend-mode: screen;
}

.tools-lab[data-tool-visual="direct"] .tool-field {
  inset: 31% 4% 31% 24%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 60% 47%, rgba(132, 194, 255, 0.16), transparent 58%),
    radial-gradient(ellipse at 53% 64%, rgba(255, 255, 255, 0.045), transparent 62%);
  filter: blur(30px);
  opacity: 0.42;
}

.tool-orbit {
  z-index: 2;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(186, 217, 255, 0.13) !important;
  border-radius: 999px;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.035),
    0 0 22px hsla(var(--tool-hue), 100%, 70%, 0.07);
  opacity: 0.5;
}

.tools-lab[data-tool-visual="direct"] .tool-orbit {
  display: none !important;
}

.tools-lab[data-tool-visual="direct"] .tool-orbit-one {
  width: 70%;
  height: 32%;
}

.tools-lab[data-tool-visual="direct"] .tool-orbit-two {
  width: 42%;
  height: 56%;
  opacity: 0.34;
}

.tools-lab[data-tool-visual="direct"] .tool-orbit-three {
  width: 78%;
  height: 40%;
  opacity: 0.2;
}

.tool-orbit-one {
  width: 66%;
  height: 34%;
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: toolOrbitFloat 8.2s ease-in-out infinite;
}

.tool-orbit-two {
  width: 44%;
  height: 62%;
  transform: translate(-50%, -50%) rotate(34deg);
  opacity: 0.75;
  animation: toolOrbitFloat 8.8s 1s ease-in-out infinite reverse;
}

.tool-orbit-three {
  width: 76%;
  height: 48%;
  transform: translate(-50%, -50%) rotate(10deg);
  opacity: 0.32;
  animation: toolOrbitFloat 10.4s 0.6s ease-in-out infinite;
}

.tool-ray {
  left: 50%;
  top: 50%;
  width: 1px;
  height: 58%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent);
  opacity: 0.16;
}

.tool-ray-one { transform: rotate(42deg); }
.tool-ray-two { transform: rotate(-54deg); }
.tool-ray-three { transform: rotate(112deg); }

.tool-core {
  z-index: 5;
  left: 50%;
  top: 48%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(45deg);
  transform-style: preserve-3d;
  border: 1px solid rgba(255, 255, 255, 0.44) !important;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.025) 42%, hsla(var(--tool-hue), 100%, 72%, 0.15)),
    rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset -18px 0 42px hsla(var(--tool-hue), 100%, 70%, 0.16),
    0 0 38px rgba(255, 255, 255, 0.2),
    0 0 86px hsla(var(--tool-hue), 100%, 70%, 0.28);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  animation: toolCoreFloat 5.8s ease-in-out infinite;
}

.tool-core::before,
.tool-core::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tool-core::before {
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.08);
}

.tool-core::after {
  inset: -12%;
  border-radius: 24px;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.48), transparent 48%);
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: toolSpecular 5.6s ease-in-out infinite;
}

.tool-core-glass {
  inset: 22%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.2) 19%, transparent 58%),
    radial-gradient(circle, hsla(var(--tool-hue), 100%, 72%, 0.52), rgba(255, 255, 255, 0.08) 44%, transparent 70%);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.28),
    0 0 54px hsla(var(--tool-hue), 100%, 70%, 0.28);
  transform: rotateZ(-45deg);
}

.tool-core-label {
  left: 50%;
  top: 50%;
  width: auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(9px, 0.76vw, 12px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.24);
  transform: translate(-50%, -50%) rotateZ(-45deg);
}

.tool-scan-card {
  z-index: 4;
  display: block !important;
  min-width: 96px;
  min-height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012) 52%, hsla(var(--tool-hue), 90%, 70%, 0.08)),
    rgba(8, 11, 16, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 48px rgba(0, 0, 0, 0.34),
    0 0 24px hsla(var(--tool-hue), 100%, 70%, 0.1) !important;
  backdrop-filter: blur(18px) saturate(142%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(142%) !important;
  transform: translateZ(28px);
}

.tool-scan-card::before,
.tool-scan-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tool-scan-card::before {
  left: 16%;
  right: 18%;
  top: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  box-shadow: 0 0 12px hsla(var(--tool-hue), 100%, 72%, 0.18);
}

.tool-scan-card::after {
  left: 18%;
  top: 57%;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent);
  opacity: 0.74;
}

.tool-scan-card em,
.tool-scan-card strong,
.tool-glass-chip {
  font-style: normal;
  text-transform: uppercase;
}

.tool-scan-card em,
.tool-scan-card strong {
  display: none;
}

.tool-scan-card em {
  color: rgba(255, 255, 255, 0.38);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.tool-scan-card strong {
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.scan-card-one {
  left: 6%;
  top: 24%;
  transform: rotate(-7deg);
}

.scan-card-two {
  right: 0;
  top: 41%;
  transform: rotate(6deg);
}

.scan-card-three {
  left: 14%;
  bottom: 13%;
  transform: rotate(3deg);
}

.tool-node {
  z-index: 3;
  width: 9px !important;
  height: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.34),
    0 0 28px hsla(var(--tool-hue), 100%, 70%, 0.28) !important;
  animation: toolNodePulse 4.8s ease-in-out infinite;
}

.tool-node-one { left: 28%; top: 22%; }
.tool-node-two { right: 18%; top: 26%; animation-delay: 0.8s; }
.tool-node-three { left: 14%; bottom: 33%; animation-delay: 1.4s; }
.tool-node-four { right: 25%; bottom: 21%; animation-delay: 2.1s; }

.tool-glass-chip {
  display: none !important;
  z-index: 6;
  right: 12%;
  bottom: 9%;
  width: auto !important;
  color: rgba(255, 255, 255, 0.52);
  font-size: clamp(9px, 0.78vw, 12px);
  font-weight: 300;
  letter-spacing: 0.34em;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.14),
    0 0 24px hsla(var(--tool-hue), 100%, 70%, 0.12);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tools-lab[data-tool-visual="direct"] .chip-direct,
.tools-lab[data-tool-visual="qualifier"] .chip-qualifier,
.tools-lab[data-tool-visual="content"] .chip-content,
.tools-lab[data-tool-visual="crm"] .chip-crm {
  opacity: 1;
  transform: translateY(0);
}

.tools-lab[data-tool-visual="qualifier"] .tool-core-label {
  font-size: clamp(8px, 0.68vw, 10px);
}

.tools-lab[data-tool-visual="content"] .scan-card-one em { color: rgba(246, 178, 255, 0.58); }
.tools-lab[data-tool-visual="crm"] .scan-card-two em { color: rgba(168, 196, 255, 0.58); }

.tools-lab .ai-engine-svg,
.tools-lab > .tool-scan-card,
.tools-lab > .tool-glass-chip,
.tools-lab > .tool-node {
  display: none !important;
}

.tools-lab[data-tool-visual="direct"] > svg,
.tools-lab[data-tool-visual="direct"] > .tool-orbit,
.tools-lab[data-tool-visual="direct"] > .tool-ray,
.tools-lab[data-tool-visual="direct"] > .tool-core,
.tools-lab[data-tool-visual="direct"] > .tool-field,
.tools-lab[data-tool-visual="direct"] > .tool-scan-card,
.tools-lab[data-tool-visual="direct"] > .tool-glass-chip,
.tools-lab[data-tool-visual="direct"] > .tool-node,
.tools-lab[data-tool-visual="direct"] .scene-qualifier,
.tools-lab[data-tool-visual="direct"] .scene-content,
.tools-lab[data-tool-visual="direct"] .scene-crm {
  display: none !important;
}

.tool-object-scene {
  position: absolute;
  z-index: 7;
  inset: -3% -2% -4%;
  opacity: 0;
  transform: translate3d(18px, 12px, 0) scale(0.96);
  transform-style: preserve-3d;
  pointer-events: none;
  transition:
    opacity 380ms ease,
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms ease;
  filter:
    drop-shadow(0 34px 72px rgba(0, 0, 0, 0.64))
    drop-shadow(0 0 42px hsla(var(--tool-hue), 100%, 72%, 0.18));
}

.tools-lab[data-tool-visual="direct"] .scene-direct,
.tools-lab[data-tool-visual="qualifier"] .scene-qualifier,
.tools-lab[data-tool-visual="content"] .scene-content,
.tools-lab[data-tool-visual="crm"] .scene-crm {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.tool-object-scene span {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
}

.tool-object-scene > span:not(.racer-image-glow):not(.racer-wheel-light):not(.racer-direct-badge):not(.racer-speed-glow):not(.racer-speed-core) {
  display: none !important;
}

.tool-scene-svg {
  position: absolute;
  z-index: 4;
  inset: -2% -2% -3% -3%;
  width: 106%;
  height: 106%;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  filter:
    drop-shadow(0 28px 64px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 34px hsla(var(--tool-hue), 100%, 72%, 0.13));
}

.tool-direct-svg,
.tool-racer-svg {
  display: none !important;
}

.tool-racer-image {
  position: absolute;
  z-index: 5;
  left: 52%;
  top: 50%;
  display: block;
  width: 96%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  filter:
    contrast(1.08)
    saturate(0.94)
    drop-shadow(0 22px 46px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 26px rgba(122, 184, 255, 0.13));
  opacity: 1;
  animation: racerPhotoFloat 7.4s ease-in-out infinite;
}

.racer-image-glow {
  z-index: 4;
  left: 6%;
  right: 4%;
  top: 27%;
  height: 48%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 58% 45%, rgba(117, 178, 255, 0.2), transparent 55%),
    radial-gradient(ellipse at 50% 72%, rgba(255, 255, 255, 0.055), transparent 46%);
  filter: blur(22px);
  opacity: 0.54;
  mix-blend-mode: screen;
}

.racer-speed-glow {
  z-index: 6;
  left: 3%;
  top: 61%;
  width: 78%;
  height: 22%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 78% 50%, rgba(255, 255, 255, 0.7), rgba(172, 216, 255, 0.34) 18%, rgba(96, 160, 255, 0.16) 36%, transparent 66%),
    linear-gradient(90deg, transparent, rgba(145, 205, 255, 0.12) 18%, rgba(255, 255, 255, 0.34) 52%, rgba(114, 181, 255, 0.16) 73%, transparent);
  filter: blur(18px);
  opacity: 0.72;
  mix-blend-mode: screen;
  transform: translateY(-50%) skewX(-17deg);
  animation: racerSpeedBreath 1.8s ease-in-out infinite;
}

.racer-speed-core {
  z-index: 8;
  left: 7%;
  top: 62%;
  width: 67%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(190, 226, 255, 0.46), rgba(255, 255, 255, 0.78), rgba(109, 182, 255, 0.24), transparent);
  box-shadow:
    0 0 18px rgba(184, 219, 255, 0.32),
    0 0 42px rgba(93, 167, 255, 0.18);
  opacity: 0.55;
  mix-blend-mode: screen;
  transform: translateY(-50%) skewX(-17deg);
  animation: racerSpeedLine 1.15s ease-in-out infinite;
}

.racer-wheel-light {
  z-index: 7;
  width: 6.6%;
  aspect-ratio: 1;
  border: 1px solid rgba(220, 242, 255, 0.58);
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 0 35%, rgba(160, 218, 255, 0.18) 36% 42%, transparent 43% 56%, rgba(232, 248, 255, 0.48) 57% 61%, transparent 62%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.9) 0 4deg, transparent 4deg 15deg, rgba(112, 190, 255, 0.52) 15deg 20deg, transparent 20deg 36deg),
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.88), transparent 12%, rgba(137, 205, 255, 0.58) 23%, transparent 39%, rgba(255, 255, 255, 0.78) 52%, transparent 66%, rgba(137, 205, 255, 0.52) 77%, transparent 90%, rgba(255, 255, 255, 0.88));
  box-shadow:
    0 0 10px rgba(199, 229, 255, 0.2),
    0 0 22px rgba(84, 161, 255, 0.13);
  opacity: 0.86;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  animation: racerWheelLightSpin 560ms linear infinite;
}

.racer-wheel-light-one {
  left: 18.4%;
  top: 54.5%;
}

.racer-wheel-light-two {
  left: 57.9%;
  top: 57%;
}

.racer-wheel-light-three {
  left: 88.8%;
  top: 55.2%;
  width: 5.2%;
  opacity: 0.62;
}

.racer-direct-badge {
  z-index: 8;
  left: 77%;
  top: 43%;
  display: block !important;
  width: max-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(7px, 0.6vw, 9px);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: none;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.78),
    0 0 9px rgba(126, 190, 255, 0.16);
  box-shadow: none;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(8deg) skewX(-8deg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.racer-backplate {
  transform-origin: 374px 390px;
  animation: racerBackplateDrift 18s linear infinite;
}

.racer-car {
  transform-origin: 380px 430px;
  animation: racerBodyFloat 5.8s ease-in-out infinite;
}

.wheel-spokes {
  transform-box: fill-box;
  transform-origin: center;
  animation: racerWheelSpin 820ms linear infinite;
}

.wheel-front .wheel-spokes {
  animation-duration: 760ms;
}

.racer-speed-line {
  stroke-dasharray: 74 22;
  animation: racerLines 1.1s linear infinite;
}

.racer-logo text {
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.42);
  stroke-width: 2px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
}

.svg-orbits {
  display: none;
}

.direct-svg-object,
.qual-svg-object,
.content-svg-object,
.crm-svg-object {
  transform-origin: 360px 360px;
  animation: toolSvgObjectFloat 6.8s ease-in-out infinite;
}

.qual-svg-object {
  animation-delay: -0.8s;
}

.content-svg-object {
  animation-delay: -1.3s;
}

.crm-svg-object {
  animation-delay: -1.8s;
}

.direct-chart-svg {
  animation: directChartPulse 4.8s ease-in-out infinite;
}

.content-camera {
  transform-origin: 360px 350px;
  animation: contentCameraGlint 7.2s ease-in-out infinite;
}

.crm-card-stack {
  transform-origin: 360px 360px;
  animation: crmStackShift 7.4s ease-in-out infinite;
}

.tool-object-scene::before,
.tool-object-scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tool-object-scene::before {
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 13%;
  height: 15%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, hsla(var(--tool-hue), 100%, 72%, 0.2), transparent 68%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.18), transparent 58%);
  filter: blur(18px);
  opacity: 0.54;
  mix-blend-mode: screen;
}

.tool-object-scene::after {
  z-index: 0;
  inset: 8% 7% 14% 10%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 58% 34%, rgba(255, 255, 255, 0.14), transparent 15%),
    radial-gradient(circle at 42% 60%, hsla(var(--tool-hue), 100%, 72%, 0.11), transparent 36%);
  filter: blur(16px);
  opacity: 0.18;
  mix-blend-mode: screen;
  animation: objectLightDrift 7.4s ease-in-out infinite;
}

.scene-direct::before {
  left: 13%;
  right: 5%;
  bottom: 22%;
  height: 12%;
  opacity: 0.2;
  filter: blur(16px);
}

.scene-direct::after {
  inset: 18% 1% 15% 6%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 55% 45%, rgba(255, 255, 255, 0.11), transparent 18%),
    radial-gradient(circle at 57% 58%, rgba(116, 170, 255, 0.105), transparent 42%),
    radial-gradient(circle at 42% 42%, rgba(230, 107, 255, 0.035), transparent 34%);
  opacity: 0.38;
  filter: blur(22px);
  animation: glassPulse 6.6s ease-in-out infinite;
}

.direct-desk,
.qualifier-base,
.content-base,
.crm-base {
  z-index: 1;
  left: 17%;
  bottom: 14%;
  width: 66%;
  height: 13%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(255, 255, 255, 0.32), transparent 56%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), hsla(var(--tool-hue), 100%, 74%, 0.16), rgba(255, 255, 255, 0.18), transparent),
    rgba(8, 12, 18, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -16px 30px rgba(0, 0, 0, 0.36),
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 36px hsla(var(--tool-hue), 100%, 72%, 0.13);
  transform: perspective(780px) rotateX(72deg);
  transform-origin: 50% 50%;
}

.direct-laptop {
  z-index: 5;
  left: 13%;
  top: 18%;
  width: 76%;
  height: 45%;
  border-radius: 17px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.24), transparent 23%),
    linear-gradient(126deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.055) 26%, rgba(4, 6, 10, 0.98) 60%, rgba(125, 187, 255, 0.16)),
    #05070b;
  border: 2px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset -22px 0 46px rgba(106, 177, 255, 0.14),
    inset 0 -18px 34px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(255, 255, 255, 0.22),
    0 0 82px rgba(100, 172, 255, 0.26);
  transform: perspective(900px) rotateX(5deg) rotateY(-7deg) rotateZ(-1deg);
  animation: laptopHover 7s ease-in-out infinite;
}

.direct-laptop::before,
.direct-laptop::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.direct-laptop::before {
  z-index: 1;
  inset: -1px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(110deg, transparent 19%, rgba(255, 255, 255, 0.48), transparent 28% 75%, rgba(255, 255, 255, 0.26), transparent 84%),
    radial-gradient(circle at 72% 22%, rgba(122, 209, 255, 0.18), transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.68;
}

.direct-laptop::after {
  z-index: 3;
  left: 4%;
  right: 4%;
  bottom: -8px;
  height: 13px;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(14, 18, 26, 0.88) 24%, rgba(255, 255, 255, 0.22) 52%, rgba(5, 7, 11, 0.92) 72%, rgba(255, 255, 255, 0.38));
  filter: blur(0.2px);
}

.direct-screen {
  inset: 12% 11% 16%;
  z-index: 2;
  overflow: hidden;
  border-radius: 11px;
  background:
    radial-gradient(circle at 75% 25%, rgba(113, 194, 255, 0.28), transparent 32%),
    linear-gradient(135deg, rgba(18, 34, 50, 0.9), rgba(2, 3, 6, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 34px rgba(103, 183, 255, 0.16),
    0 0 22px rgba(105, 187, 255, 0.12);
}

.direct-screen::before,
.direct-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.direct-screen::before {
  left: 13%;
  right: 12%;
  bottom: 18%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(129, 207, 255, 0.18), transparent);
  box-shadow:
    0 -31px 0 rgba(255, 255, 255, 0.055),
    0 -62px 0 rgba(255, 255, 255, 0.04);
}

.direct-screen::after {
  left: 17%;
  top: 31%;
  width: 66%;
  height: 42%;
  background:
    linear-gradient(140deg, transparent 0 42%, rgba(255, 255, 255, 0.94) 43.5% 46%, transparent 47% 100%),
    linear-gradient(25deg, transparent 0 44%, rgba(118, 204, 255, 0.86) 45.5% 48%, transparent 49% 100%);
  clip-path: polygon(0 76%, 21% 60%, 38% 63%, 61% 36%, 100% 10%, 100% 23%, 63% 47%, 40% 76%, 22% 72%, 0 88%);
  filter: drop-shadow(0 0 10px rgba(156, 215, 255, 0.9));
}

.direct-grid {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.065) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.18;
  mask-image: radial-gradient(circle at 58% 45%, #000 0 56%, transparent 84%);
}

.chart-bars {
  left: 21%;
  width: 8px;
  bottom: 16%;
  height: 20%;
  z-index: 2;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(123, 205, 255, 0.38));
  box-shadow:
    34px -13px 0 rgba(124, 204, 255, 0.55),
    68px -26px 0 rgba(182, 135, 255, 0.55),
    102px -44px 0 rgba(255, 255, 255, 0.7),
    0 0 13px rgba(132, 202, 255, 0.42),
    34px -13px 15px rgba(124, 204, 255, 0.24),
    68px -26px 18px rgba(182, 135, 255, 0.22),
    102px -44px 18px rgba(255, 255, 255, 0.22);
  opacity: 0.98;
}

.chart-line {
  display: none !important;
  left: 17%;
  top: 31%;
  width: 63%;
  height: 39%;
  z-index: 3;
  background:
    linear-gradient(145deg, transparent 0 45%, rgba(255, 255, 255, 0.9) 46% 48%, transparent 49% 100%),
    linear-gradient(28deg, transparent 0 46%, rgba(125, 202, 255, 0.86) 47% 49%, transparent 50% 100%);
  clip-path: polygon(0 74%, 24% 57%, 42% 62%, 68% 30%, 100% 10%, 100% 21%, 69% 41%, 44% 72%, 24% 67%, 0 85%);
  filter: drop-shadow(0 0 10px rgba(156, 215, 255, 0.86));
}

.chart-dot {
  z-index: 4;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f8fbff;
  box-shadow: 0 0 14px rgba(160, 216, 255, 0.9);
}

.dot-a { left: 35%; top: 57%; }
.dot-b { left: 56%; top: 43%; }
.dot-c { left: 76%; top: 29%; }

.direct-camera {
  left: 49%;
  top: 4%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.46);
}

.direct-stand {
  z-index: 3;
  left: 46.5%;
  top: 61%;
  width: 9%;
  height: 24%;
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), rgba(7, 10, 16, 0.9) 44%, rgba(149, 201, 255, 0.26));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.38);
  transform: perspective(500px) rotateX(-8deg) rotateY(-10deg);
}

.direct-base {
  z-index: 3;
  left: 31%;
  top: 79%;
  width: 42%;
  height: 8%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(8, 11, 18, 0.86), rgba(133, 199, 255, 0.38), rgba(255, 255, 255, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 34px rgba(114, 188, 255, 0.22);
  transform: perspective(600px) rotateX(68deg);
}

.direct-glow {
  z-index: 0;
  left: 19%;
  top: 18%;
  width: 66%;
  height: 62%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(111, 191, 255, 0.22), transparent 64%);
  filter: blur(20px);
  mix-blend-mode: screen;
}

.qualifier-funnel {
  left: 28%;
  top: 18%;
  width: 44%;
  height: 54%;
  clip-path: polygon(7% 2%, 93% 2%, 72% 57%, 58% 57%, 58% 94%, 42% 94%, 42% 57%, 28% 57%);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.05) 28%, rgba(5, 9, 13, 0.84) 57%, rgba(113, 255, 232, 0.12)),
    rgba(8, 15, 18, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 -28px 42px rgba(0, 0, 0, 0.48),
    0 0 52px rgba(102, 255, 227, 0.18),
    0 22px 64px rgba(0, 0, 0, 0.52);
  transform: perspective(740px) rotateX(12deg) rotateY(16deg) rotateZ(-3deg);
}

.qualifier-funnel::before,
.qualifier-funnel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.qualifier-funnel::before {
  inset: 8% 12%;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, 0.34), transparent 40%),
    radial-gradient(circle at 48% 74%, rgba(112, 255, 225, 0.24), transparent 30%);
  mix-blend-mode: screen;
}

.qualifier-funnel::after {
  left: 47%;
  top: 12%;
  width: 2px;
  height: 78%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.56), rgba(115, 255, 230, 0.2), transparent);
  filter: blur(0.2px);
}

.qualifier-ring {
  left: 21%;
  top: 21%;
  width: 58%;
  height: 36%;
  border: 1px solid rgba(193, 255, 246, 0.22);
  border-radius: 999px;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.04),
    0 0 22px rgba(104, 255, 230, 0.1);
  transform: rotate(-13deg);
}

.ring-b {
  top: 38%;
  left: 25%;
  width: 50%;
  height: 28%;
  opacity: 0.58;
  transform: rotate(16deg);
}

.qualifier-lead {
  width: 11%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 26%, #fff, rgba(204, 255, 249, 0.48) 24%, rgba(20, 36, 42, 0.82) 62%, rgba(3, 6, 8, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 0 24px rgba(109, 255, 231, 0.24);
  animation: qualifierLeadFloat 5.8s ease-in-out infinite;
}

.lead-a { left: 17%; top: 30%; }
.lead-b { right: 20%; top: 30%; animation-delay: -1.6s; }
.lead-c { left: 45%; top: 70%; width: 9%; animation-delay: -2.6s; }

.qualifier-score {
  right: 12%;
  bottom: 22%;
  width: 25%;
  height: 17%;
  border-radius: 14px;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(5, 10, 12, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 30px rgba(109, 255, 231, 0.16);
  transform: perspective(600px) rotateY(-18deg) rotateZ(4deg);
}

.qualifier-score::before {
  content: "";
  position: absolute;
  left: 17%;
  top: 49%;
  width: 64%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(112, 255, 230, 0.1), rgba(255, 255, 255, 0.78), rgba(112, 255, 230, 0.18));
  box-shadow: 0 0 12px rgba(112, 255, 230, 0.44);
}

.content-lens {
  left: 30%;
  top: 18%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 29%, rgba(255, 255, 255, 0.86), transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(244, 179, 255, 0.23) 0 19%, rgba(7, 8, 13, 0.96) 21% 38%, rgba(255, 255, 255, 0.18) 40% 42%, rgba(20, 14, 28, 0.78) 44% 63%, rgba(255, 255, 255, 0.32) 66% 68%, rgba(0, 0, 0, 0.32) 70%),
    conic-gradient(from 38deg, rgba(255, 255, 255, 0.8), rgba(197, 121, 255, 0.22), rgba(255, 255, 255, 0.08), rgba(127, 206, 255, 0.28), rgba(255, 255, 255, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.05),
    inset 0 0 36px rgba(0, 0, 0, 0.62),
    0 0 38px rgba(235, 139, 255, 0.22),
    0 0 80px rgba(126, 198, 255, 0.14);
  transform: perspective(780px) rotateX(8deg) rotateY(-14deg);
  animation: contentLensBreath 6.4s ease-in-out infinite;
}

.content-lens::before,
.content-lens::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.content-lens::before {
  inset: -10%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.06);
}

.content-lens::after {
  inset: 18%;
  background: radial-gradient(circle at 45% 38%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.03) 34%, transparent 66%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

.content-card {
  width: 34%;
  height: 22%;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.26), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(7, 8, 13, 0.76) 58%, rgba(245, 129, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.17);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 18px 44px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(235, 128, 255, 0.12);
}

.content-card::before,
.content-card::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.54), transparent);
  opacity: 0.68;
}

.content-card::before { top: 42%; }
.content-card::after { top: 60%; width: 42%; right: auto; }

.content-card.card-a {
  left: 9%;
  top: 28%;
  transform: perspective(600px) rotateY(24deg) rotateZ(-10deg);
}

.content-card.card-b {
  right: 7%;
  top: 30%;
  transform: perspective(600px) rotateY(-24deg) rotateZ(8deg);
}

.content-card.card-c {
  left: 35%;
  bottom: 18%;
  width: 31%;
  transform: perspective(600px) rotateX(16deg) rotateZ(2deg);
}

.content-beam {
  left: 17%;
  top: 26%;
  width: 66%;
  height: 52%;
  border-radius: 999px;
  background:
    conic-gradient(from 90deg, transparent, rgba(245, 137, 255, 0.16), transparent 28%, rgba(138, 205, 255, 0.14), transparent 58%),
    radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 54%);
  filter: blur(8px);
  opacity: 0.76;
  mix-blend-mode: screen;
  animation: contentBeamFlow 8s linear infinite;
}

.crm-stack {
  width: 50%;
  height: 20%;
  left: 25%;
  border-radius: 17px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(8, 10, 17, 0.84) 58%, rgba(133, 166, 255, 0.13));
  border: 1px solid rgba(255, 255, 255, 0.19);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset -18px 0 34px rgba(98, 145, 255, 0.09),
    0 22px 52px rgba(0, 0, 0, 0.42),
    0 0 30px rgba(137, 173, 255, 0.13);
  transform: perspective(760px) rotateX(10deg) rotateY(-20deg);
}

.crm-stack::before,
.crm-stack::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.crm-stack::before {
  left: 12%;
  top: 28%;
  width: 20%;
  height: 42%;
  border-radius: 999px;
  background: radial-gradient(circle at 36% 28%, #fff, rgba(167, 194, 255, 0.62) 28%, rgba(8, 10, 16, 0.72) 68%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.crm-stack::after {
  left: 40%;
  right: 13%;
  top: 39%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(142, 178, 255, 0.18), transparent);
  box-shadow: 0 13px 0 rgba(255, 255, 255, 0.16);
}

.stack-a {
  top: 22%;
  transform: perspective(760px) rotateX(10deg) rotateY(-20deg) translateX(-6%);
}

.stack-b {
  top: 39%;
  transform: perspective(760px) rotateX(10deg) rotateY(-20deg) translateX(6%) translateZ(22px);
}

.stack-c {
  top: 56%;
  transform: perspective(760px) rotateX(10deg) rotateY(-20deg) translateX(-1%) translateZ(44px);
}

.crm-pulse {
  left: 25%;
  top: 20%;
  width: 50%;
  height: 57%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 62% 50%, rgba(142, 178, 255, 0.22), transparent 58%),
    conic-gradient(from 140deg, transparent, rgba(255, 255, 255, 0.18), transparent 24%, rgba(128, 168, 255, 0.16), transparent 58%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: crmPulseTurn 9s linear infinite;
}

.crm-node {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.54),
    0 0 26px rgba(139, 176, 255, 0.28);
}

.crm-node.node-a { left: 22%; top: 35%; }
.crm-node.node-b { right: 20%; top: 45%; }
.crm-node.node-c { left: 45%; bottom: 23%; }

@keyframes objectLightDrift {
  0%, 100% { transform: translateX(-4%) rotate(-4deg); opacity: 0.34; }
  50% { transform: translateX(5%) rotate(3deg); opacity: 0.58; }
}

@keyframes toolDirectHaloBreath {
  0%, 100% {
    opacity: 0.48;
    transform: translate3d(-0.8%, 0.4%, 0) scale(0.99);
  }

  50% {
    opacity: 0.66;
    transform: translate3d(0.8%, -0.5%, 0) scale(1.012);
  }
}

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

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

@keyframes racerBodyFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.6deg); }
  50% { transform: translate3d(0, -7px, 0) rotate(0.8deg); }
}

@keyframes racerPhotoFloat {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1); }
  50% { transform: translate(-50%, -50%) translate3d(0, -4px, 0) scale(1.006); }
}

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

@keyframes racerWheelLightSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes racerSpeedBreath {
  0%, 100% {
    opacity: 0.48;
    transform: translateY(-50%) skewX(-17deg) scaleX(0.94);
    filter: blur(20px);
  }

  50% {
    opacity: 0.78;
    transform: translateY(-50%) skewX(-17deg) scaleX(1.04);
    filter: blur(17px);
  }
}

@keyframes racerSpeedLine {
  0%, 100% {
    opacity: 0.28;
    transform: translateY(-50%) skewX(-17deg) translateX(3%);
  }

  45% {
    opacity: 0.72;
    transform: translateY(-50%) skewX(-17deg) translateX(-2%);
  }

  70% {
    opacity: 0.42;
  }
}

@keyframes racerLines {
  to { stroke-dashoffset: -96; }
}

@keyframes toolSvgObjectFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.5deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(1deg); }
}

@keyframes directChartPulse {
  0%, 100% { opacity: 0.86; }
  50% { opacity: 1; }
}

@keyframes contentCameraGlint {
  0%, 100% { transform: rotate(-0.4deg) scale(1); }
  50% { transform: rotate(0.8deg) scale(1.015); }
}

@keyframes crmStackShift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@keyframes laptopHover {
  0%, 100% { transform: perspective(900px) rotateX(5deg) rotateY(-7deg) rotateZ(-1deg) translateY(0); }
  50% { transform: perspective(900px) rotateX(6deg) rotateY(-4deg) rotateZ(-0.5deg) translateY(-8px); }
}

@keyframes qualifierLeadFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.82; }
  50% { transform: translate3d(8px, -10px, 0); opacity: 1; }
}

@keyframes contentLensBreath {
  0%, 100% { transform: perspective(780px) rotateX(8deg) rotateY(-14deg) scale(1); }
  50% { transform: perspective(780px) rotateX(9deg) rotateY(-10deg) scale(1.025); }
}

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

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

.side-rail {
  --rail-center: 35px;
  position: absolute;
  z-index: 14;
  top: 50%;
  left: max(24px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  width: 70px;
  height: min(462px, calc(100svh - 96px));
  padding: 13px 0;
  overflow: hidden;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01) 42%, rgba(255, 255, 255, 0.05)),
    rgba(6, 8, 12, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 24px 62px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(24px) saturate(150%) contrast(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(150%) contrast(1.08);
  transition:
    width 360ms cubic-bezier(0.22, 1, 0.36, 1),
    height 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 760ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 760ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

.side-rail:hover,
.side-rail.is-open {
  width: 270px;
  border-color: rgba(255, 255, 255, 0.23);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.014) 42%, rgba(142, 177, 255, 0.045)),
    rgba(4, 6, 10, 0.58);
}

.side-rail::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 92px;
  bottom: 78px;
  left: var(--rail-center);
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.side-rail::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: 17px;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--rail-center) 58px, rgba(255, 255, 255, 0.1), transparent 31px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), transparent 20%, transparent 74%, rgba(255, 255, 255, 0.032));
  opacity: 0.58;
}

.side-rail:hover::after,
.side-rail.is-open::after {
  background:
    radial-gradient(ellipse at calc(var(--rail-center) + 58px) 46px, rgba(255, 255, 255, 0.08), transparent 78px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), transparent 20%, transparent 74%, rgba(255, 255, 255, 0.03));
  opacity: 0.42;
}

.menu-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 0 0 52px;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: calc(var(--rail-center) - 24px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.menu-toggle::before {
  content: none;
}

.menu-toggle span {
  position: absolute;
  left: 10px;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.62),
    0 0 18px rgba(154, 190, 255, 0.44);
  transition:
    top 220ms ease,
    transform 220ms ease,
    width 220ms ease;
}

.menu-toggle span:first-child {
  top: 17px;
}

.menu-toggle span:last-child {
  top: 28px;
  width: 21px;
}

.side-rail.is-open .menu-toggle span:first-child {
  top: 24px;
  transform: rotate(42deg);
}

.side-rail.is-open .menu-toggle span:last-child {
  top: 24px;
  width: 28px;
  transform: rotate(-42deg);
}

.side-nav {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.telegram-link {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 238px;
  min-height: 38px;
  margin-top: 16px;
  padding: 0 12px 0 calc(var(--rail-center) - 17px);
  color: rgba(220, 236, 255, 0.64);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color 220ms ease,
    transform 220ms ease,
    text-shadow 220ms ease;
}

.telegram-link::before {
  content: "";
  position: absolute;
  top: -16px;
  left: var(--rail-center);
  width: 1px;
  height: 14px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

.telegram-link svg {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 8px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.13), transparent 46%),
    rgba(255, 255, 255, 0.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 14px rgba(154, 190, 255, 0.1);
  fill: currentColor;
  filter: drop-shadow(0 0 7px rgba(154, 190, 255, 0.2));
  transition:
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.telegram-link span {
  display: block;
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.side-rail:hover .telegram-link span,
.side-rail.is-open .telegram-link span {
  opacity: 1;
  transform: translateX(0);
}

.telegram-link:hover,
.telegram-link:focus-visible {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 0 18px rgba(190, 218, 255, 0.42);
  transform: translateX(2px);
}

.telegram-link:hover svg,
.telegram-link:focus-visible svg {
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 16px rgba(255, 255, 255, 0.2),
    0 0 34px rgba(118, 180, 255, 0.22);
  transform: translateY(-1px);
}

.telegram-link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.42);
  outline-offset: 4px;
}

.right-claim {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: clamp(22px, 4vw, 70px);
  display: grid;
  justify-items: end;
  gap: clamp(12px, 2vh, 20px);
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(10px, 0.84vw, 13px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  pointer-events: none;
  transition:
    opacity 820ms ease,
    transform 980ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 820ms ease;
}

body:not([data-page="home"]) .right-claim {
  opacity: 0;
  transform: translate(28px, -50%);
  visibility: hidden;
}

.claim-word {
  position: relative;
  padding-right: 2px;
  text-shadow: 0 0 18px rgba(180, 206, 255, 0.16);
}

.claim-word::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 18px);
  width: clamp(34px, 5.5vw, 88px);
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28));
}

.claim-line {
  display: block;
  width: 1px;
  height: clamp(54px, 8.4vh, 96px);
  margin-right: 0.22em;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.34), transparent);
}

.claim-line-short {
  height: clamp(24px, 4.2vh, 44px);
  opacity: 0.7;
}

.hero-kicker {
  position: absolute;
  top: clamp(24px, 4.4vh, 48px);
  left: 50%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 58px);
  width: 100vw;
  padding: 0 clamp(18px, 3.8vw, 74px);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(9px, 0.9vw, 13px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-kicker::before,
.hero-kicker::after {
  content: "";
  height: 1px;
  background: rgba(255, 255, 255, 0.26);
}

.hero-kicker::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34));
}

.hero-kicker::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent);
}

.brand-lockup {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 100%;
}

.logo-stage {
  position: relative;
  width: min(88vw, 1480px);
  aspect-ratio: 2172 / 750;
  --logo-x: 50%;
  --logo-y: 45%;
  --logo-light: 0;
  isolation: isolate;
  filter:
    drop-shadow(0 30px 70px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 42px rgba(122, 158, 255, 0.06));
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 900ms ease,
    transform 1180ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1000ms ease;
}

.logo-stage::before,
.logo-stage::after {
  content: "";
  position: absolute;
  inset: -22% -8% 14%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 220ms ease;
}

.logo-stage::before {
  background:
    radial-gradient(circle clamp(240px, 30vw, 620px) at var(--logo-x) var(--logo-y),
      rgba(205, 226, 255, calc(0.01 + var(--logo-light) * 0.035)),
      rgba(92, 151, 255, calc(var(--logo-light) * 0.022)) 24%,
      rgba(116, 76, 255, calc(var(--logo-light) * 0.012)) 45%,
      transparent 72%),
    linear-gradient(110deg,
      transparent 19%,
      rgba(116, 173, 255, calc(var(--logo-light) * 0.008)) 42%,
      transparent 68%);
  filter: blur(38px);
  opacity: calc(0.025 + var(--logo-light) * 0.09);
}

.logo-stage::after {
  inset: -12% -4% 19%;
  background:
    linear-gradient(108deg,
      transparent 0 42%,
      rgba(255, 255, 255, calc(var(--logo-light) * 0.035)) 48%,
      rgba(122, 180, 255, calc(var(--logo-light) * 0.02)) 52%,
      transparent 59% 100%);
  filter: blur(18px);
  transform: translateX(calc((var(--logo-light) - 0.5) * 16px));
  opacity: calc(var(--logo-light) * 0.055);
}

.logo-viewport {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 82%;
  overflow: visible;
  pointer-events: none;
}

.logo-pass {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: normal;
}

.logo-base-pass {
  opacity: 1;
  filter:
    grayscale(0.18)
    brightness(0.98)
    contrast(1.18)
    saturate(0.86)
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 34px rgba(120, 156, 255, 0.08));
}

.logo-tint-pass,
.logo-sheen-pass {
  display: block;
}

.logo-stage.is-fallback .logo-canvas {
  display: none;
}

.logo-stage.is-fallback .logo-base-pass {
  opacity: 1;
  filter:
    grayscale(0.08)
    brightness(1.62)
    contrast(1.38)
    saturate(0.92)
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 34px rgba(136, 172, 255, 0.18));
}

.logo-stage.is-fallback .logo-tint-pass {
  opacity: calc(0.08 + var(--logo-light) * 0.76);
  clip-path: none;
  -webkit-mask-image: radial-gradient(circle clamp(220px, 29vw, 560px) at var(--logo-x) var(--logo-y), #000 0 36%, rgba(0, 0, 0, 0.68) 54%, transparent 76%);
  mask-image: radial-gradient(circle clamp(220px, 29vw, 560px) at var(--logo-x) var(--logo-y), #000 0 36%, rgba(0, 0, 0, 0.68) 54%, transparent 76%);
  filter:
    brightness(1.36)
    contrast(1.32)
    sepia(1)
    saturate(4.2)
    hue-rotate(184deg)
    drop-shadow(0 0 20px rgba(76, 149, 255, 0.34))
    drop-shadow(0 0 34px rgba(216, 76, 255, 0.22));
}

.logo-stage.is-fallback .logo-sheen-pass {
  opacity: 0;
  clip-path: none;
  filter:
    grayscale(1)
    brightness(1.9)
    contrast(1.42)
    blur(0.1px);
}

.logo-tint-pass {
  opacity: calc(var(--logo-light) * 0.34);
  clip-path: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle clamp(220px, 29vw, 560px) at var(--logo-x) var(--logo-y), #000 0 34%, rgba(0, 0, 0, 0.5) 54%, transparent 78%);
  mask-image: radial-gradient(circle clamp(220px, 29vw, 560px) at var(--logo-x) var(--logo-y), #000 0 34%, rgba(0, 0, 0, 0.5) 54%, transparent 78%);
  filter:
    brightness(1.06)
    contrast(1.14)
    sepia(1)
    saturate(3.25)
    hue-rotate(178deg)
    drop-shadow(0 0 12px rgba(76, 149, 255, 0.09))
    drop-shadow(0 0 18px rgba(137, 185, 255, 0.06));
  transition:
    opacity 160ms ease,
    -webkit-mask-image 160ms ease,
    mask-image 160ms ease;
}

.logo-sheen-pass {
  opacity: calc(var(--logo-light) * 0.045);
  clip-path: none;
  mix-blend-mode: screen;
  filter:
    grayscale(1)
    brightness(1.32)
    contrast(1.18)
    blur(0.15px);
  animation: prismSweep 8.5s ease-in-out infinite;
}

.logo-canvas {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 82%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.logo-stage img,
.glass-visual img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.logo-stage,
.glass-visual {
  -webkit-touch-callout: none;
}

.visual-hover-guard {
  position: absolute;
  inset: -6%;
  z-index: 80;
  display: block;
  pointer-events: auto;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.logo-stage > .visual-hover-guard {
  inset: -3% -2% 12%;
}

.brand-subtitle,
.brand-subtitle-light {
  position: absolute;
  z-index: 5;
  left: 9.6%;
  right: 13.2%;
  bottom: 8.3%;
  display: grid;
  grid-template-columns: repeat(2, max-content) var(--subtitle-word-gap) repeat(7, max-content);
  align-items: center;
  justify-content: space-between;
  --subtitle-word-gap: clamp(24px, 3.4vw, 58px);
  font-size: clamp(12px, 2vw, 27px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.subtitle-letter {
  display: block;
  min-width: 0.62em;
}

.subtitle-space {
  display: block;
  width: var(--subtitle-word-gap);
  flex: 0 0 var(--subtitle-word-gap);
}

.brand-subtitle {
  color: rgba(255, 255, 255, 0.18);
  -webkit-text-stroke: 0.7px rgba(255, 255, 255, 0.52);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.08),
    0 9px 20px rgba(0, 0, 0, 0.74);
  opacity: 0.82;
}

.brand-subtitle-light {
  color: transparent;
  background:
    radial-gradient(circle clamp(130px, 18vw, 320px) at var(--logo-x) var(--logo-y),
      rgba(255, 255, 255, calc(var(--logo-light) * 0.98)),
      rgba(182, 210, 255, calc(var(--logo-light) * 0.8)) 22%,
      rgba(214, 93, 255, calc(var(--logo-light) * 0.68)) 42%,
      transparent 74%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 0 9px rgba(111, 163, 255, calc(var(--logo-light) * 0.42)))
    drop-shadow(0 0 14px rgba(227, 93, 255, calc(var(--logo-light) * 0.26)));
  opacity: 1;
}

.menu-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 238px;
  min-height: 34px;
  padding: 0 12px 0 calc(var(--rail-center) + 34px);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color 220ms ease,
    background 220ms ease,
    text-shadow 220ms ease,
    transform 220ms ease;
}

.menu-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--rail-center);
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 0 8px rgba(170, 205, 255, 0.16);
  opacity: 0.62;
  transition:
    opacity 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.menu-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--rail-center) + 14px);
  width: 22px;
  height: 1px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.menu-link span {
  display: block;
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.side-rail:hover .menu-link span,
.side-rail.is-open .menu-link span {
  opacity: 1;
  transform: translateX(0);
}

.side-rail:hover .menu-link,
.side-rail.is-open .menu-link {
  color: rgba(255, 255, 255, 0.72);
}

.menu-link:hover,
.menu-link:focus-visible,
.menu-link.is-active {
  color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.026);
  text-shadow: 0 0 18px rgba(210, 226, 255, 0.36);
}

.menu-link:hover,
.menu-link:focus-visible {
  transform: translateX(2px);
}

.menu-link:hover::before,
.menu-link:focus-visible::before,
.menu-link.is-active::before {
  opacity: 1;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.42),
    0 0 20px rgba(142, 178, 255, 0.3);
  transform: translate(-50%, -50%) scale(1.2);
}

.side-rail:hover .menu-link::after,
.side-rail.is-open .menu-link::after,
.menu-link.is-active::after {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}

.menu-link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.42);
  outline-offset: 3px;
}

@keyframes glassBreath {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.86;
  }

  50% {
    transform: translate3d(0, -1.4%, 0) scale(1.018);
    opacity: 1;
  }
}

@keyframes glassSweep {
  0%,
  100% {
    transform: translateX(-18%) rotate(0deg);
    opacity: 0.08;
  }

  48% {
    transform: translateX(18%) rotate(0deg);
    opacity: 0.28;
  }
}

@keyframes glassPulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.98);
  }

  48% {
    opacity: 0.88;
    transform: scale(1.02);
  }
}

@keyframes glassLineSweep {
  0%,
  100% {
    opacity: 0.08;
    transform: translateX(-28%);
  }

  46% {
    opacity: 0.32;
    transform: translateX(24%);
  }
}

@keyframes rocketPanelBreath {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(0.992);
  }

  50% {
    opacity: 1;
    transform: scale(1.01);
  }
}

@keyframes rocketSceneLight {
  0%,
  100% {
    opacity: 0.34;
    transform: translate3d(-1.4%, 1%, 0);
  }

  48% {
    opacity: 0.7;
    transform: translate3d(1.8%, -1.2%, 0);
  }
}

@keyframes orbitDetailRotate {
  from {
    transform: rotate(0deg) scale(1);
  }

  to {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes orbitFloat {
  0%,
  100% {
    opacity: 0.42;
    filter: blur(0);
  }

  50% {
    opacity: 0.78;
    filter: blur(0.2px);
  }
}

@keyframes nodeSpark {
  0%,
  100% {
    opacity: 0.36;
    transform: scale(0.78);
  }

  45% {
    opacity: 0.96;
    transform: scale(1.12);
  }
}

@keyframes rocketLift {
  0%,
  100% {
    transform: translate(-50%, -49%) rotate(9deg) rotateY(-8deg) rotateX(2deg);
  }

  34% {
    transform: translate(-48%, -56%) rotate(13deg) rotateY(5deg) rotateX(-2deg) scale(1.018);
  }

  68% {
    transform: translate(-51.5%, -53%) rotate(7deg) rotateY(-12deg) rotateX(3deg) scale(0.998);
  }
}

@keyframes rocketGlassBreath {
  0%,
  100% {
    filter:
      grayscale(0.1)
      brightness(1.03)
      contrast(1.2)
      saturate(0.9)
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
      drop-shadow(0 0 26px rgba(135, 180, 255, 0.12));
  }

  48% {
    filter:
      grayscale(0.08)
      brightness(1.1)
      contrast(1.28)
      saturate(0.96)
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.26))
      drop-shadow(0 0 36px rgba(148, 192, 255, 0.18));
  }
}

@keyframes rocketPhotoLift {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      rotate(calc(3deg + var(--rocket-tilt-z)))
      rotateY(calc(-5deg + var(--rocket-tilt-y)))
      rotateX(calc(1deg + var(--rocket-tilt-x)));
  }

  38% {
    transform:
      translate(-49.1%, -53.6%)
      rotate(calc(5deg + var(--rocket-tilt-z)))
      rotateY(calc(3deg + var(--rocket-tilt-y)))
      rotateX(calc(-1deg + var(--rocket-tilt-x)))
      scale(1.012);
  }

  70% {
    transform:
      translate(-50.8%, -51.3%)
      rotate(calc(2deg + var(--rocket-tilt-z)))
      rotateY(calc(-8deg + var(--rocket-tilt-y)))
      rotateX(calc(2deg + var(--rocket-tilt-x)))
      scale(0.998);
  }
}

@keyframes rocketPhotoFlame {
  from {
    opacity: 0.82;
    transform: translate3d(-50%, 0, 0) scaleX(0.98) scaleY(0.97);
    filter:
      blur(0.9px)
      saturate(1.08)
      brightness(1.04)
      drop-shadow(0 0 16px rgba(255, 154, 55, 0.31))
      drop-shadow(0 18px 36px rgba(255, 101, 30, 0.12));
  }

  to {
    opacity: 0.98;
    transform: translate3d(-50%, 0, 0) scaleX(1.02) scaleY(1.07);
    filter:
      blur(1.08px)
      saturate(1.18)
      brightness(1.12)
      drop-shadow(0 0 19px rgba(255, 168, 70, 0.42))
      drop-shadow(0 22px 44px rgba(255, 101, 30, 0.16));
  }
}

@keyframes rocketPhotoFlameCore {
  from {
    opacity: 0.68;
    transform: translate3d(-50%, 0, 0) scaleX(0.95) scaleY(0.96);
  }

  to {
    opacity: 0.9;
    transform: translate3d(-50%, 0, 0) scaleX(1.02) scaleY(1.08);
  }
}

@keyframes rocketPhotoSparks {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.8);
  }

  42% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 34px) scale(0.35);
  }
}

@keyframes rocketInternalCaustics {
  0%,
  100% {
    opacity: 0.2;
    transform: translate3d(-2%, 1%, 0) scale(1.02) rotate(-1deg);
  }

  48% {
    opacity: 0.42;
    transform: translate3d(2%, -1.5%, 0) scale(1.04) rotate(1deg);
  }
}

@keyframes rocketSpecularPass {
  0%,
  100% {
    opacity: 0.08;
    transform: translateX(-28%) skewX(-8deg);
  }

  42% {
    opacity: 0.34;
    transform: translateX(18%) skewX(-8deg);
  }

  62% {
    opacity: 0.16;
    transform: translateX(34%) skewX(-8deg);
  }
}

@keyframes rocketPrismDrift {
  0%,
  100% {
    opacity: calc(0.16 + var(--rocket-light) * 0.18);
    transform: translate3d(-2%, 2%, 0) rotate(-2deg);
  }

  50% {
    opacity: calc(0.34 + var(--rocket-light) * 0.26);
    transform: translate3d(2.5%, -2%, 0) rotate(2deg);
  }
}

@keyframes rocketMicroGlints {
  0%,
  100% {
    opacity: calc(0.08 + var(--rocket-light) * 0.12);
    transform: translateX(-18%) skewX(-10deg);
  }

  46% {
    opacity: calc(0.2 + var(--rocket-light) * 0.18);
    transform: translateX(18%) skewX(-10deg);
  }
}

@keyframes rocketEdgeShimmer {
  0%,
  100% {
    opacity: 0.58;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.22));
  }

  48% {
    opacity: 0.9;
    filter:
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.38))
      drop-shadow(0 0 16px rgba(132, 190, 255, 0.18));
  }
}

@keyframes rocketLineShine {
  0%,
  100% {
    opacity: 0.28;
  }

  44% {
    opacity: 0.68;
  }
}

@keyframes rocketGlassSweep {
  0%,
  100% {
    opacity: 0.08;
    transform: translateX(-8px);
  }

  48% {
    opacity: 0.28;
    transform: translateX(12px);
  }
}

@keyframes rocketFlameHaze {
  from {
    opacity: 0.34;
    transform: scaleX(0.82) scaleY(0.9) translateY(-2px);
  }

  to {
    opacity: 0.68;
    transform: scaleX(1.16) scaleY(1.1) translateY(3px);
  }
}

@keyframes rocketFlameCore {
  from {
    opacity: 0.66;
    transform: scaleX(0.88) scaleY(0.82);
  }

  to {
    opacity: 0.98;
    transform: scaleX(1.08) scaleY(1.18);
  }
}

@keyframes rocketFlameWhite {
  from {
    opacity: 0.48;
    transform: scaleX(0.8) scaleY(0.76);
  }

  to {
    opacity: 0.9;
    transform: scaleX(1.05) scaleY(1.08);
  }
}

@keyframes trailBreathe {
  0%,
  100% {
    opacity: 0.28;
    filter: blur(2.8px);
  }

  48% {
    opacity: 0.74;
    filter: blur(1.4px);
  }
}

@keyframes particleRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.6);
  }

  24% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate3d(26px, -80px, 0) scale(0.2);
  }
}

@keyframes preloaderWaves {
  0% {
    opacity: 0;
    transform: translate3d(0, 2vh, 0) scale(1.26);
  }

  46% {
    opacity: 0.24;
  }

  100% {
    opacity: 0.18;
    transform: translate3d(0, -1vh, 0) scale(1.14);
  }
}

@keyframes preloaderBeam {
  0% {
    opacity: 0;
    transform: translateX(-12%) skewX(-7deg);
  }

  42% {
    opacity: 0.92;
  }

  100% {
    opacity: 0.06;
    transform: translateX(10%) skewX(-7deg);
  }
}

@keyframes preloaderWelcomeFade {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
    filter: blur(7px);
    letter-spacing: clamp(0.34em, 1.08vw, 0.62em);
  }

  44% {
    opacity: 0.72;
    filter: blur(1.5px);
  }

  100% {
    opacity: 0.84;
    transform: translate(-50%, 0);
    filter: blur(0);
    letter-spacing: clamp(0.18em, 0.9vw, 0.46em);
  }
}

@keyframes preloaderTextGlint {
  0% {
    opacity: 0;
    transform: translateX(-150%) skewX(-14deg);
  }

  28% {
    opacity: 0.28;
  }

  62% {
    opacity: 0.1;
  }

  100% {
    opacity: 0;
    transform: translateX(760%) skewX(-14deg);
  }
}

@keyframes preloaderSlitPulse {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.42);
  }

  34% {
    opacity: 0.86;
    transform: translateX(-50%) scaleX(1);
  }

  100% {
    opacity: 0.58;
    transform: translateX(-50%) scaleX(0.92);
  }
}

@keyframes preloaderHalo {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.5);
  }

  46% {
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1);
  }

  100% {
    opacity: 0.06;
    transform: translateX(-50%) scaleX(1.08);
  }
}

@keyframes preloaderTrackSparks {
  0%,
  18% {
    opacity: 0;
  }

  44% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

@keyframes preloaderLine {
  0% {
    transform: translateX(-105%) scaleX(0.18);
  }

  74% {
    transform: translateX(0) scaleX(1);
  }

  100% {
    transform: translateX(0) scaleX(1);
  }
}

@keyframes preloaderSpark {
  0% {
    left: -6%;
    opacity: 0;
    filter: blur(15px);
    transform: translate(-52%, -50%) scaleX(0.76);
  }

  14% {
    left: 16%;
    opacity: 0.72;
  }

  58% {
    left: 86%;
    opacity: 0.9;
    filter: blur(9px);
    transform: translate(-52%, -50%) scaleX(1);
  }

  82% {
    left: 112%;
    opacity: 0.62;
    filter: blur(12px);
    transform: translate(-52%, -50%) scaleX(0.9);
  }

  100% {
    left: 136%;
    opacity: 0;
    filter: blur(22px);
    transform: translate(-52%, -50%) scaleX(0.62);
  }
}

@keyframes logoStageReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    filter:
      blur(12px)
      drop-shadow(0 30px 70px rgba(0, 0, 0, 0.72))
      drop-shadow(0 0 42px rgba(122, 158, 255, 0.06));
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter:
      blur(0)
      drop-shadow(0 30px 70px rgba(0, 0, 0, 0.72))
      drop-shadow(0 0 42px rgba(122, 158, 255, 0.06));
  }
}

@keyframes railReveal {
  0% {
    opacity: 0;
    transform: translate(-18px, -50%) scale(0.98);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
    filter: blur(0);
  }
}

@keyframes claimReveal {
  0% {
    opacity: 0;
    transform: translate(22px, -50%);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translate(0, -50%);
    filter: blur(0);
  }
}

@keyframes printDrift {
  0%,
  100% {
    transform: translate3d(-2.5vw, 1vh, 0) scale(1.16);
    opacity: 0.36;
  }

  50% {
    transform: translate3d(2.5vw, -1.2vh, 0) scale(1.22);
    opacity: 0.48;
  }
}

@keyframes grainBreath {
  0%,
  100% {
    background-position: 0 0, 0 0;
  }

  50% {
    background-position: 80% 20%, 3px 5px;
  }
}

@keyframes prismSweep {
  0%,
  100% {
    clip-path: polygon(-18% 0, 1% 0, 28% 100%, 9% 100%);
    opacity: 0.08;
  }

  42% {
    clip-path: polygon(38% 0, 54% 0, 81% 100%, 63% 100%);
    opacity: 0.22;
  }

  68% {
    clip-path: polygon(72% 0, 88% 0, 111% 100%, 93% 100%);
    opacity: 0.12;
  }
}

@keyframes toolOrbitSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes toolLabBreath {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.99);
  }

  50% {
    opacity: 0.62;
    transform: scale(1.025);
  }
}

@keyframes toolOrbitFloat {
  0%,
  100% {
    opacity: 0.46;
    filter: blur(0);
  }

  50% {
    opacity: 0.82;
    filter: blur(0.3px);
  }
}

@keyframes toolCoreFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(45deg) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(45deg) translateY(-8px);
  }
}

@keyframes toolSpecular {
  0%,
  100% {
    clip-path: polygon(-24% 0, -8% 0, 20% 100%, 4% 100%);
    opacity: 0.06;
  }

  48% {
    clip-path: polygon(46% 0, 62% 0, 91% 100%, 75% 100%);
    opacity: 0.28;
  }
}

@keyframes toolNodePulse {
  0%,
  100% {
    opacity: 0.44;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.14);
  }
}

@keyframes aiEngineOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes aiEngineFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(0, -10px, 0) rotate(0.7deg);
  }
}

@keyframes aiCorePulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes aiFilamentFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -42;
  }
}

@keyframes aiPrismSheen {
  0%,
  100% {
    opacity: 0.12;
    transform: translateX(-18px);
  }

  48% {
    opacity: 0.34;
    transform: translateX(24px);
  }
}

@keyframes aiNodeFloat {
  0%,
  100% {
    opacity: 0.64;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.92;
    transform: translate3d(0, -8px, 0);
  }
}

@media (max-width: 920px) {
  .site-shell {
    min-height: 540px;
  }

  .hero {
    padding: 76px 86px 110px;
  }

  .section-layout,
  .section-layout-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
    width: min(76vw, 650px);
    min-height: 0;
  }

  .tools-layout {
    grid-template-columns: 1fr;
    width: min(78vw, 680px);
  }

  .section-layout-reverse .section-copy {
    order: 0;
  }

  .section-copy h2 {
    max-width: 560px;
    font-size: clamp(32px, 6vw, 56px);
  }

  .section-copy p {
    max-width: 560px;
  }

  .glass-device {
    width: clamp(250px, 34vw, 350px);
  }

  .section-copy p {
    max-width: 560px;
  }

  .glass-visual {
    position: absolute;
    right: -7vw;
    bottom: -7vh;
    width: clamp(220px, 34vw, 340px);
    opacity: 0.58;
  }

  .tools-lab {
    right: -13vw;
    bottom: -9vh;
    width: clamp(310px, 46vw, 480px);
    opacity: 0.52;
  }

  .tool-tabs {
    max-width: 600px;
  }

  .tool-copy-stack {
    max-width: 600px;
  }

  .metric-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .logo-stage {
    width: min(92vw, 780px);
  }

  .side-rail {
    --rail-center: 33px;
    width: 66px;
    height: min(444px, calc(100svh - 74px));
    padding: 12px 0;
  }

  .side-rail:hover,
  .side-rail.is-open {
    width: 244px;
  }

  .side-rail::before {
    left: var(--rail-center);
    bottom: 70px;
  }

  .menu-link {
    width: 226px;
    min-height: 32px;
    padding-left: calc(var(--rail-center) + 32px);
    font-size: 10px;
  }

  .telegram-link {
    width: 226px;
    min-height: 36px;
    margin-top: 14px;
    padding-left: calc(var(--rail-center) - 16px);
    gap: 13px;
  }

  .telegram-link svg {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    padding: 7px;
  }

  .right-claim {
    right: 18px;
    font-size: 9px;
    letter-spacing: 0.28em;
  }

  .claim-word::before {
    width: 30px;
    right: calc(100% + 12px);
  }
}

@media (max-width: 520px) {
  .site-shell {
    min-height: 500px;
  }

  .hero {
    padding: 78px 16px 116px;
  }

  .page {
    padding: 76px 18px 34px;
  }

  .content-page {
    text-align: left;
  }

  .section-layout,
  .section-layout-reverse {
    width: min(92vw, 420px);
  }

  .tools-layout {
    width: min(92vw, 430px);
  }

  .section-kicker {
    grid-template-columns: 36px auto;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 9px;
    letter-spacing: 0.2em;
  }

  .section-copy h2 {
    max-width: 380px;
    margin-bottom: 16px;
    font-size: clamp(29px, 10.4vw, 42px);
  }

  .section-copy p {
    font-size: 14px;
    line-height: 1.5;
  }

  .metric-row {
    grid-template-columns: 1fr;
  }

  .tool-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
  }

  .tool-tab {
    min-height: 46px;
    padding: 0 13px;
  }

  .tool-tab strong {
    font-size: 9px;
  }

  .tool-copy-stack {
    min-height: 210px;
    margin-top: 14px;
  }

  .tool-panel p {
    font-size: 13px;
    line-height: 1.48;
  }

  .tool-points {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 12px;
  }

  .tool-points span {
    min-height: 36px;
    font-size: 8px;
  }

  .metric-row,
  .glass-list,
  .quote-stack,
  .contact-panel {
    gap: 8px;
    margin-top: 18px;
  }

  .metric-row div,
  .glass-list span,
  .quote-stack blockquote,
  .contact-panel a {
    min-height: 50px;
  }

  .glass-visual {
    right: -18vw;
    bottom: -8vh;
    width: 240px;
    opacity: 0.28;
  }

  .tools-lab {
    right: -28vw;
    bottom: -10vh;
    width: 270px;
    opacity: 0.2;
  }

  .logo-stage {
    width: min(98vw, 430px);
  }

  .side-rail {
    top: 14px;
    left: 12px;
    width: 54px;
    min-height: 54px;
    padding: 4px;
    transform: none;
  }

  .side-rail::before,
  .side-nav,
  .telegram-link,
  .right-claim {
    display: none;
  }

  .menu-toggle {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .brand-subtitle,
  .brand-subtitle-light {
    left: 7.5%;
    right: 7.5%;
    bottom: 7%;
    --subtitle-word-gap: clamp(16px, 4vw, 28px);
    font-size: clamp(9px, 3.2vw, 13px);
  }
}

/* Clean rebuilt Direct visual. This intentionally overrides the older lab scene. */
.tools-lab[data-tool-visual="direct"] {
  --tool-hue: 210deg;
  width: clamp(520px, 38vw, 720px);
  aspect-ratio: 1.52;
  transform: translateX(clamp(4px, 1vw, 18px));
  filter:
    drop-shadow(0 36px 88px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 54px rgba(106, 166, 255, 0.12));
}

.tools-lab[data-tool-visual="direct"]::before,
.tools-lab[data-tool-visual="direct"]::after,
.tools-lab[data-tool-visual="direct"] > svg,
.tools-lab[data-tool-visual="direct"] > span,
.tools-lab[data-tool-visual="direct"] > .tool-field,
.tools-lab[data-tool-visual="direct"] > .tool-orbit,
.tools-lab[data-tool-visual="direct"] > .tool-ray,
.tools-lab[data-tool-visual="direct"] > .tool-core,
.tools-lab[data-tool-visual="direct"] > .tool-scan-card,
.tools-lab[data-tool-visual="direct"] > .tool-glass-chip,
.tools-lab[data-tool-visual="direct"] > .tool-node,
.tools-lab[data-tool-visual="direct"] .scene-qualifier,
.tools-lab[data-tool-visual="direct"] .scene-content,
.tools-lab[data-tool-visual="direct"] .scene-crm {
  display: none !important;
}

.tools-lab[data-tool-visual="direct"] .scene-direct {
  position: absolute;
  z-index: 8;
  inset: -6% -3% -8% -4%;
  display: block !important;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.tools-lab[data-tool-visual="direct"] .scene-direct::before,
.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  content: none !important;
  display: none !important;
}

.tools-lab[data-tool-visual="direct"] .scene-direct > * {
  display: none !important;
}

.tools-lab[data-tool-visual="direct"] .scene-direct > .racer-cinema-field,
.tools-lab[data-tool-visual="direct"] .scene-direct > .racer-speed-haze,
.tools-lab[data-tool-visual="direct"] .scene-direct > .racer-build-svg {
  display: block !important;
}

.racer-cinema-field {
  position: absolute;
  z-index: 0;
  inset: 5% 7% 9% 5%;
  border-radius: 47% 53% 49% 51% / 45% 47% 54% 55%;
  background:
    radial-gradient(ellipse at 54% 46%, rgba(208, 230, 255, 0.13), transparent 29%),
    radial-gradient(ellipse at 54% 57%, rgba(77, 137, 220, 0.14), transparent 58%),
    linear-gradient(128deg, transparent 18%, rgba(255, 255, 255, 0.05) 43%, transparent 68%);
  border: 1px solid rgba(186, 219, 255, 0.12);
  box-shadow:
    inset 0 0 76px rgba(116, 174, 255, 0.055),
    0 0 58px rgba(76, 140, 255, 0.085);
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: racerFieldBreath 7.6s ease-in-out infinite;
}

.racer-speed-haze {
  position: absolute;
  z-index: 1;
  left: 4%;
  right: 11%;
  top: 57%;
  height: 22%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 46% 48%, rgba(255, 255, 255, 0.38), rgba(152, 206, 255, 0.22) 18%, rgba(77, 143, 255, 0.11) 36%, transparent 68%),
    linear-gradient(90deg, transparent, rgba(152, 206, 255, 0.18) 24%, rgba(255, 255, 255, 0.3) 54%, rgba(88, 154, 255, 0.12) 76%, transparent);
  filter: blur(18px);
  opacity: 0.82;
  mix-blend-mode: screen;
  transform: skewX(-12deg);
  animation: racerSpeedPulse 1.8s ease-in-out infinite;
}

.racer-build-svg {
  position: absolute;
  z-index: 4;
  left: 51%;
  top: 51%;
  width: 111%;
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 34px 72px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 30px rgba(128, 191, 255, 0.16));
}

.racer-speed-wash {
  fill: rgba(129, 190, 255, 0.09);
  filter: blur(0.2px);
}

.racer-speed-cut {
  fill: none;
  stroke: url(#racerBlueLine);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 130 70;
  opacity: 0.48;
  animation: racerSpeedDash 1.25s linear infinite;
}

.speed-b {
  opacity: 0.34;
  animation-duration: 1.55s;
}

.speed-c {
  opacity: 0.22;
  animation-duration: 1.9s;
}

.racer-floor,
.racer-front-wing,
.racer-nose,
.racer-main-shell,
.racer-sidepod,
.racer-cockpit,
.racer-rear-wing {
  fill: url(#racerMetal);
  stroke: url(#racerEdge);
  stroke-width: 2.8;
  stroke-linejoin: round;
}

.racer-front-wing {
  opacity: 0.92;
}

.racer-floor {
  opacity: 0.62;
}

.racer-driver {
  fill: #030407;
  stroke: rgba(230, 246, 255, 0.42);
  stroke-width: 2;
}

.racer-halo,
.racer-rear-wing-top,
.racer-suspension,
.racer-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.racer-halo {
  stroke: url(#racerEdge);
  stroke-width: 8;
  opacity: 0.72;
}

.racer-rear-wing-top {
  stroke: rgba(229, 243, 255, 0.56);
  stroke-width: 5;
}

.racer-suspension {
  stroke: rgba(214, 237, 255, 0.34);
  stroke-width: 3;
}

.racer-highlight {
  stroke: url(#racerBlueLine);
  stroke-width: 3;
  opacity: 0.58;
  filter: drop-shadow(0 0 8px rgba(146, 207, 255, 0.32));
}

.racer-body-label {
  fill: rgba(245, 250, 255, 0.78);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.78);
  stroke-width: 3px;
  text-shadow: 0 0 12px rgba(128, 190, 255, 0.26);
}

.racer-wheel {
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 16px rgba(105, 181, 255, 0.18));
}

.racer-wheel-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: racerWheelSpin 520ms linear infinite;
}

.wheel-left .racer-wheel-spin {
  animation-duration: 460ms;
}

.wheel-rear .racer-wheel-spin {
  animation-duration: 610ms;
  opacity: 0.72;
}

@keyframes racerFieldBreath {
  0%, 100% {
    opacity: 0.62;
    transform: translate3d(-0.8%, 0.4%, 0) scale(0.992);
  }

  50% {
    opacity: 0.82;
    transform: translate3d(0.8%, -0.5%, 0) scale(1.012);
  }
}

@keyframes racerSpeedPulse {
  0%, 100% {
    opacity: 0.62;
    transform: skewX(-12deg) translateX(0) scaleX(0.96);
  }

  50% {
    opacity: 0.9;
    transform: skewX(-12deg) translateX(-2%) scaleX(1.04);
  }
}

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

/* Fresh Direct scene: one clean bolid object, no inherited geometric overlays. */
.tools-lab[data-tool-visual="direct"] {
  --tool-hue: 208deg;
  width: clamp(540px, 39vw, 710px);
  aspect-ratio: 1.52;
  border-radius: 999px;
  transform: translateX(clamp(64px, 6vw, 108px));
  filter:
    drop-shadow(0 36px 88px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 54px rgba(110, 176, 255, 0.12));
}

.tools-lab[data-tool-visual="direct"]::before,
.tools-lab[data-tool-visual="direct"]::after {
  display: none !important;
  content: none !important;
}

.tools-lab[data-tool-visual="direct"] .scene-direct {
  inset: -7% -5% -10% -3%;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.tools-lab[data-tool-visual="direct"] .scene-direct::before,
.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  display: none !important;
  content: none !important;
}

.tools-lab[data-tool-visual="direct"] .scene-direct > * {
  display: none !important;
}

.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-cinema-field,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-substrate-halo,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-substrate-grid,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-orbit,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-node,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-track-glow,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-road-trails,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-speed-air,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-speed-line,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-bolid-object,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-bolid-flag,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-wheel,
.tools-lab[data-tool-visual="direct"] .scene-direct > .direct-bolid-brand {
  display: block !important;
}

.tools-lab[data-tool-visual="direct"] .scene-direct > .racer-cinema-field,
.tools-lab[data-tool-visual="direct"] .scene-direct > .racer-speed-haze,
.tools-lab[data-tool-visual="direct"] .scene-direct > .racer-build-svg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.direct-cinema-field {
  z-index: 0;
  inset: 3% -1% 4% 5%;
  border-radius: 48% 52% 50% 50% / 43% 50% 55% 54%;
  background:
    conic-gradient(from 218deg at 55% 51%, transparent 0 13%, rgba(255, 255, 255, 0.12) 14%, transparent 17% 35%, rgba(138, 177, 255, 0.1) 37%, transparent 40% 64%, rgba(255, 255, 255, 0.08) 66%, transparent 69%),
    radial-gradient(ellipse at 56% 50%, transparent 0 37%, rgba(255, 255, 255, 0.08) 37.4%, transparent 38.3% 51%, rgba(151, 190, 255, 0.07) 51.4%, transparent 52.4%),
    radial-gradient(ellipse at 56% 56%, rgba(61, 116, 188, 0.21), transparent 65%),
    linear-gradient(132deg, transparent 16%, rgba(255, 255, 255, 0.055) 42%, transparent 67%);
  border: 1px solid rgba(187, 220, 255, 0.15);
  box-shadow:
    inset 0 0 88px rgba(125, 181, 255, 0.055),
    0 0 64px rgba(74, 137, 226, 0.075);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: orbitDetailRotate 26s linear infinite;
}

.direct-cinema-field::before,
.direct-cinema-field::after {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border: 1px solid rgba(207, 230, 255, 0.09);
  border-radius: 999px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.direct-cinema-field::before {
  transform: rotate(-17deg);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.025),
    0 0 28px rgba(112, 178, 255, 0.05);
  animation: orbitDetailRotate 28s linear infinite;
}

.direct-cinema-field::after {
  inset: 17% 15%;
  transform: rotate(28deg);
  border-color: rgba(255, 255, 255, 0.07);
  animation: orbitDetailRotate 34s linear infinite reverse;
}

.direct-substrate-halo {
  z-index: 0;
  inset: -3% -7% -2% 1%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 56% 50%, rgba(255, 255, 255, 0.06), transparent 18%),
    radial-gradient(circle at 57% 57%, rgba(116, 170, 255, 0.08), transparent 42%),
    radial-gradient(circle at 43% 42%, rgba(230, 107, 255, 0.028), transparent 32%),
    radial-gradient(ellipse at 54% 50%, rgba(167, 198, 255, 0.06), transparent 58%);
  filter: blur(24px);
  opacity: 0.88;
  mix-blend-mode: screen;
  animation: glassPulse 6.6s ease-in-out infinite;
}

.direct-substrate-grid {
  z-index: 1;
  left: 55%;
  top: 51%;
  width: 78%;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.34;
  mix-blend-mode: screen;
}

.direct-grid-one {
  transform: translate(-50%, -50%) rotate(-27deg);
}

.direct-grid-two {
  transform: translate(-50%, -50%) rotate(23deg);
  opacity: 0.42;
}

.direct-orbit {
  z-index: 1;
  left: 55%;
  top: 50%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-18deg);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.035),
    0 0 28px rgba(129, 177, 255, 0.055);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.direct-orbit-one {
  width: 83%;
  height: 59%;
  animation: orbitFloat 8s ease-in-out infinite;
}

.direct-orbit-two {
  width: 62%;
  height: 84%;
  transform: translate(-50%, -50%) rotate(25deg);
  opacity: 0.5;
  animation: orbitFloat 8s 1.6s ease-in-out infinite reverse;
}

.direct-node {
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.32),
    0 0 22px rgba(124, 180, 255, 0.18);
  opacity: 0.78;
  mix-blend-mode: screen;
}

.direct-node-a { left: 20%; top: 36%; }
.direct-node-b { right: 11%; top: 42%; }
.direct-node-c { left: 42%; bottom: 20%; }

.direct-track-glow {
  z-index: 7;
  left: -1%;
  right: -7%;
  top: 57%;
  height: 24%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.72), rgba(255, 230, 156, 0.58) 14%, rgba(255, 154, 42, 0.44) 31%, rgba(255, 83, 20, 0.2) 55%, transparent 82%),
    linear-gradient(90deg, transparent, rgba(255, 112, 28, 0.22) 14%, rgba(255, 211, 118, 0.58) 46%, rgba(255, 144, 42, 0.34) 72%, transparent);
  filter: blur(12px);
  opacity: 0.9;
  mix-blend-mode: screen;
  transform: skewX(-13deg);
  animation: directTrackPulse 1.85s ease-in-out infinite;
}

.direct-track-glow::before,
.direct-track-glow::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.direct-track-glow::before {
  inset: 38% 8% 34% 4%;
  background: linear-gradient(90deg, transparent, rgba(255, 135, 36, 0.34) 16%, rgba(255, 236, 168, 0.84) 48%, rgba(255, 134, 36, 0.38) 74%, transparent);
  filter: blur(2px);
  opacity: 0.95;
}

.direct-track-glow::after {
  inset: 16% 14% 6% 20%;
  background: radial-gradient(ellipse at 50% 52%, rgba(255, 247, 202, 0.5), rgba(255, 154, 44, 0.34) 31%, rgba(255, 84, 22, 0.18) 58%, transparent 78%);
  filter: blur(8px);
  opacity: 0.82;
}

.direct-speed-air {
  z-index: 11;
  left: -4%;
  width: 106%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 124, 32, 0.2), rgba(255, 242, 184, 0.62), rgba(255, 152, 52, 0.22), transparent);
  box-shadow:
    0 0 18px rgba(255, 199, 104, 0.24),
    0 0 34px rgba(255, 103, 32, 0.12);
  opacity: 0.82;
  mix-blend-mode: screen;
  transform: skewX(-16deg);
  animation: directAirRun 1.35s linear infinite;
}

.direct-speed-air.air-one {
  top: 60%;
}

.direct-speed-air.air-two {
  top: 67%;
  left: 7%;
  width: 88%;
  opacity: 0.68;
  animation-duration: 1.72s;
}

.direct-speed-line {
  z-index: 11;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 98, 24, 0.36) 13%,
      rgba(255, 172, 58, 0.92) 34%,
      rgba(255, 247, 202, 1) 52%,
      rgba(255, 149, 42, 0.68) 72%,
      transparent);
  box-shadow:
    0 0 14px rgba(255, 218, 140, 0.48),
    0 0 34px rgba(255, 120, 32, 0.28),
    0 0 58px rgba(255, 84, 22, 0.12);
  filter: blur(0.1px);
  opacity: 0.82;
  mix-blend-mode: normal;
  transform: skewX(-14deg);
  animation: directSpeedLineSlide 1.15s linear infinite;
}

.speed-line-one {
  left: -7%;
  top: 64%;
  width: 108%;
}

.speed-line-two {
  left: 0%;
  top: 71%;
  width: 98%;
  height: 6px;
  opacity: 0.82;
  animation-duration: 1.42s;
}

.speed-line-three {
  left: -12%;
  top: 78%;
  width: 76%;
  height: 4px;
  opacity: 0.68;
  animation-duration: 1.8s;
}

.direct-bolid-object {
  position: absolute;
  z-index: 8;
  left: 58%;
  top: 51%;
  width: 96%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  filter:
    contrast(1.16)
    saturate(0.95)
    brightness(1.08)
    drop-shadow(0 28px 58px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 34px rgba(135, 193, 255, 0.2));
  animation: directBolidPresence 7s ease-in-out infinite;
}

.direct-bolid-flag {
  position: absolute;
  z-index: 12;
  left: 72.2%;
  top: 33.8%;
  width: 28%;
  min-width: 164px;
  height: auto;
  overflow: visible;
  transform: rotate(-8deg) skewX(-5deg) perspective(360px) rotateY(-8deg);
  transform-origin: 8% 78%;
  filter:
    drop-shadow(0 16px 24px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 24px rgba(132, 193, 255, 0.24));
  opacity: 0.96;
}

.direct-bolid-flag .flag-mount {
  fill: none;
  stroke: rgba(229, 243, 255, 0.62);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(136, 196, 255, 0.32));
}

.direct-bolid-flag .flag-pole {
  fill: none;
  stroke: rgba(231, 244, 255, 0.76);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(136, 196, 255, 0.32));
}

.direct-bolid-flag .flag-panel {
  fill: rgba(7, 10, 16, 0.88);
  stroke: rgba(229, 243, 255, 0.42);
  stroke-width: 1.7;
}

.direct-bolid-flag .flag-edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.19);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.direct-bolid-flag .flag-glint {
  fill: none;
  stroke: rgba(255, 255, 255, 0.38);
  stroke-width: 1;
  stroke-linecap: round;
}

.direct-bolid-flag text {
  fill: rgba(247, 252, 255, 0.94);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(143, 197, 255, 0.38),
    0 1px 2px rgba(0, 0, 0, 0.9);
}

.tools-lab[data-tool-visual="direct"] .scene-direct::before,
.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  position: absolute;
  pointer-events: none;
  display: block !important;
}

.tools-lab[data-tool-visual="direct"] .scene-direct::before {
  content: "" !important;
  z-index: 7;
  left: -8%;
  right: -6%;
  top: 60%;
  height: 28%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 98, 24, 0.34) 20%, rgba(255, 185, 70, 0.84) 39%, rgba(255, 249, 210, 0.95) 50%, rgba(255, 145, 38, 0.48) 66%, transparent 86%) 0 18% / 112% 8px no-repeat,
    linear-gradient(90deg, transparent 0 13%, rgba(255, 118, 31, 0.26) 26%, rgba(255, 221, 142, 0.72) 49%, rgba(255, 149, 42, 0.42) 69%, transparent 92%) 7% 52% / 92% 6px no-repeat,
    linear-gradient(90deg, transparent 0 9%, rgba(255, 116, 28, 0.22) 22%, rgba(255, 209, 118, 0.56) 46%, rgba(255, 128, 34, 0.34) 68%, transparent 88%) -4% 78% / 72% 4px no-repeat,
    radial-gradient(ellipse at 48% 48%, rgba(255, 198, 84, 0.24), rgba(255, 92, 24, 0.08) 42%, transparent 72%);
  box-shadow:
    0 0 18px rgba(255, 201, 108, 0.18),
    0 0 42px rgba(255, 112, 28, 0.1);
  opacity: 0.82;
  filter: blur(0.15px);
  transform: skewX(-14deg);
  mix-blend-mode: screen;
  animation: directSpeedLineSlide 1.16s linear infinite;
}

.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  content: "" !important;
  z-index: 0;
  inset: 1% -8% 2% -1%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 56% 51%, transparent 0 37%, rgba(255, 255, 255, 0.1) 37.3%, transparent 38.1% 51%, rgba(142, 185, 255, 0.075) 51.4%, transparent 52.3%),
    conic-gradient(from 218deg at 56% 50%, transparent 0 13%, rgba(255, 255, 255, 0.12) 14%, transparent 17% 35%, rgba(138, 177, 255, 0.09) 37%, transparent 40% 64%, rgba(255, 255, 255, 0.07) 66%, transparent 69%),
    radial-gradient(ellipse at 56% 50%, rgba(168, 198, 255, 0.075), transparent 56%);
  border: 1px solid rgba(190, 220, 255, 0.13);
  opacity: 0.72;
  filter: blur(0.25px);
  mix-blend-mode: screen;
  animation: orbitDetailRotate 22s linear infinite;
}

.direct-wheel {
  z-index: 8;
  width: 9.4%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.8) 0 3deg, transparent 3deg 13deg, rgba(112, 190, 255, 0.58) 13deg 17deg, transparent 17deg 32deg),
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.66), transparent 15%, rgba(137, 205, 255, 0.42) 25%, transparent 42%, rgba(255, 255, 255, 0.58) 54%, transparent 68%, rgba(137, 205, 255, 0.4) 78%, transparent 90%, rgba(255, 255, 255, 0.66));
  border: 1px solid rgba(220, 242, 255, 0.34);
  box-shadow:
    0 0 10px rgba(199, 229, 255, 0.16),
    0 0 22px rgba(84, 161, 255, 0.1);
  opacity: 0.44;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 48%, #000 50% 67%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 0 48%, #000 50% 67%, transparent 70%);
  animation: directWheelSpin 500ms linear infinite;
}

.direct-wheel-front {
  left: 25.6%;
  top: 58.2%;
  width: 8.6%;
}

.direct-wheel-mid {
  left: 63.2%;
  top: 61%;
  width: 10.8%;
  animation-duration: 430ms;
}

.direct-wheel-rear {
  left: 96.4%;
  top: 57.8%;
  width: 6.9%;
  opacity: 0.32;
  animation-duration: 590ms;
}

.direct-bolid-brand {
  z-index: 12;
  left: 78.5%;
  top: 43.5%;
  display: grid !important;
  place-items: center;
  min-width: 136px;
  height: 26px;
  padding: 0 14px 0 18px;
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
  color: rgba(248, 252, 255, 0.96);
  border: 1px solid rgba(225, 240, 255, 0.32);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.035) 44%, rgba(118, 172, 255, 0.14)),
    rgba(7, 10, 15, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 14px 28px rgba(0, 0, 0, 0.44),
    0 0 30px rgba(130, 190, 255, 0.22);
  backdrop-filter: blur(12px) saturate(142%);
  -webkit-backdrop-filter: blur(12px) saturate(142%);
  font-size: clamp(7.2px, 0.58vw, 8.8px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(133, 191, 255, 0.36),
    0 1px 2px rgba(0, 0, 0, 0.88);
  transform: rotate(-9deg) skewX(-5deg);
  opacity: 0.98;
}

.direct-bolid-brand::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -9px;
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, rgba(234, 246, 255, 0.54), transparent);
  box-shadow: 0 0 10px rgba(167, 211, 255, 0.22);
  transform: rotate(10deg);
}

.direct-bolid-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 0 34%, rgba(255, 255, 255, 0.22) 44%, transparent 56%);
  opacity: 0.34;
  mix-blend-mode: screen;
}

@keyframes directFieldBreath {
  0%, 100% {
    opacity: 0.74;
    transform: translate3d(-0.4%, 0.3%, 0) scale(0.992);
  }

  50% {
    opacity: 0.9;
    transform: translate3d(0.5%, -0.35%, 0) scale(1.01);
  }
}

@keyframes directTrackPulse {
  0%, 100% {
    opacity: 0.56;
    transform: skewX(-14deg) translateX(0) scaleX(0.96);
  }

  50% {
    opacity: 0.86;
    transform: skewX(-14deg) translateX(-1.3%) scaleX(1.035);
  }
}

@keyframes directRoadGlow {
  0%, 100% {
    opacity: 0.42;
    transform: perspective(780px) rotateX(62deg) rotateZ(-1.8deg) skewX(-7deg) translateX(0);
  }

  50% {
    opacity: 0.7;
    transform: perspective(780px) rotateX(62deg) rotateZ(-1.8deg) skewX(-7deg) translateX(-1.25%);
  }
}

@keyframes directTrailPresence {
  0%, 100% {
    opacity: 0.86;
    transform: perspective(900px) rotateX(62deg) rotateZ(-1.8deg) skewX(-7deg) translateX(0);
  }

  50% {
    opacity: 1;
    transform: perspective(900px) rotateX(62deg) rotateZ(-1.8deg) skewX(-7deg) translateX(-1%);
  }
}

@keyframes directAirRun {
  from {
    opacity: 0;
    transform: translateX(8%) skewX(-16deg) scaleX(0.82);
  }

  18%,
  76% {
    opacity: 0.34;
  }

  to {
    opacity: 0;
    transform: translateX(-16%) skewX(-16deg) scaleX(1.08);
  }
}

@keyframes directSpeedLineSlide {
  from {
    transform: translateX(10%) skewX(-14deg) scaleX(0.88);
  }

  to {
    transform: translateX(-18%) skewX(-14deg) scaleX(1.08);
  }
}

@keyframes directBolidPresence {
  0%, 100% {
    transform: translate(-50%, -50%);
    filter:
      contrast(1.12)
      saturate(0.92)
      brightness(1.02)
      drop-shadow(0 28px 58px rgba(0, 0, 0, 0.72))
      drop-shadow(0 0 30px rgba(135, 193, 255, 0.16));
  }

  50% {
    transform: translate(-50%, -50.7%);
    filter:
      contrast(1.14)
      saturate(0.94)
      brightness(1.06)
      drop-shadow(0 30px 60px rgba(0, 0, 0, 0.74))
      drop-shadow(0 0 38px rgba(151, 207, 255, 0.2));
  }
}

@keyframes directWheelSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.visual-tools.tools-lab[data-tool-visual="direct"] {
  justify-self: end;
  width: clamp(470px, 34vw, 650px);
  margin-left: auto;
  transform: translateX(clamp(-44px, -2.4vw, -18px));
  isolation: isolate;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene {
  inset: -7% -2% -9% 3%;
  overflow: visible;
}

.visual-tools.tools-lab[data-tool-visual="direct"]::before,
.visual-tools.tools-lab[data-tool-visual="direct"]::after {
  content: none !important;
  display: none !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene > span[class^="direct-"],
.visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene > span[class*=" direct-"] {
  display: block !important;
  visibility: visible !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 5;
  left: 30%;
  right: 30%;
  top: 60%;
  height: 33%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 233, 160, 0.22), rgba(255, 123, 24, 0.16) 26%, transparent 60%),
    linear-gradient(180deg, rgba(255, 222, 118, 0.16), rgba(255, 73, 18, 0.1) 44%, transparent 90%);
  filter: blur(18px);
  opacity: 0.66;
  mix-blend-mode: screen;
  transform: none;
  transform-origin: 50% 20%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 1;
  left: -1%;
  top: 6%;
  width: 99%;
  height: 78%;
  border-radius: 999px;
  background:
    conic-gradient(from 218deg at 56% 50%, transparent 0 13%, rgba(255, 255, 255, 0.1) 14%, transparent 16% 35%, rgba(138, 177, 255, 0.08) 37%, transparent 39% 64%, rgba(255, 255, 255, 0.065) 66%, transparent 69%),
    radial-gradient(ellipse at 56% 50%, transparent 0 37%, rgba(255, 255, 255, 0.07) 37.4%, transparent 38.2% 51%, rgba(151, 190, 255, 0.055) 51.4%, transparent 52.2%);
  filter: blur(0.2px);
  opacity: 0.42;
  mix-blend-mode: screen;
  transform: rotate(-3deg);
  animation: orbitDetailRotate 20s linear infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field {
  display: block !important;
  visibility: visible !important;
  z-index: 2;
  inset: auto;
  left: -1%;
  top: 3%;
  width: 101%;
  height: 84%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 56% 48%, rgba(168, 198, 255, 0.082), transparent 43%),
    radial-gradient(ellipse at 56% 72%, rgba(255, 189, 104, 0.038), transparent 30%),
    linear-gradient(116deg, transparent 31%, rgba(255, 255, 255, 0.032) 47%, rgba(150, 186, 255, 0.02) 57%, transparent 71%);
  border: 1px solid rgba(214, 235, 255, 0.16);
  box-shadow:
    inset 0 0 62px rgba(126, 183, 255, 0.052),
    inset 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 80px rgba(68, 132, 218, 0.075);
  opacity: 0.64;
  filter: blur(0.3px);
  mix-blend-mode: screen;
  transform: rotate(-3deg);
  animation: rocketSceneLight 8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field::before,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  mix-blend-mode: screen;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field::before {
  inset: 12% 7% 12% 7%;
  border: 1px solid rgba(213, 235, 255, 0.14);
  transform: rotate(-7deg);
  opacity: 0.62;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field::after {
  inset: 21% 15% 20% 15%;
  border: 1px solid rgba(213, 235, 255, 0.07);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(12deg);
  opacity: 0.44;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node {
  position: absolute;
  display: block !important;
  visibility: visible !important;
  pointer-events: none;
  mix-blend-mode: screen;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-halo {
  z-index: 0;
  left: 2%;
  top: 7%;
  width: 96%;
  height: 78%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 56% 48%, rgba(255, 255, 255, 0.052), transparent 18%),
    radial-gradient(circle at 56% 58%, rgba(116, 170, 255, 0.064), transparent 40%),
    radial-gradient(circle at 45% 42%, rgba(230, 107, 255, 0.026), transparent 32%);
  filter: blur(25px);
  opacity: 0.24;
  animation: glassPulse 6.8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-grid {
  z-index: 3;
  left: 52%;
  top: 48%;
  width: 76%;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0.28;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-grid-one {
  transform: translate(-50%, -50%) rotate(-28deg);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-grid-two {
  transform: translate(-50%, -50%) rotate(24deg);
  opacity: 0.31;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-orbit {
  z-index: 3;
  left: 52%;
  top: 48%;
  border: 1px solid rgba(255, 255, 255, 0.145);
  border-radius: 999px;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.034),
    0 0 24px rgba(138, 178, 255, 0.085);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-orbit-one {
  width: 72%;
  height: 42%;
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: orbitFloat 8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-orbit-two {
  width: 50%;
  height: 70%;
  transform: translate(-50%, -50%) rotate(32deg);
  opacity: 0.74;
  animation: orbitFloat 8s 1.6s ease-in-out infinite reverse;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node {
  z-index: 4;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 0 9px rgba(255, 255, 255, 0.38),
    0 0 24px rgba(142, 190, 255, 0.24);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node-a {
  left: 18%;
  top: 40%;
  animation: nodeSpark 4.6s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node-b {
  right: 9%;
  top: 46%;
  animation: nodeSpark 5.2s 0.8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node-c {
  left: 43%;
  bottom: 18%;
  animation: nodeSpark 4.8s 1.4s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-substrate-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-substrate-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-air,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-line,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-wheel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-track-glow {
  z-index: 6;
  left: 28%;
  right: 28%;
  top: 60%;
  height: 35%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 241, 175, 0.36), rgba(255, 150, 34, 0.22) 25%, transparent 62%),
    linear-gradient(180deg, rgba(255, 224, 118, 0.2), rgba(255, 84, 20, 0.12) 48%, transparent 92%);
  filter: blur(16px);
  opacity: 0.84;
  transform: none;
  transform-origin: 50% 10%;
  animation: directRoadGlow 2.2s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-track-glow::before {
  inset: 3% 38% 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 245, 190, 0.62), rgba(255, 121, 24, 0.32) 56%, transparent 100%);
  filter: blur(3px);
  opacity: 0.72;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-track-glow::after {
  inset: 12% 24% 7%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 12%, rgba(255, 188, 54, 0.34), rgba(255, 65, 18, 0.18) 42%, transparent 76%);
  filter: blur(10px);
  opacity: 0.78;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-road-trails {
  position: absolute;
  z-index: 8;
  left: 22%;
  top: 54%;
  width: 56%;
  height: 47%;
  display: block !important;
  visibility: visible !important;
  overflow: visible;
  opacity: 0.98;
  mix-blend-mode: screen;
  transform: none;
  transform-origin: 50% 10%;
  filter:
    drop-shadow(0 0 8px rgba(255, 49, 20, 0.42))
    drop-shadow(0 0 24px rgba(255, 137, 36, 0.2));
  animation: directTrailPresence 2.6s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .road-trail {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .trail-red-main {
  stroke: url(#roadTrailRed);
  stroke-width: 5.2;
  opacity: 0.88;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .trail-red-soft {
  stroke: url(#roadTrailRed);
  stroke-width: 2.2;
  opacity: 0.36;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .trail-amber {
  stroke: url(#roadTrailAmber);
  stroke-width: 4.4;
  opacity: 0.84;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .trail-gold {
  stroke: url(#roadTrailGold);
  stroke-width: 3.2;
  opacity: 0.76;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
  z-index: 10;
  left: 50%;
  top: 42%;
  width: 98%;
  filter:
    contrast(1.08)
    saturate(1)
    brightness(1.03)
    drop-shadow(0 34px 74px rgba(0, 0, 0, 0.84))
    drop-shadow(0 0 54px rgba(139, 196, 255, 0.24));
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-vector {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-flag {
  z-index: 18;
  left: 50%;
  top: 50.2%;
  width: 7.4%;
  min-width: 0;
  transform: translate(-50%, -50%) perspective(300px) rotateX(14deg) scaleY(0.88);
  opacity: 0.92;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 12px rgba(147, 204, 255, 0.18));
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-flag .flag-panel {
  fill: rgba(6, 9, 15, 0.66);
  stroke: rgba(236, 247, 255, 0.68);
  stroke-width: 4;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-flag .flag-edge,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-flag .flag-glint {
  fill: none;
  stroke: rgba(244, 250, 255, 0.36);
  stroke-width: 2.2;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-flag text {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  fill: rgba(248, 252, 255, 0.94);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 2px;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-wheel {
  z-index: 12;
  display: block !important;
  visibility: visible !important;
}

/* Direct scene substrate: reuse the same visual language as the rocket page. */
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-track-glow,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-road-trails {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 1;
  inset: 16% 9% 12% 15%;
  border-radius: 999px;
  background:
    conic-gradient(from 218deg at 56% 50%, transparent 0 13%, rgba(255, 255, 255, 0.1) 14%, transparent 16% 35%, rgba(138, 177, 255, 0.08) 37%, transparent 39% 64%, rgba(255, 255, 255, 0.07) 66%, transparent 69%),
    radial-gradient(ellipse at 56% 50%, transparent 0 37%, rgba(255, 255, 255, 0.07) 37.4%, transparent 38.2% 51%, rgba(151, 190, 255, 0.06) 51.4%, transparent 52.2%);
  opacity: 0.34;
  filter: blur(0.2px);
  mix-blend-mode: screen;
  transform: none;
  animation: orbitDetailRotate 18s linear infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 0;
  inset: -4% -5%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 56% 48%, rgba(168, 198, 255, 0.07), transparent 42%),
    radial-gradient(ellipse at 56% 72%, rgba(255, 189, 104, 0.045), transparent 30%),
    linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.025) 47%, rgba(150, 186, 255, 0.018) 56%, transparent 70%);
  opacity: 0.14;
  filter: blur(5px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 45%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 45%, transparent 78%);
  transform: none;
  animation: rocketSceneLight 7.4s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node {
  position: absolute;
  display: block !important;
  visibility: visible !important;
  pointer-events: none;
  mix-blend-mode: screen;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo {
  z-index: 0;
  inset: 11% 7% 9% 14%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 56% 48%, rgba(255, 255, 255, 0.055), transparent 18%),
    radial-gradient(circle at 56% 58%, rgba(116, 170, 255, 0.065), transparent 40%),
    radial-gradient(circle at 45% 42%, rgba(230, 107, 255, 0.032), transparent 32%);
  filter: blur(26px);
  opacity: 0.3;
  animation: glassPulse 6.6s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid {
  z-index: 3;
  left: 56%;
  top: 50%;
  width: 72%;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.3;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid-one {
  transform: translate(-50%, -50%) rotate(-28deg);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid-two {
  transform: translate(-50%, -50%) rotate(24deg);
  opacity: 0.34;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit {
  z-index: 3;
  left: 56%;
  top: 49%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.04),
    0 0 22px rgba(138, 178, 255, 0.08);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-one {
  width: 60%;
  height: 35%;
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: orbitFloat 8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-two {
  width: 42%;
  height: 64%;
  transform: translate(-50%, -50%) rotate(32deg);
  opacity: 0.72;
  animation: orbitFloat 8s 1.6s ease-in-out infinite reverse;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node {
  z-index: 4;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 9px rgba(255, 255, 255, 0.36),
    0 0 24px rgba(142, 190, 255, 0.24);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-a {
  left: 29%;
  top: 34%;
  animation: nodeSpark 4.6s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-b {
  right: 14%;
  top: 42%;
  animation: nodeSpark 5.2s 0.8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-c {
  left: 43%;
  bottom: 21%;
  animation: nodeSpark 4.8s 1.4s ease-in-out infinite;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .section-layout.tools-layout {
    grid-template-columns: minmax(400px, 0.92fr) minmax(310px, 0.62fr);
    gap: clamp(28px, 3.2vw, 48px);
    width: min(90vw, 1060px);
  }

  .tools-layout .section-copy {
    max-width: 470px;
  }

  .tools-layout .section-copy h2 {
    max-width: 470px;
    font-size: clamp(30px, 4.2vw, 44px);
  }

  .tool-lead,
  .tool-copy-stack,
  .tool-panel p {
    max-width: 430px;
  }

  .tool-tabs {
    width: min(100%, 430px);
    max-width: 430px;
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] {
    width: clamp(360px, 38vw, 470px);
    transform: translateX(clamp(-92px, -8vw, -58px));
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
    left: 50%;
    width: 88%;
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field {
    left: 0%;
    width: 100%;
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .direct-track-glow {
    left: 31%;
    right: 31%;
    top: 62%;
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .direct-road-trails {
    left: 25%;
    top: 55%;
    width: 50%;
  }
}

/* Final Direct cleanup: one simple rocket-style substrate, no competing plates. */
.visual-tools.tools-lab[data-tool-visual="direct"] {
  transform: translateX(clamp(-72px, -4vw, -34px));
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before,
.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  content: none !important;
  display: none !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-track-glow,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-road-trails,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-substrate-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-substrate-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-air,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-line,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-wheel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node {
  display: block !important;
  visibility: visible !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo {
  z-index: 0;
  inset: 12% 7% 11% 9%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 54% 47%, rgba(255, 255, 255, 0.052), transparent 18%),
    radial-gradient(circle at 54% 57%, rgba(116, 170, 255, 0.07), transparent 40%),
    radial-gradient(circle at 45% 43%, rgba(230, 107, 255, 0.028), transparent 32%);
  filter: blur(26px);
  opacity: 0.28;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid {
  z-index: 2;
  left: 54%;
  top: 49%;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  opacity: 0.24;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid-one {
  transform: translate(-50%, -50%) rotate(-28deg);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid-two {
  transform: translate(-50%, -50%) rotate(24deg);
  opacity: 0.32;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit {
  z-index: 2;
  left: 54%;
  top: 49%;
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.04),
    0 0 22px rgba(138, 178, 255, 0.08);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-one {
  width: 60%;
  height: 35%;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-two {
  width: 42%;
  height: 64%;
  transform: translate(-50%, -50%) rotate(32deg);
  opacity: 0.72;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node {
  z-index: 3;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-a {
  left: 27%;
  top: 35%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-b {
  right: 15%;
  top: 42%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-c {
  left: 43%;
  bottom: 22%;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .visual-tools.tools-lab[data-tool-visual="direct"] {
    transform: translateX(clamp(-128px, -11vw, -88px));
  }
}

/* Ultra-clean Direct substrate: wide bolid-adapted version of the rocket backing. */
.visual-tools.tools-lab[data-tool-visual="direct"] {
  transform: translateX(clamp(-92px, -5.2vw, -54px));
}

.visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene {
  inset: -18% -20% -18% -18%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before,
.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  content: none !important;
  display: none !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo {
  z-index: 0;
  left: 7%;
  top: 12%;
  width: 86%;
  height: 72%;
  inset: auto;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.055), transparent 19%),
    radial-gradient(ellipse at 52% 54%, rgba(116, 170, 255, 0.07), transparent 42%),
    radial-gradient(ellipse at 43% 45%, rgba(230, 107, 255, 0.03), transparent 35%);
  filter: blur(28px);
  opacity: 0.28;
  mix-blend-mode: screen;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid {
  z-index: 1;
  left: 50%;
  top: 49%;
  width: 82%;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  opacity: 0.26;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid-one {
  transform: translate(-50%, -50%) rotate(-26deg);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid-two {
  transform: translate(-50%, -50%) rotate(22deg);
  opacity: 0.3;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit {
  z-index: 1;
  left: 50%;
  top: 49%;
  border: 1px solid rgba(255, 255, 255, 0.145);
  border-radius: 999px;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.035),
    0 0 22px rgba(138, 178, 255, 0.075);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-one {
  width: 94%;
  height: 54%;
  transform: translate(-50%, -50%) rotate(-14deg);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-two {
  width: 62%;
  height: 80%;
  transform: translate(-50%, -50%) rotate(26deg);
  opacity: 0.68;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node {
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 9px rgba(255, 255, 255, 0.36),
    0 0 24px rgba(142, 190, 255, 0.24);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-a {
  left: 17%;
  top: 39%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-b {
  right: 11%;
  top: 45%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-c {
  left: 43%;
  bottom: 17%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
  left: 50%;
  top: 48%;
  width: 88%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-flag {
  top: 54%;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .visual-tools.tools-lab[data-tool-visual="direct"] {
    transform: translateX(clamp(-158px, -13vw, -112px));
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene {
    inset: -20% -18% -18% -18%;
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
    width: 82%;
  }
}

/* Direct final composition: one rocket-style backing adapted for the wider bolid. */
.visual-tools.tools-lab[data-tool-visual="direct"] {
  justify-self: end;
  width: clamp(500px, 34vw, 640px);
  aspect-ratio: 1.18;
  margin-right: 0;
  transform: translateX(clamp(-112px, -6.4vw, -70px));
  isolation: isolate;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene {
  inset: -12% -10% -11% -10%;
  overflow: visible;
  isolation: isolate;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-track-glow,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-road-trails,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-substrate-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-substrate-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-air,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-line,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-wheel,
.visual-tools.tools-lab[data-tool-visual="direct"] .racer-cinema-field,
.visual-tools.tools-lab[data-tool-visual="direct"] .racer-speed-haze,
.visual-tools.tools-lab[data-tool-visual="direct"] .racer-build-svg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before,
.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  mix-blend-mode: screen;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  box-sizing: border-box;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before {
  z-index: 1;
  left: 4%;
  right: 3%;
  top: 12%;
  bottom: 13%;
  background:
    conic-gradient(from 218deg at 52% 49%, transparent 0 13%, rgba(255, 255, 255, 0.085) 14%, transparent 16% 35%, rgba(138, 177, 255, 0.072) 37%, transparent 39% 64%, rgba(255, 255, 255, 0.06) 66%, transparent 69%),
    radial-gradient(ellipse at 52% 49%, transparent 0 37%, rgba(255, 255, 255, 0.062) 37.4%, transparent 38.2% 51%, rgba(151, 190, 255, 0.052) 51.4%, transparent 52.2%);
  opacity: 0.34;
  filter: blur(0.2px);
  animation: orbitDetailRotate 18s linear infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  z-index: 0;
  inset: -1% -1% 0 -1%;
  background:
    radial-gradient(ellipse at 52% 47%, rgba(168, 198, 255, 0.075), transparent 43%),
    radial-gradient(ellipse at 48% 64%, rgba(255, 255, 255, 0.028), transparent 28%),
    linear-gradient(116deg, transparent 31%, rgba(255, 255, 255, 0.027) 47%, rgba(150, 186, 255, 0.018) 56%, transparent 70%);
  opacity: 0.16;
  filter: blur(5px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 45%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 45%, transparent 78%);
  animation: rocketSceneLight 7.4s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node {
  position: absolute;
  display: block !important;
  visibility: visible !important;
  pointer-events: none;
  mix-blend-mode: screen;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo {
  z-index: 0;
  left: 2%;
  top: 9%;
  width: 96%;
  height: 78%;
  inset: auto;
  border-radius: 999px;
  background:
    radial-gradient(circle at 52% 46%, rgba(255, 255, 255, 0.055), transparent 18%),
    radial-gradient(circle at 52% 57%, rgba(116, 170, 255, 0.07), transparent 42%),
    radial-gradient(circle at 42% 43%, rgba(230, 107, 255, 0.028), transparent 32%);
  filter: blur(26px);
  opacity: 0.26;
  animation: glassPulse 6.6s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid {
  z-index: 3;
  left: 52%;
  top: 49%;
  width: 86%;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.25;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid-one {
  transform: translate(-50%, -50%) rotate(-28deg);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid-two {
  transform: translate(-50%, -50%) rotate(24deg);
  opacity: 0.32;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit {
  z-index: 3;
  left: 52%;
  top: 49%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.04),
    0 0 22px rgba(138, 178, 255, 0.08);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-one {
  width: 86%;
  height: 48%;
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: orbitFloat 8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-two {
  width: 58%;
  height: 72%;
  transform: translate(-50%, -50%) rotate(32deg);
  opacity: 0.72;
  animation: orbitFloat 8s 1.6s ease-in-out infinite reverse;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node {
  z-index: 4;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 9px rgba(255, 255, 255, 0.36),
    0 0 24px rgba(142, 190, 255, 0.24);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-a {
  left: 15%;
  top: 38%;
  animation: nodeSpark 4.6s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-b {
  right: 10%;
  top: 45%;
  animation: nodeSpark 5.2s 0.8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-c {
  left: 42%;
  bottom: 18%;
  animation: nodeSpark 4.8s 1.4s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
  z-index: 10;
  left: 50%;
  top: 48%;
  width: 88%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-flag {
  z-index: 18;
  top: 53.7%;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .section-layout.tools-layout {
    grid-template-columns: minmax(400px, 0.92fr) minmax(330px, 0.66fr);
    gap: clamp(28px, 3.2vw, 44px);
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] {
    width: clamp(390px, 40vw, 500px);
    transform: translateX(clamp(-174px, -14vw, -124px));
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene {
    inset: -14% -10% -12% -10%;
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
    width: 84%;
  }
}

/* Direct substrate polish: darker rocket-page lens, no cloudy plates. */
.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before {
  left: 5%;
  right: 5%;
  top: 12%;
  bottom: 13%;
  border: 1px solid rgba(205, 228, 255, 0.12);
  background:
    radial-gradient(ellipse at 52% 50%, rgba(111, 160, 220, 0.095), transparent 48%),
    radial-gradient(ellipse at 52% 52%, rgba(255, 255, 255, 0.018), transparent 62%) !important;
  opacity: 0.62;
  filter: none;
  box-shadow:
    inset 0 0 34px rgba(178, 214, 255, 0.035),
    0 0 42px rgba(95, 146, 215, 0.075);
  animation: rocketSceneLight 8.8s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  inset: -2% -4% -1%;
  background:
    radial-gradient(ellipse at 53% 47%, rgba(126, 172, 235, 0.11), transparent 44%),
    radial-gradient(ellipse at 51% 58%, rgba(255, 255, 255, 0.018), transparent 56%) !important;
  opacity: 0.38;
  filter: blur(20px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 42%, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 42%, transparent 76%);
  animation: none;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo {
  left: 8%;
  top: 12%;
  width: 84%;
  height: 70%;
  background:
    radial-gradient(ellipse at 52% 45%, rgba(255, 255, 255, 0.035), transparent 18%),
    radial-gradient(ellipse at 52% 56%, rgba(104, 158, 228, 0.085), transparent 48%),
    radial-gradient(ellipse at 43% 42%, rgba(165, 132, 255, 0.024), transparent 34%);
  filter: blur(30px);
  opacity: 0.32;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid {
  left: 52%;
  top: 49%;
  width: 74%;
  opacity: 0.18;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit {
  left: 52%;
  top: 49%;
  border-color: rgba(206, 229, 255, 0.11);
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.025),
    0 0 24px rgba(123, 177, 255, 0.06);
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-one {
  width: 80%;
  height: 44%;
  opacity: 0.82;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit-two {
  width: 56%;
  height: 68%;
  opacity: 0.56;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node {
  opacity: 0.74;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-a {
  left: 18%;
  top: 38%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-b {
  right: 12%;
  top: 45%;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node-c {
  left: 43%;
  bottom: 18%;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .visual-tools.tools-lab[data-tool-visual="direct"] {
    transform: translateX(clamp(-188px, -14.8vw, -136px));
  }
}

/* Direct velocity finish: no backing plates, only premium speed light. */
.visual-tools.tools-lab[data-tool-visual="direct"] {
  width: clamp(500px, 34vw, 640px);
  transform: translateX(clamp(-124px, -7.2vw, -82px));
}

.visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene {
  inset: -10% -8% -12% -8%;
  overflow: visible;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-cinema-field,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-node,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-track-glow,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-road-trails,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-substrate-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-substrate-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-air,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-line,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-wheel,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-halo,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-grid,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-orbit,
.visual-tools.tools-lab[data-tool-visual="direct"] .direct-rocket-node,
.visual-tools.tools-lab[data-tool-visual="direct"] .racer-cinema-field,
.visual-tools.tools-lab[data-tool-visual="direct"] .racer-speed-haze,
.visual-tools.tools-lab[data-tool-visual="direct"] .racer-build-svg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before,
.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box;
  mix-blend-mode: screen;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before {
  z-index: 7;
  left: -7%;
  right: 1%;
  top: 63%;
  height: 18%;
  width: auto !important;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 68, 28, 0.32) 23%, rgba(255, 188, 70, 0.68) 46%, rgba(255, 234, 142, 0.42) 62%, transparent 82%) 0 22% / 122% 3px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(255, 99, 24, 0.22) 19%, rgba(255, 176, 54, 0.48) 42%, rgba(255, 220, 112, 0.24) 63%, transparent 86%) -5% 48% / 112% 2px no-repeat,
    linear-gradient(90deg, transparent 0 16%, rgba(255, 117, 30, 0.2) 29%, rgba(255, 214, 100, 0.34) 50%, rgba(255, 144, 36, 0.18) 67%, transparent 90%) 6% 72% / 94% 2px no-repeat,
    radial-gradient(ellipse at 44% 53%, rgba(255, 162, 43, 0.1), transparent 52%);
  opacity: 0.78;
  filter: blur(0.15px);
  transform: perspective(760px) rotateX(65deg) translate3d(0, 0, 0) !important;
  transform-origin: 50% 0 !important;
  animation: directVelocityFlow 1.22s linear infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  z-index: 11;
  left: -5%;
  right: -1%;
  top: 37%;
  height: 27%;
  width: auto !important;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(173, 216, 255, 0.16) 18%, transparent 36% 100%) 0 18% / 96% 1px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, 0.12) 23%, transparent 42% 100%) 9% 43% / 76% 1px no-repeat,
    linear-gradient(90deg, transparent 0 14%, rgba(109, 178, 255, 0.13) 32%, transparent 55% 100%) 4% 69% / 90% 1px no-repeat;
  opacity: 0.44;
  filter: blur(0.25px);
  transform: translate3d(0, 0, 0) !important;
  animation: directAirCut 2.4s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
  z-index: 10;
  left: 50%;
  top: 47%;
  width: 88%;
  filter:
    contrast(1.1)
    saturate(1.02)
    brightness(1.04)
    drop-shadow(0 30px 62px rgba(0, 0, 0, 0.86))
    drop-shadow(0 0 34px rgba(116, 178, 255, 0.18));
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-flag {
  z-index: 18;
  top: 52.7%;
}

@keyframes directVelocityFlow {
  0% {
    opacity: 0.94;
    background-position:
      6% 10%,
      13% 34%,
      22% 58%,
      32% 82%;
  }

  52% {
    opacity: 1;
  }

  100% {
    opacity: 0.94;
    background-position:
      -12% 10%,
      -4% 34%,
      7% 58%,
      18% 82%;
  }
}

@keyframes directAirCut {
  0%,
  100% {
    opacity: 0.22;
    background-position:
      -16% 18%,
      2% 43%,
      -10% 69%;
  }

  48% {
    opacity: 0.5;
    background-position:
      12% 18%,
      -8% 43%,
      16% 69%;
  }
}

@media (max-width: 1180px) and (min-width: 921px) {
  .visual-tools.tools-lab[data-tool-visual="direct"] {
    width: clamp(390px, 40vw, 500px);
    transform: translateX(clamp(-178px, -14.2vw, -128px));
  }

  .visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
    width: 84%;
  }
}

/* Direct velocity visibility pass: fine cinematic streaks. */
.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 8;
  left: 50%;
  top: 60.4%;
  height: 15.5%;
  width: 74% !important;
  pointer-events: none;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 68, 26, 0.42) 22%, rgba(255, 150, 42, 0.72) 50%, rgba(255, 219, 102, 0.48) 68%, transparent 94%) 50% 16% / 50% 1px no-repeat,
    linear-gradient(90deg, transparent 0 6%, rgba(255, 58, 24, 0.48) 20%, rgba(255, 148, 39, 0.82) 50%, rgba(255, 221, 112, 0.56) 72%, transparent 96%) 50% 39% / 72% 1px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(255, 84, 25, 0.45) 22%, rgba(255, 176, 54, 0.76) 51%, rgba(255, 213, 104, 0.48) 72%, transparent 96%) 50% 62% / 64% 1px no-repeat,
    linear-gradient(90deg, transparent 0 10%, rgba(255, 112, 31, 0.34) 29%, rgba(255, 202, 84, 0.56) 54%, rgba(255, 140, 36, 0.28) 76%, transparent 100%) 50% 85% / 42% 1px no-repeat !important;
  opacity: 1;
  box-shadow: none !important;
  mix-blend-mode: screen;
  filter:
    blur(0.12px)
    drop-shadow(0 0 4px rgba(255, 135, 38, 0.3))
    drop-shadow(0 0 10px rgba(255, 190, 70, 0.12));
  transform: translate3d(-50%, 0, 0) !important;
  transform-origin: 50% 50% !important;
  animation: directFineStreaksPulse 1.55s ease-in-out infinite !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .scene-direct::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
  filter: none !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-speed-ribbons {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon {
  display: none !important;
  opacity: 0 !important;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  stroke-dasharray: 520 150;
  animation: directThinLinePulse 1.55s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-floor-mist {
  fill: url(#directFloorMist);
  opacity: 0.58;
  transform-origin: center;
  animation: directFloorMistPulse 2.4s ease-in-out infinite;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-core-main {
  stroke: url(#directFineLineHot);
  stroke-width: 1.45;
  opacity: 0.86;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-core-two {
  stroke: url(#directFineLineWarm);
  stroke-width: 1.15;
  opacity: 0.74;
  animation-delay: -0.18s;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-core-three {
  stroke: url(#directFineLineWarm);
  stroke-width: 0.88;
  opacity: 0.58;
  animation-delay: -0.34s;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-core-four {
  stroke: url(#directFineLineWarm);
  stroke-width: 0.68;
  opacity: 0.44;
  animation-delay: -0.5s;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-main {
  fill: url(#directRibbonHot);
  opacity: 0.98;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-two {
  fill: url(#directRibbonWarm);
  opacity: 0.94;
  animation-delay: -0.18s;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-three {
  fill: url(#directRibbonWarm);
  opacity: 0.86;
  animation-delay: -0.34s;
}

.visual-tools.tools-lab[data-tool-visual="direct"] .speed-ribbon-four {
  fill: url(#directRibbonWarm);
  opacity: 0.72;
  animation-delay: -0.5s;
}

@keyframes directRibbonRun {
  0% {
    transform: translateX(18px) scaleX(0.96);
    opacity: 0.42;
  }

  28%,
  72% {
    opacity: 1;
  }

  100% {
    transform: translateX(-34px) scaleX(1.03);
    opacity: 0.56;
  }
}

@keyframes directFineStreaksPulse {
  0% {
    opacity: 0.72;
    filter:
      blur(0.12px)
      drop-shadow(0 0 2px rgba(255, 135, 38, 0.12));
    background-position:
      50% 16%,
      50% 39%,
      50% 62%,
      50% 85%;
  }

  48% {
    opacity: 1;
    filter:
      blur(0.1px)
      drop-shadow(0 0 5px rgba(255, 135, 38, 0.24))
      drop-shadow(0 0 12px rgba(255, 190, 70, 0.1));
  }

  100% {
    opacity: 0.72;
    filter:
      blur(0.12px)
      drop-shadow(0 0 2px rgba(255, 135, 38, 0.12));
    background-position:
      50% 16%,
      50% 39%,
      50% 62%,
      50% 85%;
  }
}

@keyframes directThinLinePulse {
  0%,
  100% {
    stroke-dashoffset: 36;
    opacity: 0.46;
    filter: drop-shadow(0 0 2px rgba(255, 140, 42, 0.16));
    transform: translateX(8px);
  }

  42% {
    opacity: 0.94;
    filter:
      drop-shadow(0 0 4px rgba(255, 145, 38, 0.28))
      drop-shadow(0 0 10px rgba(255, 211, 110, 0.12));
  }

  72% {
    opacity: 0.66;
  }

  100% {
    stroke-dashoffset: -86;
    transform: translateX(-18px);
  }
}

@keyframes directFloorMistPulse {
  0%,
  100% {
    opacity: 0.22;
    transform: scaleX(0.94);
  }

  50% {
    opacity: 0.48;
    transform: scaleX(1.03);
  }
}

/* AI sites: realistic graphite laptop final pass. */
.site-laptop-scene {
  width: clamp(560px, 43vw, 760px) !important;
  aspect-ratio: 1.12 !important;
  margin-right: clamp(-42px, -2.4vw, -18px) !important;
  isolation: isolate;
}

.site-laptop-scene::before {
  inset: 8% 4% 7% 7% !important;
  opacity: 0.42 !important;
}

.site-laptop-scene::after {
  inset: -7% -8% !important;
  opacity: 0.18 !important;
}

.site-laptop-scene .rocket-halo {
  inset: 5% 2% 6% 7% !important;
  opacity: 0.52 !important;
}

.site-laptop-scene .rocket-grid {
  opacity: 0.25 !important;
}

.site-laptop-scene .orbit-one {
  inset: 14% 5% 15% 9% !important;
  transform: rotate(-13deg) !important;
}

.site-laptop-scene .orbit-two {
  inset: 21% 12% 17% 18% !important;
  transform: rotate(19deg) !important;
  opacity: 0.22 !important;
}

.site-laptop-scene .node-a { left: 18% !important; top: 36% !important; }
.site-laptop-scene .node-b { right: 12% !important; top: 43% !important; }
.site-laptop-scene .node-c { left: 52% !important; bottom: 14% !important; }

.premium-laptop {
  left: 53% !important;
  top: 50% !important;
  width: min(100%, 720px) !important;
  aspect-ratio: 1.28 !important;
  transform: translate(-50%, -50%) perspective(1180px) rotateX(4.8deg) rotateY(-8deg) !important;
  filter:
    drop-shadow(0 36px 78px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 38px rgba(128, 177, 255, 0.16)) !important;
}

.premium-laptop::before,
.premium-laptop::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 7;
  border-radius: 999px;
  mix-blend-mode: screen;
}

.premium-laptop::before {
  left: 18%;
  right: 18%;
  top: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), rgba(135, 181, 255, 0.26), transparent);
  filter: blur(0.25px);
  opacity: 0.56;
}

.premium-laptop::after {
  left: 13%;
  right: 12%;
  bottom: 19%;
  height: 12px;
  background: radial-gradient(ellipse, rgba(126, 173, 255, 0.2), transparent 70%);
  filter: blur(10px);
  opacity: 0.8;
}

.laptop-display {
  left: 4.8% !important;
  right: 4.8% !important;
  top: 0 !important;
  height: 64% !important;
  border-radius: 24px 24px 12px 12px !important;
  transform: translateZ(22px) !important;
  border-color: rgba(232, 241, 255, 0.26) !important;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.025) 20%, rgba(0, 0, 0, 0.5) 52%, rgba(126, 165, 223, 0.12) 82%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, #171b22 0%, #06070a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.9),
    inset 18px 0 44px rgba(255, 255, 255, 0.05),
    inset -20px 0 44px rgba(112, 154, 215, 0.1),
    0 22px 58px rgba(0, 0, 0, 0.52),
    0 0 42px rgba(160, 196, 255, 0.11) !important;
}

.laptop-display::before {
  inset: 12px !important;
  border-radius: 18px 18px 10px 10px !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

.laptop-display::after {
  border-radius: inherit !important;
  opacity: 0.22 !important;
}

.laptop-screen {
  inset: 10.4% 7.5% 9.5% !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 70% 36%, rgba(111, 164, 255, 0.18), transparent 28%),
    radial-gradient(circle at 28% 32%, rgba(215, 112, 235, 0.13), transparent 28%),
    linear-gradient(145deg, #0b0e14, #010203 74%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 24px 58px rgba(255, 255, 255, 0.025),
    inset 0 -24px 68px rgba(0, 0, 0, 0.78),
    0 0 22px rgba(0, 0, 0, 0.52) !important;
}

.laptop-screen::after {
  content: "";
  position: absolute;
  inset: -12% -20%;
  background: linear-gradient(100deg, transparent 36%, rgba(255, 255, 255, 0.16) 47%, rgba(122, 171, 255, 0.08) 52%, transparent 64%);
  opacity: 0.18;
  transform: translateX(-32%);
  mix-blend-mode: screen;
  animation: siteScreenScan 8.8s ease-in-out infinite;
}

.ai-chat-demo::before,
.ai-chat-demo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.ai-chat-demo::before {
  left: 9%;
  top: 13%;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.78), transparent 22%),
    linear-gradient(135deg, rgba(174, 197, 255, 0.52), rgba(199, 103, 230, 0.36));
  box-shadow: 0 0 24px rgba(148, 188, 255, 0.22);
  opacity: 0.72;
}

.ai-chat-demo::after {
  right: 10%;
  top: 16%;
  width: 34%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(181, 210, 255, 0.24), rgba(255, 255, 255, 0.06), transparent);
  box-shadow: 0 0 16px rgba(127, 178, 255, 0.11);
}

.chat-line {
  left: 18% !important;
}

.chat-bubble::before,
.chat-bubble::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.chat-bubble::before {
  left: 11%;
  right: 16%;
  top: 36%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(147, 188, 255, 0.22), transparent);
}

.chat-bubble::after {
  left: 11%;
  top: 54%;
  width: 44%;
  height: 1px;
  background: linear-gradient(90deg, rgba(213, 230, 255, 0.46), transparent);
}

.carousel-card {
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 36%),
    radial-gradient(circle at 52% 28%, rgba(214, 141, 255, 0.2), transparent 27%),
    radial-gradient(circle at 32% 68%, rgba(112, 173, 255, 0.2), transparent 31%),
    linear-gradient(180deg, rgba(90, 126, 185, 0.22), rgba(5, 7, 12, 0.42)) !important;
}

.carousel-card.card-two {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(130, 178, 255, 0.12) !important;
}

.laptop-base {
  left: 0 !important;
  right: 0 !important;
  bottom: 4% !important;
  height: 32% !important;
  transform: translateZ(-4px) perspective(820px) rotateX(67deg) !important;
  transform-origin: 50% 0 !important;
  border-radius: 12px 12px 58px 58px !important;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, 0.13), transparent 28%),
    linear-gradient(90deg, transparent 0 3%, rgba(255, 255, 255, 0.18) 13%, rgba(48, 56, 72, 0.96) 37%, rgba(9, 11, 17, 0.99) 61%, rgba(176, 203, 255, 0.16) 88%, transparent 100%),
    linear-gradient(180deg, rgba(45, 52, 67, 0.98), rgba(4, 5, 8, 1)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -10px 28px rgba(0, 0, 0, 0.86),
    0 20px 54px rgba(0, 0, 0, 0.66) !important;
}

.laptop-base::before {
  left: 4% !important;
  right: 4% !important;
  top: -3% !important;
  height: 10% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), rgba(123, 164, 222, 0.14), transparent) !important;
  opacity: 0.84 !important;
}

.laptop-base::after {
  left: 9% !important;
  right: 9% !important;
  top: 66% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), rgba(137, 178, 255, 0.1), transparent) !important;
  opacity: 0.6 !important;
}

.laptop-hinge,
.laptop-keyboard,
.laptop-trackpad {
  position: absolute;
  display: block;
  pointer-events: none;
}

.laptop-hinge {
  top: -7%;
  width: 13%;
  height: 13%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(28, 33, 43, 0.95), rgba(255, 255, 255, 0.12));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 18px rgba(132, 178, 255, 0.08);
  opacity: 0.9;
}

.hinge-left { left: 25%; }
.hinge-right { right: 25%; }

.laptop-keyboard {
  left: 17%;
  right: 17%;
  top: 17%;
  height: 26%;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 8px, rgba(0, 0, 0, 0.28) 8px 15px),
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(255, 255, 255, 0.05) 6px 8px, transparent 8px 14px);
  opacity: 0.72;
  filter: blur(0.15px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -6px 14px rgba(0, 0, 0, 0.42);
}

.laptop-trackpad {
  left: 39%;
  right: 39%;
  top: 50%;
  height: 25%;
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(119, 154, 209, 0.055)),
    rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48);
  opacity: 0.76;
}

.base-glow {
  bottom: -24% !important;
  opacity: 0.86 !important;
}

/* AI sites: use real laptop asset, keep animated screen only. */
.site-laptop-scene .premium-laptop {
  width: min(100%, 760px) !important;
  aspect-ratio: 1.5 !important;
  left: 53% !important;
  top: 51% !important;
  transform: translate(-50%, -50%) perspective(1200px) rotateX(0deg) rotateY(0deg) !important;
  filter:
    drop-shadow(0 38px 80px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 34px rgba(128, 176, 255, 0.13)) !important;
}

.laptop-photo {
  position: absolute;
  inset: -3% -4% -4%;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: normal;
  opacity: 1;
  filter:
    saturate(1.06)
    contrast(1.2)
    brightness(1.14)
    drop-shadow(0 0 14px rgba(220, 236, 255, 0.18))
    drop-shadow(0 0 34px rgba(96, 153, 235, 0.14));
}

.site-laptop-scene .premium-laptop::before {
  z-index: 4;
  left: 18%;
  right: 17%;
  top: 12%;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.74) 18%, rgba(145, 190, 255, 0.3) 42%, rgba(255, 255, 255, 0.58) 68%, transparent) !important;
  filter:
    blur(0.18px)
    drop-shadow(0 0 8px rgba(190, 216, 255, 0.28));
  opacity: 0.72;
}

.site-laptop-scene .premium-laptop::after {
  z-index: 1;
  left: 14%;
  right: 14%;
  bottom: 7%;
  height: 16%;
  opacity: 0.82;
}

.site-laptop-scene .laptop-display {
  z-index: 5;
  left: 20.7% !important;
  right: 20.7% !important;
  top: 12.6% !important;
  height: 52.5% !important;
  border: 0 !important;
  border-radius: 2px !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}

.site-laptop-scene .laptop-display::before,
.site-laptop-scene .laptop-display::after {
  display: none !important;
}

.site-laptop-scene .laptop-screen {
  inset: 0 !important;
  border-radius: 2px !important;
  background:
    radial-gradient(circle at 71% 36%, rgba(108, 165, 255, 0.2), transparent 28%),
    radial-gradient(circle at 31% 36%, rgba(213, 115, 236, 0.15), transparent 29%),
    linear-gradient(145deg, rgba(7, 10, 15, 0.82), rgba(0, 0, 0, 0.52) 72%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.026),
    inset 0 20px 48px rgba(255, 255, 255, 0.018),
    inset 0 -26px 70px rgba(0, 0, 0, 0.7) !important;
  mix-blend-mode: screen;
}

.site-laptop-scene .laptop-base,
.site-laptop-scene .laptop-hinge,
.site-laptop-scene .laptop-keyboard,
.site-laptop-scene .laptop-trackpad {
  display: none !important;
}

.site-laptop-scene .glass-label {
  right: 12% !important;
  bottom: 8% !important;
}

/* AI sites screen final composition */
.site-laptop-scene {
  width: clamp(520px, 38vw, 690px) !important;
  margin-right: clamp(-18px, -1vw, -8px) !important;
  transform: translateX(clamp(44px, 3.4vw, 68px)) !important;
  overflow: visible !important;
}

.site-laptop-scene::before {
  inset: -2% -18% -8% -16% !important;
  opacity: 0.34 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.site-laptop-scene::after {
  inset: -18% -24% -20% -22% !important;
  opacity: 0.18 !important;
  -webkit-mask-image: radial-gradient(ellipse at 53% 50%, #000 0 60%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse at 53% 50%, #000 0 60%, transparent 86%) !important;
}

.site-laptop-scene .rocket-halo {
  inset: -2% -12% -3% -9% !important;
}

.site-laptop-scene .premium-laptop {
  left: 56% !important;
  top: 50% !important;
  width: min(96%, 700px) !important;
}

.site-laptop-scene .laptop-display {
  left: 20.8% !important;
  right: 20.8% !important;
  top: 12.6% !important;
  height: 52.4% !important;
  z-index: 5;
  overflow: hidden;
}

.site-laptop-scene .laptop-screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48)),
    radial-gradient(circle at 25% 30%, rgba(210, 112, 236, 0.13), transparent 25%),
    radial-gradient(circle at 72% 34%, rgba(112, 170, 255, 0.18), transparent 29%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.08) 47%, rgba(0, 0, 0, 0.42)),
    url("assets/waves.webp") center / cover no-repeat !important;
  mix-blend-mode: normal !important;
  opacity: 0.94;
}

.site-laptop-scene .laptop-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    radial-gradient(circle at 52% 46%, transparent 0 22%, rgba(160, 199, 255, 0.055) 22.5%, transparent 23.4%);
  background-size: 30px 30px, 30px 30px, 100% 100%;
  opacity: 0.52;
  pointer-events: none;
}

.site-laptop-scene .laptop-screen::after {
  opacity: 0.14;
}

.neuro-site-ui {
  position: absolute;
  inset: 6.4% 7.2% 7.2%;
  z-index: 3;
  display: grid;
  grid-template-rows: 16px 1fr;
  gap: 7px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014) 37%, rgba(114, 164, 235, 0.045)),
    rgba(4, 6, 10, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 22px rgba(125, 174, 255, 0.08);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.site-browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.052);
}

.site-browser-bar span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(224, 238, 255, 0.58);
  box-shadow: 0 0 8px rgba(170, 204, 255, 0.22);
}

.site-browser-bar span:nth-child(2) { opacity: 0.34; }
.site-browser-bar span:nth-child(3) { opacity: 0.22; }

.site-ui-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px 10px;
}

.site-ui-copy,
.site-ui-cards {
  position: relative;
  min-width: 0;
}

.site-ui-kicker {
  display: block;
  width: max-content;
  margin-bottom: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  color: rgba(230, 239, 255, 0.82);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(90deg, rgba(134, 176, 255, 0.22), rgba(210, 125, 238, 0.14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.site-ui-title,
.site-ui-title.short {
  display: block;
  height: 4px;
  margin-bottom: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(149, 190, 255, 0.25), transparent);
  box-shadow: 0 0 9px rgba(155, 195, 255, 0.11);
}

.site-ui-title { width: 76%; }
.site-ui-title.short { width: 48%; opacity: 0.72; }

.site-ui-chat {
  position: absolute;
  left: 0;
  right: 8%;
  bottom: 0;
  display: grid;
  gap: 5px;
}

.message {
  display: block;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 12% 42%, rgba(255, 255, 255, 0.45), transparent 8%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(126, 172, 242, 0.045));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 18px rgba(134, 180, 255, 0.06);
  animation: siteMessagePulse 4.6s ease-in-out infinite;
}

.message-user {
  width: 78%;
  margin-left: auto;
}

.message-ai {
  width: 92%;
  background:
    radial-gradient(circle at 10% 42%, rgba(255, 255, 255, 0.5), transparent 8%),
    linear-gradient(90deg, rgba(195, 119, 232, 0.17), rgba(122, 172, 244, 0.075));
  animation-delay: 0.5s;
}

.message-ai.short {
  width: 62%;
  opacity: 0.76;
  animation-delay: 1s;
}

.site-ui-cards {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  grid-template-rows: 1fr 0.72fr;
  gap: 7px;
}

.site-card {
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.018) 36%, rgba(108, 162, 238, 0.07)),
    radial-gradient(circle at 56% 38%, rgba(211, 124, 238, 0.18), transparent 28%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 22px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(122, 174, 255, 0.07);
  animation: siteCardFloat 6.4s ease-in-out infinite;
}

.card-main {
  grid-row: span 2;
  position: relative;
}

.card-main::before,
.card-main::after,
.card-side::before,
.card-bottom::before {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(144, 190, 255, 0.16), transparent);
}

.card-main::before {
  left: 14%;
  right: 16%;
  bottom: 22%;
  height: 2px;
}

.card-main::after {
  left: 14%;
  right: 38%;
  bottom: 14%;
  height: 1px;
  opacity: 0.66;
}

.card-side,
.card-bottom {
  position: relative;
  opacity: 0.82;
  animation-delay: 0.7s;
}

.card-side::before,
.card-bottom::before {
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1px;
  opacity: 0.62;
}

@keyframes siteMessagePulse {
  0%,
  100% {
    opacity: 0.72;
    transform: translateX(0);
  }

  48% {
    opacity: 1;
    transform: translateX(3px);
  }
}

@keyframes siteCardFloat {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* AI sites final cleanup: larger laptop, cleaner substrate, real screen overlay. */
#ai-sites .section-copy {
  max-width: 660px;
}

#ai-sites .section-copy p {
  max-width: 620px;
}

.site-laptop-scene {
  width: clamp(610px, 45vw, 830px) !important;
  aspect-ratio: 1.08 !important;
  margin-right: clamp(-68px, -4vw, -28px) !important;
  transform: translateX(clamp(78px, 5vw, 112px)) !important;
  overflow: visible !important;
  contain: none !important;
}

.site-laptop-scene::before {
  inset: -14% -22% -16% -18% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 54% 51%, rgba(138, 181, 255, 0.09), transparent 34%),
    radial-gradient(ellipse at 54% 51%, transparent 0 42%, rgba(195, 219, 255, 0.075) 42.4%, transparent 43.2% 57%, rgba(112, 160, 230, 0.052) 57.4%, transparent 58.1%),
    conic-gradient(from 236deg at 54% 51%, transparent 0 12%, rgba(255, 255, 255, 0.08) 14%, transparent 17% 42%, rgba(121, 171, 240, 0.075) 45%, transparent 48% 76%, rgba(255, 255, 255, 0.055) 79%, transparent 82%) !important;
  opacity: 0.42 !important;
  filter: blur(0.2px) !important;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 52% 50%, #000 0 67%, transparent 90%) !important;
  mask-image: radial-gradient(ellipse at 52% 50%, #000 0 67%, transparent 90%) !important;
}

.site-laptop-scene::after {
  inset: -28% -34% -26% -30% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(126, 172, 242, 0.14), transparent 37%),
    radial-gradient(ellipse at 64% 60%, rgba(210, 125, 238, 0.045), transparent 33%),
    linear-gradient(112deg, transparent 31%, rgba(255, 255, 255, 0.045) 48%, rgba(150, 186, 255, 0.025) 56%, transparent 72%) !important;
  opacity: 0.2 !important;
  filter: blur(8px) !important;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 56%, transparent 82%) !important;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 56%, transparent 82%) !important;
}

.site-laptop-scene .rocket-halo {
  inset: -9% -15% -10% -13% !important;
  opacity: 0.5 !important;
}

.site-laptop-scene .rocket-grid {
  opacity: 0.16 !important;
}

.site-laptop-scene .orbit-one {
  inset: 10% -4% 14% 4% !important;
  opacity: 0.26 !important;
}

.site-laptop-scene .orbit-two {
  inset: 20% 8% 18% 12% !important;
  opacity: 0.18 !important;
}

.site-laptop-scene .premium-laptop {
  left: 54% !important;
  top: 50% !important;
  width: min(104%, 820px) !important;
}

.site-laptop-scene .laptop-display {
  left: 20.8% !important;
  right: 20.8% !important;
  top: 12.5% !important;
  height: 52.7% !important;
  border-radius: 1px !important;
  overflow: hidden !important;
}

.site-laptop-scene .laptop-screen {
  opacity: 1 !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.82)),
    radial-gradient(circle at 28% 34%, rgba(217, 122, 236, 0.12), transparent 23%),
    radial-gradient(circle at 70% 36%, rgba(118, 174, 255, 0.17), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.28) 48%, rgba(0, 0, 0, 0.7)),
    url("assets/waves.webp") center / 118% auto no-repeat !important;
  filter: contrast(1.08) brightness(0.98);
}

.site-laptop-scene .laptop-screen::before {
  background:
    radial-gradient(circle at 22% 31%, rgba(216, 232, 255, 0.72) 0 2px, transparent 2.5px),
    radial-gradient(circle at 48% 45%, rgba(216, 232, 255, 0.56) 0 2px, transparent 2.5px),
    radial-gradient(circle at 75% 30%, rgba(216, 232, 255, 0.5) 0 2px, transparent 2.5px),
    radial-gradient(circle at 70% 72%, rgba(216, 232, 255, 0.44) 0 1.8px, transparent 2.4px),
    linear-gradient(26deg, transparent 0 28%, rgba(155, 194, 255, 0.14) 28.3%, transparent 29% 58%, rgba(155, 194, 255, 0.1) 58.3%, transparent 59%),
    linear-gradient(154deg, transparent 0 34%, rgba(210, 126, 236, 0.09) 34.3%, transparent 35% 67%, rgba(155, 194, 255, 0.09) 67.3%, transparent 68%) !important;
  background-size: 100% 100% !important;
  opacity: 0.5 !important;
  animation: siteNeuralDrift 7.8s ease-in-out infinite;
}

.neuro-site-ui {
  inset: 7.5% 8% 8.5% !important;
  grid-template-rows: 15px 1fr;
  gap: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 37%, rgba(114, 164, 235, 0.055)),
    rgba(2, 4, 8, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.095);
  backdrop-filter: blur(2px) saturate(128%);
  -webkit-backdrop-filter: blur(2px) saturate(128%);
}

.site-ui-body {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 9px;
  padding: 7px 9px 9px;
}

.site-ui-kicker {
  color: transparent;
  width: 42px;
  height: 10px;
  padding: 0;
  margin-bottom: 7px;
  background: linear-gradient(90deg, rgba(204, 219, 255, 0.58), rgba(206, 125, 238, 0.26));
}

.site-ui-title,
.site-ui-title.short {
  height: 3px;
}

.site-ui-chat {
  gap: 4px;
}

.message {
  height: 11px;
  opacity: 0.8;
}

.site-card {
  border-radius: 9px;
}

.card-main {
  background:
    radial-gradient(circle at 52% 42%, rgba(112, 174, 255, 0.22), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.015) 36%, rgba(108, 162, 238, 0.075)) !important;
}

@keyframes siteNeuralDrift {
  0%,
  100% {
    opacity: 0.38;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.58;
    transform: translate3d(2px, -1px, 0);
  }
}

@keyframes siteScreenScan {
  0%,
  48% {
    transform: translateX(-36%);
    opacity: 0.08;
  }

  64% {
    transform: translateX(8%);
    opacity: 0.2;
  }

  100% {
    transform: translateX(42%);
    opacity: 0.06;
  }
}

/* AI sites polish: cinematic laptop, clean screen, quiet substrate. */
#ai-sites .section-layout {
  gap: clamp(52px, 5vw, 88px);
}

#ai-sites .metric-row,
#ai-sites .site-metric-row {
  display: none !important;
}

.site-laptop-scene {
  width: clamp(660px, 47vw, 880px) !important;
  aspect-ratio: 1.12 !important;
  margin-right: clamp(-54px, -3.2vw, -22px) !important;
  transform: translateX(clamp(52px, 3.4vw, 72px)) !important;
  overflow: visible !important;
  contain: none !important;
}

.site-laptop-scene::before {
  inset: 4% -6% 3% -5% !important;
  border-radius: 999px !important;
  background:
    conic-gradient(from 216deg at 53% 49%, transparent 0 14%, rgba(255, 255, 255, 0.085) 15.2%, transparent 17.4% 36%, rgba(126, 174, 245, 0.072) 38%, transparent 40.5% 65%, rgba(255, 255, 255, 0.05) 67%, transparent 70%),
    radial-gradient(ellipse at 53% 50%, transparent 0 36%, rgba(205, 224, 255, 0.058) 36.4%, transparent 37.3% 52%, rgba(117, 162, 228, 0.046) 52.4%, transparent 53.2%),
    radial-gradient(ellipse at 53% 48%, rgba(117, 169, 244, 0.072), transparent 50%) !important;
  opacity: 0.32 !important;
  filter: blur(0.25px) !important;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 52% 50%, #000 0 61%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse at 52% 50%, #000 0 61%, transparent 86%) !important;
  animation: orbitDetailRotate 24s linear infinite !important;
}

.site-laptop-scene::after {
  inset: -12% -18% -14% -16% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(147, 188, 255, 0.12), transparent 42%),
    radial-gradient(ellipse at 68% 57%, rgba(217, 128, 238, 0.035), transparent 32%),
    linear-gradient(116deg, transparent 31%, rgba(255, 255, 255, 0.038) 46%, rgba(150, 186, 255, 0.02) 56%, transparent 71%) !important;
  opacity: 0.2 !important;
  filter: blur(7px) !important;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 53% 50%, #000 0 52%, transparent 79%) !important;
  mask-image: radial-gradient(ellipse at 53% 50%, #000 0 52%, transparent 79%) !important;
  animation: rocketSceneLight 8s ease-in-out infinite !important;
}

.site-laptop-scene .rocket-halo {
  inset: 8% -2% 4% 1% !important;
  opacity: 0.32 !important;
  filter: blur(28px) !important;
  background:
    radial-gradient(circle at 52% 45%, rgba(255, 255, 255, 0.055), transparent 16%),
    radial-gradient(circle at 54% 52%, rgba(111, 166, 244, 0.095), transparent 44%),
    radial-gradient(circle at 36% 42%, rgba(214, 115, 236, 0.03), transparent 33%) !important;
}

.site-laptop-scene .rocket-grid {
  display: none !important;
}

.site-laptop-scene .orbit-one {
  inset: 16% 4% 15% 6% !important;
  opacity: 0.22 !important;
}

.site-laptop-scene .orbit-two {
  inset: 22% 12% 18% 16% !important;
  opacity: 0.15 !important;
}

.site-laptop-scene .ai-node {
  opacity: 0.72 !important;
}

.site-laptop-scene .node-a { left: 15% !important; top: 39% !important; }
.site-laptop-scene .node-b { right: 10% !important; top: 46% !important; }
.site-laptop-scene .node-c { left: 52% !important; bottom: 13% !important; }

.site-laptop-scene .premium-laptop {
  left: 54.5% !important;
  top: 50% !important;
  width: min(114%, 860px) !important;
  filter:
    drop-shadow(0 42px 92px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 30px rgba(160, 196, 255, 0.14))
    drop-shadow(0 0 70px rgba(106, 157, 230, 0.08)) !important;
}

.site-laptop-scene .premium-laptop::before {
  left: 18.5% !important;
  right: 18.5% !important;
  top: 12.2% !important;
  opacity: 0.55 !important;
}

.site-laptop-scene .premium-laptop::after {
  opacity: 0.5 !important;
}

.site-laptop-scene .laptop-photo {
  filter:
    saturate(1.04)
    contrast(1.24)
    brightness(1.17)
    drop-shadow(0 0 13px rgba(220, 236, 255, 0.17))
    drop-shadow(0 0 34px rgba(95, 152, 233, 0.12)) !important;
}

.site-laptop-scene .laptop-display {
  left: 20.9% !important;
  right: 20.9% !important;
  top: 12.55% !important;
  height: 52.8% !important;
  border-radius: 1px !important;
  overflow: hidden !important;
}

.site-laptop-scene .laptop-screen {
  opacity: 1 !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.83)),
    radial-gradient(circle at 28% 35%, rgba(214, 122, 238, 0.14), transparent 24%),
    radial-gradient(circle at 70% 38%, rgba(112, 170, 255, 0.19), transparent 30%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(3, 8, 15, 0.36) 48%, rgba(0, 0, 0, 0.72)),
    url("assets/waves.webp") center / 124% auto no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 18px 48px rgba(255, 255, 255, 0.018),
    inset 0 -28px 74px rgba(0, 0, 0, 0.76) !important;
  filter: contrast(1.12) brightness(0.95) saturate(1.08);
}

.site-laptop-scene .laptop-screen::before {
  z-index: 1;
  background:
    radial-gradient(circle at 18% 30%, rgba(235, 241, 255, 0.72) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 42% 46%, rgba(235, 241, 255, 0.45) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 71% 32%, rgba(235, 241, 255, 0.5) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 74% 70%, rgba(235, 241, 255, 0.38) 0 1.5px, transparent 2.2px),
    linear-gradient(28deg, transparent 0 26%, rgba(156, 195, 255, 0.14) 26.4%, transparent 27.2% 56%, rgba(156, 195, 255, 0.09) 56.4%, transparent 57.2%),
    linear-gradient(150deg, transparent 0 31%, rgba(212, 132, 238, 0.09) 31.4%, transparent 32.2% 65%, rgba(156, 195, 255, 0.08) 65.4%, transparent 66.2%) !important;
  opacity: 0.46 !important;
  animation: siteNeuralDrift 8.4s ease-in-out infinite !important;
}

.site-laptop-scene .laptop-screen::after {
  z-index: 2;
  opacity: 0.12 !important;
}

.site-laptop-scene .neuro-site-ui {
  inset: 8.5% 8.2% 9% !important;
  z-index: 4;
  display: grid;
  grid-template-rows: 18px 1fr;
  gap: 9px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-laptop-scene .site-browser-bar {
  width: 52%;
  height: 18px;
  padding: 0 8px;
  border: 1px solid rgba(216, 231, 255, 0.08);
  border-radius: 999px;
  background: rgba(5, 8, 14, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(117, 166, 235, 0.08);
}

.site-laptop-scene .site-ui-body {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 13px;
  padding: 0;
}

.site-laptop-scene .site-ui-copy,
.site-laptop-scene .site-ui-cards {
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.014) 42%, rgba(104, 157, 232, 0.045)),
    rgba(2, 5, 11, 0.36);
  border: 1px solid rgba(220, 236, 255, 0.078);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 16px 34px rgba(0, 0, 0, 0.22);
}

.site-laptop-scene .site-ui-copy {
  padding: 11px 11px 10px;
}

.site-laptop-scene .site-ui-cards {
  display: grid;
  grid-template-columns: 1.1fr 0.72fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 8px;
}

.site-laptop-scene .site-ui-kicker {
  width: 48px;
  height: 11px;
  border-radius: 999px;
  margin-bottom: 9px;
}

.site-laptop-scene .site-ui-title {
  width: 74%;
  height: 4px;
}

.site-laptop-scene .site-ui-title.short {
  width: 52%;
}

.site-laptop-scene .site-ui-chat {
  margin-top: 17%;
}

.site-laptop-scene .message {
  height: 11px;
  border-radius: 999px;
}

.site-laptop-scene .message-user {
  width: 76%;
}

.site-laptop-scene .message-ai {
  width: 62%;
}

.site-laptop-scene .message-ai.short {
  width: 48%;
}

.site-laptop-scene .card-main {
  grid-row: 1 / 3;
}

.site-laptop-scene .site-card {
  min-height: 0;
  border-radius: 10px;
  opacity: 0.9;
}

/* AI sites refinement: smaller laptop, real chat screen, two benefits and CTA. */
#ai-sites .section-copy {
  max-width: 650px;
}

.site-benefit-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 520px);
  margin-top: clamp(20px, 2.6vh, 28px);
  margin-bottom: var(--cta-content-gap);
}

.site-benefit-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 66px;
  padding: 0 18px;
  overflow: hidden;
  border: 1px solid rgba(220, 236, 255, 0.13);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.095), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.012) 54%, rgba(119, 154, 255, 0.042)),
    rgba(5, 7, 12, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 20px 44px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.site-benefit-card::after {
  content: "";
  position: absolute;
  left: 68px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.site-benefit-icon {
  width: 28px;
  height: 28px;
  color: rgba(226, 238, 255, 0.84);
  filter: drop-shadow(0 0 14px rgba(139, 184, 255, 0.16));
}

.site-benefit-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-benefit-card em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.28;
  text-transform: uppercase;
}

.site-cta {
  margin-top: 0;
}

.site-laptop-scene {
  width: clamp(560px, 40vw, 730px) !important;
  margin-right: clamp(-30px, -1.8vw, -10px) !important;
  transform: translateX(clamp(42px, 2.8vw, 58px)) !important;
}

.site-laptop-scene::before {
  inset: 7% -3% 5% -3% !important;
  opacity: 0.26 !important;
}

.site-laptop-scene::after {
  inset: -6% -12% -10% -10% !important;
  opacity: 0.16 !important;
}

.site-laptop-scene .rocket-halo {
  inset: 12% 3% 8% 4% !important;
  opacity: 0.28 !important;
}

.site-laptop-scene .premium-laptop {
  left: 54% !important;
  top: 50% !important;
  width: min(101%, 740px) !important;
}

.site-laptop-scene .laptop-display {
  left: 20.95% !important;
  right: 21.05% !important;
  top: 12.75% !important;
  height: 52.15% !important;
}

.site-laptop-scene .laptop-screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.88)),
    radial-gradient(circle at 28% 34%, rgba(214, 122, 238, 0.13), transparent 23%),
    radial-gradient(circle at 69% 38%, rgba(112, 170, 255, 0.16), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(4, 8, 14, 0.48) 48%, rgba(0, 0, 0, 0.82)),
    url("assets/waves.webp") center / 128% auto no-repeat !important;
}

.site-laptop-scene .neuro-site-ui {
  inset: 10% 9% 11% !important;
  grid-template-rows: 18px 1fr !important;
  gap: 9px !important;
}

.site-laptop-scene .site-browser-bar {
  width: 64% !important;
  height: 18px !important;
  justify-self: start;
}

.site-laptop-scene .site-ui-body {
  display: block !important;
  padding: 0 !important;
}

.site-laptop-scene .site-ui-copy {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 11px 12px 10px !important;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.012) 44%, rgba(104, 157, 232, 0.046)),
    rgba(2, 5, 11, 0.44);
  border: 1px solid rgba(220, 236, 255, 0.085);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.44),
    0 16px 34px rgba(0, 0, 0, 0.26);
}

.site-laptop-scene .site-ui-kicker {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  height: 15px !important;
  margin-bottom: 8px !important;
  padding: 0 8px !important;
  border-radius: 999px;
  color: rgba(229, 238, 255, 0.72) !important;
  background: linear-gradient(90deg, rgba(122, 160, 255, 0.34), rgba(206, 125, 238, 0.22)) !important;
  font-size: 5.8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-laptop-scene .site-ui-title,
.site-laptop-scene .site-ui-title.short {
  display: block;
  width: max-content !important;
  max-width: 82%;
  height: auto !important;
  margin-bottom: 3px;
  overflow: hidden;
  color: rgba(244, 248, 255, 0.66);
  background: none !important;
  border-radius: 0;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
}

.site-laptop-scene .site-ui-title.short {
  color: rgba(184, 204, 236, 0.48);
}

.site-laptop-scene .site-ui-chat {
  display: flex;
  flex-direction: column;
  gap: 6px !important;
  margin-top: 14px !important;
}

.site-laptop-scene .message {
  position: relative;
  display: block;
  width: auto !important;
  max-width: 78%;
  height: auto !important;
  min-height: 17px;
  padding: 5px 7px;
  border-radius: 10px;
  color: rgba(238, 245, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(8, 12, 19, 0.58) !important;
  border: 1px solid rgba(220, 236, 255, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 8px 18px rgba(0, 0, 0, 0.22);
  font-size: 6.4px;
  line-height: 1.25;
  opacity: 1 !important;
}

.site-laptop-scene .message-user {
  align-self: flex-end;
  color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(135deg, rgba(202, 129, 238, 0.24), rgba(116, 160, 239, 0.12)),
    rgba(12, 12, 21, 0.66) !important;
}

.site-laptop-scene .message-ai {
  align-self: flex-start;
}

.site-laptop-scene .message-ai.short {
  max-width: 68%;
}

.site-laptop-scene .site-ui-cards {
  display: none !important;
}

/* AI sites screen: mini landing with live AI chat and image carousel. */
.site-laptop-scene::before,
.site-laptop-scene .ai-orbit,
.site-laptop-scene .ai-node,
.site-laptop-scene .rocket-grid {
  display: none !important;
}

.site-laptop-scene::after {
  inset: -4% -9% -9% -9% !important;
  background:
    radial-gradient(ellipse at 53% 48%, rgba(129, 177, 247, 0.18), transparent 44%),
    radial-gradient(ellipse at 52% 60%, rgba(28, 44, 66, 0.36), transparent 60%) !important;
  opacity: 0.34 !important;
  filter: blur(15px) !important;
  -webkit-mask-image: radial-gradient(ellipse at 52% 51%, #000 0 54%, transparent 80%) !important;
  mask-image: radial-gradient(ellipse at 52% 51%, #000 0 54%, transparent 80%) !important;
  animation: glassPulse 7s ease-in-out infinite !important;
}

.site-laptop-scene .rocket-halo {
  inset: 4% -5% 1% -4% !important;
  background:
    radial-gradient(ellipse at 52% 45%, rgba(255, 255, 255, 0.07), transparent 18%),
    radial-gradient(ellipse at 52% 52%, rgba(104, 160, 236, 0.16), transparent 48%),
    radial-gradient(ellipse at 48% 68%, rgba(32, 48, 72, 0.38), transparent 64%) !important;
  opacity: 0.46 !important;
  filter: blur(30px) !important;
}

.site-laptop-scene .laptop-display {
  left: 20.92% !important;
  right: 21.08% !important;
  top: 12.7% !important;
  height: 52.1% !important;
}

.site-laptop-scene .laptop-screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.68)),
    radial-gradient(circle at 50% 37%, rgba(255, 255, 255, 0.045), transparent 20%),
    radial-gradient(circle at 66% 33%, rgba(116, 170, 245, 0.09), transparent 24%),
    radial-gradient(circle at 36% 38%, rgba(216, 122, 238, 0.055), transparent 24%),
    url("assets/waves.webp") center / 128% auto no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.032),
    inset 0 34px 80px rgba(0, 0, 0, 0.38),
    inset 0 -28px 72px rgba(0, 0, 0, 0.76) !important;
}

.site-laptop-scene .laptop-screen::before {
  opacity: 0.18 !important;
}

.site-laptop-scene .laptop-screen::after {
  opacity: 0.08 !important;
}

.site-laptop-scene .neuro-site-ui {
  inset: 0 !important;
  display: block !important;
  overflow: hidden;
}

.site-screen-hero {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  align-items: center;
  padding: 8.5% 8% 0;
  color: rgba(255, 255, 255, 0.9);
}

.site-screen-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 38%, rgba(0, 0, 0, 0.72) 100%),
    radial-gradient(ellipse at 50% 17%, rgba(255, 255, 255, 0.055), transparent 24%);
  pointer-events: none;
}

.site-screen-hero h3 {
  align-self: end;
  margin: 0 0 9%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  line-height: 1.05;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.65));
}

.site-screen-hero h3 span,
.site-screen-hero h3 strong {
  display: block;
}

.site-screen-hero h3 span {
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(17px, 1.5vw, 25px);
  font-weight: 700;
  margin-bottom: 5px;
}

.site-screen-hero h3 strong {
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(16px, 1.24vw, 22px);
  font-weight: 700;
}

.site-screen-prompt {
  position: relative;
  z-index: 2;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  width: 70%;
  min-height: 24px;
  margin-bottom: 7.5%;
  padding: 0 4px 0 14px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 28px rgba(0, 0, 0, 0.38);
}

.site-screen-prompt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(142, 179, 255, 0.18), transparent);
  transform: translateX(-110%);
  animation: sitePromptScan 4.5s ease-in-out infinite;
}

.site-screen-prompt span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.46);
  font-size: clamp(5px, 0.46vw, 8px);
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-screen-prompt svg {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  justify-self: center;
  fill: none;
  stroke: rgba(222, 236, 255, 0.62);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(138, 180, 255, 0.22));
  animation: siteSendPulse 2.6s ease-in-out infinite;
}

.site-screen-chat {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 48%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.screen-bubble {
  max-width: 58%;
  min-height: 17px;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(245, 248, 255, 0.62);
  border: 1px solid rgba(220, 236, 255, 0.08);
  background: rgba(0, 0, 0, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.24);
  font-size: clamp(4.7px, 0.4vw, 7px);
  line-height: 1.15;
  opacity: 0;
  transform: translateY(6px);
  white-space: nowrap;
  animation: siteBubbleSequence 8s ease-in-out infinite;
}

.screen-bubble-user {
  align-self: flex-end;
  background:
    linear-gradient(90deg, rgba(123, 138, 244, 0.25), rgba(202, 112, 236, 0.18)),
    rgba(0, 0, 0, 0.56);
  animation-delay: 0.8s;
}

.screen-bubble-ai {
  align-self: flex-start;
  animation-delay: 2.5s;
}

.site-screen-gallery {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4.5%;
  align-items: end;
  margin: 0 auto -1px;
  width: 90%;
}

.site-screen-card {
  position: relative;
  display: block;
  aspect-ratio: 1.22;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.64)),
    radial-gradient(ellipse at 50% 24%, rgba(255, 255, 255, 0.08), transparent 42%),
    url("assets/ai-direct-bolid-front.png") center bottom / 124% auto no-repeat,
    rgba(6, 8, 12, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 -12px 24px rgba(0, 0, 0, 0.22);
  opacity: 0.7;
  transform: translateY(18%);
  animation: siteCardReveal 8s ease-in-out infinite;
}

.site-screen-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 82%, rgba(190, 214, 255, 0.18), transparent 54%);
  mix-blend-mode: screen;
}

.site-screen-card.card-two { animation-delay: 0.55s; }
.site-screen-card.card-three { animation-delay: 1.1s; }
.site-screen-card.card-four { animation-delay: 1.65s; }

@keyframes sitePromptScan {
  0%,
  42% {
    transform: translateX(-120%);
    opacity: 0;
  }

  56% {
    opacity: 1;
  }

  78%,
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes siteSendPulse {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.64;
  }

  50% {
    transform: translateX(2px);
    opacity: 1;
  }
}

@keyframes siteBubbleSequence {
  0%,
  16% {
    opacity: 0;
    transform: translateY(6px);
  }

  27%,
  70% {
    opacity: 0.9;
    transform: translateY(0);
  }

  88%,
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@keyframes siteCardReveal {
  0%,
  24% {
    opacity: 0.48;
    transform: translateY(18%);
    filter: brightness(0.78);
  }

  42%,
  82% {
    opacity: 0.9;
    transform: translateY(2%);
    filter: brightness(1.08);
  }

  100% {
    opacity: 0.58;
    transform: translateY(12%);
    filter: brightness(0.88);
  }
}

/* AI sites screen v2: original live-site interface, not a static reference frame. */
.site-laptop-scene .laptop-screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.78)),
    radial-gradient(circle at 34% 34%, rgba(214, 122, 238, 0.09), transparent 24%),
    radial-gradient(circle at 74% 32%, rgba(112, 170, 255, 0.12), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(2, 6, 12, 0.38) 50%, rgba(0, 0, 0, 0.72)),
    url("assets/waves.webp") center / 134% auto no-repeat !important;
}

.site-screen-hero {
  grid-template-rows: auto 1fr auto auto auto !important;
  padding: 7.2% 8% 0 !important;
}

.site-screen-hero::before {
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 34%, rgba(0, 0, 0, 0.74) 100%) !important;
}

.site-screen-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  color: rgba(229, 237, 255, 0.38);
  font-size: clamp(4px, 0.34vw, 6px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-screen-status span:last-child {
  color: rgba(203, 142, 235, 0.46);
}

.site-screen-hero h3 {
  align-self: center !important;
  margin: 0 0 5.5% !important;
  letter-spacing: 0.012em !important;
}

.site-screen-hero h3 span {
  color: rgba(246, 248, 255, 0.94);
  font-size: clamp(13px, 1.12vw, 19px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-screen-hero h3 strong {
  max-width: 78%;
  margin: 4px auto 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(13px, 1.05vw, 18px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em;
  line-height: 1.08;
}

.site-screen-prompt {
  order: 4;
  width: 74% !important;
  min-height: 23px !important;
  margin-bottom: 6.4% !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(8, 10, 16, 0.72)),
    rgba(0, 0, 0, 0.7) !important;
}

.site-screen-chat {
  left: 9% !important;
  right: 9% !important;
  top: 39% !important;
  gap: 6px !important;
}

.screen-bubble {
  max-width: 68% !important;
  border-radius: 9px !important;
  font-size: clamp(4.2px, 0.36vw, 6.2px) !important;
  white-space: normal !important;
}

.screen-bubble-user {
  max-width: 58% !important;
}

.screen-bubble-ai {
  max-width: 66% !important;
}

.site-screen-gallery {
  order: 5;
  width: 92% !important;
  gap: 4% !important;
  margin-bottom: -1px !important;
}

.site-screen-card {
  aspect-ratio: 1.1 !important;
  border-radius: 10px 10px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.7)),
    radial-gradient(ellipse at 50% 26%, rgba(255, 255, 255, 0.09), transparent 40%),
    radial-gradient(ellipse at 48% 74%, rgba(133, 179, 255, 0.12), transparent 56%),
    linear-gradient(145deg, rgba(11, 16, 24, 0.9), rgba(0, 0, 0, 0.82)) !important;
  opacity: 0.62 !important;
}

.site-screen-card::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 18%;
  bottom: 20%;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(230, 238, 255, 0.32), transparent 26%),
    url("assets/ai-direct-bolid-front.png") center bottom / 128% auto no-repeat;
  opacity: 0.72;
  filter:
    grayscale(1)
    contrast(1.08)
    brightness(0.78)
    drop-shadow(0 0 12px rgba(172, 201, 255, 0.12));
}

.site-screen-card.card-two::before {
  background:
    radial-gradient(circle at 52% 35%, rgba(210, 140, 238, 0.26), transparent 30%),
    url("assets/glass-rocket-hero.png") center bottom / 96% auto no-repeat;
}

.site-screen-card.card-three::before {
  background:
    radial-gradient(circle at 52% 38%, rgba(122, 178, 255, 0.28), transparent 32%),
    url("assets/lead-glass-main.png") center / 92% auto no-repeat;
}

.site-screen-card.card-four::before {
  background:
    radial-gradient(circle at 50% 35%, rgba(238, 238, 255, 0.22), transparent 30%),
    url("assets/ai-sites-laptop-real.png") center bottom / 126% auto no-repeat;
}

.site-screen-card em {
  position: absolute;
  left: 11px;
  bottom: 8px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.48);
  font-size: clamp(4px, 0.33vw, 5.8px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-screen-card::after {
  background:
    linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.54)),
    radial-gradient(ellipse at 50% 82%, rgba(190, 214, 255, 0.16), transparent 54%) !important;
}

/* AI sites screen v3: live AI-site console assembled from native UI layers. */
.site-laptop-scene .laptop-screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.74)),
    radial-gradient(circle at 22% 44%, rgba(208, 129, 238, 0.12), transparent 20%),
    radial-gradient(circle at 72% 38%, rgba(108, 174, 255, 0.16), transparent 26%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), rgba(4, 7, 13, 0.26) 50%, rgba(0, 0, 0, 0.74)),
    url("assets/waves.webp") center / 142% auto no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 20px 54px rgba(255, 255, 255, 0.025),
    inset 0 -38px 74px rgba(0, 0, 0, 0.82) !important;
}

.site-laptop-scene .laptop-screen::before {
  opacity: 0.11 !important;
}

.site-laptop-scene .laptop-screen::after {
  opacity: 0.06 !important;
}

.site-screen-hero {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  row-gap: 6px !important;
  padding: 6.6% 8% 6.2% !important;
  overflow: hidden !important;
}

.site-screen-hero::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 48%, rgba(0, 0, 0, 0.56)),
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.06), transparent 24%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 100%) !important;
  background-size: auto, auto, 44px 44px, 44px 44px !important;
  opacity: 1 !important;
}

.site-screen-status {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 1px !important;
  color: rgba(229, 237, 255, 0.42) !important;
  font-size: clamp(4px, 0.34vw, 6px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.site-screen-status span:last-child {
  color: rgba(198, 134, 238, 0.5) !important;
}

.site-screen-title {
  position: relative;
  z-index: 4;
  width: 100%;
  margin: 3px auto 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.72);
}

.site-screen-title strong,
.site-screen-title span {
  display: block;
}

.site-screen-title strong {
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(11px, 1.12vw, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.04;
}

.site-screen-title span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(8px, 0.74vw, 12px);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.05;
}

.site-screen-chat {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 84% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.screen-bubble {
  display: block !important;
  width: fit-content !important;
  max-width: 72% !important;
  min-height: 0 !important;
  padding: 5px 8px !important;
  border-radius: 9px !important;
  color: rgba(241, 246, 255, 0.74) !important;
  border: 1px solid rgba(221, 235, 255, 0.09) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(3, 5, 10, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.34) !important;
  font-size: clamp(4.7px, 0.39vw, 6.7px) !important;
  font-weight: 600 !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  opacity: 0;
  transform: translateY(5px);
  animation: siteBubbleSequence 8s ease-in-out infinite !important;
}

.screen-bubble-user {
  align-self: flex-end !important;
  max-width: 60% !important;
  background:
    linear-gradient(100deg, rgba(116, 144, 244, 0.26), rgba(198, 111, 235, 0.19)),
    rgba(6, 6, 15, 0.72) !important;
  animation-delay: 1.05s !important;
}

.screen-bubble-ai {
  align-self: flex-start !important;
  animation-delay: 0.15s !important;
}

.screen-bubble-wide {
  max-width: 78% !important;
  animation-delay: 2.55s !important;
}

.site-screen-gallery {
  position: relative !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 5.2% !important;
  width: 84% !important;
  margin: 0 auto !important;
}

.site-screen-card {
  position: relative !important;
  display: block !important;
  aspect-ratio: 1.28 !important;
  overflow: hidden !important;
  border-radius: 9px 9px 0 0 !important;
  opacity: 0.76 !important;
  transform: translateY(12%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.7)),
    radial-gradient(circle at 34% 32%, rgba(202, 126, 236, 0.22), transparent 28%),
    radial-gradient(circle at 72% 34%, rgba(120, 178, 255, 0.18), transparent 32%),
    rgba(5, 8, 13, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(222, 236, 255, 0.045),
    0 -10px 24px rgba(0, 0, 0, 0.26) !important;
  animation: siteCardReveal 8s ease-in-out infinite !important;
}

.site-screen-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 10% 10% 23% !important;
  border-radius: 8px !important;
  opacity: 0.88 !important;
  filter: none !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 16% 76%, rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    url("assets/waves.webp") center / 150% auto no-repeat !important;
}

.site-screen-card.card-one::before {
  background:
    linear-gradient(180deg, transparent 0 34%, rgba(255, 255, 255, 0.12) 34% 36%, transparent 36% 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 18% 76%, rgba(255, 255, 255, 0.12)),
    url("assets/waves.webp") center / 150% auto no-repeat !important;
}

.site-screen-card.card-two::before {
  background:
    radial-gradient(circle at 28% 32%, rgba(205, 134, 239, 0.7), transparent 12%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 18% 74%, rgba(255, 255, 255, 0.11)),
    linear-gradient(180deg, transparent 0 58%, rgba(136, 176, 255, 0.18) 58% 66%, transparent 66% 100%),
    url("assets/waves.webp") center / 150% auto no-repeat !important;
}

.site-screen-card.card-three::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 17% 76%, rgba(255, 255, 255, 0.12)),
    linear-gradient(145deg, transparent 0 26%, rgba(126, 181, 255, 0.18) 26% 36%, transparent 36% 100%),
    radial-gradient(circle at 70% 32%, rgba(127, 184, 255, 0.42), transparent 16%),
    url("assets/waves.webp") center / 150% auto no-repeat !important;
}

.site-screen-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.6)),
    radial-gradient(ellipse at 50% 82%, rgba(190, 214, 255, 0.14), transparent 58%) !important;
}

.site-screen-card em {
  left: 9px !important;
  bottom: 7px !important;
  color: rgba(238, 244, 255, 0.55) !important;
  font-size: clamp(3.8px, 0.31vw, 5.5px) !important;
  letter-spacing: 0.13em !important;
}

.site-screen-prompt {
  position: relative !important;
  z-index: 5 !important;
  justify-self: center !important;
  order: initial !important;
  width: 78% !important;
  min-height: 23px !important;
  margin: 0 auto !important;
  padding: 0 5px 0 13px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.84), rgba(7, 9, 15, 0.78)),
    rgba(0, 0, 0, 0.74) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 28px rgba(0, 0, 0, 0.38) !important;
}

.site-screen-prompt span {
  color: rgba(245, 248, 255, 0.48) !important;
  font-size: clamp(4.8px, 0.42vw, 7px) !important;
}

.site-screen-prompt svg {
  width: 15px !important;
  height: 15px !important;
}

/* AI sites screen v4: clean split chat interface, locked to laptop display. */
.site-laptop-scene .laptop-display {
  left: 21.7% !important;
  right: 22.1% !important;
  top: 13.7% !important;
  height: 48.7% !important;
}

.site-laptop-scene .laptop-screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.76)),
    radial-gradient(circle at 28% 46%, rgba(207, 132, 238, 0.1), transparent 24%),
    radial-gradient(circle at 76% 34%, rgba(112, 174, 255, 0.14), transparent 30%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(5, 8, 14, 0.34) 54%, rgba(0, 0, 0, 0.78)),
    url("assets/waves.webp") center / 150% auto no-repeat !important;
}

.site-screen-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) 0.86fr !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  column-gap: 5.5% !important;
  row-gap: 7px !important;
  padding: 7.4% 8.4% 7% !important;
}

.site-screen-title {
  display: none !important;
}

.site-screen-status {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  font-size: clamp(4px, 0.33vw, 5.7px) !important;
}

.site-screen-chat {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 6px !important;
  margin: 0 !important;
}

.screen-bubble {
  max-width: 86% !important;
  padding: 5px 8px !important;
  font-size: clamp(4.6px, 0.38vw, 6.4px) !important;
  line-height: 1.22 !important;
  white-space: normal !important;
}

.screen-bubble-user {
  max-width: 78% !important;
}

.screen-bubble-wide {
  max-width: 92% !important;
}

.site-screen-gallery {
  grid-column: 2 !important;
  grid-row: 2 / 4 !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1.1fr 0.82fr 0.82fr !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.site-screen-card {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  border-radius: 9px !important;
  transform: none !important;
  opacity: 0.8 !important;
}

.site-screen-card::before {
  inset: 9px !important;
  border-radius: 7px !important;
}

.site-screen-card.card-one::before {
  background:
    linear-gradient(180deg, transparent 0 27%, rgba(255, 255, 255, 0.13) 27% 29%, transparent 29% 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 20% 76%, rgba(255, 255, 255, 0.1)),
    url("assets/waves.webp") center / 160% auto no-repeat !important;
}

.site-screen-card.card-two::before {
  background:
    radial-gradient(circle at 62% 34%, rgba(202, 126, 238, 0.5), transparent 18%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 20% 78%, rgba(255, 255, 255, 0.11)),
    linear-gradient(180deg, transparent 0 57%, rgba(130, 178, 255, 0.16) 57% 65%, transparent 65% 100%),
    url("assets/waves.webp") center / 165% auto no-repeat !important;
}

.site-screen-card.card-three::before {
  background:
    linear-gradient(145deg, transparent 0 30%, rgba(132, 184, 255, 0.18) 30% 42%, transparent 42% 100%),
    radial-gradient(circle at 68% 34%, rgba(126, 184, 255, 0.42), transparent 18%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 20% 78%, rgba(255, 255, 255, 0.1)),
    url("assets/waves.webp") center / 165% auto no-repeat !important;
}

.site-screen-card em {
  font-size: clamp(3.7px, 0.3vw, 5.2px) !important;
}

.site-screen-prompt {
  grid-column: 1 !important;
  grid-row: 3 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 23px !important;
  margin: 0 !important;
}

/* AI sites screen v5: stable readable state, no disappearing UI during animation. */
.site-screen-chat {
  gap: 7px !important;
}

.screen-bubble {
  max-width: 90% !important;
  padding: 6px 9px !important;
  font-size: clamp(5.2px, 0.44vw, 7.4px) !important;
  opacity: 0.78 !important;
  transform: translateY(0) !important;
  animation: screenBubbleBreathe 5.6s ease-in-out infinite !important;
}

.screen-bubble-user {
  max-width: 78% !important;
  animation-delay: 0.7s !important;
}

.screen-bubble-ai {
  animation-delay: 0s !important;
}

.screen-bubble-wide {
  max-width: 92% !important;
  animation-delay: 1.4s !important;
}

.site-screen-gallery {
  gap: 7px !important;
}

.site-screen-card {
  opacity: 0.9 !important;
  border: 1px solid rgba(222, 236, 255, 0.12) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
    radial-gradient(circle at 34% 32%, rgba(202, 126, 236, 0.28), transparent 30%),
    radial-gradient(circle at 72% 34%, rgba(120, 178, 255, 0.22), transparent 34%),
    rgba(5, 8, 13, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(128, 174, 255, 0.08) !important;
  animation: siteCardSoftGlow 6.2s ease-in-out infinite !important;
}

.site-screen-card::before {
  inset: 8px !important;
  opacity: 0.98 !important;
}

.site-screen-card::after {
  background:
    linear-gradient(180deg, transparent 32%, rgba(0, 0, 0, 0.52)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 20% 78%, rgba(255, 255, 255, 0.06)),
    radial-gradient(ellipse at 50% 82%, rgba(190, 214, 255, 0.2), transparent 58%) !important;
}

.site-screen-card em {
  color: rgba(238, 244, 255, 0.68) !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.86) !important;
}

/* AI sites laptop alignment: lock the UI plane to the real screen opening. */
.site-laptop-scene .laptop-display {
  left: 18.95% !important;
  right: 19.25% !important;
  top: 12.35% !important;
  height: 58.2% !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  clip-path: inset(0 0 0 0 round 2px) !important;
}

.site-laptop-scene .laptop-display::before,
.site-laptop-scene .laptop-display::after {
  display: none !important;
}

.site-laptop-scene .laptop-screen {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

/* AI sites laptop alignment v2: use only the inner display, not the physical bezel. */
.site-laptop-scene .laptop-display {
  left: 20.2% !important;
  right: 24.4% !important;
  top: 10.9% !important;
  height: 57% !important;
  border-radius: 1px !important;
}

.site-laptop-scene .premium-laptop {
  aspect-ratio: 1.6 !important;
}

.site-laptop-scene .laptop-screen {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.58)),
    radial-gradient(circle at 30% 45%, rgba(207, 132, 238, 0.09), transparent 26%),
    radial-gradient(circle at 74% 35%, rgba(112, 174, 255, 0.13), transparent 32%),
    url("assets/waves.webp") center / 148% auto no-repeat !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -32px 62px rgba(0, 0, 0, 0.62) !important;
}

/* AI sites laptop integration: remove the visible pasted rectangle. */
.site-laptop-scene .laptop-screen {
  background:
    radial-gradient(circle at 30% 45%, rgba(207, 132, 238, 0.09), transparent 28%),
    radial-gradient(circle at 74% 35%, rgba(112, 174, 255, 0.12), transparent 34%),
    url("assets/waves.webp") center / 148% auto no-repeat !important;
  box-shadow: none !important;
  opacity: 0.92 !important;
}

.site-screen-hero::before {
  opacity: 0.42 !important;
}

.site-laptop-scene .neuro-site-ui {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@keyframes screenBubbleBreathe {
  0%, 100% {
    opacity: 0.62;
    filter: brightness(0.9);
  }

  42%, 68% {
    opacity: 0.92;
    filter: brightness(1.12);
  }
}

@keyframes siteCardSoftGlow {
  0%, 100% {
    opacity: 0.7;
    filter: brightness(0.9);
  }

  45%, 70% {
    opacity: 0.96;
    filter: brightness(1.16);
  }
}

/* AI sites laptop v6: use user's prepared screen and overlay only the chat UI. */
.site-laptop-scene .premium-laptop {
  width: min(108%, 800px) !important;
  aspect-ratio: 1.5 !important;
  left: 53.8% !important;
  top: 51% !important;
  filter:
    drop-shadow(0 40px 92px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 34px rgba(132, 182, 255, 0.16)) !important;
}

.site-laptop-scene .premium-laptop::before,
.site-laptop-scene .premium-laptop::after,
.site-laptop-scene .laptop-base,
.site-laptop-scene .laptop-hinge,
.site-laptop-scene .laptop-keyboard,
.site-laptop-scene .laptop-trackpad,
.site-laptop-scene .base-glow {
  display: none !important;
}

.site-laptop-scene .laptop-photo {
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter:
    saturate(1.08)
    contrast(1.15)
    brightness(1.02)
    drop-shadow(0 0 18px rgba(210, 230, 255, 0.14)) !important;
}

.site-laptop-scene .laptop-display {
  z-index: 5 !important;
  left: 19.55% !important;
  right: 19.55% !important;
  top: 9.65% !important;
  height: 51.25% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: inset(0 0 0 0 round 1px) !important;
}

.site-laptop-scene .laptop-screen,
.site-laptop-scene .neuro-site-ui {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.site-laptop-scene .laptop-screen::before,
.site-laptop-scene .laptop-screen::after,
.site-screen-hero::before {
  display: none !important;
}

.site-screen-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.96fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  column-gap: 5.4% !important;
  row-gap: 7px !important;
  padding: 5.4% 5.9% 5.6% !important;
  align-items: stretch !important;
}

.site-screen-status {
  grid-column: 1 / -1 !important;
  color: rgba(230, 238, 255, 0.47) !important;
  font-size: clamp(4.6px, 0.38vw, 6.6px) !important;
  letter-spacing: 0.18em !important;
}

.site-screen-chat {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 !important;
}

.screen-bubble {
  max-width: 88% !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  color: rgba(246, 249, 255, 0.78) !important;
  border: 1px solid rgba(218, 232, 255, 0.12) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(2, 4, 8, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.26) !important;
  font-size: clamp(5.4px, 0.46vw, 7.4px) !important;
  line-height: 1.22 !important;
  opacity: 0.84 !important;
}

.screen-bubble-user {
  align-self: flex-end !important;
  max-width: 78% !important;
  background:
    linear-gradient(100deg, rgba(122, 148, 248, 0.34), rgba(202, 116, 238, 0.24)),
    rgba(10, 8, 20, 0.52) !important;
}

.screen-bubble-wide {
  max-width: 94% !important;
}

.site-screen-gallery {
  grid-column: 2 !important;
  grid-row: 2 / 4 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.site-screen-card {
  position: relative !important;
  display: grid !important;
  align-content: center !important;
  min-height: 0 !important;
  padding: 7px 7px 7px 45% !important;
  overflow: hidden !important;
  border: 1px solid rgba(220, 236, 255, 0.12) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(3, 5, 10, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 12px 24px rgba(0, 0, 0, 0.23),
    0 0 18px rgba(130, 178, 255, 0.07) !important;
  opacity: 0.9 !important;
}

.site-screen-card::before {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 7px !important;
  bottom: 7px !important;
  width: 34% !important;
  border-radius: 8px !important;
  opacity: 0.98 !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 68% 28%, rgba(205, 136, 238, 0.55), transparent 24%),
    linear-gradient(145deg, rgba(21, 27, 36, 0.94), rgba(2, 4, 8, 0.78)) !important;
  background-size: auto, 13px 13px, 13px 13px, auto, auto !important;
}

.site-screen-card.card-two::before {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 62% 26%, rgba(127, 184, 255, 0.58), transparent 24%),
    linear-gradient(145deg, rgba(18, 27, 38, 0.94), rgba(2, 4, 8, 0.78)) !important;
  background-size: auto, 13px 13px, 13px 13px, auto, auto !important;
}

.site-screen-card.card-three::before {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 64% 28%, rgba(160, 142, 255, 0.58), transparent 25%),
    linear-gradient(145deg, rgba(22, 24, 38, 0.94), rgba(2, 4, 8, 0.78)) !important;
  background-size: auto, 13px 13px, 13px 13px, auto, auto !important;
}

.site-screen-card::after {
  display: none !important;
}

.site-screen-card em,
.site-screen-card strong,
.site-screen-card small {
  position: relative;
  z-index: 2;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-screen-card em {
  color: rgba(246, 249, 255, 0.64) !important;
  font-size: clamp(4.2px, 0.34vw, 5.8px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.site-screen-card strong {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(7px, 0.58vw, 9.6px);
  line-height: 1;
}

.site-screen-card small {
  margin-top: 3px;
  color: rgba(222, 232, 255, 0.45);
  font-size: clamp(4px, 0.32vw, 5.6px);
  letter-spacing: 0.04em;
}

.site-screen-prompt {
  grid-column: 1 !important;
  grid-row: 3 !important;
  min-height: 25px !important;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid rgba(220, 236, 255, 0.1) !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(9, 10, 18, 0.44)) !important;
}

/* AI sites laptop v7: clean cutout and readable live-site interface. */
.site-laptop-scene .premium-laptop {
  width: min(96%, 735px) !important;
  aspect-ratio: 1394 / 865 !important;
  left: 55.4% !important;
  top: 50.4% !important;
  filter:
    drop-shadow(0 34px 84px rgba(0, 0, 0, 0.74))
    drop-shadow(0 0 30px rgba(118, 168, 232, 0.18)) !important;
}

.site-laptop-scene .laptop-photo {
  filter:
    saturate(1.12)
    contrast(1.2)
    brightness(0.95)
    drop-shadow(0 0 18px rgba(210, 230, 255, 0.12)) !important;
}

.site-laptop-scene .laptop-display {
  left: 16.9% !important;
  right: 16.6% !important;
  top: 4.6% !important;
  height: 59.9% !important;
  border-radius: 2px !important;
}

.site-screen-hero {
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.98fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  column-gap: 6.2% !important;
  row-gap: 8px !important;
  padding: 6.6% 7.1% 6.2% !important;
  background:
    radial-gradient(circle at 50% 4%, rgba(150, 172, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.18)) !important;
}

.site-screen-status {
  font-size: clamp(5.8px, 0.48vw, 7.8px) !important;
  color: rgba(232, 239, 255, 0.62) !important;
  letter-spacing: 0.2em !important;
}

.site-screen-status span:last-child {
  color: rgba(206, 128, 247, 0.7) !important;
}

.site-screen-chat {
  align-self: center !important;
  justify-content: center !important;
  gap: 9px !important;
}

.screen-bubble {
  max-width: 92% !important;
  padding: 8px 10px !important;
  border-radius: 11px !important;
  color: rgba(250, 252, 255, 0.88) !important;
  border-color: rgba(220, 236, 255, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 22px rgba(0, 0, 0, 0.34),
    0 0 14px rgba(116, 156, 255, 0.08) !important;
  font-size: clamp(6.5px, 0.58vw, 9px) !important;
  line-height: 1.25 !important;
  opacity: 0.96 !important;
}

.screen-bubble-user {
  color: rgba(255, 255, 255, 0.9) !important;
  background:
    linear-gradient(100deg, rgba(118, 143, 247, 0.58), rgba(202, 109, 238, 0.42)),
    rgba(9, 7, 20, 0.72) !important;
  border-color: rgba(209, 182, 255, 0.22) !important;
}

.site-screen-gallery {
  gap: 8px !important;
}

.site-screen-card {
  padding: 9px 9px 9px 43% !important;
  border-radius: 12px !important;
  border-color: rgba(220, 236, 255, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.28),
    0 0 16px rgba(128, 178, 255, 0.1) !important;
  opacity: 0.98 !important;
}

.site-screen-card::before {
  left: 8px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 31% !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 14px rgba(118, 168, 232, 0.1) !important;
}

.site-screen-card em {
  font-size: clamp(5.1px, 0.44vw, 6.8px) !important;
  color: rgba(246, 249, 255, 0.72) !important;
}

.site-screen-card strong {
  margin-top: 3px !important;
  font-size: clamp(9px, 0.78vw, 12.2px) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.site-screen-card small {
  margin-top: 3px !important;
  font-size: clamp(4.8px, 0.4vw, 6.4px) !important;
  color: rgba(225, 235, 255, 0.58) !important;
}

.site-screen-prompt {
  min-height: 29px !important;
  border-radius: 12px !important;
  border-color: rgba(220, 236, 255, 0.16) !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(12, 11, 22, 0.56)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 22px rgba(0, 0, 0, 0.24) !important;
}

.site-screen-prompt span {
  color: rgba(242, 246, 255, 0.58) !important;
  font-size: clamp(5.5px, 0.48vw, 7.6px) !important;
  letter-spacing: 0.03em !important;
}

.site-screen-prompt svg {
  color: rgba(216, 228, 255, 0.72) !important;
  filter: drop-shadow(0 0 8px rgba(161, 183, 255, 0.22)) !important;
}

/* AI sites laptop v8: make the product demo legible from the full-screen composition. */
.site-laptop-scene .premium-laptop {
  width: min(110%, 825px) !important;
  left: 56.2% !important;
  top: 50.8% !important;
}

.site-screen-hero {
  column-gap: 5.8% !important;
  row-gap: 9px !important;
  padding: 6.1% 6.6% 6% !important;
}

.site-screen-status {
  font-size: clamp(6.2px, 0.54vw, 8.4px) !important;
  color: rgba(244, 248, 255, 0.68) !important;
}

.site-screen-chat {
  gap: 10px !important;
}

.screen-bubble {
  padding: 9px 11px !important;
  font-size: clamp(7.4px, 0.66vw, 10.5px) !important;
  font-weight: 650 !important;
  line-height: 1.22 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.74) !important;
}

.screen-bubble-user {
  max-width: 84% !important;
  background:
    linear-gradient(100deg, rgba(126, 150, 255, 0.72), rgba(197, 103, 234, 0.52)),
    rgba(13, 8, 25, 0.78) !important;
}

.site-screen-gallery {
  gap: 9px !important;
}

.site-screen-card {
  padding: 10px 10px 10px 42% !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.7) !important;
}

.site-screen-card::before {
  left: 9px !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 29% !important;
}

.site-screen-card em {
  font-size: clamp(5.7px, 0.5vw, 7.6px) !important;
}

.site-screen-card strong {
  font-size: clamp(10.5px, 0.9vw, 14px) !important;
}

.site-screen-card small {
  font-size: clamp(5.4px, 0.46vw, 7px) !important;
}

.site-screen-prompt {
  min-height: 31px !important;
}

.site-screen-prompt span {
  font-size: clamp(6px, 0.52vw, 8.4px) !important;
}

/* AI sites graphite plaque: no laptop, a cinematic live AI chat object. */
.ai-chat-scene {
  overflow: visible !important;
  perspective: 1200px;
}

.ai-chat-scene::before,
.ai-chat-scene::after {
  display: none !important;
}

.ai-chat-aura,
.ai-chat-node {
  position: absolute;
  pointer-events: none;
}

.ai-chat-aura {
  left: 53%;
  top: 50%;
  border: 1px solid rgba(166, 196, 236, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  filter: drop-shadow(0 0 28px rgba(102, 151, 218, 0.12));
  opacity: 0.66;
}

.ai-chat-aura.aura-one {
  width: min(90%, 680px);
  aspect-ratio: 1.55;
  animation: aiAuraDrift 16s ease-in-out infinite;
}

.ai-chat-aura.aura-two {
  width: min(74%, 540px);
  aspect-ratio: 1.22;
  transform: translate(-50%, -50%) rotate(21deg);
  opacity: 0.34;
  animation: aiAuraDrift 19s ease-in-out infinite reverse;
}

.ai-chat-node {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(226, 235, 248, 0.72);
  box-shadow:
    0 0 14px rgba(214, 230, 255, 0.6),
    0 0 34px rgba(133, 176, 235, 0.22);
}

.ai-chat-node.node-a {
  left: 18%;
  top: 41%;
}

.ai-chat-node.node-b {
  right: 10%;
  top: 44%;
  opacity: 0.76;
}

.ai-chat-node.node-c {
  left: 54%;
  bottom: 16%;
  opacity: 0.46;
}

.ai-site-plaque {
  position: absolute;
  left: 54%;
  top: 50%;
  width: min(92%, 720px);
  min-height: clamp(360px, 38vw, 520px);
  transform: translate(-50%, -50%) rotateX(2deg);
  display: grid;
  place-items: center;
  isolation: isolate;
  filter:
    drop-shadow(0 34px 88px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 42px rgba(108, 159, 232, 0.16));
}

.ai-site-plaque::before {
  content: "";
  position: absolute;
  inset: 5% 3% 4%;
  z-index: 0;
  border-radius: 36px 36px 120px 120px / 34px 34px 82px 82px;
  clip-path: polygon(10% 0, 90% 0, 100% 15%, 86% 100%, 14% 100%, 0 15%);
  background:
    linear-gradient(112deg, transparent 4%, rgba(255, 255, 255, 0.17) 8%, transparent 15% 54%, rgba(255, 255, 255, 0.12) 62%, transparent 72%),
    radial-gradient(circle at 50% 8%, rgba(235, 241, 255, 0.22), transparent 14%),
    radial-gradient(circle at 50% 54%, rgba(128, 170, 235, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(52, 58, 72, 0.68), rgba(6, 8, 12, 0.96) 62%, rgba(0, 0, 0, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -48px 76px rgba(0, 0, 0, 0.58),
    inset 38px 0 74px rgba(255, 255, 255, 0.035),
    inset -42px 0 82px rgba(100, 136, 202, 0.08),
    0 0 0 1px rgba(216, 230, 255, 0.13);
}

.ai-site-plaque::after {
  content: "";
  position: absolute;
  inset: 9% 9% 11%;
  z-index: 1;
  border-radius: 32px 32px 96px 96px / 30px 30px 72px 72px;
  clip-path: polygon(12% 0, 88% 0, 98% 16%, 84% 100%, 16% 100%, 2% 16%);
  border: 1px solid rgba(224, 235, 255, 0.16);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 72px);
  opacity: 0.78;
}

.ai-plaque-shine {
  position: absolute;
  inset: 7% 5% 8%;
  z-index: 2;
  border-radius: inherit;
  clip-path: polygon(9% 0, 91% 0, 100% 15%, 86% 100%, 14% 100%, 0 15%);
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.18) 44%, transparent 52%),
    radial-gradient(circle at 66% 25%, rgba(172, 195, 255, 0.16), transparent 22%);
  mix-blend-mode: screen;
  opacity: 0.44;
  animation: aiPlaqueShine 7s ease-in-out infinite;
}

.ai-plaque-emblem {
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 4;
  width: clamp(54px, 5.1vw, 78px);
  height: clamp(62px, 5.8vw, 88px);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 86% 15%, 82% 73%, 50% 100%, 18% 73%, 14% 15%);
  color: rgba(236, 243, 255, 0.74);
  font-size: clamp(14px, 1.1vw, 19px);
  font-weight: 800;
  letter-spacing: 0.12em;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.018)),
    rgba(6, 8, 13, 0.62);
  border: 1px solid rgba(236, 245, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 22px rgba(148, 187, 255, 0.14);
}

.ai-chat-board {
  position: relative;
  z-index: 5;
  width: 78%;
  min-height: clamp(235px, 25vw, 342px);
  margin-top: clamp(42px, 4vw, 64px);
  padding: clamp(22px, 2.1vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.9fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(13px, 1.1vw, 18px) clamp(18px, 1.7vw, 28px);
  border: 1px solid rgba(224, 236, 255, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 74% 25%, rgba(119, 158, 235, 0.14), transparent 32%),
    radial-gradient(circle at 27% 75%, rgba(199, 112, 236, 0.1), transparent 31%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(0, 0, 0, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -28px 58px rgba(0, 0, 0, 0.38),
    0 20px 54px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(112, 156, 232, 0.09);
  overflow: hidden;
}

.ai-chat-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.28;
}

.ai-chat-board > * {
  position: relative;
  z-index: 1;
}

.ai-chat-topline {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(230, 239, 255, 0.62);
  font-size: clamp(8px, 0.64vw, 10px);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ai-chat-topline span:last-child {
  color: rgba(212, 128, 242, 0.76);
}

.ai-live-chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 0.85vw, 14px);
}

.ai-live-bubble {
  max-width: 93%;
  padding: clamp(10px, 0.9vw, 13px) clamp(12px, 1vw, 16px);
  border: 1px solid rgba(222, 235, 255, 0.15);
  border-radius: 14px;
  color: rgba(248, 251, 255, 0.86);
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 650;
  line-height: 1.35;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 26px rgba(0, 0, 0, 0.28);
  animation: aiBubblePulse 7.2s ease-in-out infinite;
}

.ai-live-bubble-user {
  align-self: flex-end;
  max-width: 84%;
  background:
    linear-gradient(100deg, rgba(127, 151, 255, 0.72), rgba(204, 101, 237, 0.5)),
    rgba(13, 9, 28, 0.72);
  animation-delay: 0.9s;
}

.ai-live-bubble-ai:nth-child(3) {
  animation-delay: 1.8s;
}

.ai-live-products {
  display: grid;
  gap: clamp(10px, 0.85vw, 14px);
  align-content: center;
}

.ai-live-card {
  position: relative;
  min-height: clamp(66px, 5.2vw, 86px);
  padding: clamp(10px, 0.9vw, 14px) clamp(12px, 1vw, 16px) clamp(10px, 0.9vw, 14px) clamp(76px, 5.8vw, 96px);
  display: grid;
  align-content: center;
  overflow: hidden;
  border: 1px solid rgba(222, 235, 255, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 28px rgba(0, 0, 0, 0.28);
  animation: aiCardPulse 8s ease-in-out infinite;
}

.ai-live-card:nth-child(2) {
  animation-delay: 1.2s;
}

.ai-live-card:nth-child(3) {
  animation-delay: 2.1s;
}

.ai-live-card::before {
  content: "";
  position: absolute;
  left: clamp(11px, 0.9vw, 15px);
  top: 50%;
  width: clamp(48px, 4vw, 64px);
  height: clamp(42px, 3.4vw, 54px);
  transform: translateY(-50%);
  border-radius: 12px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 65% 30%, rgba(199, 116, 238, 0.58), transparent 28%),
    linear-gradient(145deg, rgba(23, 28, 38, 0.94), rgba(2, 4, 8, 0.84));
  background-size: auto, 13px 13px, 13px 13px, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 16px rgba(149, 184, 255, 0.12);
}

.ai-live-card:nth-child(2)::before {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 62% 30%, rgba(111, 177, 255, 0.58), transparent 28%),
    linear-gradient(145deg, rgba(20, 30, 42, 0.94), rgba(2, 4, 8, 0.84));
  background-size: auto, 13px 13px, 13px 13px, auto, auto;
}

.ai-live-card em,
.ai-live-card strong,
.ai-live-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-live-card em {
  color: rgba(241, 247, 255, 0.66);
  font-style: normal;
  font-size: clamp(7px, 0.56vw, 9px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ai-live-card strong {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1;
}

.ai-live-card small {
  margin-top: 4px;
  color: rgba(225, 235, 255, 0.52);
  font-size: clamp(7px, 0.54vw, 9px);
}

.ai-live-input {
  grid-column: 1 / -1;
  min-height: clamp(42px, 3.4vw, 54px);
  padding: 0 clamp(14px, 1.1vw, 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(220, 236, 255, 0.14);
  border-radius: 999px;
  color: rgba(237, 244, 255, 0.58);
  font-size: clamp(9px, 0.76vw, 12px);
  font-weight: 650;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(12, 10, 22, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 28px rgba(0, 0, 0, 0.25);
}

.ai-live-input svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: rgba(226, 236, 255, 0.72);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(172, 193, 255, 0.22));
}

@keyframes aiAuraDrift {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-10deg) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) rotate(-2deg) scale(1.035);
  }
}

@keyframes aiPlaqueShine {
  0%, 100% {
    opacity: 0.28;
    transform: translateX(-10%);
  }

  48%, 62% {
    opacity: 0.62;
    transform: translateX(10%);
  }
}

@keyframes aiBubblePulse {
  0%, 100% {
    opacity: 0.74;
    transform: translateY(0);
  }

  28%, 48% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes aiCardPulse {
  0%, 100% {
    opacity: 0.78;
    filter: brightness(0.92);
  }

  38%, 58% {
    opacity: 1;
    filter: brightness(1.14);
  }
}

/* AI sites graphite plaque v2: wider hood-like composition. */
.ai-site-plaque {
  width: min(104%, 790px) !important;
  min-height: clamp(318px, 31vw, 435px) !important;
  left: 53.4% !important;
}

.ai-site-plaque::before {
  inset: 2% 2% 3% !important;
  border-radius: 34px 34px 88px 88px / 28px 28px 60px 60px !important;
  clip-path: polygon(8% 0, 92% 0, 100% 18%, 89% 100%, 11% 100%, 0 18%) !important;
}

.ai-site-plaque::after,
.ai-plaque-shine {
  inset: 7% 6% 9% !important;
  border-radius: 26px 26px 76px 76px / 24px 24px 54px 54px !important;
  clip-path: polygon(9% 0, 91% 0, 98% 17%, 88% 100%, 12% 100%, 2% 17%) !important;
}

.ai-plaque-emblem {
  top: 8% !important;
  width: clamp(44px, 4.1vw, 62px) !important;
  height: clamp(50px, 4.7vw, 70px) !important;
  font-size: clamp(11px, 0.9vw, 15px) !important;
  opacity: 0.84 !important;
}

.ai-chat-board {
  width: 84% !important;
  min-height: clamp(218px, 20vw, 292px) !important;
  margin-top: clamp(28px, 3vw, 46px) !important;
  padding: clamp(18px, 1.75vw, 26px) !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr) !important;
}

.ai-live-bubble {
  max-width: 88% !important;
  padding: clamp(9px, 0.76vw, 12px) clamp(12px, 0.95vw, 15px) !important;
  font-size: clamp(9px, 0.76vw, 12px) !important;
}

.ai-live-bubble-user {
  max-width: 78% !important;
}

.ai-live-card {
  min-height: clamp(56px, 4.3vw, 72px) !important;
  padding-left: clamp(68px, 5vw, 84px) !important;
}

.ai-live-input {
  min-height: clamp(38px, 3vw, 48px) !important;
}

/* AI sites graphite plaque v3: restore the large right-side hero scale. */
.ai-chat-scene {
  justify-self: end !important;
  width: clamp(640px, 47vw, 850px) !important;
  aspect-ratio: 1.24 !important;
  margin-right: clamp(-46px, -2.8vw, -20px) !important;
  transform: translateX(clamp(38px, 2.7vw, 62px)) !important;
}

.ai-site-plaque {
  width: min(105%, 820px) !important;
  min-height: clamp(330px, 30vw, 430px) !important;
}

.ai-chat-board {
  width: 87% !important;
  min-height: clamp(225px, 19.5vw, 300px) !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.92fr) !important;
}

.ai-live-products {
  gap: clamp(8px, 0.7vw, 12px) !important;
}

.ai-live-card {
  min-height: clamp(54px, 4vw, 68px) !important;
}

/* AI sites graphite metal v4: darker, heavier, more cinematic. */
.ai-chat-scene {
  filter:
    drop-shadow(0 38px 92px rgba(0, 0, 0, 0.76))
    drop-shadow(0 0 42px rgba(82, 129, 196, 0.12)) !important;
}

.ai-chat-aura {
  border-color: rgba(150, 181, 225, 0.075) !important;
  opacity: 0.28 !important;
  filter: drop-shadow(0 0 24px rgba(94, 139, 200, 0.08)) !important;
}

.ai-chat-node {
  width: 6px !important;
  height: 6px !important;
  background: rgba(220, 229, 242, 0.46) !important;
  box-shadow:
    0 0 10px rgba(214, 230, 255, 0.32),
    0 0 28px rgba(133, 176, 235, 0.11) !important;
}

.ai-site-plaque::before {
  background:
    linear-gradient(106deg, transparent 0 7%, rgba(255, 255, 255, 0.16) 8.4%, transparent 11% 52%, rgba(255, 255, 255, 0.105) 58%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 16%, rgba(255, 255, 255, 0.035) 34%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at 50% 10%, rgba(220, 230, 246, 0.16), transparent 22%),
    radial-gradient(ellipse at 50% 58%, rgba(84, 113, 151, 0.22), transparent 50%),
    linear-gradient(180deg, rgba(30, 34, 43, 0.98), rgba(8, 10, 15, 0.99) 48%, rgba(2, 3, 5, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 12px 22px rgba(255, 255, 255, 0.035),
    inset 0 -46px 76px rgba(0, 0, 0, 0.72),
    inset 48px 0 72px rgba(255, 255, 255, 0.026),
    inset -56px 0 84px rgba(79, 109, 164, 0.08),
    0 0 0 1px rgba(236, 244, 255, 0.16),
    0 0 0 2px rgba(0, 0, 0, 0.55),
    0 28px 76px rgba(0, 0, 0, 0.56) !important;
}

.ai-site-plaque::after {
  border-color: rgba(236, 244, 255, 0.2) !important;
  background:
    linear-gradient(90deg, transparent 7%, rgba(255, 255, 255, 0.07), transparent 19% 78%, rgba(122, 160, 226, 0.04), transparent 91%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), transparent 9%, transparent 88%, rgba(255, 255, 255, 0.065)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 74px) !important;
  opacity: 0.62 !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 24px 54px rgba(255, 255, 255, 0.018),
    inset 0 -32px 64px rgba(0, 0, 0, 0.52) !important;
}

.ai-plaque-shine {
  background:
    linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, 0.12) 47%, transparent 52%),
    radial-gradient(circle at 68% 24%, rgba(176, 197, 236, 0.095), transparent 20%) !important;
  opacity: 0.26 !important;
}

.ai-plaque-emblem {
  color: rgba(236, 243, 255, 0.58) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.012)),
    linear-gradient(180deg, rgba(26, 30, 38, 0.95), rgba(2, 3, 6, 0.9)) !important;
  border-color: rgba(236, 245, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -16px 26px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(148, 187, 255, 0.07) !important;
}

.ai-chat-board {
  border-color: rgba(225, 236, 255, 0.13) !important;
  background:
    radial-gradient(circle at 74% 25%, rgba(87, 117, 168, 0.12), transparent 34%),
    radial-gradient(circle at 27% 74%, rgba(144, 78, 176, 0.07), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(2, 3, 6, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -30px 58px rgba(0, 0, 0, 0.62),
    inset 24px 0 48px rgba(255, 255, 255, 0.012),
    inset -28px 0 54px rgba(82, 116, 180, 0.045),
    0 22px 56px rgba(0, 0, 0, 0.44),
    0 0 30px rgba(94, 138, 206, 0.06) !important;
}

.ai-chat-board::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px) !important;
  opacity: 0.18 !important;
}

.ai-chat-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 54%, rgba(255, 255, 255, 0.055) 60%, transparent 68%),
    radial-gradient(ellipse at 52% 0%, rgba(255, 255, 255, 0.06), transparent 26%);
  mix-blend-mode: screen;
  opacity: 0.48;
  animation: aiPlaqueShine 9s ease-in-out infinite;
}

.ai-chat-topline {
  color: rgba(230, 239, 255, 0.56) !important;
}

.ai-chat-topline span:last-child {
  color: rgba(218, 154, 242, 0.72) !important;
}

.ai-live-bubble {
  border-color: rgba(225, 236, 255, 0.12) !important;
  color: rgba(248, 251, 255, 0.82) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)),
    rgba(0, 0, 0, 0.74) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -12px 28px rgba(0, 0, 0, 0.36),
    0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

.ai-live-bubble-user {
  background:
    linear-gradient(100deg, rgba(92, 105, 176, 0.72), rgba(135, 61, 154, 0.6)),
    rgba(8, 6, 16, 0.82) !important;
  border-color: rgba(198, 160, 238, 0.2) !important;
}

.ai-live-card {
  border-color: rgba(225, 236, 255, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012)),
    rgba(0, 0, 0, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -14px 26px rgba(0, 0, 0, 0.35),
    0 14px 28px rgba(0, 0, 0, 0.28) !important;
}

.ai-live-card::before {
  opacity: 0.8 !important;
  filter: saturate(0.82) brightness(0.9) !important;
}

.ai-live-card strong {
  color: rgba(255, 255, 255, 0.88) !important;
}

.ai-live-input {
  border-color: rgba(225, 236, 255, 0.12) !important;
  color: rgba(237, 244, 255, 0.52) !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(6, 6, 12, 0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -16px 28px rgba(0, 0, 0, 0.42),
    0 12px 26px rgba(0, 0, 0, 0.26) !important;
}

/* AI sites cinema v5: a complete new direction, black chrome live website. */
#ai-sites .ai-chat-scene {
  justify-self: end !important;
  width: clamp(660px, 48vw, 900px) !important;
  aspect-ratio: 1.35 !important;
  margin-right: clamp(-52px, -3.1vw, -18px) !important;
  transform: translateX(clamp(34px, 2.4vw, 58px)) !important;
  overflow: visible !important;
  perspective: 1400px !important;
  filter:
    drop-shadow(0 36px 88px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 50px rgba(88, 136, 210, 0.14)) !important;
}

#ai-sites .ai-chat-scene::before,
#ai-sites .ai-chat-scene::after,
#ai-sites .ai-site-plaque,
#ai-sites .ai-chat-aura,
#ai-sites .ai-chat-node {
  display: none !important;
}

.ai-cinema-orbit,
.ai-cinema-spark {
  position: absolute;
  pointer-events: none;
}

.ai-cinema-orbit {
  left: 54%;
  top: 50%;
  border: 1px solid rgba(185, 210, 248, 0.075);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  opacity: 0.46;
  mix-blend-mode: screen;
}

.ai-cinema-orbit.orbit-a {
  width: 96%;
  aspect-ratio: 1.62;
  animation: aiAuraDrift 18s ease-in-out infinite;
}

.ai-cinema-orbit.orbit-b {
  width: 74%;
  aspect-ratio: 1.18;
  transform: translate(-50%, -50%) rotate(18deg);
  opacity: 0.22;
  animation: aiAuraDrift 21s ease-in-out infinite reverse;
}

.ai-cinema-spark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(220, 230, 245, 0.62);
  box-shadow: 0 0 18px rgba(210, 230, 255, 0.44);
}

.ai-cinema-spark.spark-a {
  left: 14%;
  top: 38%;
}

.ai-cinema-spark.spark-b {
  right: 8%;
  top: 52%;
  opacity: 0.7;
}

.ai-site-cinema {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(100%, 865px);
  aspect-ratio: 1.58;
  transform: translate(-50%, -50%) rotateX(2deg) rotateY(-4deg);
  transform-style: preserve-3d;
  border-radius: 28px;
  isolation: isolate;
}

.ai-site-cinema::before {
  content: "";
  position: absolute;
  inset: -2.2% -1.8% -3%;
  z-index: 0;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.035) 11%, transparent 23%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 12% 88%, rgba(126, 162, 214, 0.14)),
    linear-gradient(145deg, rgba(42, 46, 56, 0.95), rgba(5, 6, 9, 0.98) 48%, rgba(0, 0, 0, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -24px 46px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(224, 236, 255, 0.12),
    0 30px 84px rgba(0, 0, 0, 0.6);
}

.ai-site-cinema::after {
  content: "";
  position: absolute;
  inset: -1% 7% auto;
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  filter: blur(0.2px);
  opacity: 0.52;
}

.cinema-metal-edge {
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  z-index: 6;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), rgba(126, 174, 244, 0.22), transparent);
  opacity: 0.42;
  pointer-events: none;
}

.cinema-metal-edge.edge-top {
  top: 5.6%;
}

.cinema-metal-edge.edge-bottom {
  bottom: 6.4%;
  opacity: 0.25;
}

.cinema-screen {
  position: absolute;
  inset: 4.3% 3.6% 5.4%;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(10px, 0.85vw, 15px);
  padding: clamp(22px, 2vw, 34px) clamp(26px, 2.5vw, 42px) clamp(22px, 2vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(220, 232, 250, 0.15);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.54)),
    radial-gradient(circle at 28% 34%, rgba(255, 255, 255, 0.08), transparent 18%),
    radial-gradient(circle at 72% 42%, rgba(126, 174, 245, 0.13), transparent 28%),
    url("assets/waves.webp") center / 135% auto no-repeat,
    linear-gradient(180deg, #050608, #000);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -44px 72px rgba(0, 0, 0, 0.68),
    inset 38px 0 76px rgba(255, 255, 255, 0.02),
    inset -42px 0 78px rgba(90, 126, 196, 0.05);
}

.cinema-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(112deg, transparent 0 52%, rgba(255, 255, 255, 0.12) 58%, transparent 64%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.38;
  animation: aiPlaqueShine 8s ease-in-out infinite;
}

.cinema-screen > * {
  position: relative;
  z-index: 1;
}

.cinema-topbar {
  display: flex;
  justify-content: space-between;
  color: rgba(232, 240, 255, 0.54);
  font-size: clamp(8px, 0.6vw, 10px);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cinema-topbar span:last-child {
  color: rgba(204, 139, 239, 0.7);
}

.cinema-hero {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  text-align: center;
}

.cinema-hero h3 {
  margin: 0;
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(30px, 3.1vw, 52px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.08);
}

.cinema-hero h3 strong {
  font-size: 0.72em;
  font-weight: 650;
  letter-spacing: 0.045em;
}

.cinema-prompt {
  width: min(76%, 520px);
  min-height: clamp(36px, 3vw, 48px);
  padding: 0 clamp(14px, 1.2vw, 19px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 999px;
  color: rgba(238, 244, 255, 0.54);
  font-size: clamp(9px, 0.74vw, 12px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(9, 10, 14, 0.68));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.32);
}

.cinema-prompt svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(230, 238, 255, 0.74);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.cinema-dialog {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  top: 32%;
  min-height: 32%;
  pointer-events: none;
}

.cinema-bubble {
  position: absolute;
  max-width: 38%;
  padding: 10px 13px;
  border: 1px solid rgba(224, 236, 255, 0.12);
  border-radius: 13px;
  color: rgba(248, 252, 255, 0.78);
  font-size: clamp(8px, 0.66vw, 10.5px);
  font-weight: 650;
  line-height: 1.28;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.014)),
    rgba(0, 0, 0, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.28);
  animation: cinemaBubble 8.4s ease-in-out infinite;
}

.cinema-bubble:nth-child(1) {
  left: 0;
  top: 0;
}

.cinema-bubble:nth-child(2) {
  right: 2%;
  top: 25%;
  background:
    linear-gradient(100deg, rgba(95, 110, 189, 0.72), rgba(138, 63, 160, 0.58)),
    rgba(12, 8, 24, 0.72);
  animation-delay: 1s;
}

.cinema-bubble:nth-child(3) {
  left: 8%;
  bottom: 0;
  max-width: 44%;
  animation-delay: 1.8s;
}

.cinema-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 18px);
  align-self: end;
}

.cinema-site-card {
  position: relative;
  min-height: clamp(92px, 7.5vw, 122px);
  display: grid;
  align-content: end;
  gap: 4px;
  overflow: hidden;
  padding: clamp(12px, 1vw, 16px);
  border: 1px solid rgba(226, 236, 255, 0.13);
  border-radius: 16px 16px 8px 8px;
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(0, 0, 0, 0.72)),
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.16), transparent 20%),
    url("assets/ai-direct-bolid-front.png") center 38% / 130% auto no-repeat,
    linear-gradient(145deg, rgba(27, 31, 39, 0.95), rgba(2, 3, 6, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 32px rgba(0, 0, 0, 0.32);
  animation: siteCardSoftGlow 8s ease-in-out infinite;
}

.cinema-site-card:nth-child(2) {
  animation-delay: 0.9s;
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(0, 0, 0, 0.72)),
    radial-gradient(circle at 50% 25%, rgba(125, 174, 255, 0.14), transparent 22%),
    url("assets/waves.webp") center / 180% auto no-repeat,
    linear-gradient(145deg, rgba(27, 31, 39, 0.95), rgba(2, 3, 6, 0.92));
}

.cinema-site-card:nth-child(3) {
  animation-delay: 1.6s;
}

.cinema-site-card em {
  color: rgba(231, 238, 250, 0.58);
  font-size: clamp(7px, 0.54vw, 9px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cinema-site-card strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(12px, 0.9vw, 15px);
  line-height: 1;
}

@keyframes cinemaBubble {
  0%, 100% {
    opacity: 0.56;
    transform: translateY(0);
  }

  28%, 54% {
    opacity: 0.96;
    transform: translateY(-2px);
  }
}

/* AI sites cinema v6: clean inner layout, no text collisions. */
.cinema-screen {
  grid-template-rows: auto auto minmax(54px, 0.42fr) auto !important;
  gap: clamp(9px, 0.75vw, 13px) !important;
  padding: clamp(20px, 1.8vw, 30px) clamp(24px, 2.25vw, 38px) clamp(20px, 1.8vw, 30px) !important;
}

.cinema-hero {
  align-self: start !important;
  padding-top: clamp(8px, 0.9vw, 16px) !important;
  gap: clamp(10px, 1vw, 16px) !important;
}

.cinema-hero h3 {
  font-size: clamp(28px, 2.72vw, 44px) !important;
  line-height: 0.96 !important;
}

.cinema-hero h3 strong {
  font-size: 0.66em !important;
}

.cinema-prompt {
  width: min(68%, 470px) !important;
  min-height: clamp(32px, 2.65vw, 42px) !important;
}

.cinema-dialog {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 1fr 0.95fr 1.15fr !important;
  gap: clamp(9px, 0.8vw, 13px) !important;
  pointer-events: none;
}

.cinema-bubble {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  max-width: none !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: clamp(7px, 0.56vw, 9px) !important;
  align-self: center !important;
}

.cinema-bubble:nth-child(1) {
  justify-self: start !important;
}

.cinema-bubble:nth-child(2) {
  justify-self: center !important;
  transform: translateY(4px);
}

.cinema-bubble:nth-child(3) {
  justify-self: end !important;
}

.cinema-card-row {
  gap: clamp(10px, 0.9vw, 15px) !important;
}

.cinema-site-card {
  min-height: clamp(82px, 6.4vw, 106px) !important;
}

/* AI sites laptop v10: user-provided cinematic laptop with live typewriter prompt. */
#ai-sites .ai-laptop-stage {
  justify-self: end !important;
  position: relative !important;
  width: clamp(470px, 33vw, 600px) !important;
  aspect-ratio: 1.28 !important;
  margin-right: 0 !important;
  transform: translateX(clamp(-34px, -1.8vw, -16px)) translateY(0) !important;
  overflow: visible !important;
  isolation: isolate !important;
  perspective: 1400px !important;
  filter:
    drop-shadow(0 22px 54px rgba(0, 0, 0, 0.84))
    drop-shadow(0 0 22px rgba(112, 164, 232, 0.08)) !important;
}

#ai-sites .ai-laptop-stage::before,
#ai-sites .ai-laptop-stage::after {
  display: none !important;
}

#ai-sites .ai-laptop-stage::before {
  z-index: 0 !important;
  left: 2% !important;
  right: -12% !important;
  top: 8% !important;
  bottom: 8% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse at 58% 50%, rgba(125, 177, 244, 0.18), transparent 46%),
    radial-gradient(ellipse at 55% 70%, rgba(102, 166, 236, 0.08), transparent 52%) !important;
  filter: blur(10px) !important;
  opacity: 0.66 !important;
  animation: siteLaptopGlow 8.4s ease-in-out infinite !important;
}

#ai-sites .ai-laptop-stage::after {
  z-index: 5 !important;
  left: 13% !important;
  top: 6% !important;
  width: 88% !important;
  height: 86% !important;
  background:
    linear-gradient(108deg, transparent 0 54%, rgba(255, 255, 255, 0.12) 59%, transparent 65%),
    radial-gradient(circle at 82% 36%, rgba(170, 210, 255, 0.1), transparent 14%) !important;
  opacity: 0.28 !important;
  filter: blur(0.4px) !important;
  animation: siteLaptopSheen 7.2s ease-in-out infinite !important;
}

#ai-sites .laptop-stage-glow,
#ai-sites .laptop-stage-line {
  display: none !important;
}

#ai-sites .laptop-stage-glow {
  z-index: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
}

#ai-sites .laptop-stage-glow.glow-a {
  left: 10%;
  right: -5%;
  top: 16%;
  bottom: 8%;
  background:
    radial-gradient(ellipse at 58% 45%, rgba(111, 160, 226, 0.18), transparent 48%),
    radial-gradient(ellipse at 50% 62%, rgba(28, 39, 58, 0.72), transparent 70%);
  filter: blur(14px);
  opacity: 0.58;
}

#ai-sites .laptop-stage-glow.glow-b {
  left: 24%;
  right: 4%;
  top: 11%;
  bottom: 28%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(240, 246, 255, 0.11), transparent 38%),
    radial-gradient(ellipse at 66% 36%, rgba(108, 162, 236, 0.12), transparent 42%);
  filter: blur(18px);
  opacity: 0.5;
  animation: siteLaptopGlow 8.2s ease-in-out infinite;
}

#ai-sites .laptop-stage-line {
  z-index: 1;
  left: 20%;
  top: 18%;
  width: 72%;
  aspect-ratio: 1.6;
  border: 1px solid rgba(180, 210, 248, 0.08);
  border-radius: 50%;
  opacity: 0.38;
  transform: rotate(-8deg);
  animation: aiAuraDrift 18s ease-in-out infinite;
}

#ai-sites .laptop-stage-line.line-b {
  left: 32%;
  top: 22%;
  width: 52%;
  aspect-ratio: 1.28;
  opacity: 0.22;
  transform: rotate(17deg);
  animation-duration: 22s;
  animation-direction: reverse;
}

#ai-sites .ai-laptop-device {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50.5%;
  width: min(103%, 650px);
  transform: translate(-50%, -50%) rotateX(1.4deg);
  transform-style: preserve-3d;
  transform-origin: 50% 54%;
  animation: siteLaptopFloat 7.4s ease-in-out infinite;
}

#ai-sites .ai-laptop-device::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 11%;
  right: 11%;
  bottom: 3%;
  height: 10%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(155, 205, 255, 0.24), transparent 55%),
    radial-gradient(ellipse at 50% 62%, rgba(82, 143, 220, 0.13), transparent 70%);
  filter: blur(18px);
  opacity: 0.34;
}

#ai-sites .ai-laptop-device::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 19.7%;
  top: 18.2%;
  width: 62%;
  height: 22.5%;
  display: block !important;
  border-radius: min(17px, 1.05vw);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.9)),
    radial-gradient(ellipse at 32% 50%, rgba(120, 158, 218, 0.055), transparent 42%),
    radial-gradient(ellipse at 78% 44%, rgba(114, 168, 238, 0.04), transparent 36%),
    url("assets/waves.webp") center / 150% auto no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 0 -1px 0 rgba(255, 255, 255, 0.018);
  opacity: 0.96;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

#ai-sites .ai-laptop-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter:
    contrast(1.13)
    saturate(1.12)
    brightness(0.93)
    drop-shadow(0 24px 52px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 24px rgba(160, 210, 255, 0.14));
  animation: siteLaptopBreath 5.6s ease-in-out infinite;
}

#ai-sites .ai-laptop-typebox {
  position: absolute;
  z-index: 7;
  left: 23.2%;
  top: 28.2%;
  width: 51.8%;
  height: 11.6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.54vw, 10px);
  padding: 0 3.4% 0 3.1%;
  overflow: hidden;
  border: 0;
  border-radius: min(11px, 0.72vw);
  background:
    radial-gradient(ellipse at 18% 44%, rgba(126, 178, 255, 0.07), transparent 54%),
    linear-gradient(90deg, rgba(3, 5, 10, 0.08), rgba(6, 10, 17, 0.31) 12%, rgba(7, 12, 20, 0.34) 88%, rgba(3, 5, 10, 0.08));
  backdrop-filter: blur(7px) saturate(112%);
  -webkit-backdrop-filter: blur(7px) saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(218, 232, 255, 0.075),
    inset 0 -1px 0 rgba(112, 170, 245, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.16),
    0 0 18px rgba(80, 160, 245, 0.045);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  animation: laptopPromptReveal 7.8s ease-in-out infinite;
}

#ai-sites .ai-laptop-typebox::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 9%;
  bottom: 17%;
  display: block !important;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(210, 225, 255, 0.2) 22%, rgba(124, 175, 238, 0.15) 54%, transparent);
  opacity: 0.44;
  transform: translateX(-10%);
  animation: sitePromptLine 5.8s ease-in-out infinite;
}

#ai-sites .ai-laptop-typebox::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 46%, rgba(255, 255, 255, 0.045) 52%, transparent 59%);
  opacity: 0.22;
  transform: translateX(-30%);
  animation: sitePromptSheen 7.4s ease-in-out infinite;
  pointer-events: none;
}

#ai-sites .typewriter-copy,
#ai-sites .ai-laptop-typebox svg {
  position: relative;
  z-index: 1;
}

#ai-sites .typewriter-copy {
  display: grid;
  gap: 0.08em;
  min-width: 0;
  color: rgba(224, 231, 241, 0.74);
  font-size: clamp(6.5px, 0.5vw, 8.4px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.05em;
  text-shadow: 0 0 14px rgba(180, 204, 255, 0.08);
}

#ai-sites .type-line {
  display: block;
  width: 0;
  max-width: max-content;
  overflow: hidden;
  white-space: nowrap;
}

#ai-sites .type-line.line-one {
  animation: siteTypeLineOne 7.8s steps(29, end) infinite;
}

#ai-sites .type-line.line-two {
  animation: siteTypeLineTwo 7.8s steps(18, end) infinite;
}

#ai-sites .type-line.line-two::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.86em;
  margin-left: 0.22em;
  vertical-align: -0.08em;
  background: rgba(226, 236, 255, 0.72);
  box-shadow: 0 0 10px rgba(166, 196, 255, 0.34);
  animation: siteTypeCaret 780ms steps(1, end) infinite;
}

#ai-sites .ai-laptop-typebox svg {
  width: clamp(12px, 0.92vw, 16px);
  flex: 0 0 auto;
  fill: none;
  stroke: rgba(214, 226, 244, 0.54);
  stroke-width: 1.35;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(180, 204, 255, 0.18));
}

@keyframes laptopPromptReveal {
  0%,
  28% {
    opacity: 0;
    transform: translateY(4px) scale(0.988);
    filter: blur(4px);
  }

  42%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes laptopCodeRainReveal {
  0%,
  5% {
    opacity: 0;
  }

  14%,
  34% {
    opacity: 0.52;
  }

  52%,
  100% {
    opacity: 0;
  }
}

@keyframes laptopCodeTextFall {
  0% {
    transform: translateY(-14%);
  }

  100% {
    transform: translateY(72%);
  }
}

@keyframes laptopTouchBluePulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scaleX(0.985);
    filter: saturate(1.16) brightness(0.94);
  }

  48% {
    opacity: 0.82;
    transform: scaleX(1.015);
    filter: saturate(1.34) brightness(1.08);
  }
}

#ai-sites .laptop-code-rain,
#ai-sites .laptop-touch-blue {
  position: absolute;
  pointer-events: none;
}

#ai-sites .laptop-code-rain {
  z-index: 6;
  left: 20.4%;
  top: 18.6%;
  width: 58.8%;
  height: 28.8%;
  overflow: hidden;
  border-radius: min(14px, 0.9vw);
  background:
    linear-gradient(180deg, rgba(14, 24, 38, 0.14), rgba(5, 8, 14, 0.36)),
    repeating-linear-gradient(
      90deg,
      transparent 0 16px,
      rgba(92, 171, 255, 0.065) 16px 17px,
      transparent 17px 34px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 9px,
      rgba(132, 216, 255, 0.09) 9px 10px,
      transparent 10px 22px
    );
  box-shadow:
    inset 0 1px 0 rgba(188, 220, 255, 0.08),
    inset 0 -1px 0 rgba(94, 158, 238, 0.08),
    0 0 26px rgba(58, 139, 230, 0.08);
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  animation: laptopCodeRainReveal 7.8s ease-in-out infinite;
}

#ai-sites .laptop-code-rain::before,
#ai-sites .laptop-code-rain::after {
  content: "0101  AI SITE  1100  0110  LIVE  1011  DATA  0011  1001";
  position: absolute;
  left: 8%;
  right: 8%;
  color: rgba(138, 211, 255, 0.2);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: clamp(4px, 0.34vw, 5.5px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.26em;
  white-space: normal;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(90, 172, 255, 0.28),
    0 0 18px rgba(116, 88, 224, 0.08);
}

#ai-sites .laptop-code-rain::before {
  top: -44%;
  animation: laptopCodeTextFall 7.8s linear infinite;
}

#ai-sites .laptop-code-rain::after {
  top: -8%;
  opacity: 0.62;
  animation: laptopCodeTextFall 7.8s linear infinite reverse;
}

#ai-sites .laptop-touch-blue {
  z-index: 6;
  left: 22.6%;
  top: 57.3%;
  width: 54.8%;
  height: 15%;
  border-radius: min(12px, 0.8vw);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(92, 185, 255, 0.38), transparent 44%),
    radial-gradient(ellipse at 22% 54%, rgba(120, 88, 224, 0.18), transparent 42%),
    linear-gradient(90deg, transparent 0%, rgba(64, 174, 255, 0.18) 32%, rgba(125, 203, 255, 0.22) 50%, rgba(64, 174, 255, 0.16) 68%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(134, 219, 255, 0.11) 0 1px, transparent 1px 12px);
  box-shadow:
    inset 0 1px 0 rgba(205, 235, 255, 0.12),
    inset 0 -1px 0 rgba(84, 166, 255, 0.1),
    0 0 32px rgba(60, 154, 255, 0.24);
  opacity: 0.72;
  filter: saturate(1.25);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 58%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 58%, transparent 78%);
  animation: laptopTouchBluePulse 5.4s ease-in-out infinite;
}

@keyframes siteLaptopFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotateX(1.4deg) rotateY(0deg);
  }

  42% {
    transform: translate(-50%, -50%) translate3d(0, -5px, 0) rotateX(2.1deg) rotateY(-0.55deg);
  }

  68% {
    transform: translate(-50%, -50%) translate3d(0, -2px, 0) rotateX(1.15deg) rotateY(0.35deg);
  }
}

@keyframes siteLaptopBreath {
  0%, 100% {
    filter:
      contrast(1.12)
      saturate(1.08)
      brightness(0.9)
      drop-shadow(0 22px 50px rgba(0, 0, 0, 0.7))
      drop-shadow(0 0 18px rgba(130, 190, 255, 0.1));
  }

  50% {
    filter:
      contrast(1.17)
      saturate(1.2)
      brightness(0.99)
      drop-shadow(0 24px 56px rgba(0, 0, 0, 0.72))
      drop-shadow(0 0 30px rgba(145, 208, 255, 0.2));
  }
}

@keyframes siteLaptopGlow {
  0%, 100% {
    opacity: 0.48;
    transform: translate3d(0, 0, 0) scale(0.98);
  }

  50% {
    opacity: 0.76;
    transform: translate3d(-1.4%, 0.8%, 0) scale(1.02);
  }
}

@keyframes siteLaptopSheen {
  0%, 100% {
    opacity: 0.18;
    transform: translateX(-5%);
  }

  48%, 58% {
    opacity: 0.36;
    transform: translateX(3%);
  }
}

@keyframes siteLaptopPromptLight {
  0%, 100% {
    transform: translateX(-24%);
    opacity: 0.2;
  }

  45%, 60% {
    transform: translateX(18%);
    opacity: 0.5;
  }
}

@keyframes sitePromptLine {
  0%,
  100% {
    opacity: 0.26;
    transform: translateX(-12%);
  }

  48%,
  64% {
    opacity: 0.62;
    transform: translateX(10%);
  }
}

@keyframes sitePromptSheen {
  0%,
  100% {
    opacity: 0.08;
    transform: translateX(-34%);
  }

  50% {
    opacity: 0.24;
    transform: translateX(34%);
  }
}

@keyframes siteTypeLineOne {
  0%, 38% {
    width: 0;
  }

  66%, 100% {
    width: 100%;
  }
}

@keyframes siteTypeLineTwo {
  0%, 58% {
    width: 0;
  }

  82%, 100% {
    width: 100%;
  }
}

@keyframes siteTypeCaret {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}

/* Unified cinematic grade for the three hero objects: rocket, bolid, laptop. */
:root {
  --lead-object-grade:
    grayscale(0.08)
    saturate(0.78)
    contrast(1.16)
    brightness(0.9)
    drop-shadow(0 26px 58px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 28px rgba(112, 174, 255, 0.16));
  --lead-object-grade-lit:
    grayscale(0.06)
    saturate(0.84)
    contrast(1.18)
    brightness(0.96)
    drop-shadow(0 28px 62px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 34px rgba(118, 182, 255, 0.22));
  --lead-cool-object-grade:
    grayscale(0.08)
    sepia(0.04)
    hue-rotate(188deg)
    saturate(1.05)
    contrast(1.2)
    brightness(0.98)
    drop-shadow(0 26px 58px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 34px rgba(104, 176, 255, 0.22));
  --lead-cool-object-grade-lit:
    grayscale(0.06)
    sepia(0.04)
    hue-rotate(188deg)
    saturate(1.16)
    contrast(1.22)
    brightness(1.06)
    drop-shadow(0 28px 62px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 42px rgba(118, 192, 255, 0.3));
  --lead-laptop-blue-grade:
    grayscale(0.02)
    sepia(0.02)
    hue-rotate(190deg)
    saturate(1.3)
    contrast(1.24)
    brightness(1.04)
    drop-shadow(0 26px 58px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 32px rgba(88, 172, 255, 0.24));
  --lead-laptop-blue-grade-lit:
    grayscale(0.02)
    sepia(0.02)
    hue-rotate(190deg)
    saturate(1.46)
    contrast(1.28)
    brightness(1.12)
    drop-shadow(0 28px 64px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 44px rgba(104, 190, 255, 0.34));
  --lead-rocket-blue-metal:
    grayscale(0.04)
    sepia(0.08)
    hue-rotate(184deg)
    saturate(1.2)
    contrast(1.2)
    brightness(0.98)
    drop-shadow(0 28px 62px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 34px rgba(96, 168, 245, 0.24));
  --lead-rocket-blue-metal-lit:
    grayscale(0.035)
    sepia(0.08)
    hue-rotate(184deg)
    saturate(1.32)
    contrast(1.23)
    brightness(1.04)
    drop-shadow(0 30px 68px rgba(0, 0, 0, 0.84))
    drop-shadow(0 0 44px rgba(112, 190, 255, 0.32));
}

.visual-tools.tools-lab[data-tool-visual="direct"] .direct-bolid-object {
  filter: var(--lead-object-grade) !important;
}

.rocket-render {
  filter: var(--lead-rocket-blue-metal) !important;
}

.rocket-scene,
.visual-tools.tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene,
#ai-sites .ai-laptop-stage {
  filter:
    drop-shadow(0 0 20px rgba(98, 150, 220, 0.08))
    drop-shadow(0 26px 68px rgba(0, 0, 0, 0.46)) !important;
}

#ai-sites .ai-laptop-image {
  filter: none !important;
  animation: none !important;
}

.rocket-render {
  animation: unifiedRocketBreath 6.4s ease-in-out infinite !important;
}

@keyframes unifiedLaptopBreath {
  0%, 100% {
    filter: var(--lead-laptop-blue-grade);
  }

  50% {
    filter: var(--lead-laptop-blue-grade-lit);
  }
}

@keyframes unifiedRocketBreath {
  0%, 100% {
    filter: var(--lead-rocket-blue-metal);
  }

  50% {
    filter: var(--lead-rocket-blue-metal-lit);
  }
}

/* About rocket: visible graphite-blue metal grade, masked to the rocket body only. */
:root {
  --lead-rocket-blue-metal:
    grayscale(0.02)
    sepia(0.16)
    hue-rotate(178deg)
    saturate(1.78)
    contrast(1.2)
    brightness(0.98)
    drop-shadow(0 28px 62px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 36px rgba(86, 168, 255, 0.28));
  --lead-rocket-blue-metal-lit:
    grayscale(0.02)
    sepia(0.18)
    hue-rotate(178deg)
    saturate(2.05)
    contrast(1.24)
    brightness(1.04)
    drop-shadow(0 30px 68px rgba(0, 0, 0, 0.84))
    drop-shadow(0 0 48px rgba(104, 190, 255, 0.38));
}

.rocket-render-light {
  display: block !important;
  opacity: calc(0.34 + var(--rocket-light) * 0.28) !important;
  background:
    radial-gradient(circle clamp(125px, 13vw, 245px) at var(--rocket-x) var(--rocket-y),
      rgba(164, 218, 255, calc(0.08 + var(--rocket-light) * 0.46)),
      rgba(70, 145, 238, calc(0.17 + var(--rocket-light) * 0.26)) 34%,
      rgba(20, 65, 140, 0.2) 58%,
      transparent 76%),
    linear-gradient(104deg,
      rgba(172, 218, 255, 0.16),
      rgba(48, 116, 218, 0.26) 29%,
      rgba(6, 11, 20, 0.02) 54%,
      rgba(106, 188, 255, 0.2) 80%,
      rgba(220, 242, 255, 0.08));
  mix-blend-mode: screen !important;
  filter: saturate(1.42) brightness(1.02) blur(0.2px) !important;
  animation: rocketBlueMetalDrift 7.4s ease-in-out infinite !important;
}

.rocket-render-light::before {
  background:
    linear-gradient(116deg,
      transparent 19%,
      rgba(183, 226, 255, 0.3) 31%,
      rgba(58, 139, 246, 0.2) 42%,
      transparent 55%),
    radial-gradient(circle at 58% 38%, rgba(119, 196, 255, 0.22), transparent 19%),
    radial-gradient(circle at 42% 19%, rgba(255, 255, 255, 0.2), transparent 13%) !important;
  opacity: calc(0.22 + var(--rocket-light) * 0.34) !important;
  mix-blend-mode: screen !important;
}

.rocket-render-light::after {
  background:
    linear-gradient(92deg,
      transparent 0 43%,
      rgba(215, 240, 255, 0.5) 49%,
      rgba(88, 166, 255, 0.16) 54%,
      transparent 61%),
    radial-gradient(circle at 52% 68%, rgba(89, 159, 245, 0.18), transparent 17%) !important;
  opacity: calc(0.12 + var(--rocket-light) * 0.2) !important;
  mix-blend-mode: screen !important;
}

@keyframes rocketBlueMetalDrift {
  0%, 100% {
    filter: saturate(1.34) brightness(1) blur(0.22px);
  }

  50% {
    filter: saturate(1.58) brightness(1.06) blur(0.18px);
  }
}

/* AI design: premium hourglass object with the shared graphite-blue grade. */
#ai-design .section-layout-reverse {
  grid-template-columns: minmax(390px, 0.82fr) minmax(520px, 1fr);
  gap: clamp(56px, 5.6vw, 100px);
}

#ai-design .section-copy {
  max-width: 690px;
}

#ai-design .section-copy h2 {
  max-width: 660px;
}

#ai-design .design-metric-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 700px);
  margin-top: clamp(28px, 4vh, 44px);
  margin-bottom: var(--cta-content-gap);
}

#ai-design .design-metric-row .metric-card {
  min-height: 74px;
  padding: 14px 17px;
}

#ai-design .design-metric-row .metric-icon {
  width: 40px;
  height: 40px;
}

#ai-design .design-metric-row .metric-card em {
  color: rgba(255, 255, 255, 0.68);
}

.design-hourglass-scene {
  justify-self: center;
  width: clamp(390px, 30vw, 550px);
  aspect-ratio: 0.86;
  overflow: visible !important;
  contain: none !important;
  border-radius: 0;
  filter:
    drop-shadow(0 34px 78px rgba(0, 0, 0, 0.64))
    drop-shadow(0 0 42px rgba(116, 169, 242, 0.1)) !important;
}

.design-hourglass-scene::before,
.design-hourglass-scene::after {
  display: none !important;
}

.design-hourglass-image {
  position: absolute;
  z-index: 4;
  left: 51%;
  top: 50%;
  width: min(86%, 500px);
  height: auto;
  transform: translate3d(-50%, -50%, 0);
  object-fit: contain;
  filter:
    grayscale(0.02)
    saturate(0.92)
    contrast(1.18)
    brightness(0.9)
    drop-shadow(0 34px 62px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 28px rgba(112, 174, 255, 0.18));
  animation: designObjectBreath 6.2s ease-in-out infinite;
}

.design-aura,
.design-orbit,
.design-node {
  position: absolute;
  display: block;
  pointer-events: none;
}

.design-aura {
  z-index: 1;
  inset: 13% 9% 11% 6%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(142, 184, 248, 0.17), transparent 48%),
    radial-gradient(circle at 45% 58%, rgba(226, 180, 96, 0.08), transparent 24%),
    radial-gradient(circle at 56% 34%, rgba(255, 255, 255, 0.055), transparent 18%);
  filter: blur(22px);
  opacity: 0.62;
  mix-blend-mode: screen;
  animation: designAuraBreath 8s ease-in-out infinite;
}

.design-orbit {
  z-index: 2;
  border: 1px solid rgba(195, 218, 255, 0.16);
  border-radius: 52% 48% 54% 46%;
  box-shadow:
    inset 0 0 22px rgba(116, 169, 242, 0.04),
    0 0 36px rgba(116, 169, 242, 0.035);
  mix-blend-mode: screen;
}

.design-orbit-one {
  inset: 17% 10% 13% 9%;
  transform: rotate(-15deg);
  animation: designOrbitSlow 24s linear infinite;
}

.design-orbit-two {
  inset: 23% 19% 21% 16%;
  border-color: rgba(255, 231, 180, 0.12);
  transform: rotate(28deg);
  animation: designOrbitSlow 29s linear infinite reverse;
}

.design-node {
  z-index: 3;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(238, 246, 255, 0.78);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.38),
    0 0 28px rgba(112, 174, 255, 0.18);
  opacity: 0.62;
}

.design-node-a {
  left: 21%;
  top: 31%;
  animation: designNodePulse 4.8s ease-in-out infinite;
}

.design-node-b {
  right: 17%;
  top: 54%;
  animation: designNodePulse 5.4s ease-in-out infinite 0.7s;
}

.design-node-c {
  left: 45%;
  bottom: 15%;
  background: rgba(255, 224, 166, 0.78);
  box-shadow:
    0 0 12px rgba(255, 219, 148, 0.4),
    0 0 26px rgba(255, 181, 82, 0.14);
  animation: designNodePulse 5.2s ease-in-out infinite 1.1s;
}

.design-cta {
  margin-top: 0;
}

@keyframes designObjectBreath {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0);
    filter:
      grayscale(0.02)
      saturate(0.92)
      contrast(1.18)
      brightness(0.9)
      drop-shadow(0 34px 62px rgba(0, 0, 0, 0.78))
      drop-shadow(0 0 28px rgba(112, 174, 255, 0.18));
  }

  50% {
    transform: translate3d(-50%, calc(-50% - 7px), 0);
    filter:
      grayscale(0.07)
      saturate(0.78)
      contrast(1.2)
      brightness(0.94)
      drop-shadow(0 38px 68px rgba(0, 0, 0, 0.8))
      drop-shadow(0 0 34px rgba(112, 174, 255, 0.2));
  }
}

@keyframes designAuraBreath {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.72;
    transform: scale(1.02);
  }
}

@keyframes designOrbitSlow {
  to {
    transform: rotate(345deg);
  }
}

@keyframes designNodePulse {
  0%,
  100% {
    opacity: 0.36;
    transform: scale(0.86);
  }

  50% {
    opacity: 0.82;
    transform: scale(1.08);
  }
}

/* AI sites laptop v11: the user-provided PNG stays untouched; the live screen is rendered behind its transparent display. */
#ai-sites .ai-laptop-stage {
  width: clamp(430px, 31vw, 560px) !important;
  aspect-ratio: 1.34 !important;
  transform: translateX(clamp(-46px, -2.3vw, -22px)) translateY(0) !important;
}

#ai-sites .ai-laptop-device {
  width: min(108%, 620px) !important;
  top: 51% !important;
  animation: siteLaptopFloat 7.8s ease-in-out infinite !important;
}

#ai-sites .ai-laptop-device::after,
#ai-sites .laptop-touch-blue {
  display: none !important;
}

#ai-sites .ai-laptop-image {
  position: relative !important;
  z-index: 4 !important;
  filter: none !important;
  animation: none !important;
}

#ai-sites .laptop-screen-v2 .laptop-code-rain,
#ai-sites .laptop-screen-v2 .ai-laptop-typebox,
#ai-sites .laptop-screen-v2 .laptop-screen-waves {
  display: none !important;
}

#ai-sites .laptop-screen-layer {
  position: absolute;
  z-index: 1;
  left: 12.8%;
  top: 6.18%;
  width: 74.3%;
  height: 50.75%;
  overflow: hidden;
  border-radius: clamp(2px, 0.28vw, 5px);
  background: #010306;
  box-shadow:
    inset 0 0 54px rgba(0, 0, 0, 0.92),
    inset 0 0 1px rgba(156, 206, 255, 0.16);
  pointer-events: none;
}

#ai-sites .laptop-screen-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 9% 91%, rgba(255, 255, 255, 0.016)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 18% 84%, rgba(79, 147, 220, 0.03));
  pointer-events: none;
}

#ai-sites .laptop-screen-waves {
  position: absolute;
  inset: -18% -12%;
  z-index: 1;
  display: block;
  background:
    radial-gradient(ellipse at 58% 38%, rgba(80, 145, 220, 0.12), transparent 44%),
    radial-gradient(ellipse at 34% 58%, rgba(160, 122, 224, 0.06), transparent 38%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.72)),
    url("assets/waves.webp") center 52% / 142% auto no-repeat;
  opacity: 0.66;
  filter: grayscale(1) saturate(0.74) brightness(0.72) contrast(1.2);
  transform: translate3d(0, 0, 0) scale(1.02);
  animation: laptopScreenWaves 13s ease-in-out infinite;
}

#ai-sites .laptop-screen-waves::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(114, 185, 255, 0.035) 10px 11px, transparent 11px 25px),
    linear-gradient(105deg, transparent 0 42%, rgba(141, 189, 255, 0.07) 48%, transparent 56%),
    radial-gradient(ellipse at 72% 46%, rgba(98, 171, 255, 0.12), transparent 30%);
  opacity: 0.62;
  mix-blend-mode: screen;
  animation: laptopScreenScan 7.4s ease-in-out infinite;
}

#ai-sites .laptop-screen-layer .laptop-code-rain {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(6, 14, 24, 0.2), rgba(0, 0, 0, 0.36)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(108, 190, 255, 0.04) 18px 19px, transparent 19px 37px);
  box-shadow: none !important;
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
  animation: laptopCodeRainReveal 8.8s ease-in-out infinite !important;
}

#ai-sites .laptop-screen-layer .laptop-code-rain::before,
#ai-sites .laptop-screen-layer .laptop-code-rain::after {
  content: "0110  AI SITE  1001  FLOW  0101  CLIENT  1100  SCENE  0011  DATA  1010  OFFER  0111  LIVE  0101";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 0;
  color: rgba(130, 211, 255, 0.22);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: clamp(4px, 0.31vw, 5.2px);
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: 0.28em;
  white-space: normal;
  text-transform: uppercase;
  text-shadow:
    0 0 9px rgba(84, 178, 255, 0.36),
    0 0 18px rgba(111, 91, 224, 0.12);
  animation: laptopMatrixLift 8.8s linear infinite !important;
}

#ai-sites .laptop-screen-layer .laptop-code-rain::after {
  top: 34%;
  opacity: 0.52;
  animation-duration: 7.6s !important;
  animation-direction: reverse !important;
}

#ai-sites .laptop-screen-layer .ai-laptop-typebox {
  position: absolute !important;
  z-index: 4 !important;
  left: 18.7% !important;
  top: 37.8% !important;
  width: 62.6% !important;
  height: 17.4% !important;
  padding: 0 5.4% 0 5.2% !important;
  gap: clamp(7px, 0.58vw, 11px) !important;
  border: 1px solid rgba(169, 207, 255, 0.12) !important;
  border-radius: clamp(8px, 0.86vw, 15px) !important;
  background:
    radial-gradient(ellipse at 21% 42%, rgba(112, 170, 246, 0.08), transparent 50%),
    linear-gradient(90deg, rgba(5, 8, 13, 0.32), rgba(11, 15, 22, 0.5), rgba(5, 8, 13, 0.32)) !important;
  box-shadow:
    inset 0 1px 0 rgba(223, 237, 255, 0.075),
    inset 0 -1px 0 rgba(93, 157, 236, 0.05),
    0 14px 32px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(74, 150, 235, 0.045) !important;
  backdrop-filter: blur(8px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  animation: laptopPromptReveal 8.8s ease-in-out infinite !important;
}

#ai-sites .laptop-screen-layer .ai-laptop-typebox::before {
  display: none !important;
}

#ai-sites .laptop-screen-layer .ai-laptop-typebox::after {
  opacity: 0.18 !important;
}

#ai-sites .laptop-screen-layer .typewriter-copy {
  font-size: clamp(6px, 0.43vw, 7.4px) !important;
  line-height: 1.38 !important;
  letter-spacing: 0.055em !important;
  color: rgba(226, 235, 248, 0.76) !important;
}

#ai-sites .laptop-screen-layer .ai-laptop-typebox svg {
  width: clamp(12px, 0.8vw, 15px) !important;
  stroke: rgba(220, 232, 248, 0.58) !important;
}

#ai-sites .laptop-screen-layer .type-line.line-one {
  animation: siteTypeLineOne 8.8s steps(29, end) infinite !important;
}

#ai-sites .laptop-screen-layer .type-line.line-two {
  animation: siteTypeLineTwo 8.8s steps(18, end) infinite !important;
}

@keyframes laptopScreenWaves {
  0%, 100% {
    transform: translate3d(-1.2%, 0, 0) scale(1.03);
    opacity: 0.58;
  }

  50% {
    transform: translate3d(1.6%, -1%, 0) scale(1.055);
    opacity: 0.74;
  }
}

@keyframes laptopScreenScan {
  0%, 100% {
    transform: translateX(-8%);
    opacity: 0.34;
  }

  50% {
    transform: translateX(8%);
    opacity: 0.68;
  }
}

@keyframes laptopCodeRainReveal {
  0%, 8% {
    opacity: 0;
    transform: translateY(7%);
  }

  16%, 48% {
    opacity: 0.72;
    transform: translateY(0);
  }

  64%, 100% {
    opacity: 0;
    transform: translateY(-18%);
  }
}

@keyframes laptopMatrixLift {
  0% {
    transform: translateY(42%);
  }

  68%, 100% {
    transform: translateY(-62%);
  }
}

@keyframes laptopPromptReveal {
  0%, 54% {
    opacity: 0;
    transform: translateY(5px) scale(0.985);
    filter: blur(4px);
  }

  66%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes siteTypeLineOne {
  0%, 60% {
    width: 0;
  }

  78%, 100% {
    width: 100%;
  }
}

@keyframes siteTypeLineTwo {
  0%, 73% {
    width: 0;
  }

  91%, 100% {
    width: 100%;
  }
}

/* AI sites laptop v12: clean screen rebuild, no legacy filters or legacy prompt geometry. */
#ai-sites .ai-laptop-stage {
  filter:
    drop-shadow(0 24px 58px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 18px rgba(86, 154, 226, 0.08)) !important;
}

#ai-sites .ai-laptop-device {
  filter: none !important;
}

#ai-sites .ai-laptop-image {
  filter: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

#ai-sites .laptop-screen-v2 {
  left: 12.55% !important;
  top: 6.3% !important;
  width: 74.9% !important;
  height: 50.25% !important;
  z-index: 1 !important;
  border-radius: 3px !important;
  background: #000 !important;
  box-shadow:
    inset 0 0 56px rgba(0, 0, 0, 0.94),
    inset 0 0 42px rgba(42, 117, 190, 0.08),
    inset 0 0 1px rgba(122, 185, 255, 0.1) !important;
}

#ai-sites .laptop-screen-v2::after {
  background:
    radial-gradient(ellipse at 56% 52%, rgba(82, 160, 245, 0.08), transparent 44%),
    linear-gradient(90deg, rgba(170, 213, 255, 0.01), transparent 10% 90%, rgba(170, 213, 255, 0.01)),
    linear-gradient(180deg, rgba(116, 184, 255, 0.038), transparent 24% 80%, rgba(116, 184, 255, 0.024)) !important;
}

#ai-sites .laptop-screen-v2-bg,
#ai-sites .laptop-screen-v2-code,
#ai-sites .laptop-screen-v2-prompt {
  position: absolute;
  display: block;
  pointer-events: none;
}

#ai-sites .laptop-screen-v2-bg {
  z-index: 1;
  inset: -16% -10%;
  background:
    radial-gradient(ellipse at 50% 31%, rgba(72, 154, 248, 0.2), transparent 39%),
    radial-gradient(ellipse at 70% 58%, rgba(112, 180, 255, 0.1), transparent 33%),
    radial-gradient(ellipse at 34% 58%, rgba(119, 90, 220, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(0, 5, 12, 0.26), rgba(0, 0, 0, 0.78)),
    url("assets/waves.webp") center 52% / 142% auto no-repeat;
  opacity: 0.76;
  filter: grayscale(1) saturate(0.92) brightness(0.72) contrast(1.18);
  animation: laptopV2Waves 12s ease-in-out infinite;
}

#ai-sites .laptop-screen-v2-code {
  z-index: 2;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 82%, transparent 100%);
  animation: laptopV2CodeVisibility 8.6s ease-in-out infinite;
}

#ai-sites .laptop-screen-v2-code::before,
#ai-sites .laptop-screen-v2-code::after {
  content: "$ lead-ai --scenario product-demo  > build_route(client.intent)  > render_blocks(hero, dialog, offer)  > attach_cta(form)  > status: live";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10%;
  color: rgba(139, 218, 255, 0.34);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: clamp(6.6px, 0.48vw, 8.4px);
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: 0.07em;
  text-shadow:
    0 0 10px rgba(86, 181, 255, 0.4),
    0 0 22px rgba(112, 154, 255, 0.14);
  animation: laptopV2CodeLift 8.6s linear infinite;
}

#ai-sites .laptop-screen-v2-code::after {
  content: "const site = await AI.present(product);  if(question) answer();  gallery.open('visuals');  lead.capture();  console.ready(true);";
  top: 43%;
  opacity: 0.62;
  animation-duration: 7.2s;
  animation-direction: reverse;
}

#ai-sites .laptop-screen-v2-prompt {
  z-index: 4;
  left: 20.6%;
  top: 39.1%;
  width: 58.8%;
  height: 20.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(7px, 0.56vw, 10px);
  padding: 0 5.2% 0 5%;
  border: 1px solid rgba(142, 184, 236, 0.07);
  border-radius: clamp(8px, 0.78vw, 14px);
  background:
    radial-gradient(ellipse at 16% 36%, rgba(91, 158, 242, 0.065), transparent 46%),
    rgba(6, 9, 15, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(228, 238, 255, 0.035),
    inset 0 -1px 0 rgba(112, 175, 244, 0.028),
    0 14px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(7px) saturate(110%);
  -webkit-backdrop-filter: blur(7px) saturate(110%);
  opacity: 0;
  animation: laptopV2PromptReveal 8.6s ease-in-out infinite;
}

#ai-sites .laptop-screen-v2-copy {
  display: grid;
  gap: 0.08em;
  min-width: 0;
  color: rgba(229, 238, 250, 0.82);
  font-size: clamp(7.2px, 0.5vw, 8.8px);
  font-weight: 300;
  line-height: 1.38;
  letter-spacing: 0.055em;
  text-shadow: 0 0 14px rgba(154, 198, 255, 0.1);
}

#ai-sites .laptop-screen-v2-line {
  display: block;
  width: 0;
  max-width: max-content;
  overflow: hidden;
  white-space: nowrap;
}

#ai-sites .laptop-screen-v2-line-a {
  animation: laptopV2TypeA 8.6s steps(29, end) infinite;
}

#ai-sites .laptop-screen-v2-line-b {
  animation: laptopV2TypeB 8.6s steps(18, end) infinite;
}

#ai-sites .laptop-screen-v2-line-b::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.86em;
  margin-left: 0.22em;
  vertical-align: -0.08em;
  background: rgba(228, 238, 255, 0.7);
  box-shadow: 0 0 10px rgba(150, 194, 255, 0.3);
  animation: siteTypeCaret 780ms steps(1, end) infinite;
}

#ai-sites .laptop-screen-v2-prompt svg {
  width: clamp(13px, 0.9vw, 17px);
  flex: 0 0 auto;
  fill: none;
  stroke: rgba(218, 232, 250, 0.62);
  stroke-width: 1.35;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(160, 205, 255, 0.16));
}

@keyframes laptopV2Waves {
  0%, 100% {
    transform: translate3d(-1%, 0, 0) scale(1.035);
    opacity: 0.64;
  }

  50% {
    transform: translate3d(1.2%, -1%, 0) scale(1.055);
    opacity: 0.82;
  }
}

@keyframes laptopV2CodeVisibility {
  0%, 8% {
    opacity: 0;
    transform: translateY(6%);
  }

  15%, 48% {
    opacity: 0.7;
    transform: translateY(0);
  }

  63%, 100% {
    opacity: 0;
    transform: translateY(-17%);
  }
}

@keyframes laptopV2CodeLift {
  0% {
    transform: translateY(34%);
  }

  68%, 100% {
    transform: translateY(-58%);
  }
}

@keyframes laptopV2PromptReveal {
  0%, 55% {
    opacity: 0;
    transform: translateY(5px) scale(0.987);
    filter: blur(4px);
  }

  66%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes laptopV2TypeA {
  0%, 60% {
    width: 0;
  }

  78%, 100% {
    width: 100%;
  }
}

@keyframes laptopV2TypeB {
  0%, 73% {
    width: 0;
  }

  91%, 100% {
    width: 100%;
  }
}

/* AI sites laptop v13: command-line sequence and cooler cinematic object glow. */
#ai-sites .ai-laptop-stage {
  filter:
    drop-shadow(0 30px 74px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 28px rgba(88, 164, 238, 0.15))
    drop-shadow(0 0 72px rgba(38, 100, 178, 0.08)) !important;
}

#ai-sites .ai-laptop-device::before {
  display: block !important;
  z-index: 0 !important;
  left: 4% !important;
  right: 4% !important;
  top: 1% !important;
  bottom: -2% !important;
  height: auto !important;
  border-radius: 52% !important;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(105, 178, 255, 0.2), transparent 46%),
    radial-gradient(ellipse at 50% 61%, rgba(54, 128, 220, 0.12), transparent 62%),
    radial-gradient(ellipse at 50% 88%, rgba(95, 185, 255, 0.16), transparent 44%) !important;
  filter: blur(24px) !important;
  opacity: 0.64 !important;
}

#ai-sites .laptop-screen-v2 {
  box-shadow:
    inset 0 0 48px rgba(0, 0, 0, 0.9),
    inset 0 0 48px rgba(46, 126, 206, 0.11),
    inset 0 0 1px rgba(122, 185, 255, 0.1) !important;
}

#ai-sites .laptop-screen-v2-bg {
  background:
    radial-gradient(ellipse at 50% 29%, rgba(78, 160, 252, 0.24), transparent 42%),
    radial-gradient(ellipse at 73% 58%, rgba(110, 181, 255, 0.12), transparent 34%),
    radial-gradient(ellipse at 34% 60%, rgba(115, 94, 220, 0.06), transparent 34%),
    linear-gradient(180deg, rgba(0, 7, 16, 0.18), rgba(0, 0, 0, 0.74)),
    url("assets/waves.webp") center 52% / 144% auto no-repeat !important;
  opacity: 0.84 !important;
  filter: grayscale(1) saturate(1) brightness(0.75) contrast(1.18) !important;
}

#ai-sites .laptop-screen-v2-code {
  inset: 10% 7.2% 18% 7.8% !important;
  z-index: 3 !important;
  display: grid !important;
  align-content: start;
  gap: clamp(3px, 0.28vw, 6px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4, 13, 24, 0.05), rgba(4, 12, 22, 0.16)),
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(89, 170, 255, 0.035) 18px 19px, transparent 19px 38px);
  opacity: 1 !important;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 84%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 84%, transparent 100%) !important;
  animation: laptopTerminalLift 9.8s ease-in-out infinite !important;
}

#ai-sites .laptop-screen-v2-code::before,
#ai-sites .laptop-screen-v2-code::after {
  content: none !important;
  display: none !important;
}

#ai-sites .terminal-line {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(144, 222, 255, 0.5);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: clamp(7.6px, 0.56vw, 10px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.045em;
  text-shadow:
    0 0 10px rgba(78, 184, 255, 0.34),
    0 0 22px rgba(92, 132, 255, 0.12);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

#ai-sites .terminal-line-1 {
  color: rgba(166, 232, 255, 0.62);
  animation: laptopTerminalLine1 9.8s steps(38, end) infinite;
}

#ai-sites .terminal-line-2 {
  animation: laptopTerminalLine2 9.8s steps(36, end) infinite;
}

#ai-sites .terminal-line-3 {
  animation: laptopTerminalLine3 9.8s steps(42, end) infinite;
}

#ai-sites .terminal-line-4 {
  animation: laptopTerminalLine4 9.8s steps(45, end) infinite;
}

#ai-sites .terminal-line-5 {
  animation: laptopTerminalLine5 9.8s steps(43, end) infinite;
}

#ai-sites .terminal-line-6 {
  color: rgba(185, 228, 255, 0.72);
  animation: laptopTerminalLine6 9.8s steps(22, end) infinite;
}

#ai-sites .laptop-screen-v2-prompt {
  left: 17.5% !important;
  top: 37.2% !important;
  width: 65% !important;
  height: 24% !important;
  padding: 0 7.2% 0 6.8% !important;
  gap: clamp(9px, 0.72vw, 14px) !important;
  border-color: rgba(148, 196, 255, 0.045) !important;
  border-radius: clamp(10px, 0.95vw, 17px) !important;
  background:
    radial-gradient(ellipse at 16% 36%, rgba(82, 161, 252, 0.06), transparent 48%),
    rgba(6, 9, 15, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(230, 240, 255, 0.026),
    inset 0 -1px 0 rgba(112, 175, 244, 0.018),
    0 18px 36px rgba(0, 0, 0, 0.16) !important;
  animation: laptopV2PromptRevealLarge 9.8s ease-in-out infinite !important;
}

#ai-sites .laptop-screen-v2-copy {
  font-size: clamp(8.4px, 0.6vw, 10.6px) !important;
  line-height: 1.44 !important;
  letter-spacing: 0.06em !important;
  color: rgba(234, 242, 252, 0.86) !important;
}

#ai-sites .laptop-screen-v2-prompt svg {
  width: clamp(15px, 1.05vw, 19px) !important;
}

#ai-sites .laptop-screen-v2-line-a {
  animation: laptopPromptTypeA 9.8s steps(29, end) infinite !important;
}

#ai-sites .laptop-screen-v2-line-b {
  animation: laptopPromptTypeB 9.8s steps(18, end) infinite !important;
}

@keyframes laptopTerminalLift {
  0%, 58% {
    opacity: 1;
    transform: translateY(0);
  }

  70%, 100% {
    opacity: 0;
    transform: translateY(-24%);
  }
}

@keyframes laptopTerminalLine1 {
  0%, 5% { clip-path: inset(0 100% 0 0); opacity: 0; }
  12%, 58% { clip-path: inset(0 0 0 0); opacity: 1; }
  70%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopTerminalLine2 {
  0%, 12% { clip-path: inset(0 100% 0 0); opacity: 0; }
  20%, 58% { clip-path: inset(0 0 0 0); opacity: 0.9; }
  70%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopTerminalLine3 {
  0%, 19% { clip-path: inset(0 100% 0 0); opacity: 0; }
  29%, 58% { clip-path: inset(0 0 0 0); opacity: 0.9; }
  70%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopTerminalLine4 {
  0%, 28% { clip-path: inset(0 100% 0 0); opacity: 0; }
  39%, 58% { clip-path: inset(0 0 0 0); opacity: 0.88; }
  70%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopTerminalLine5 {
  0%, 38% { clip-path: inset(0 100% 0 0); opacity: 0; }
  50%, 58% { clip-path: inset(0 0 0 0); opacity: 0.86; }
  70%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopTerminalLine6 {
  0%, 48% { clip-path: inset(0 100% 0 0); opacity: 0; }
  56%, 60% { clip-path: inset(0 0 0 0); opacity: 1; }
  72%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV2PromptRevealLarge {
  0%, 64% {
    opacity: 0;
    transform: translateY(6px) scale(0.986);
    filter: blur(4px);
  }

  75%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes laptopPromptTypeA {
  0%, 71% {
    width: 0;
  }

  86%, 100% {
    width: 100%;
  }
}

@keyframes laptopPromptTypeB {
  0%, 82% {
    width: 0;
  }

  96%, 100% {
    width: 100%;
  }
}

/* AI sites laptop v14: after the prompt, show a premium apartment presentation slider. */
#ai-sites .laptop-screen-v2 {
  --site-laptop-sequence: 18s;
}

#ai-sites .laptop-screen-v2-code {
  animation: laptopV4TerminalLift var(--site-laptop-sequence) ease-in-out infinite !important;
}

#ai-sites .terminal-line-1 {
  animation: laptopV4TerminalLine1 var(--site-laptop-sequence) steps(38, end) infinite !important;
}

#ai-sites .terminal-line-2 {
  animation: laptopV4TerminalLine2 var(--site-laptop-sequence) steps(36, end) infinite !important;
}

#ai-sites .terminal-line-3 {
  animation: laptopV4TerminalLine3 var(--site-laptop-sequence) steps(42, end) infinite !important;
}

#ai-sites .terminal-line-4 {
  animation: laptopV4TerminalLine4 var(--site-laptop-sequence) steps(45, end) infinite !important;
}

#ai-sites .terminal-line-5 {
  animation: laptopV4TerminalLine5 var(--site-laptop-sequence) steps(43, end) infinite !important;
}

#ai-sites .terminal-line-6 {
  animation: laptopV4TerminalLine6 var(--site-laptop-sequence) steps(22, end) infinite !important;
}

#ai-sites .laptop-screen-v2-prompt {
  animation: laptopV4PromptSequence var(--site-laptop-sequence) ease-in-out infinite !important;
}

#ai-sites .laptop-screen-v2-line-a {
  animation: laptopV4PromptTypeA var(--site-laptop-sequence) steps(29, end) infinite !important;
}

#ai-sites .laptop-screen-v2-line-b {
  animation: laptopV4PromptTypeB var(--site-laptop-sequence) steps(18, end) infinite !important;
}

#ai-sites .laptop-screen-v2-demo {
  position: absolute;
  z-index: 5;
  left: 9.6%;
  top: 13%;
  width: 80.8%;
  height: 73%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(5px, 0.45vw, 8px);
  padding: clamp(8px, 0.72vw, 12px);
  overflow: hidden;
  border-radius: clamp(8px, 0.82vw, 15px);
  background:
    radial-gradient(ellipse at 28% 22%, rgba(101, 178, 255, 0.1), transparent 42%),
    radial-gradient(ellipse at 76% 70%, rgba(151, 105, 236, 0.075), transparent 42%),
    rgba(4, 8, 15, 0.34);
  border: 1px solid rgba(140, 194, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(230, 240, 255, 0.035),
    inset 0 -1px 0 rgba(92, 164, 245, 0.032),
    0 16px 34px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px) scale(0.986);
  filter: blur(4px);
  pointer-events: none;
  animation: laptopV4DemoReveal var(--site-laptop-sequence) ease-in-out infinite;
}

#ai-sites .laptop-screen-v2-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 44%, rgba(255, 255, 255, 0.035) 51%, transparent 59%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(100, 174, 255, 0.026) 28px 29px, transparent 29px 56px);
  opacity: 0.55;
  transform: translateX(-28%);
  animation: laptopV4DemoSheen 5.8s ease-in-out infinite;
}

#ai-sites .demo-screen-head,
#ai-sites .demo-apartment-slider {
  position: relative;
  z-index: 1;
}

#ai-sites .demo-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(229, 239, 252, 0.76);
  font-size: clamp(5.7px, 0.42vw, 7.2px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#ai-sites .demo-screen-head em {
  color: rgba(185, 205, 232, 0.46);
  font-style: normal;
}

#ai-sites .demo-apartment-slider {
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
}

#ai-sites .demo-apartment-track {
  height: 100%;
  display: flex;
  gap: clamp(6px, 0.56vw, 10px);
  will-change: transform;
  animation: demoApartmentSlide 5.8s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}

#ai-sites .demo-apartment-card {
  position: relative;
  flex: 0 0 44%;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: clamp(3px, 0.28vw, 5px);
  padding: clamp(5px, 0.48vw, 8px);
  border-radius: clamp(7px, 0.68vw, 12px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 48% 0%, rgba(154, 210, 255, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(14, 22, 34, 0.74), rgba(4, 7, 12, 0.78));
  border: 1px solid rgba(158, 205, 255, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(235, 244, 255, 0.05),
    0 10px 20px rgba(0, 0, 0, 0.18);
}

#ai-sites .demo-apartment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 0 52%, rgba(255, 255, 255, 0.055) 60%, transparent 69%);
  opacity: 0.55;
  pointer-events: none;
}

#ai-sites .demo-apartment-media {
  position: relative;
  display: block;
  min-height: clamp(34px, 3.2vw, 52px);
  border-radius: clamp(5px, 0.45vw, 8px);
  overflow: hidden;
  background-color: #05070b;
  box-shadow:
    inset 0 0 0 1px rgba(170, 215, 255, 0.045),
    inset 0 -18px 28px rgba(0, 0, 0, 0.48);
}

#ai-sites .demo-apartment-media::before,
#ai-sites .demo-apartment-media::after {
  content: "";
  position: absolute;
  inset: 0;
}

#ai-sites .demo-apartment-media::before {
  background:
    linear-gradient(180deg, rgba(137, 190, 245, 0.18), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(172, 210, 255, 0.11) 13px 14px, transparent 14px 26px),
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(172, 210, 255, 0.08) 9px 10px, transparent 10px 20px);
  opacity: 0.7;
}

#ai-sites .demo-apartment-media::after {
  background:
    radial-gradient(circle at 76% 24%, rgba(190, 224, 255, 0.38), transparent 12%),
    linear-gradient(140deg, transparent 0 36%, rgba(225, 238, 255, 0.16) 48%, transparent 58%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.34), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.58;
  animation: demoApartmentLight 4.6s ease-in-out infinite;
}

#ai-sites .demo-apartment-media-b::before {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(174, 210, 255, 0.18), transparent 36%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 0 9%, transparent 9% 15%, rgba(255, 255, 255, 0.08) 15% 21%, transparent 21%),
    repeating-linear-gradient(90deg, rgba(135, 195, 255, 0.12) 0 2px, transparent 2px 16px);
}

#ai-sites .demo-apartment-media-c::before {
  background:
    radial-gradient(ellipse at 34% 26%, rgba(110, 190, 255, 0.22), transparent 38%),
    radial-gradient(ellipse at 78% 70%, rgba(172, 112, 235, 0.16), transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(190, 224, 255, 0.1) 17px 18px, transparent 18px 32px);
}

#ai-sites .demo-apartment-media-d::before {
  background:
    linear-gradient(135deg, rgba(220, 236, 255, 0.16), transparent 35%),
    repeating-linear-gradient(90deg, rgba(96, 182, 255, 0.14) 0 3px, transparent 3px 20px),
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(170, 210, 255, 0.08) 10px 11px, transparent 11px 23px);
}

#ai-sites .demo-apartment-card strong {
  color: rgba(242, 247, 255, 0.88);
  font-size: clamp(8px, 0.64vw, 10.5px);
  line-height: 1;
}

#ai-sites .demo-apartment-card em {
  color: rgba(189, 208, 232, 0.55);
  font-size: clamp(5.8px, 0.43vw, 7px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@keyframes laptopV4TerminalLift {
  0%, 50% {
    opacity: 1;
    transform: translateY(0);
  }

  62%, 100% {
    opacity: 0;
    transform: translateY(-28%);
  }
}

@keyframes laptopV4TerminalLine1 {
  0%, 4% { clip-path: inset(0 100% 0 0); opacity: 0; }
  11%, 50% { clip-path: inset(0 0 0 0); opacity: 1; }
  62%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV4TerminalLine2 {
  0%, 10% { clip-path: inset(0 100% 0 0); opacity: 0; }
  18%, 50% { clip-path: inset(0 0 0 0); opacity: 0.9; }
  62%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV4TerminalLine3 {
  0%, 17% { clip-path: inset(0 100% 0 0); opacity: 0; }
  27%, 50% { clip-path: inset(0 0 0 0); opacity: 0.9; }
  62%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV4TerminalLine4 {
  0%, 26% { clip-path: inset(0 100% 0 0); opacity: 0; }
  37%, 50% { clip-path: inset(0 0 0 0); opacity: 0.88; }
  62%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV4TerminalLine5 {
  0%, 36% { clip-path: inset(0 100% 0 0); opacity: 0; }
  47%, 51% { clip-path: inset(0 0 0 0); opacity: 0.86; }
  62%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV4TerminalLine6 {
  0%, 46% { clip-path: inset(0 100% 0 0); opacity: 0; }
  54%, 56% { clip-path: inset(0 0 0 0); opacity: 1; }
  64%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV4PromptSequence {
  0%, 58% {
    opacity: 0;
    transform: translateY(6px) scale(0.986);
    filter: blur(4px);
  }

  67%, 76% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  84%, 100% {
    opacity: 0;
    transform: translateY(-5px) scale(0.992);
    filter: blur(3px);
  }
}

@keyframes laptopV4PromptTypeA {
  0%, 64% {
    width: 0;
  }

  75%, 100% {
    width: 100%;
  }
}

@keyframes laptopV4PromptTypeB {
  0%, 69% {
    width: 0;
  }

  80%, 100% {
    width: 100%;
  }
}

@keyframes laptopV4DemoReveal {
  0%, 78% {
    opacity: 0;
    transform: translateY(8px) scale(0.986);
    filter: blur(4px);
  }

  86%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes laptopV4DemoSheen {
  0%, 100% {
    transform: translateX(-38%);
    opacity: 0.18;
  }

  45% {
    transform: translateX(38%);
    opacity: 0.58;
  }
}

@keyframes demoApartmentSlide {
  0%, 24% {
    transform: translateX(0);
  }

  38%, 58% {
    transform: translateX(-49%);
  }

  72%, 100% {
    transform: translateX(-98%);
  }
}

@keyframes demoApartmentLight {
  0%, 100% {
    opacity: 0.45;
    transform: translateX(-4%);
  }

  50% {
    opacity: 0.78;
    transform: translateX(5%);
  }
}

/* AI sites laptop v15: calmer sequence, sequential prompt typing and apartment plans. */
#ai-sites .laptop-screen-v2 {
  --site-laptop-sequence: 24s;
}

#ai-sites .laptop-screen-v2-code {
  animation: laptopV5TerminalLift var(--site-laptop-sequence) ease-in-out infinite !important;
}

#ai-sites .terminal-line {
  color: rgba(144, 222, 255, 0.44) !important;
  text-shadow:
    0 0 8px rgba(78, 184, 255, 0.24),
    0 0 18px rgba(92, 132, 255, 0.08) !important;
}

#ai-sites .terminal-line-1 {
  color: rgba(150, 222, 255, 0.52) !important;
  animation: laptopV5TerminalLine1 var(--site-laptop-sequence) steps(38, end) infinite !important;
}

#ai-sites .terminal-line-2 {
  animation: laptopV5TerminalLine2 var(--site-laptop-sequence) steps(36, end) infinite !important;
}

#ai-sites .terminal-line-3 {
  animation: laptopV5TerminalLine3 var(--site-laptop-sequence) steps(42, end) infinite !important;
}

#ai-sites .terminal-line-4 {
  animation: laptopV5TerminalLine4 var(--site-laptop-sequence) steps(45, end) infinite !important;
}

#ai-sites .terminal-line-5 {
  animation: laptopV5TerminalLine5 var(--site-laptop-sequence) steps(43, end) infinite !important;
}

#ai-sites .terminal-line-6 {
  color: rgba(144, 222, 255, 0.44) !important;
  animation: laptopV5TerminalLine6 var(--site-laptop-sequence) steps(22, end) infinite !important;
}

#ai-sites .laptop-screen-v2-prompt {
  animation: laptopV5PromptSequence var(--site-laptop-sequence) ease-in-out infinite !important;
}

#ai-sites .laptop-screen-v2-line-a {
  animation: laptopV5PromptTypeA var(--site-laptop-sequence) steps(29, end) infinite !important;
}

#ai-sites .laptop-screen-v2-line-b {
  animation: laptopV5PromptTypeB var(--site-laptop-sequence) steps(18, end) infinite !important;
}

#ai-sites .laptop-screen-v2-demo {
  animation: laptopV5DemoReveal var(--site-laptop-sequence) ease-in-out infinite !important;
}

#ai-sites .demo-apartment-track {
  animation: demoApartmentSlideV5 var(--site-laptop-sequence) cubic-bezier(0.62, 0, 0.2, 1) infinite !important;
}

#ai-sites .demo-apartment-media {
  background:
    linear-gradient(180deg, rgba(8, 15, 24, 0.96), rgba(2, 5, 10, 0.94)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(166, 212, 255, 0.09),
    inset 0 0 24px rgba(62, 137, 225, 0.08),
    inset 0 -16px 26px rgba(0, 0, 0, 0.52) !important;
}

#ai-sites .demo-apartment-media::before {
  opacity: 0.86 !important;
  background:
    linear-gradient(90deg, transparent 10%, rgba(176, 218, 255, 0.22) 10.6% 11.5%, transparent 11.5% 88%, rgba(176, 218, 255, 0.2) 88.5% 89.3%, transparent 89.3%),
    linear-gradient(90deg, transparent 31%, rgba(176, 218, 255, 0.17) 31.6% 32.3%, transparent 32.3% 62%, rgba(176, 218, 255, 0.16) 62.5% 63.3%, transparent 63.3%),
    linear-gradient(0deg, transparent 14%, rgba(176, 218, 255, 0.2) 14.7% 15.5%, transparent 15.5% 48%, rgba(176, 218, 255, 0.16) 48.5% 49.3%, transparent 49.3% 84%, rgba(176, 218, 255, 0.2) 84.5% 85.3%, transparent 85.3%),
    radial-gradient(circle at 72% 26%, rgba(168, 215, 255, 0.28), transparent 8%),
    radial-gradient(ellipse at 38% 72%, rgba(92, 176, 255, 0.1), transparent 34%) !important;
}

#ai-sites .demo-apartment-media::after {
  opacity: 0.5 !important;
  background:
    radial-gradient(circle at 78% 24%, rgba(198, 228, 255, 0.34), transparent 10%),
    linear-gradient(135deg, transparent 0 38%, rgba(225, 240, 255, 0.12) 50%, transparent 61%),
    linear-gradient(90deg, transparent 0 18%, rgba(108, 184, 255, 0.09) 18% 20%, transparent 20%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.36), transparent 72%) !important;
}

#ai-sites .demo-apartment-media-b::before {
  background:
    linear-gradient(90deg, transparent 9%, rgba(176, 218, 255, 0.2) 9.7% 10.6%, transparent 10.6% 91%, rgba(176, 218, 255, 0.19) 91.2% 92%, transparent 92%),
    linear-gradient(90deg, transparent 24%, rgba(176, 218, 255, 0.17) 24.5% 25.3%, transparent 25.3% 46%, rgba(176, 218, 255, 0.16) 46.6% 47.5%, transparent 47.5% 70%, rgba(176, 218, 255, 0.16) 70.6% 71.4%, transparent 71.4%),
    linear-gradient(0deg, transparent 13%, rgba(176, 218, 255, 0.2) 13.5% 14.4%, transparent 14.4% 39%, rgba(176, 218, 255, 0.16) 39.5% 40.4%, transparent 40.4% 65%, rgba(176, 218, 255, 0.16) 65.5% 66.4%, transparent 66.4% 86%, rgba(176, 218, 255, 0.2) 86.4% 87.2%, transparent 87.2%),
    radial-gradient(circle at 31% 32%, rgba(164, 218, 255, 0.22), transparent 8%),
    radial-gradient(ellipse at 66% 72%, rgba(92, 176, 255, 0.1), transparent 34%) !important;
}

#ai-sites .demo-apartment-media-c::before {
  background:
    linear-gradient(90deg, transparent 11%, rgba(176, 218, 255, 0.2) 11.6% 12.4%, transparent 12.4% 87%, rgba(176, 218, 255, 0.19) 87.6% 88.5%, transparent 88.5%),
    linear-gradient(90deg, transparent 37%, rgba(176, 218, 255, 0.16) 37.6% 38.5%, transparent 38.5% 74%, rgba(176, 218, 255, 0.16) 74.5% 75.4%, transparent 75.4%),
    linear-gradient(0deg, transparent 16%, rgba(176, 218, 255, 0.2) 16.5% 17.3%, transparent 17.3% 57%, rgba(176, 218, 255, 0.16) 57.6% 58.5%, transparent 58.5% 83%, rgba(176, 218, 255, 0.2) 83.5% 84.4%, transparent 84.4%),
    radial-gradient(circle at 72% 64%, rgba(172, 112, 235, 0.2), transparent 9%),
    radial-gradient(ellipse at 36% 28%, rgba(92, 176, 255, 0.12), transparent 34%) !important;
}

#ai-sites .demo-apartment-media-d::before {
  background:
    linear-gradient(90deg, transparent 8%, rgba(176, 218, 255, 0.2) 8.6% 9.4%, transparent 9.4% 90%, rgba(176, 218, 255, 0.2) 90.5% 91.3%, transparent 91.3%),
    linear-gradient(90deg, transparent 28%, rgba(176, 218, 255, 0.17) 28.5% 29.4%, transparent 29.4% 55%, rgba(176, 218, 255, 0.16) 55.5% 56.4%, transparent 56.4%),
    linear-gradient(0deg, transparent 12%, rgba(176, 218, 255, 0.2) 12.5% 13.4%, transparent 13.4% 42%, rgba(176, 218, 255, 0.16) 42.6% 43.4%, transparent 43.4% 73%, rgba(176, 218, 255, 0.16) 73.6% 74.4%, transparent 74.4% 86%, rgba(176, 218, 255, 0.2) 86.5% 87.4%, transparent 87.4%),
    radial-gradient(circle at 58% 28%, rgba(164, 218, 255, 0.24), transparent 8%),
    radial-gradient(ellipse at 42% 72%, rgba(92, 176, 255, 0.1), transparent 32%) !important;
}

@keyframes laptopV5TerminalLift {
  0%, 45% {
    opacity: 1;
    transform: translateY(0);
  }

  55%, 100% {
    opacity: 0;
    transform: translateY(-28%);
  }
}

@keyframes laptopV5TerminalLine1 {
  0%, 4% { clip-path: inset(0 100% 0 0); opacity: 0; }
  10%, 45% { clip-path: inset(0 0 0 0); opacity: 0.86; }
  55%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV5TerminalLine2 {
  0%, 9% { clip-path: inset(0 100% 0 0); opacity: 0; }
  17%, 45% { clip-path: inset(0 0 0 0); opacity: 0.76; }
  55%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV5TerminalLine3 {
  0%, 16% { clip-path: inset(0 100% 0 0); opacity: 0; }
  25%, 45% { clip-path: inset(0 0 0 0); opacity: 0.76; }
  55%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV5TerminalLine4 {
  0%, 24% { clip-path: inset(0 100% 0 0); opacity: 0; }
  34%, 45% { clip-path: inset(0 0 0 0); opacity: 0.72; }
  55%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV5TerminalLine5 {
  0%, 32% { clip-path: inset(0 100% 0 0); opacity: 0; }
  42%, 46% { clip-path: inset(0 0 0 0); opacity: 0.68; }
  55%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV5TerminalLine6 {
  0%, 39% { clip-path: inset(0 100% 0 0); opacity: 0; }
  47%, 49% { clip-path: inset(0 0 0 0); opacity: 0.58; }
  57%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes laptopV5PromptSequence {
  0%, 48% {
    opacity: 0;
    transform: translateY(6px) scale(0.986);
    filter: blur(4px);
  }

  55%, 70% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  76%, 100% {
    opacity: 0;
    transform: translateY(-5px) scale(0.992);
    filter: blur(3px);
  }
}

@keyframes laptopV5PromptTypeA {
  0%, 54% {
    width: 0;
  }

  62%, 100% {
    width: 100%;
  }
}

@keyframes laptopV5PromptTypeB {
  0%, 64% {
    width: 0;
  }

  72%, 100% {
    width: 100%;
  }
}

@keyframes laptopV5DemoReveal {
  0%, 72% {
    opacity: 0;
    transform: translateY(8px) scale(0.986);
    filter: blur(4px);
  }

  80%, 96% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.994);
    filter: blur(3px);
  }
}

@keyframes demoApartmentSlideV5 {
  0%, 80% {
    transform: translateX(0);
  }

  87% {
    transform: translateX(0);
  }

  94% {
    transform: translateX(-49%);
  }

  100% {
    transform: translateX(-98%);
  }
}

/* AI sites benefit polish: keep dividers optically centered inside the cards. */
#ai-sites .site-benefit-card {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  column-gap: 18px !important;
}

#ai-sites .site-benefit-card::after {
  left: 67px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 1px !important;
  height: 28px !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(225, 238, 255, 0.18) 26%,
    rgba(225, 238, 255, 0.18) 74%,
    transparent
  ) !important;
  opacity: 0.9 !important;
}

#ai-sites .site-benefit-icon {
  justify-self: center !important;
}

#ai-sites .site-benefit-card em {
  align-self: center !important;
}

#ai-tools .tool-tab > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  transform: none !important;
}

#ai-sites .site-cta svg {
  background: none !important;
  box-shadow: none !important;
}

#ai-sites .site-cta span {
  color: rgba(240, 246, 255, 0.86) !important;
  letter-spacing: 0.13em !important;
}

#ai-sites .site-cta:hover svg {
  background: none !important;
  box-shadow: none !important;
}

/* Contacts: private jet cinematic scene in the shared graphite / blue light style. */
#contacts .contact-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(560px, 100%) !important;
  max-width: 560px !important;
  gap: 14px !important;
  margin-top: clamp(24px, 4vh, 42px) !important;
}

#contacts .contact-panel .contact-card {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  min-height: 74px !important;
  padding: 14px 15px !important;
}

#contacts .contact-panel .contact-card > span {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  align-items: center !important;
}

#contacts .contact-panel .contact-card strong,
#contacts .contact-panel .contact-card em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#contacts .contact-panel .contact-card strong {
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 8.8px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

#contacts .contact-panel .contact-card em {
  color: rgba(239, 246, 255, 0.9) !important;
  font-size: 9.7px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

#contacts .section-layout-reverse {
  grid-template-columns: minmax(500px, 0.92fr) minmax(420px, 0.9fr);
  gap: clamp(58px, 5.4vw, 100px);
}

#contacts .section-copy {
  max-width: 620px;
}

.contact-jet-scene {
  justify-self: center;
  width: clamp(470px, 36vw, 660px);
  aspect-ratio: 1.55;
  overflow: visible !important;
  contain: none !important;
  border-radius: 0;
  isolation: isolate;
  transform: translateX(clamp(-20px, -1.4vw, -8px));
  filter:
    drop-shadow(0 34px 76px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 44px rgba(104, 154, 218, 0.13)) !important;
}

.contact-jet-scene::before,
.contact-jet-scene::after {
  content: "";
  position: absolute;
  display: block !important;
  pointer-events: none;
  mix-blend-mode: screen;
}

.contact-jet-scene::before {
  z-index: 0;
  inset: 13% 5% 10% 2%;
  border-radius: 999px;
  border: 1px solid rgba(176, 214, 255, 0.035);
  background:
    radial-gradient(ellipse at 55% 45%, rgba(88, 132, 194, 0.16), transparent 58%),
    linear-gradient(116deg, transparent 26%, rgba(255, 255, 255, 0.024), transparent 54%);
  box-shadow:
    inset 0 0 38px rgba(119, 170, 238, 0.024),
    0 0 58px rgba(76, 121, 184, 0.07);
  opacity: 0.58;
  transform: rotate(-7deg);
  animation: contactJetPlateDrift 14s ease-in-out infinite;
}

.contact-jet-scene::after {
  z-index: 2;
  left: 14%;
  right: 9%;
  top: 66%;
  height: 1px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(144, 201, 255, 0.02) 18%,
      rgba(234, 243, 255, 0.17) 48%,
      rgba(207, 226, 255, 0.04) 74%,
      transparent);
  filter: blur(0.25px);
  opacity: 0.24;
  transform: rotate(-12deg);
  animation: contactJetHorizon 6.8s ease-in-out infinite;
}

.contact-jet-aura,
.contact-jet-orbit,
.contact-flight-trail,
.contact-jet-node {
  position: absolute;
  display: block;
  pointer-events: none;
}

.contact-jet-aura {
  z-index: 1;
  inset: 3% -2% 1% -5%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 54% 45%, rgba(91, 137, 203, 0.18), transparent 53%),
    radial-gradient(ellipse at 26% 69%, rgba(228, 235, 255, 0.035), transparent 24%);
  filter: blur(31px);
  opacity: 0.54;
  mix-blend-mode: screen;
  animation: contactJetAuraBreath 7.6s ease-in-out infinite;
}

.contact-jet-orbit {
  z-index: 2;
  display: block !important;
  border: 1px solid rgba(178, 213, 255, 0.032);
  border-radius: 999px;
  box-shadow: none;
  filter: blur(0.35px);
  opacity: 0.22;
  mix-blend-mode: screen;
}

.contact-jet-orbit-a {
  inset: 20% 10% 18% 7%;
  transform: rotate(-9deg);
  animation: contactJetOrbit 38s linear infinite;
}

.contact-jet-orbit-b {
  display: none !important;
}

.contact-flight-trail {
  z-index: 3;
  left: 13%;
  height: 1px;
  border-radius: 999px;
  transform: rotate(-12deg);
  transform-origin: left center;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(122, 188, 255, 0.045) 13%,
      rgba(231, 240, 255, 0.22) 38%,
      rgba(213, 176, 99, 0.1) 58%,
      transparent 92%);
  filter: blur(0.2px);
  opacity: 0.26;
  mix-blend-mode: screen;
  animation: contactTrailFlow 4.8s ease-in-out infinite;
}

.contact-flight-trail::after {
  content: "";
  position: absolute;
  inset: -12px -16px;
  background: linear-gradient(90deg, transparent, rgba(110, 176, 255, 0.06), transparent 78%);
  filter: blur(10px);
}

.contact-flight-trail.trail-a {
  top: 64%;
  width: 56%;
}

.contact-flight-trail.trail-b {
  top: 71%;
  left: 20%;
  width: 38%;
  opacity: 0.2;
  animation-delay: 0.7s;
}

.contact-flight-trail.trail-c {
  top: 54%;
  left: 30%;
  width: 44%;
  opacity: 0.16;
  animation-delay: 1.15s;
}

.contact-jet-node {
  z-index: 5;
  width: 8px;
  height: 8px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(238, 246, 255, 0.78);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.38),
    0 0 28px rgba(112, 174, 255, 0.18);
  opacity: 0.42;
}

.contact-jet-node.node-a {
  left: 20%;
  top: 28%;
  animation: contactJetNodePulse 4.8s ease-in-out infinite;
}

.contact-jet-node.node-b {
  right: 16%;
  bottom: 24%;
  background: rgba(255, 224, 166, 0.68);
  box-shadow:
    0 0 12px rgba(255, 219, 148, 0.32),
    0 0 26px rgba(255, 181, 82, 0.1);
  animation: contactJetNodePulse 5.6s ease-in-out infinite 0.8s;
}

.contact-jet-image {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(94%, 610px);
  height: auto;
  transform: translate3d(-50%, -50%, 0) rotate(-1.5deg);
  object-fit: contain;
  filter:
    grayscale(0.02)
    saturate(0.92)
    contrast(1.19)
    brightness(0.98)
    drop-shadow(0 34px 62px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 32px rgba(112, 166, 232, 0.18));
  animation: contactJetFlight 6.6s ease-in-out infinite;
}

@keyframes contactJetFlight {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(-1.5deg);
    filter:
      grayscale(0.02)
      saturate(0.92)
      contrast(1.19)
      brightness(0.98)
      drop-shadow(0 34px 62px rgba(0, 0, 0, 0.78))
      drop-shadow(0 0 32px rgba(112, 166, 232, 0.18));
  }

  50% {
    transform: translate3d(calc(-50% + 7px), calc(-50% - 6px), 0) rotate(-0.8deg);
    filter:
      grayscale(0.02)
      saturate(0.95)
      contrast(1.2)
      brightness(1)
      drop-shadow(0 36px 68px rgba(0, 0, 0, 0.8))
      drop-shadow(0 0 38px rgba(112, 166, 232, 0.2));
  }
}

@keyframes contactJetPlateDrift {
  0%,
  100% {
    opacity: 0.48;
    transform: translate3d(-0.5%, 0.6%, 0) rotate(-7deg) scale(0.99);
  }

  50% {
    opacity: 0.64;
    transform: translate3d(0.8%, -0.6%, 0) rotate(-6deg) scale(1.01);
  }
}

@keyframes contactJetHorizon {
  0%,
  100% {
    opacity: 0.18;
    transform: translateX(-2%) rotate(-12deg) scaleX(0.92);
  }

  48% {
    opacity: 0.38;
    transform: translateX(2%) rotate(-12deg) scaleX(1.03);
  }
}

@keyframes contactJetAuraBreath {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(0.985);
  }

  50% {
    opacity: 0.82;
    transform: scale(1.025);
  }
}

@keyframes contactJetOrbit {
  to {
    transform: rotate(349deg);
  }
}

@keyframes contactTrailFlow {
  0%,
  100% {
    opacity: 0.22;
    transform: translateX(-1%) rotate(-13deg) scaleX(0.94);
  }

  46% {
    opacity: 0.54;
    transform: translateX(2%) rotate(-13deg) scaleX(1.04);
  }
}

@keyframes contactJetNodePulse {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(0.84);
  }

  50% {
    opacity: 0.82;
    transform: scale(1.08);
  }
}

@keyframes homeLightTracePass {
  0%,
  76% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-12deg) scaleX(0.72);
  }

  78% {
    opacity: 0;
  }

  83% {
    opacity: 0.22;
    transform: translate3d(42vw, 6vh, 0) rotate(-12deg) scaleX(0.92);
  }

  93% {
    opacity: 0.04;
    transform: translate3d(126vw, 20vh, 0) rotate(-12deg) scaleX(1.08);
  }

  100% {
    opacity: 0;
    transform: translate3d(132vw, 22vh, 0) rotate(-12deg) scaleX(1.08);
  }
}

@media (max-width: 980px) {
  #ai-sites .ai-laptop-stage {
    width: min(94vw, 680px) !important;
    margin-right: 0 !important;
    transform: translateY(-10px) !important;
  }

  #ai-design .section-layout-reverse {
    grid-template-columns: 1fr;
  }

  #ai-design .section-copy {
    order: 1;
  }

  .design-hourglass-scene {
    order: 2;
    width: min(78vw, 410px);
  }

  #ai-design .design-metric-row {
    grid-template-columns: 1fr;
  }

  #contacts .section-layout-reverse {
    grid-template-columns: 1fr;
  }

  .contact-jet-scene {
    order: 2;
    width: min(88vw, 560px);
    transform: translateX(0);
  }
}

.site-legal {
  position: absolute;
  right: clamp(18px, 2.4vw, 42px);
  bottom: clamp(14px, 2vh, 28px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(235, 241, 255, 0.36);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  pointer-events: auto;
}

.site-legal::before {
  content: "";
  width: clamp(28px, 4vw, 62px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 230, 255, 0.38));
}

.site-legal a {
  color: rgba(238, 243, 255, 0.48);
  transition:
    color 220ms ease,
    text-shadow 220ms ease;
}

.site-legal a:hover,
.site-legal a:focus-visible {
  color: rgba(250, 252, 255, 0.88);
  text-shadow: 0 0 16px rgba(143, 184, 255, 0.45);
  outline: none;
}

.policy-page {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 78% 10%, rgba(96, 126, 175, 0.19), transparent 32%),
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.08), transparent 28%),
    #000;
}

.policy-root {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.policy-page::before {
  content: "";
  position: fixed;
  inset: -9vmax;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/waves.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.18;
  filter: grayscale(1) contrast(1.45) brightness(0.48) blur(1px);
  transform: scale(1.08);
  animation: policyWaves 18s ease-in-out infinite alternate;
}

.policy-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.74)),
    radial-gradient(circle at 52% 18%, transparent 0 32%, rgba(0, 0, 0, 0.5) 72%);
}

.policy-shell {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(34px, 7vh, 84px) 0 clamp(56px, 9vh, 110px);
}

.policy-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.policy-backdrop span {
  position: absolute;
  border: 0;
  border-radius: 999px;
  opacity: 0.34;
  filter: blur(26px);
  background: radial-gradient(circle, rgba(99, 137, 202, 0.12), transparent 68%);
  transform: rotate(-12deg);
}

.policy-backdrop span:nth-child(1) {
  width: 54vw;
  height: 30vw;
  top: 10vh;
  right: -10vw;
}

.policy-backdrop span:nth-child(2) {
  width: 34vw;
  height: 21vw;
  left: -8vw;
  top: 42vh;
  opacity: 0.35;
}

.policy-backdrop span:nth-child(3) {
  width: 48vw;
  height: 22vw;
  right: 8vw;
  bottom: -10vw;
  opacity: 0.28;
  transform: rotate(18deg);
}

.policy-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 18px 0 12px;
  border: 1px solid rgba(219, 232, 255, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(100, 133, 180, 0.07)),
    rgba(6, 9, 13, 0.48);
  color: rgba(236, 242, 255, 0.8);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 18px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

.policy-back span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(171, 197, 255, 0.22), rgba(210, 127, 243, 0.16));
  color: rgba(255, 255, 255, 0.9);
  font-size: 22px;
  line-height: 1;
}

.policy-back:hover,
.policy-back:focus-visible {
  color: #fff;
  border-color: rgba(229, 240, 255, 0.38);
  transform: translateX(-2px);
  outline: none;
}

.policy-hero {
  display: grid;
  gap: 18px;
  max-width: 790px;
  margin: clamp(38px, 7vh, 72px) 0 clamp(28px, 5vh, 54px);
}

.policy-hero h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(46px, 6.2vw, 96px);
  font-weight: 230;
  line-height: 0.96;
  letter-spacing: 0;
}

.policy-hero p {
  max-width: 650px;
  margin: 0;
  color: rgba(221, 228, 240, 0.58);
  font-size: clamp(15px, 1.32vw, 19px);
  font-weight: 360;
  line-height: 1.72;
}

.policy-card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 54px);
  border: 1px solid rgba(207, 226, 255, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.085), rgba(90, 120, 170, 0.035) 45%, rgba(0, 0, 0, 0.34)),
    rgba(5, 8, 12, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 44px 110px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(85, 133, 205, 0.08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.policy-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(147, 182, 255, 0.12), transparent 34%);
  opacity: 0.36;
  transform: translateX(-14%) rotate(-6deg);
}

.policy-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: clamp(18px, 3vh, 30px);
  margin-bottom: clamp(18px, 3vh, 28px);
  border-bottom: 1px solid rgba(207, 226, 255, 0.12);
  color: rgba(230, 238, 255, 0.54);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.policy-content {
  position: relative;
  z-index: 1;
  columns: 2 360px;
  column-gap: clamp(32px, 5vw, 72px);
}

.policy-content h2 {
  break-after: avoid;
  margin: 0 0 16px;
  color: rgba(249, 251, 255, 0.88);
  font-size: clamp(19px, 1.7vw, 27px);
  font-weight: 330;
  line-height: 1.18;
  letter-spacing: 0;
}

.policy-content p {
  margin: 0 0 18px;
  color: rgba(224, 231, 242, 0.62);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 360;
  line-height: 1.72;
}

@keyframes policyWaves {
  from {
    transform: scale(1.08) translate3d(-1.5%, 0, 0);
  }

  to {
    transform: scale(1.13) translate3d(1.5%, -1%, 0);
  }
}

@media (max-width: 760px) {
  .site-legal {
    right: 14px;
    bottom: 10px;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  .site-legal::before {
    width: 42px;
  }

  .policy-shell {
    width: min(100% - 28px, 1120px);
    padding-top: 26px;
  }

  .policy-hero h1 {
    font-size: clamp(40px, 14vw, 62px);
  }

  .policy-card {
    border-radius: 16px;
  }
}

/* Responsive refinement pass: keep the cinematic desktop intact, but make every page usable on tablets and phones. */
html,
body,
.site-shell,
.hero {
  max-width: 100%;
}

.section-copy,
.section-copy h2,
.section-copy p,
.tool-tab,
.metric-card,
.site-benefit-card,
.contact-card {
  min-width: 0;
}

.section-copy h2,
.section-copy p {
  overflow-wrap: break-word;
}

@media (max-width: 1280px) {
  .hero {
    padding-inline: clamp(82px, 8vw, 128px);
  }

  .section-layout,
  .section-layout-reverse,
  .tools-layout {
    width: min(84vw, 1120px);
    gap: clamp(34px, 4vw, 70px);
  }

  .section-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.86fr);
  }

  .section-layout-reverse {
    grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1fr);
  }

  .tools-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.76fr);
  }

  .section-copy h2 {
    font-size: clamp(34px, 4.1vw, 54px);
  }

  .metric-card,
  .site-benefit-card,
  .contact-card,
  .tool-tab {
    min-width: 0;
  }

  #ai-sites .ai-laptop-stage {
    width: clamp(380px, 34vw, 510px) !important;
    transform: translateX(clamp(-30px, -1.5vw, -10px)) !important;
  }

  #ai-design .section-layout-reverse {
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1fr);
  }

  .design-hourglass-scene {
    width: clamp(340px, 29vw, 500px);
  }

  .contact-jet-scene {
    width: clamp(410px, 38vw, 600px);
  }
}

@media (max-width: 1080px) {
  .hero {
    padding-inline: clamp(78px, 8vw, 100px);
    padding-block: clamp(66px, 7vh, 92px) clamp(76px, 8vh, 104px);
  }

  .section-layout,
  .section-layout-reverse,
  .tools-layout {
    width: min(86vw, 960px);
    gap: clamp(26px, 3vw, 46px);
  }

  .section-copy {
    max-width: 600px;
  }

  .section-copy h2 {
    max-width: 600px;
    font-size: clamp(32px, 4.6vw, 50px);
  }

  .section-copy p,
  .tool-panel p {
    max-width: 560px;
    font-size: clamp(13px, 1.35vw, 16px);
    line-height: 1.58;
  }

  .tool-tabs {
    width: min(100%, 560px);
  }

  .tool-copy-stack {
    max-width: 560px;
  }

  .metric-row,
  .site-benefit-row {
    max-width: 620px;
  }

  .right-claim {
    opacity: 0.42;
  }
}

@media (max-width: 920px) {
  .hero {
    padding: 74px 78px 92px;
  }

  .page {
    align-items: center;
    overflow: hidden;
  }

  .section-layout,
  .section-layout-reverse,
  .tools-layout,
  #ai-design .section-layout-reverse {
    grid-template-columns: 1fr;
    width: min(78vw, 680px);
    min-height: auto;
    gap: 0;
  }

  .section-layout-reverse .section-copy,
  #ai-design .section-copy {
    order: 0;
  }

  .section-copy {
    z-index: 8;
    max-width: 640px;
  }

  .section-copy h2 {
    max-width: 640px;
    font-size: clamp(34px, 6.1vw, 56px);
  }

  .metric-row,
  .site-benefit-row,
  .contact-panel {
    margin-top: clamp(18px, 2.8vh, 26px);
  }

  .metric-row,
  .design-metric-row,
  .site-benefit-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, 620px) !important;
  }

  .metric-card,
  .site-benefit-card,
  .contact-card {
    min-height: 58px;
    padding: 12px 14px;
  }

  .glass-visual,
  .tools-lab,
  #ai-sites .ai-laptop-stage,
  .design-hourglass-scene,
  .contact-jet-scene {
    position: absolute !important;
    z-index: 2;
    pointer-events: none;
  }

  .glass-visual {
    right: -10vw !important;
    bottom: -8vh !important;
    opacity: 0.36 !important;
  }

  .tools-lab[data-tool-visual="direct"] {
    right: -24vw !important;
    bottom: -5vh !important;
    width: min(66vw, 560px) !important;
    opacity: 0.3 !important;
    transform: none !important;
  }

  #ai-sites .ai-laptop-stage {
    right: -14vw !important;
    bottom: -2vh !important;
    width: min(62vw, 480px) !important;
    opacity: 0.34 !important;
    transform: none !important;
  }

  .design-hourglass-scene {
    left: -12vw !important;
    bottom: -6vh !important;
    width: min(56vw, 380px) !important;
    opacity: 0.34 !important;
  }

  .contact-jet-scene {
    right: -20vw !important;
    bottom: 2vh !important;
    width: min(68vw, 500px) !important;
    opacity: 0.34 !important;
    transform: none !important;
  }

  .right-claim {
    display: none;
  }
}

@media (max-width: 680px) {
  .hero {
    padding: 70px 18px 84px;
  }

  .page {
    padding: 70px 18px 76px;
  }

  .section-layout,
  .section-layout-reverse,
  .tools-layout,
  #ai-design .section-layout-reverse {
    width: min(92vw, 480px);
  }

  .section-kicker {
    grid-template-columns: 42px auto;
    gap: 11px;
    margin-bottom: 15px;
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .section-copy h2 {
    max-width: 94vw;
    margin-bottom: 14px;
    font-size: clamp(31px, 10.4vw, 46px);
    line-height: 1.02;
  }

  .section-copy p,
  .tool-panel p {
    max-width: 92vw;
    font-size: clamp(12px, 3.55vw, 14px);
    line-height: 1.48;
  }

  .metric-row,
  .design-metric-row,
  .site-benefit-row,
  .contact-panel {
    grid-template-columns: 1fr !important;
    gap: 8px;
    width: min(100%, 430px) !important;
    margin-top: 16px;
  }

  .metric-card,
  .site-benefit-card,
  .contact-card {
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
  }

  .metric-icon,
  .site-benefit-icon,
  .contact-icon {
    width: 32px;
    height: 32px;
  }

  .tool-tabs {
    grid-template-columns: 1fr;
    width: min(100%, 430px);
    gap: 8px;
  }

  .tool-tab {
    min-height: 50px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding-inline: 12px;
    column-gap: 12px;
  }

  .tool-tab::after {
    left: 54px;
  }

  .tool-tab span {
    width: 28px;
    height: 28px;
    font-size: 7px;
  }

  .tool-tab strong {
    white-space: normal;
    font-size: 9px;
  }

  .tool-copy-stack {
    min-height: clamp(190px, 28vh, 240px);
    margin-top: 12px;
  }

  .tool-cta {
    min-height: 48px;
    gap: 14px;
    margin-top: 18px;
    padding-right: 18px;
  }

  .tool-cta::after,
  .tool-cta::before,
  .tool-cta svg {
    width: 48px;
    height: 48px;
  }

  .tool-cta svg {
    padding: 15px;
  }

  .tool-cta span {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }

  .logo-stage {
    width: min(92vw, 358px);
    max-width: calc(100vw - 36px);
  }

  .brand-subtitle,
  .brand-subtitle-light {
    left: 8%;
    right: 8%;
    bottom: 6%;
    font-size: clamp(8px, 2.8vw, 12px);
  }

  .glass-visual,
  .tools-lab,
  #ai-sites .ai-laptop-stage,
  .design-hourglass-scene,
  .contact-jet-scene {
    filter: saturate(0.92) brightness(0.72) !important;
  }

  .tools-lab[data-tool-visual="direct"] {
    right: -30vw !important;
    bottom: -5vh !important;
    width: min(92vw, 390px) !important;
    opacity: 0.22 !important;
  }

  #ai-sites .ai-laptop-stage {
    right: -24vw !important;
    bottom: -4vh !important;
    width: min(86vw, 350px) !important;
    opacity: 0.2 !important;
  }

  .design-hourglass-scene {
    left: -24vw !important;
    bottom: -6vh !important;
    width: min(80vw, 320px) !important;
    opacity: 0.22 !important;
  }

  .contact-jet-scene {
    right: -42vw !important;
    bottom: 3vh !important;
    width: min(100vw, 390px) !important;
    opacity: 0.24 !important;
  }

  .site-legal {
    right: 12px;
    bottom: 9px;
    max-width: 72vw;
    text-align: right;
    gap: 8px;
    font-size: 7px;
    letter-spacing: 0.11em;
  }
}

@media (max-width: 560px) {
  .side-rail {
    top: 12px;
    left: 12px;
    width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 4px;
    border-radius: 18px;
    transform: none;
    overflow: hidden;
  }

  .side-rail:hover {
    width: 54px;
    height: 54px;
  }

  .side-rail.is-open,
  .side-rail.is-open:hover {
    width: min(82vw, 262px);
    height: auto;
    min-height: 390px;
    padding: 8px 0 14px;
    border-radius: 22px;
    overflow: hidden;
  }

  .side-rail::before,
  .side-rail:hover::before {
    display: none;
  }

  .side-rail.is-open::before {
    display: block;
    left: 32px;
    top: 82px;
    bottom: 62px;
  }

  .side-nav,
  .telegram-link {
    display: none;
  }

  .side-rail.is-open .side-nav {
    display: grid;
    gap: 6px;
    margin-top: 10px;
  }

  .side-rail.is-open .telegram-link {
    display: flex;
    width: 230px;
    min-height: 36px;
    margin-top: 10px;
    padding-left: 16px;
  }

  .side-rail.is-open .telegram-link span {
    opacity: 1;
    transform: translateX(0);
  }

  .menu-toggle {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .menu-link {
    width: 230px;
    min-height: 32px;
    padding-left: 66px;
    font-size: 9.5px;
  }

  .menu-link::before {
    left: 29px;
  }

  .menu-link::after {
    left: 46px;
  }

  .contact-panel {
    width: min(100%, 420px) !important;
  }
}

@media (max-width: 420px) {
  #contacts .contact-panel {
    gap: 12px !important;
  }

  #contacts .contact-panel .contact-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 72px !important;
    padding: 12px 10px !important;
  }

  #contacts .contact-panel .contact-card::after {
    left: 52px !important;
  }

  #contacts .contact-panel .contact-icon {
    width: 34px !important;
    height: 34px !important;
  }

  #contacts .contact-panel .contact-card strong {
    font-size: 7.6px !important;
    letter-spacing: 0.11em !important;
  }

  #contacts .contact-panel .contact-card em {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    font-size: 9px !important;
    line-height: 1.18 !important;
  }
}

@media (max-height: 720px) and (min-width: 681px) {
  .hero {
    padding-block: 54px 68px;
  }

  .section-copy h2 {
    margin-bottom: 14px;
    font-size: clamp(30px, 3.55vw, 48px);
  }

  .section-copy p,
  .tool-panel p {
    line-height: 1.45;
  }

  .metric-row,
  .site-benefit-row,
  .contact-panel,
  .tool-tabs {
    margin-top: 18px;
  }

  .tool-copy-stack {
    min-height: 168px;
  }

  .metric-card,
  .site-benefit-card,
  .contact-card {
    min-height: 56px;
  }
}

/* Mobile release polish: gestures, readable lockup, visible cinema objects, lighter GPU load. */
.page {
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.home-light-trace {
  height: 0.5px;
  opacity: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(143, 177, 226, 0.01) 24%,
      rgba(217, 236, 255, 0.105) 50%,
      rgba(127, 163, 220, 0.026) 76%,
      transparent 100%);
  filter:
    blur(1.2px)
    drop-shadow(0 0 18px rgba(118, 166, 232, 0.045));
}

@media (hover: hover) and (pointer: fine) {
  .home-light-trace {
    animation-duration: 42s;
  }

  .trace-b {
    animation-duration: 53s;
  }

  .trace-c {
    animation-duration: 61s;
  }
}

@media (max-width: 680px) {
  html,
  body,
  .site-shell {
    overscroll-behavior: none;
  }

  .site-shell {
    touch-action: none;
  }

  .hero {
    padding: 66px 12px 82px !important;
  }

  .page {
    padding: 66px 18px 78px !important;
    transform: translate3d(0, 16px, 0) scale(0.992) !important;
    transition:
      opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 720ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .page.is-active {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .site-shell[data-direction="next"] .page.is-exiting,
  .site-shell[data-direction="prev"] .page.is-exiting {
    transform: translate3d(0, -12px, 0) scale(0.994) !important;
  }

  .page.is-active .section-kicker,
  .page.is-active .section-copy h2,
  .page.is-active .section-copy p,
  .page.is-active .metric-row,
  .page.is-active .tool-tabs,
  .page.is-active .tool-copy-stack,
  .page.is-active .tool-cta,
  .page.is-active .contact-panel {
    animation: mobileSectionRise 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .page.is-active .section-copy h2 { animation-delay: 50ms; }
  .page.is-active .section-copy p { animation-delay: 110ms; }
  .page.is-active .metric-row,
  .page.is-active .tool-tabs,
  .page.is-active .contact-panel { animation-delay: 170ms; }
  .page.is-active .tool-copy-stack,
  .page.is-active .tool-cta { animation-delay: 220ms; }

  .section-layout,
  .section-layout-reverse,
  .tools-layout,
  #ai-design .section-layout-reverse {
    min-height: calc(100svh - 146px);
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    width: min(92vw, 480px) !important;
    gap: 0 !important;
  }

  .section-layout-reverse .section-copy {
    order: 0 !important;
  }

  .section-copy {
    z-index: 4;
  }

  .section-copy h2 {
    max-width: min(92vw, 430px) !important;
    font-size: clamp(30px, 9.4vw, 44px) !important;
    line-height: 1.04 !important;
  }

  .section-copy p,
  .tool-panel p {
    max-width: min(91vw, 430px) !important;
  }

  .brand-lockup {
    align-self: center;
    width: 100%;
  }

  .logo-stage {
    width: min(96vw, 430px) !important;
    max-width: calc(100vw - 18px) !important;
    aspect-ratio: 2172 / 850 !important;
    transform: translateY(-1vh) !important;
  }

  .logo-viewport,
  .logo-canvas {
    height: 80% !important;
  }

  .brand-subtitle,
  .brand-subtitle-light {
    left: 7.2% !important;
    right: 7.2% !important;
    bottom: 4.2% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 0.58fr repeat(7, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    column-gap: 0 !important;
    width: auto !important;
    font-size: clamp(9px, 3.25vw, 13px) !important;
    line-height: 1 !important;
  }

  .subtitle-letter {
    min-width: 0 !important;
    text-align: center !important;
  }

  .subtitle-space {
    width: auto !important;
  }

  .menu-toggle {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    margin-left: calc(var(--rail-center) - 23px) !important;
  }

  .menu-toggle span {
    left: 50% !important;
    top: 50% !important;
    width: 24px !important;
    height: 2px !important;
    transform: translate(-50%, -6px) !important;
    transform-origin: center !important;
  }

  .menu-toggle span:last-child {
    width: 18px !important;
    transform: translate(-50%, 6px) !important;
  }

  .side-rail.is-open .menu-toggle span:first-child {
    top: 50% !important;
    width: 24px !important;
    transform: translate(-50%, -50%) rotate(42deg) !important;
  }

  .side-rail.is-open .menu-toggle span:last-child {
    top: 50% !important;
    width: 24px !important;
    transform: translate(-50%, -50%) rotate(-42deg) !important;
  }

  .glass-visual,
  .tools-lab,
  #ai-sites .ai-laptop-stage,
  .design-hourglass-scene,
  .contact-jet-scene {
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: saturate(0.98) brightness(0.78) contrast(1.08) !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .page.is-active .glass-visual,
  .page.is-active .tools-lab,
  #ai-sites.page.is-active .ai-laptop-stage,
  .page.is-active .design-hourglass-scene,
  .page.is-active .contact-jet-scene {
    animation: mobileVisualFade 920ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  }

  #about .rocket-scene {
    top: 8vh !important;
    right: -22vw !important;
    bottom: auto !important;
    width: min(84vw, 330px) !important;
    height: min(48vh, 330px) !important;
    opacity: 0.36 !important;
  }

  .visual-metric-row,
  .direct-bolid-vector {
    display: none !important;
  }

  .tools-lab[data-tool-visual="direct"] {
    top: 17vh !important;
    right: -34vw !important;
    bottom: auto !important;
    width: min(110vw, 460px) !important;
    height: min(43vh, 310px) !important;
    opacity: 0.36 !important;
  }

  #ai-sites .ai-laptop-stage {
    top: 9vh !important;
    right: -24vw !important;
    bottom: auto !important;
    width: min(94vw, 390px) !important;
    height: min(45vh, 315px) !important;
    opacity: 0.4 !important;
  }

  .design-hourglass-scene {
    top: 8vh !important;
    left: -23vw !important;
    bottom: auto !important;
    width: min(82vw, 310px) !important;
    height: min(50vh, 340px) !important;
    opacity: 0.36 !important;
  }

  .contact-jet-scene {
    top: 11vh !important;
    right: -28vw !important;
    bottom: auto !important;
    width: min(100vw, 390px) !important;
    height: min(44vh, 310px) !important;
    opacity: 0.36 !important;
  }
}

@media (max-width: 420px) {
  .section-copy h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  .logo-stage {
    width: min(98vw, 390px) !important;
  }

  .brand-subtitle,
  .brand-subtitle-light {
    left: 7.8% !important;
    right: 7.8% !important;
    bottom: 4.8% !important;
    font-size: clamp(8.5px, 3.15vw, 11px) !important;
  }
}

/* Final mobile composition pass: keep the one-screen feel, but give the graphics their own premium stage. */
@media (max-width: 680px) {
  .hero {
    padding: 74px 14px 86px !important;
  }

  .page {
    padding: 74px 18px 86px !important;
    transform: translate3d(0, 10px, 0) scale(0.996) !important;
    transition:
      opacity 440ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 540ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .page.is-active {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .page:not(.is-active):not(.is-exiting) .glass-visual,
  .page:not(.is-active):not(.is-exiting) .tools-lab,
  .page:not(.is-active):not(.is-exiting) .ai-laptop-stage,
  .page:not(.is-active):not(.is-exiting) .design-hourglass-scene,
  .page:not(.is-active):not(.is-exiting) .contact-jet-scene {
    animation-play-state: paused !important;
  }

  .section-layout,
  .section-layout-reverse,
  .tools-layout,
  #ai-design .section-layout-reverse {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(178px, 29svh) minmax(0, auto) !important;
    align-content: start !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: clamp(18px, 3.2svh, 28px) !important;
    min-height: calc(100svh - 160px) !important;
    width: min(calc(100vw - 96px), 430px) !important;
    margin-left: clamp(58px, 15vw, 76px) !important;
    margin-right: 0 !important;
  }

  .section-copy,
  .section-layout-reverse .section-copy {
    order: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 4 !important;
  }

  .section-kicker {
    margin-bottom: clamp(12px, 2svh, 18px) !important;
  }

  .section-copy h2 {
    max-width: 100% !important;
    font-size: clamp(28px, 8.6vw, 39px) !important;
    line-height: 1.05 !important;
  }

  .section-copy p,
  .tool-panel p {
    max-width: 100% !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.48 !important;
  }

  .metric-row,
  .site-benefit-row,
  .design-metric-row,
  .contact-panel {
    gap: 10px !important;
  }

  .glass-visual,
  .tools-lab,
  #ai-sites .ai-laptop-stage,
  .design-hourglass-scene,
  .contact-jet-scene {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0.72 !important;
    filter: saturate(1.04) brightness(0.82) contrast(1.1) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  #about .rocket-scene {
    width: min(66vw, 250px) !important;
    height: min(30svh, 250px) !important;
    opacity: 0.68 !important;
  }

  .tools-lab[data-tool-visual="direct"] {
    width: min(84vw, 350px) !important;
    height: min(27svh, 220px) !important;
    opacity: 0.66 !important;
  }

  #ai-sites .ai-laptop-stage {
    width: min(82vw, 340px) !important;
    height: min(29svh, 230px) !important;
    opacity: 0.7 !important;
  }

  .design-hourglass-scene {
    width: min(62vw, 235px) !important;
    height: min(31svh, 265px) !important;
    opacity: 0.7 !important;
  }

  .contact-jet-scene {
    width: min(84vw, 350px) !important;
    height: min(26svh, 220px) !important;
    opacity: 0.72 !important;
  }

  .page.is-active .glass-visual,
  .page.is-active .tools-lab,
  #ai-sites.page.is-active .ai-laptop-stage,
  .page.is-active .design-hourglass-scene,
  .page.is-active .contact-jet-scene {
    animation: mobileVisualReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  .page.is-active .section-kicker,
  .page.is-active .section-copy h2,
  .page.is-active .section-copy p,
  .page.is-active .metric-row,
  .page.is-active .tool-tabs,
  .page.is-active .tool-copy-stack,
  .page.is-active .tool-cta,
  .page.is-active .contact-panel {
    animation: mobileSectionRise 520ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  .brand-lockup {
    width: 100% !important;
  }

  .logo-stage {
    width: min(94vw, 430px) !important;
    max-width: calc(100vw - 20px) !important;
    aspect-ratio: 2172 / 850 !important;
    overflow: visible !important;
    transform: translateY(-1vh) !important;
  }

  .logo-viewport,
  .logo-canvas {
    height: 79% !important;
    overflow: visible !important;
  }

  .brand-subtitle,
  .brand-subtitle-light {
    left: 0 !important;
    right: 0 !important;
    bottom: 2.4% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0 3.1% !important;
    box-sizing: border-box !important;
    font-size: clamp(8.6px, 3vw, 12px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .subtitle-letter {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: center !important;
  }

  .subtitle-space {
    flex: 0 0 clamp(28px, 9.8vw, 48px) !important;
    width: auto !important;
  }

  .side-rail .menu-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    margin-left: calc(var(--rail-center) - 23px) !important;
    padding: 0 !important;
  }

  .menu-toggle span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    transform: translate3d(-50%, -5px, 0) !important;
    transform-origin: center center !important;
  }

  .menu-toggle span:last-child {
    width: 18px !important;
    transform: translate3d(-50%, 5px, 0) !important;
  }

  .side-rail.is-open .menu-toggle span:first-child {
    width: 24px !important;
    transform: translate3d(-50%, -50%, 0) rotate(42deg) !important;
  }

  .side-rail.is-open .menu-toggle span:last-child {
    width: 24px !important;
    transform: translate3d(-50%, -50%, 0) rotate(-42deg) !important;
  }

  .site-legal {
    right: auto !important;
    left: 50% !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: min(88vw, 340px) !important;
    max-width: none !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px 10px !important;
    text-align: center !important;
    font-size: 7px !important;
    letter-spacing: 0.1em !important;
    transform: translateX(-50%) !important;
  }

  .site-legal::before {
    display: none !important;
  }

  .site-legal span,
  .site-legal a {
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .section-layout,
  .section-layout-reverse,
  .tools-layout,
  #ai-design .section-layout-reverse {
    grid-template-rows: minmax(160px, 27svh) minmax(0, auto) !important;
    width: min(calc(100vw - 88px), 350px) !important;
    margin-left: 58px !important;
    gap: 16px !important;
  }

  .section-copy h2 {
    font-size: clamp(26px, 8.4vw, 34px) !important;
  }

  .brand-subtitle,
  .brand-subtitle-light {
    bottom: 2.2% !important;
    padding-inline: 3.4% !important;
    font-size: clamp(8px, 2.75vw, 10.5px) !important;
  }

  .subtitle-space {
    flex-basis: clamp(25px, 8.7vw, 36px) !important;
  }
}

@media (max-width: 680px) {
  .hero .brand-lockup {
    align-self: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    padding-inline: 0 !important;
  }

  .hero .logo-stage {
    width: min(110vw, 600px) !important;
    max-width: 110vw !important;
    aspect-ratio: 2172 / 835 !important;
    margin-inline: auto !important;
    transform: translate3d(-18px, -1.2vh, 0) !important;
  }

  .hero .logo-viewport,
  .hero .logo-canvas {
    height: 78% !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 14.5% !important;
    right: 4.7% !important;
    bottom: 1.6% !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: clamp(8.8px, 2.85vw, 13px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .hero .brand-subtitle .subtitle-space,
  .hero .brand-subtitle-light .subtitle-space {
    display: none !important;
  }

  .hero .brand-subtitle .subtitle-letter,
  .hero .brand-subtitle-light .subtitle-letter {
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(1),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(1) {
    grid-column: 1;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(2),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(2) {
    grid-column: 2;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(4),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(4) {
    grid-column: 4;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(5),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(5) {
    grid-column: 5;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(6),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(6) {
    grid-column: 6;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(7),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(7) {
    grid-column: 7;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(8),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(8) {
    grid-column: 8;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(9),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(9) {
    grid-column: 9;
  }

  .hero .brand-subtitle .subtitle-letter:nth-child(10),
  .hero .brand-subtitle-light .subtitle-letter:nth-child(10) {
    grid-column: 10;
  }

  .side-rail .menu-toggle {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
  }

  .side-rail .menu-toggle span {
    position: absolute !important;
    left: calc(50% - 13px) !important;
    top: 50% !important;
    display: block !important;
    width: 26px !important;
    height: 1.5px !important;
    margin: 0 !important;
    transform-origin: center center !important;
  }

  .side-rail .menu-toggle span:first-child {
    transform: translate3d(0, -5px, 0) !important;
  }

  .side-rail .menu-toggle span:last-child {
    width: 20px !important;
    transform: translate3d(0, 5px, 0) !important;
  }

  .side-rail.is-open .menu-toggle span:first-child {
    left: 50% !important;
    width: 24px !important;
    transform: translate3d(-50%, -50%, 0) rotate(42deg) !important;
  }

  .side-rail.is-open .menu-toggle span:last-child {
    left: 50% !important;
    width: 24px !important;
    transform: translate3d(-50%, -50%, 0) rotate(-42deg) !important;
  }
}

@media (max-width: 420px) {
  .hero .logo-stage {
    width: 111vw !important;
    max-width: 111vw !important;
    transform: translate3d(-16px, -1.2vh, 0) !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 14.2% !important;
    right: 4.9% !important;
    padding-inline: 0 !important;
    font-size: clamp(8px, 2.65vw, 11px) !important;
  }
}

.logo-stage > .visual-hover-guard,
.glass-visual > .visual-hover-guard {
  pointer-events: auto !important;
}

@keyframes mobileSectionRise {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mobileVisualReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.985);
  }

  to {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mobileVisualFade {
  from {
    opacity: 0;
    transform: translate3d(12px, 10px, 0) scale(0.98);
  }

  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-light-trace {
    display: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Mobile final polish: graphics first, content second, no side collisions. */
@media (max-width: 680px) {
  .page:not(.hero) {
    padding-top: max(86px, env(safe-area-inset-top)) !important;
    padding-bottom: max(92px, env(safe-area-inset-bottom)) !important;
  }

  .page:not(.hero) .section-layout,
  .page:not(.hero) .section-layout-reverse,
  .page:not(.hero) .tools-layout,
  #ai-design.page .section-layout-reverse {
    width: min(calc(100vw - 48px), 370px) !important;
    min-height: calc(100svh - 178px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(205px, 32svh) minmax(0, auto) !important;
    gap: clamp(24px, 4svh, 34px) !important;
    align-content: start !important;
    justify-items: stretch !important;
  }

  .page:not(.hero) .section-copy {
    grid-row: 2 !important;
    order: 2 !important;
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .page:not(.hero) .section-copy > *,
  .page:not(.hero) .metric-row,
  .page:not(.hero) .site-benefit-row,
  .page:not(.hero) .design-metric-row,
  .page:not(.hero) .contact-panel,
  .page:not(.hero) .tool-tabs,
  .page:not(.hero) .section-action {
    max-width: 100% !important;
  }

  .page:not(.hero) .metric-row,
  .page:not(.hero) .site-benefit-row,
  .page:not(.hero) .design-metric-row,
  .page:not(.hero) .contact-panel {
    width: 100% !important;
  }

  .page:not(.hero) .glass-visual,
  .page:not(.hero) .tools-lab,
  #ai-sites.page .ai-laptop-stage,
  .page:not(.hero) .design-hourglass-scene,
  .page:not(.hero) .contact-jet-scene {
    grid-row: 1 !important;
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    align-self: center !important;
    justify-self: center !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 0.78 !important;
    z-index: 2 !important;
  }

  #about .rocket-scene,
  #ai-tools .tools-lab[data-tool-visual="direct"],
  #ai-sites .ai-laptop-stage,
  #ai-design .design-hourglass-scene,
  #contacts .contact-jet-scene {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  #about .rocket-scene {
    width: min(67vw, 262px) !important;
    height: min(32svh, 270px) !important;
    aspect-ratio: 1 / 1.08 !important;
    margin: 0 !important;
    filter:
      drop-shadow(0 24px 54px rgba(0, 0, 0, 0.62))
      drop-shadow(0 0 36px rgba(101, 166, 242, 0.14)) !important;
  }

  #about .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(56vw, 226px) !important;
    transform: translate3d(-50%, -50%, 0) scaleX(1.08) !important;
  }

  #ai-tools .tools-lab[data-tool-visual="direct"] {
    width: min(82vw, 340px) !important;
    height: min(27svh, 220px) !important;
  }

  #ai-sites .ai-laptop-stage {
    width: min(78vw, 320px) !important;
    height: min(28svh, 220px) !important;
  }

  #ai-design .design-hourglass-scene {
    width: min(58vw, 220px) !important;
    height: min(31svh, 255px) !important;
  }

  #contacts .contact-jet-scene {
    width: min(78vw, 330px) !important;
    height: min(27svh, 220px) !important;
  }

  .page:not(.hero) .section-kicker {
    margin-bottom: 14px !important;
  }

  .page:not(.hero) .section-copy h2 {
    font-size: clamp(27px, 8.35vw, 36px) !important;
    line-height: 1.06 !important;
  }

  .page:not(.hero) .section-copy p,
  .page:not(.hero) .tool-panel p {
    font-size: clamp(12.5px, 3.55vw, 14px) !important;
    line-height: 1.48 !important;
  }

  .hero .logo-stage {
    width: min(104vw, 520px) !important;
    max-width: 104vw !important;
    transform: translate3d(-8px, -1.1vh, 0) !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 10.8% !important;
    right: 10.8% !important;
    bottom: 1.6% !important;
  }

  .side-rail .menu-toggle {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px !important;
    border-radius: 17px !important;
    padding: 0 !important;
    display: block !important;
  }

  .side-rail .menu-toggle span {
    left: 18px !important;
    top: 50% !important;
    width: 26px !important;
    height: 1.5px !important;
    margin: 0 !important;
    display: block !important;
    position: absolute !important;
    transform-origin: left center !important;
  }

  .side-rail .menu-toggle span:first-child {
    transform: translate3d(0, -5px, 0) !important;
  }

  .side-rail .menu-toggle span:last-child {
    width: 20px !important;
    transform: translate3d(0, 5px, 0) !important;
  }

  .side-rail:not(.is-open) {
    top: max(14px, env(safe-area-inset-top)) !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .side-rail.is-open .menu-toggle {
    position: absolute !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    left: auto !important;
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(218, 231, 255, 0.16) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(95, 122, 158, 0.025)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 22px rgba(183, 210, 255, 0.12) !important;
  }

  .side-rail.is-open .menu-toggle span {
    left: 50% !important;
    top: 50% !important;
    width: 16px !important;
    height: 1.45px !important;
    transform-origin: center center !important;
  }

  .side-rail.is-open .menu-toggle span:first-child {
    transform: translate3d(-50%, -50%, 0) rotate(45deg) !important;
  }

  .side-rail.is-open .menu-toggle span:last-child {
    width: 16px !important;
    transform: translate3d(-50%, -50%, 0) rotate(-45deg) !important;
  }

  .side-rail.is-open .side-nav {
    margin-top: 54px !important;
  }
}

@media (max-width: 420px) {
  .page:not(.hero) .section-layout,
  .page:not(.hero) .section-layout-reverse,
  .page:not(.hero) .tools-layout,
  #ai-design.page .section-layout-reverse {
    width: min(calc(100vw - 44px), 350px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-rows: minmax(196px, 30svh) minmax(0, auto) !important;
    gap: 22px !important;
  }

  .hero .logo-stage {
    width: 104vw !important;
    max-width: 104vw !important;
    transform: translate3d(-8px, -1.1vh, 0) !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 10.8% !important;
    right: 10.8% !important;
  }
}

/* Mobile layout lock: final spacing, cards and hero proportions. */
@media (max-width: 680px) {
  .page:not(.hero) {
    padding-inline: 0 !important;
    padding-top: max(82px, env(safe-area-inset-top)) !important;
    padding-bottom: max(116px, env(safe-area-inset-bottom)) !important;
  }

  .page:not(.hero) .section-layout,
  .page:not(.hero) .section-layout-reverse,
  .page:not(.hero) .tools-layout,
  #ai-design.page .section-layout-reverse {
    width: min(calc(100vw - 48px), 360px) !important;
    margin-inline: auto !important;
    min-height: calc(100svh - 198px) !important;
    grid-template-rows: minmax(190px, 29svh) minmax(0, auto) !important;
    gap: clamp(26px, 4.2svh, 36px) !important;
    justify-items: stretch !important;
  }

  .page:not(.hero) .section-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 68px !important;
  }

  .page:not(.hero) .section-copy > *,
  .page:not(.hero) .metric-row,
  .page:not(.hero) .site-benefit-row,
  .page:not(.hero) .design-metric-row,
  .page:not(.hero) .contact-panel,
  .page:not(.hero) .tool-tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page:not(.hero) .metric-row,
  .page:not(.hero) .site-benefit-row,
  .page:not(.hero) .design-metric-row,
  .page:not(.hero) .contact-panel,
  .page:not(.hero) .tool-tabs,
  #contacts .contact-panel {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .metric-card,
  .site-benefit-card,
  #contacts .contact-panel .contact-card,
  .tool-tab {
    min-height: 66px !important;
    display: grid !important;
    align-items: center !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 24px !important;
    padding: 14px 18px 14px 20px !important;
  }

  .tool-tab {
    grid-template-rows: auto auto !important;
    row-gap: 3px !important;
  }

  .metric-card::after,
  .site-benefit-card::after,
  #contacts .contact-panel .contact-card::after,
  .tool-tab::after {
    left: 73px !important;
    top: 15px !important;
    bottom: 15px !important;
    width: 1px !important;
    background: linear-gradient(180deg, transparent, rgba(230, 240, 255, 0.18), transparent) !important;
  }

  .metric-icon,
  .site-benefit-icon,
  #contacts .contact-panel .contact-icon {
    grid-column: 1 !important;
    justify-self: center !important;
    width: 34px !important;
    height: 34px !important;
  }

  .metric-card span,
  .site-benefit-card em,
  #contacts .contact-panel .contact-card > span {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  .metric-card em,
  .site-benefit-card em,
  #contacts .contact-panel .contact-card strong,
  #contacts .contact-panel .contact-card em {
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .metric-card em,
  .site-benefit-card em {
    font-size: 9px !important;
    line-height: 1.34 !important;
    letter-spacing: 0.095em !important;
  }

  #contacts .contact-panel .contact-card strong {
    font-size: 8px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.12em !important;
  }

  #contacts .contact-panel .contact-card em {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  .tool-tab span {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 31px !important;
    height: 31px !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .tool-tab strong,
  .tool-tab small {
    grid-column: 2 !important;
    justify-self: start !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .tool-tab strong {
    font-size: 9px !important;
    line-height: 1.24 !important;
    letter-spacing: 0.092em !important;
    white-space: normal !important;
  }

  .tool-tab small {
    font-size: 7px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.13em !important;
  }

  .page:not(.hero) .tool-cta {
    margin-top: 22px !important;
    margin-bottom: 56px !important;
  }

  #ai-design .design-cta,
  #ai-sites .site-cta {
    margin-top: 24px !important;
  }

  #ai-design .design-metric-row {
    margin-top: 22px !important;
  }

  .site-legal {
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - 44px), 340px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .hero .brand-lockup {
    width: min(calc(100vw - 28px), 560px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .hero .logo-stage {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 2172 / 835 !important;
    margin-inline: auto !important;
    transform: translate3d(0, -1vh, 0) !important;
  }

  .hero .logo-viewport,
  .hero .logo-canvas {
    height: 78% !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 3.2% !important;
    right: 3.2% !important;
    bottom: 1.6% !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0 !important;
    font-size: clamp(8.2px, 2.45vw, 12px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .hero .brand-subtitle .subtitle-letter,
  .hero .brand-subtitle-light .subtitle-letter {
    grid-column: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: center !important;
  }

  .hero .brand-subtitle .subtitle-space,
  .hero .brand-subtitle-light .subtitle-space {
    display: block !important;
    flex: 0 0 clamp(30px, 10.5vw, 62px) !important;
    width: auto !important;
  }

  .home-cinema-trails {
    opacity: 1 !important;
    overflow: visible !important;
  }

  .home-cinema-trails::before,
  .home-cinema-trails::after {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: -10% -12%;
    opacity: 0.42;
    background:
      radial-gradient(circle at 16% 30%, rgba(220, 236, 255, 0.45) 0 1px, transparent 2px),
      radial-gradient(circle at 76% 18%, rgba(188, 218, 255, 0.34) 0 1px, transparent 2px),
      radial-gradient(circle at 86% 66%, rgba(221, 159, 244, 0.25) 0 1px, transparent 2px);
    filter: drop-shadow(0 0 12px rgba(142, 188, 255, 0.18));
    animation: mobileStarBreath 7.5s ease-in-out infinite;
  }

  .home-cinema-trails::after {
    opacity: 0.26;
    transform: rotate(-8deg);
    animation-duration: 10s;
    animation-delay: -3s;
  }

  .home-light-trace {
    height: 1px !important;
    width: 58vw !important;
    opacity: 0 !important;
    border-radius: 999px !important;
    background:
      linear-gradient(90deg, transparent 0%, rgba(125, 168, 235, 0.02) 17%, rgba(230, 241, 255, 0.42) 47%, rgba(184, 135, 238, 0.13) 62%, transparent 100%) !important;
    filter:
      blur(0.45px)
      drop-shadow(0 0 9px rgba(142, 188, 255, 0.2))
      drop-shadow(0 0 22px rgba(172, 111, 233, 0.08)) !important;
    transform-origin: center center !important;
  }

  .trace-a {
    top: 20% !important;
    left: -56vw !important;
    transform: rotate(-12deg) !important;
    animation: mobileCinematicTrace 11s cubic-bezier(0.45, 0, 0.2, 1) infinite !important;
  }

  .trace-b {
    top: 57% !important;
    left: -64vw !important;
    width: 44vw !important;
    transform: rotate(10deg) !important;
    animation: mobileCinematicTrace 14s cubic-bezier(0.45, 0, 0.2, 1) 3.5s infinite !important;
  }

  .trace-c {
    top: 38% !important;
    left: -70vw !important;
    width: 52vw !important;
    transform: rotate(-6deg) !important;
    animation: mobileCinematicTrace 17s cubic-bezier(0.45, 0, 0.2, 1) 7s infinite !important;
  }

  .glass-visual img,
  .tools-lab img,
  .logo-pass,
  .ai-laptop-image,
  .design-hourglass-image,
  .contact-jet-image,
  .direct-bolid-object {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }
}

@media (max-width: 420px) {
  .page:not(.hero) .section-layout,
  .page:not(.hero) .section-layout-reverse,
  .page:not(.hero) .tools-layout,
  #ai-design.page .section-layout-reverse {
    width: min(calc(100vw - 44px), 350px) !important;
    margin-inline: auto !important;
    grid-template-rows: minmax(184px, 28svh) minmax(0, auto) !important;
  }

  .hero .brand-lockup {
    width: min(calc(100vw - 24px), 520px) !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 3.6% !important;
    right: 3.6% !important;
    font-size: clamp(7.9px, 2.35vw, 10.5px) !important;
  }

  .hero .brand-subtitle .subtitle-space,
  .hero .brand-subtitle-light .subtitle-space {
    flex-basis: clamp(28px, 9.5vw, 48px) !important;
  }
}

@keyframes mobileCinematicTrace {
  0% {
    opacity: 0;
    translate: 0 0;
  }

  9% {
    opacity: 0.58;
  }

  20% {
    opacity: 0;
    translate: 184vw 0;
  }

  100% {
    opacity: 0;
    translate: 184vw 0;
  }
}

@keyframes mobileStarBreath {
  0%, 100% {
    opacity: 0.22;
    transform: scale(1);
  }

  48% {
    opacity: 0.5;
    transform: scale(1.012);
  }
}

/* Mobile master override: keep the premium desktop proportions, but fit them cleanly. */
@media (max-width: 680px) {
  .page:not(.hero) {
    padding-inline: 0 !important;
    overflow-x: hidden !important;
  }

  .page:not(.hero) .section-layout,
  .page:not(.hero) .section-layout-reverse,
  .page:not(.hero) .tools-layout,
  #ai-design.page .section-layout-reverse {
    width: min(calc(100vw - 52px), 354px) !important;
    max-width: min(calc(100vw - 52px), 354px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    justify-self: center !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(188px, 29svh) minmax(0, auto) !important;
    gap: clamp(28px, 4.6svh, 40px) !important;
  }

  .page:not(.hero) .section-copy,
  .page:not(.hero) .section-copy > *,
  .page:not(.hero) .metric-row,
  .page:not(.hero) .site-benefit-row,
  .page:not(.hero) .design-metric-row,
  .page:not(.hero) .contact-panel,
  .page:not(.hero) .tool-tabs,
  .page:not(.hero) .tool-panel,
  .page:not(.hero) .section-action {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .page:not(.hero) .metric-row,
  .page:not(.hero) .site-benefit-row,
  .page:not(.hero) .design-metric-row,
  .page:not(.hero) .contact-panel,
  .page:not(.hero) .tool-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .metric-card,
  .site-benefit-card,
  .contact-panel .contact-card,
  .tool-tab {
    min-width: 0 !important;
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    column-gap: 27px !important;
    padding: 14px 18px 14px 20px !important;
    box-sizing: border-box !important;
  }

  .metric-card::after,
  .site-benefit-card::after,
  .contact-panel .contact-card::after,
  .tool-tab::after {
    left: 76px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
  }

  .metric-icon,
  .site-benefit-icon,
  .contact-icon {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
  }

  .metric-card span,
  .site-benefit-card em,
  .contact-panel .contact-card > span {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .metric-card em,
  .site-benefit-card em,
  .contact-panel .contact-card strong,
  .contact-panel .contact-card em {
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .tool-tab {
    grid-template-rows: auto auto !important;
    row-gap: 3px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  .tool-tab > span {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transform: translateY(0.5px) !important;
  }

  .tool-tab strong,
  .tool-tab small {
    grid-column: 2 !important;
    justify-self: start !important;
    text-align: left !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .contact-panel {
    grid-template-columns: 1fr !important;
  }

  .site-legal {
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 48px), 340px) !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .hero .brand-lockup {
    width: min(calc(100vw - 24px), 560px) !important;
    max-width: min(calc(100vw - 24px), 560px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    transform: none !important;
  }

  .hero .logo-stage {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 2172 / 835 !important;
    margin-inline: auto !important;
    transform: translate3d(0, -1vh, 0) !important;
    opacity: 1 !important;
  }

  .hero .logo-viewport,
  .hero .logo-canvas {
    height: 78.2% !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 4.2% !important;
    right: 4.2% !important;
    bottom: 1.45% !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0 !important;
    font-size: clamp(8px, 2.5vw, 12px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .hero .brand-subtitle .subtitle-letter,
  .hero .brand-subtitle-light .subtitle-letter {
    grid-column: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .hero .brand-subtitle .subtitle-space,
  .hero .brand-subtitle-light .subtitle-space {
    display: block !important;
    flex: 0 0 clamp(32px, 11vw, 64px) !important;
    width: auto !important;
  }

  .side-rail:not(.is-open) .menu-toggle {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
  }

  .side-rail:not(.is-open) .menu-toggle span {
    left: 19px !important;
    top: 50% !important;
    width: 26px !important;
    height: 1.5px !important;
    transform-origin: left center !important;
  }

  .side-rail:not(.is-open) .menu-toggle span:first-child {
    transform: translate3d(0, -5px, 0) !important;
  }

  .side-rail:not(.is-open) .menu-toggle span:last-child {
    width: 20px !important;
    transform: translate3d(0, 5px, 0) !important;
  }

  .home-cinema-trails {
    opacity: 1 !important;
  }

  .home-cinema-trails::before,
  .home-cinema-trails::after {
    background:
      radial-gradient(circle at 13% 28%, rgba(236, 245, 255, 0.56) 0 1px, transparent 2px),
      radial-gradient(circle at 33% 16%, rgba(144, 188, 255, 0.28) 0 1px, transparent 2px),
      radial-gradient(circle at 76% 21%, rgba(232, 242, 255, 0.44) 0 1px, transparent 2px),
      radial-gradient(circle at 88% 68%, rgba(204, 154, 247, 0.28) 0 1px, transparent 2px),
      radial-gradient(ellipse at 55% 45%, rgba(99, 141, 218, 0.11), transparent 48%) !important;
    opacity: 0.46 !important;
    filter:
      drop-shadow(0 0 10px rgba(164, 199, 255, 0.22))
      drop-shadow(0 0 26px rgba(151, 106, 230, 0.08)) !important;
  }

  .home-light-trace {
    height: 1px !important;
    width: 66vw !important;
    opacity: 0 !important;
    background:
      linear-gradient(90deg, transparent, rgba(184, 215, 255, 0.05) 14%, rgba(245, 250, 255, 0.5) 48%, rgba(164, 119, 234, 0.14) 62%, transparent) !important;
    filter:
      blur(0.35px)
      drop-shadow(0 0 10px rgba(159, 196, 255, 0.22))
      drop-shadow(0 0 24px rgba(172, 111, 233, 0.1)) !important;
  }
}

@media (max-width: 420px) {
  .page:not(.hero) .section-layout,
  .page:not(.hero) .section-layout-reverse,
  .page:not(.hero) .tools-layout,
  #ai-design.page .section-layout-reverse {
    width: min(calc(100vw - 48px), 352px) !important;
    max-width: min(calc(100vw - 48px), 352px) !important;
    margin-inline: auto !important;
    grid-template-rows: minmax(186px, 28svh) minmax(0, auto) !important;
  }

  .hero .brand-lockup {
    width: min(calc(100vw - 24px), 520px) !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 4.4% !important;
    right: 4.4% !important;
    font-size: clamp(7.9px, 2.42vw, 10.5px) !important;
  }

  .hero .brand-subtitle .subtitle-space,
  .hero .brand-subtitle-light .subtitle-space {
    flex-basis: clamp(30px, 10vw, 52px) !important;
  }
}

/* Final mobile logo geometry: match the desktop crop and keep "НА МИЛЛИОН" under the real LEAD letter span. */
@media (max-width: 680px) {
  .hero .brand-lockup {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }

  .hero .logo-stage {
    width: min(116vw, 540px) !important;
    max-width: 116vw !important;
    aspect-ratio: 2172 / 835 !important;
    left: calc((100vw - min(116vw, 540px)) / 2) !important;
    margin-inline: auto !important;
    justify-self: center !important;
    transform: translate3d(0, -1vh, 0) !important;
    overflow: visible !important;
  }

  .hero .logo-viewport,
  .hero .logo-canvas {
    height: 78.2% !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    left: 9.6% !important;
    right: 13.2% !important;
    bottom: 1.45% !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) var(--subtitle-word-gap) repeat(7, max-content) !important;
    align-items: center !important;
    justify-content: space-between !important;
    justify-items: center !important;
    --subtitle-word-gap: clamp(26px, 8.8vw, 52px) !important;
    gap: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: clamp(8.1px, 2.58vw, 12px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .hero .brand-subtitle .subtitle-letter,
  .hero .brand-subtitle-light .subtitle-letter {
    grid-column: auto !important;
    flex: none !important;
    width: auto !important;
    min-width: 0.62em !important;
    text-align: center !important;
  }

  .hero .brand-subtitle .subtitle-space,
  .hero .brand-subtitle-light .subtitle-space {
    display: block !important;
    width: var(--subtitle-word-gap) !important;
    flex: 0 0 var(--subtitle-word-gap) !important;
  }
}

@media (max-width: 420px) {
  .hero .logo-stage {
    width: min(115vw, 500px) !important;
    max-width: 115vw !important;
    left: calc((100vw - min(115vw, 500px)) / 2) !important;
    justify-self: center !important;
  }

  .hero .brand-subtitle,
  .hero .brand-subtitle-light {
    font-size: clamp(8px, 2.52vw, 10.5px) !important;
    --subtitle-word-gap: clamp(24px, 8.2vw, 46px) !important;
  }
}

/* Mobile home composition lock: compact cinematic logo with the subtitle bound to the same visual width. */
@media (max-width: 680px) {
  .page-home {
    place-items: center !important;
    padding: 70px 0 86px !important;
  }

  .page-home .brand-lockup {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    transform: translate3d(0, 3.2svh, 0) !important;
    overflow: visible !important;
  }

  .page-home .logo-stage {
    width: min(100vw, 430px) !important;
    max-width: 100vw !important;
    aspect-ratio: 2172 / 835 !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
    overflow: visible !important;
  }

  .page-home .logo-viewport,
  .page-home .logo-canvas {
    height: 78.2% !important;
  }

  .page-home .brand-subtitle,
  .page-home .brand-subtitle-light {
    left: 12.1% !important;
    right: 12.1% !important;
    bottom: 1.55% !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) var(--subtitle-word-gap) repeat(7, max-content) !important;
    justify-content: space-between !important;
    align-items: center !important;
    justify-items: center !important;
    --subtitle-word-gap: clamp(20px, 6.2vw, 38px) !important;
    gap: 0 !important;
    padding: 0 !important;
    font-size: clamp(7.1px, 2.08vw, 9px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .page-home .brand-subtitle .subtitle-letter,
  .page-home .brand-subtitle-light .subtitle-letter {
    flex: none !important;
    width: auto !important;
    min-width: 0.5em !important;
    text-align: center !important;
  }

  .page-home .brand-subtitle .subtitle-space,
  .page-home .brand-subtitle-light .subtitle-space {
    display: block !important;
    width: var(--subtitle-word-gap) !important;
    flex: 0 0 var(--subtitle-word-gap) !important;
  }

  .page-home .home-cinema-trails {
    inset: -12svh -18vw !important;
    z-index: 1 !important;
    opacity: 1 !important;
    mix-blend-mode: screen !important;
  }

  .page-home .home-cinema-trails::before,
  .page-home .home-cinema-trails::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  .page-home .home-cinema-trails::before {
    background:
      radial-gradient(circle at 14% 22%, rgba(246, 250, 255, 0.62) 0 1px, transparent 2.3px),
      radial-gradient(circle at 79% 18%, rgba(180, 211, 255, 0.38) 0 1px, transparent 2px),
      radial-gradient(circle at 86% 58%, rgba(207, 155, 245, 0.28) 0 1px, transparent 2px),
      radial-gradient(circle at 32% 72%, rgba(132, 181, 255, 0.3) 0 1px, transparent 2px),
      radial-gradient(ellipse at 55% 45%, rgba(84, 128, 205, 0.13), transparent 54%),
      radial-gradient(ellipse at 72% 32%, rgba(159, 112, 223, 0.08), transparent 44%) !important;
    opacity: 0.74 !important;
    filter:
      drop-shadow(0 0 10px rgba(166, 201, 255, 0.24))
      drop-shadow(0 0 30px rgba(160, 112, 236, 0.1)) !important;
    animation: mobileStarBreath 8.8s ease-in-out infinite !important;
  }

  .page-home .home-cinema-trails::after {
    background:
      linear-gradient(116deg, transparent 0 56%, rgba(163, 203, 255, 0.1) 61%, rgba(247, 250, 255, 0.17) 62.5%, rgba(168, 122, 238, 0.06) 64%, transparent 70%),
      linear-gradient(120deg, transparent 0 71%, rgba(230, 240, 255, 0.08) 73%, transparent 76%) !important;
    opacity: 0.44 !important;
    filter: blur(0.35px) drop-shadow(0 0 18px rgba(146, 181, 255, 0.16)) !important;
    transform: translate3d(-7vw, -3svh, 0) !important;
    animation: mobileAuroraDrift 11s ease-in-out infinite !important;
  }

  .page-home .home-light-trace {
    display: block !important;
    width: 56vw !important;
    height: 1px !important;
    border-radius: 999px !important;
    opacity: 0 !important;
    background:
      linear-gradient(90deg, transparent, rgba(144, 184, 244, 0.08) 18%, rgba(247, 250, 255, 0.46) 48%, rgba(180, 126, 239, 0.12) 64%, transparent) !important;
    filter:
      blur(0.35px)
      drop-shadow(0 0 10px rgba(161, 198, 255, 0.2))
      drop-shadow(0 0 24px rgba(174, 113, 235, 0.08)) !important;
    transform: translate3d(-72vw, 0, 0) rotate(-14deg) !important;
    animation: mobileLightStreak 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite !important;
  }

  .page-home .home-light-trace.trace-a {
    top: 21svh !important;
    left: 8vw !important;
    animation-delay: 1.4s !important;
  }

  .page-home .home-light-trace.trace-b {
    top: 48svh !important;
    left: 17vw !important;
    width: 44vw !important;
    animation-delay: 6.8s !important;
  }

  .page-home .home-light-trace.trace-c {
    top: 34svh !important;
    left: 50vw !important;
    width: 34vw !important;
    animation-delay: 9.6s !important;
  }
}

@media (max-width: 420px) {
  .page-home .logo-stage {
    width: min(98vw, 410px) !important;
    max-width: 98vw !important;
  }

  .page-home .brand-subtitle,
  .page-home .brand-subtitle-light {
    left: 12.25% !important;
    right: 12.25% !important;
    --subtitle-word-gap: clamp(18px, 5.8vw, 34px) !important;
    font-size: clamp(6.8px, 2.02vw, 8.3px) !important;
  }
}

@keyframes mobileStarBreath {
  0%, 100% {
    opacity: 0.58;
    transform: scale(1);
  }

  50% {
    opacity: 0.82;
    transform: scale(1.018);
  }
}

@keyframes mobileAuroraDrift {
  0%, 100% {
    opacity: 0.32;
    transform: translate3d(-9vw, -4svh, 0) scale(1);
  }

  48% {
    opacity: 0.52;
    transform: translate3d(3vw, 1svh, 0) scale(1.04);
  }
}

@keyframes mobileLightStreak {
  0%, 66% {
    opacity: 0;
    transform: translate3d(-72vw, 0, 0) rotate(-14deg);
  }

  72% {
    opacity: 0.58;
  }

  88% {
    opacity: 0.18;
  }

  100% {
    opacity: 0;
    transform: translate3d(94vw, -18svh, 0) rotate(-14deg);
  }
}

/* Final mobile pass: keep the desktop wave mood, make it legible on phones, and prevent visual blocks from clipping. */
@media (max-width: 680px) {
  .wave-print {
    opacity: 0.46 !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: contrast(1.18) brightness(1.18) saturate(0.92) !important;
    transform: scale(1.08) !important;
  }

  .wave-canvas {
    opacity: 0.54 !important;
    filter: contrast(1.14) brightness(1.08) !important;
  }

  .page-home::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.18 !important;
    background:
      radial-gradient(ellipse at 58% 42%, rgba(98, 133, 190, 0.16), transparent 48%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.28)) !important;
  }

  .page-home .home-cinema-trails,
  .page-home .home-light-trace {
    display: none !important;
  }

  .page-home {
    justify-items: center !important;
    align-items: center !important;
    padding: 70px 0 86px !important;
    overflow: hidden !important;
  }

  .page-home .brand-lockup {
    width: min(calc(100vw - 46px), 392px) !important;
    max-width: min(calc(100vw - 46px), 392px) !important;
    margin-inline: auto !important;
    padding: 0 !important;
    transform: translate3d(0, 2svh, 0) !important;
  }

  .page-home .logo-stage {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    aspect-ratio: 2172 / 835 !important;
    overflow: visible !important;
  }

  .page-home .logo-viewport,
  .page-home .logo-canvas {
    height: 78.2% !important;
  }

  .page-home .brand-subtitle,
  .page-home .brand-subtitle-light {
    left: 9.6% !important;
    right: 16.2% !important;
    bottom: 10.8% !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) var(--subtitle-word-gap) repeat(7, max-content) !important;
    justify-content: space-between !important;
    align-items: center !important;
    justify-items: center !important;
    --subtitle-word-gap: clamp(26px, 8.4vw, 44px) !important;
    gap: 0 !important;
    padding: 0 !important;
    font-size: clamp(6.6px, 1.9vw, 8px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .page-home .brand-subtitle .subtitle-letter,
  .page-home .brand-subtitle-light .subtitle-letter {
    width: auto !important;
    min-width: 0.54em !important;
    text-align: center !important;
  }

  .page:not(.page-home) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: max(76px, env(safe-area-inset-top)) 0 max(84px, env(safe-area-inset-bottom)) !important;
  }

  .page:not(.page-home) .section-layout,
  .page:not(.page-home) .section-layout-reverse,
  .page:not(.page-home) .tools-layout,
  #ai-design.page .section-layout-reverse {
    width: min(calc(100vw - 48px), 360px) !important;
    max-width: min(calc(100vw - 48px), 360px) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: clamp(20px, 5svh, 34px) !important;
    min-height: 0 !important;
    overflow: visible !important;
    justify-items: center !important;
  }

  .page:not(.page-home) .glass-visual,
  .page:not(.page-home) .tools-lab,
  #ai-sites.page .ai-laptop-stage,
  .page:not(.page-home) .design-hourglass-scene,
  .page:not(.page-home) .contact-jet-scene {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    z-index: 1 !important;
    transform: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .page:not(.page-home) .section-copy,
  .page:not(.page-home) .tool-copy-stack {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    margin: 0 auto !important;
    z-index: 2 !important;
  }

  #about .visual-metric-row {
    display: none !important;
  }

  #about .rocket-scene {
    width: min(76vw, 286px) !important;
    height: clamp(268px, 40svh, 350px) !important;
    max-height: 350px !important;
    align-self: start !important;
  }

  #about .glass-rocket,
  #about .rocket-render {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  #about .rocket-render {
    object-fit: contain !important;
    object-position: center center !important;
  }

  #ai-tools .tools-lab[data-tool-visual="direct"] {
    width: min(92vw, 360px) !important;
    height: clamp(210px, 33svh, 302px) !important;
  }

  #ai-sites .ai-laptop-stage {
    width: min(92vw, 360px) !important;
    height: clamp(220px, 34svh, 310px) !important;
  }

  #ai-design .design-hourglass-scene {
    width: min(78vw, 304px) !important;
    height: clamp(260px, 38svh, 340px) !important;
  }

  #contacts .contact-jet-scene {
    width: min(92vw, 360px) !important;
    height: clamp(200px, 32svh, 286px) !important;
  }
}

@media (max-width: 420px) {
  .page-home .brand-lockup {
    width: min(calc(100vw - 38px), 376px) !important;
    max-width: min(calc(100vw - 38px), 376px) !important;
  }

  .page-home .brand-subtitle,
  .page-home .brand-subtitle-light {
    left: 9.4% !important;
    right: 16% !important;
    bottom: 10.5% !important;
    --subtitle-word-gap: clamp(23px, 7.4vw, 40px) !important;
    font-size: clamp(6.2px, 1.76vw, 7.3px) !important;
  }
}

/* Mobile composition polish: keep cinematic art visible without pushing the story too low. */
@media (max-width: 680px) {
  #about.page {
    padding-top: max(64px, env(safe-area-inset-top)) !important;
  }

  #about.page .section-layout {
    position: relative !important;
    display: block !important;
    width: min(calc(100vw - 48px), 360px) !important;
    max-width: min(calc(100vw - 48px), 360px) !important;
    min-height: 0 !important;
    padding-top: clamp(184px, 22svh, 214px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  #about.page .section-copy {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-row: auto !important;
    padding-bottom: 72px !important;
  }

  #about.page .section-copy h2 {
    max-width: min(312px, calc(100vw - 76px)) !important;
  }

  #about.page .section-copy p {
    max-width: min(332px, calc(100vw - 56px)) !important;
  }

  #about.page .rocket-scene {
    position: absolute !important;
    top: -14px !important;
    right: clamp(-92px, -22vw, -62px) !important;
    left: auto !important;
    width: min(68vw, 266px) !important;
    height: clamp(260px, 34svh, 310px) !important;
    max-height: none !important;
    z-index: 1 !important;
    margin: 0 !important;
    opacity: 0.98 !important;
    transform: none !important;
  }

  #about.page .rocket-scene::before {
    opacity: 0.78 !important;
    transform: translate3d(-4%, -3%, 0) scale(0.92) !important;
  }

  #about.page .rocket-scene::after {
    opacity: 0.48 !important;
    transform: translate3d(-7%, 2%, 0) scale(0.88) !important;
  }

  #about.page .glass-rocket,
  #about.page .rocket-render {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  #about.page .rocket-render {
    object-fit: contain !important;
    object-position: center top !important;
  }

  #ai-tools.page {
    padding-top: max(62px, env(safe-area-inset-top)) !important;
  }

  #ai-tools.page .section-layout.tools-layout {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: clamp(18px, 3.2svh, 28px) !important;
    width: min(calc(100vw - 48px), 360px) !important;
    max-width: min(calc(100vw - 48px), 360px) !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #ai-tools.page .tools-lab[data-tool-visual="direct"] {
    grid-row: 1 !important;
    width: min(96vw, 386px) !important;
    height: clamp(190px, 30svh, 254px) !important;
    margin: -8px auto -8px !important;
    transform: translateX(0) !important;
  }

  #ai-tools.page .tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene {
    width: 112% !important;
    left: -6% !important;
  }

  #ai-tools.page .section-copy {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 72px !important;
  }

  #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  #ai-tools.page .section-copy h2 {
    order: 2 !important;
    margin-bottom: 16px !important;
  }

  #ai-tools.page .tool-tabs {
    display: contents !important;
  }

  #ai-tools.page .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    min-height: 68px !important;
  }

  #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 16px 0 0 !important;
  }

  #ai-tools.page .tool-panel {
    position: relative !important;
    inset: auto !important;
    opacity: 0 !important;
    transform: none !important;
  }

  #ai-tools.page .tool-panel.is-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #ai-tools.page .tool-panel:not(.is-active),
  #ai-tools.page .tool-panel[hidden] {
    display: none !important;
    visibility: hidden !important;
  }

  #ai-tools.page .tool-panel p {
    max-width: 100% !important;
    margin: 0 !important;
  }

  #ai-tools.page .tool-cta {
    margin-top: 20px !important;
    margin-bottom: 22px !important;
  }

  #ai-tools.page .tool-tab.is-disabled {
    order: 5 !important;
    min-height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    opacity: 0.42 !important;
  }

  #ai-tools.page .tool-tab.is-disabled strong {
    font-size: 8.4px !important;
  }

  #ai-tools.page .tool-tab.is-disabled small {
    font-size: 6.4px !important;
  }

  #ai-tools.page .tool-tab[data-tool-tab="qualifier"] {
    margin-top: 8px !important;
  }
}

@media (max-width: 420px) {
  #about.page .section-layout {
    padding-top: clamp(174px, 21svh, 204px) !important;
  }

  #about.page .rocket-scene {
    top: -18px !important;
    right: clamp(-96px, -24vw, -74px) !important;
    width: min(72vw, 270px) !important;
    height: clamp(248px, 32svh, 294px) !important;
  }

  #about.page .section-copy h2 {
    max-width: min(300px, calc(100vw - 78px)) !important;
  }

  #ai-tools.page .tools-lab[data-tool-visual="direct"] {
    height: clamp(176px, 28svh, 232px) !important;
    margin-bottom: -4px !important;
  }
}

/* Mobile repair: keep content aligned and put AI Direct copy between the active tab and inactive tabs. */
@media (max-width: 680px) {
  #about.page .section-layout,
  #ai-tools.page .section-layout.tools-layout {
    width: min(calc(100vw - 64px), 360px) !important;
    max-width: min(calc(100vw - 64px), 360px) !important;
    margin-inline: auto !important;
  }

  #about.page .section-layout {
    padding-top: clamp(176px, 22svh, 214px) !important;
  }

  #about.page .rocket-scene {
    top: -6px !important;
    right: clamp(-28px, -6vw, -14px) !important;
    width: min(62vw, 238px) !important;
    height: clamp(250px, 33svh, 306px) !important;
    opacity: 1 !important;
  }

  #about.page .rocket-scene::before {
    transform: translate3d(-8%, -3%, 0) scale(0.82) !important;
    opacity: 0.52 !important;
  }

  #about.page .rocket-scene::after {
    transform: translate3d(-11%, 1%, 0) scale(0.78) !important;
    opacity: 0.34 !important;
  }

  #ai-tools.page .section-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  #ai-tools.page .section-copy > .section-kicker {
    order: 1 !important;
    grid-row: auto !important;
    grid-column: auto !important;
    margin-bottom: 14px !important;
  }

  #ai-tools.page .section-copy > h2 {
    order: 2 !important;
    grid-row: auto !important;
    grid-column: auto !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
  }

  #ai-tools.page .section-copy > .tool-tabs {
    display: contents !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }

  #ai-tools.page .tool-tab {
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin: 0 !important;
  }

  #ai-tools.page .section-copy > .tool-copy-stack {
    order: 4 !important;
    grid-row: auto !important;
    grid-column: auto !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }

  #ai-tools.page .tool-panel {
    grid-row: auto !important;
    grid-column: auto !important;
  }

  #ai-tools.page .tool-panel p {
    max-width: 100% !important;
    font-size: clamp(14px, 3.55vw, 15.5px) !important;
    line-height: 1.48 !important;
  }

  #ai-tools.page .tool-cta {
    margin: 22px 0 24px !important;
  }

  #ai-tools.page .tool-tab.is-disabled {
    order: 5 !important;
    min-height: 46px !important;
    margin: 9px 0 0 !important;
    padding: 10px 14px !important;
  }

  #ai-tools.page .tool-tab[data-tool-tab="qualifier"] {
    margin-top: 2px !important;
  }
}

@media (max-width: 420px) {
  #about.page .section-layout,
  #ai-tools.page .section-layout.tools-layout {
    width: min(calc(100vw - 48px), 352px) !important;
    max-width: min(calc(100vw - 48px), 352px) !important;
  }

  #about.page .section-layout {
    padding-top: clamp(168px, 21svh, 202px) !important;
  }

  #about.page .rocket-scene {
    top: -4px !important;
    right: clamp(-18px, -4vw, -10px) !important;
    width: min(59vw, 226px) !important;
    height: clamp(238px, 31svh, 286px) !important;
  }
}

/* Mobile layout lock: AI Tools order and margins. Keep this at the very end. */
@media (max-width: 680px) {
  body #ai-tools.page.content-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  body #ai-tools.page.content-page .section-layout.tools-layout {
    width: min(calc(100vw - 56px), 352px) !important;
    max-width: min(calc(100vw - 56px), 352px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    justify-items: stretch !important;
    grid-template-rows: auto auto !important;
    gap: clamp(18px, 3.4svh, 28px) !important;
  }

  body #ai-tools.page.content-page .section-layout.tools-layout > .section-copy,
  body #ai-tools.page.content-page .section-layout.tools-layout > .tools-lab,
  body #ai-tools.page.content-page .section-copy > .section-kicker,
  body #ai-tools.page.content-page .section-copy > h2,
  body #ai-tools.page.content-page .section-copy > .tool-copy-stack,
  body #ai-tools.page.content-page .tool-panel,
  body #ai-tools.page.content-page .tool-tabs,
  body #ai-tools.page.content-page .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
  }

  body #ai-tools.page.content-page .section-layout.tools-layout > .tools-lab[data-tool-visual="direct"] {
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(170px, 26svh, 220px) !important;
    margin: 0 auto 4px !important;
    overflow: visible !important;
    opacity: 0.96 !important;
  }

  body #ai-tools.page.content-page .tools-lab[data-tool-visual="direct"] .tool-object-scene.scene-direct.racer-build-scene {
    width: 112% !important;
    left: -6% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  body #ai-tools.page.content-page .section-layout.tools-layout > .section-copy {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    row-gap: 0 !important;
    padding: 0 0 74px !important;
    overflow: visible !important;
  }

  body #ai-tools.page.content-page .section-copy > .section-kicker {
    order: 1 !important;
    margin: 0 0 14px !important;
  }

  body #ai-tools.page.content-page .section-copy > h2 {
    order: 2 !important;
    margin: 0 0 18px !important;
  }

  body #ai-tools.page.content-page .section-copy > .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page.content-page .tool-tab {
    grid-column: 1 !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-active {
    order: 3 !important;
    min-height: 68px !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  body #ai-tools.page.content-page .section-copy > .tool-copy-stack {
    order: 4 !important;
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body #ai-tools.page.content-page .tool-panel {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  body #ai-tools.page.content-page .tool-panel.is-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body #ai-tools.page.content-page .tool-panel:not(.is-active),
  body #ai-tools.page.content-page .tool-panel[hidden] {
    display: none !important;
    visibility: hidden !important;
  }

  body #ai-tools.page.content-page .tool-panel p {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(13.4px, 3.5vw, 15px) !important;
    line-height: 1.48 !important;
  }

  body #ai-tools.page.content-page .tool-cta {
    margin: 22px 0 24px !important;
  }

  body #ai-tools.page.content-page .tool-points {
    display: none !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-disabled {
    order: 5 !important;
    min-height: 46px !important;
    margin: 9px 0 0 !important;
    padding: 10px 14px !important;
    opacity: 0.38 !important;
  }

  body #ai-tools.page.content-page .tool-tab[data-tool-tab="qualifier"] {
    margin-top: 2px !important;
  }
}

@media (max-width: 420px) {
  body #ai-tools.page.content-page .section-layout.tools-layout {
    width: min(calc(100vw - 46px), 354px) !important;
    max-width: min(calc(100vw - 46px), 354px) !important;
  }
}

/* Mobile visual alignment lock: center the real logo optics and keep the about rocket inside the phone frame. */
@media (max-width: 680px) {
  body .page-home .brand-lockup {
    width: min(calc(100vw - 40px), 392px) !important;
    max-width: min(calc(100vw - 40px), 392px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body .page-home .logo-stage {
    width: min(100%, 384px) !important;
    max-width: 100% !important;
    left: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translate3d(13px, 0, 0) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.2% !important;
    right: 13.2% !important;
    bottom: 10.15% !important;
    --subtitle-word-gap: clamp(24px, 7.9vw, 42px) !important;
  }

  body #about.page .section-layout {
    width: min(calc(100vw - 56px), 360px) !important;
    max-width: min(calc(100vw - 56px), 360px) !important;
    padding-top: clamp(166px, 20svh, 194px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body #about.page .rocket-scene {
    top: -10px !important;
    right: 6px !important;
    left: auto !important;
    width: min(52vw, 216px) !important;
    height: clamp(230px, 30svh, 278px) !important;
    max-width: calc(100vw - 88px) !important;
    overflow: visible !important;
    transform: none !important;
  }

  body #about.page .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(54vw, 218px) !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    transform: translate3d(-50%, -50%, 0) scaleX(1.08) !important;
  }

  body #about.page .rocket-render {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translateZ(18px) !important;
  }
}

@media (max-width: 420px) {
  body .page-home .brand-lockup {
    width: min(calc(100vw - 42px), 376px) !important;
    max-width: min(calc(100vw - 42px), 376px) !important;
  }

  body .page-home .logo-stage {
    transform: translate3d(18px, 0, 0) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    right: 13.1% !important;
    --subtitle-word-gap: clamp(22px, 7.5vw, 38px) !important;
  }

  body #about.page .section-layout {
    width: min(calc(100vw - 48px), 352px) !important;
    max-width: min(calc(100vw - 48px), 352px) !important;
    padding-top: clamp(164px, 20svh, 190px) !important;
  }

  body #about.page .rocket-scene {
    top: -8px !important;
    right: 4px !important;
    width: min(51vw, 204px) !important;
    height: clamp(226px, 29svh, 268px) !important;
  }

  body #about.page .glass-rocket {
    width: min(53vw, 208px) !important;
  }
}

/* Mobile final composition lock: centered hero logo and clean vertical about graphic. */
@media (max-width: 680px) {
  body .page-home .brand-lockup {
    width: min(calc(100vw - 42px), 382px) !important;
    max-width: min(calc(100vw - 42px), 382px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body .page-home .logo-stage {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 8.7% !important;
    right: 8.7% !important;
    bottom: 10.7% !important;
    --subtitle-word-gap: clamp(22px, 7.35vw, 40px) !important;
  }

  body #about.page .section-layout {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(calc(100vw - 56px), 356px) !important;
    max-width: min(calc(100vw - 56px), 356px) !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  body #about.page .rocket-scene {
    position: relative !important;
    order: 1 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(66vw, 238px) !important;
    height: clamp(218px, 29svh, 258px) !important;
    max-width: calc(100vw - 80px) !important;
    margin: 18px auto 10px !important;
    align-self: center !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #about.page .section-copy {
    order: 2 !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    margin-top: -58px !important;
  }

  body #about.page .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(50vw, 196px) !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    transform: translate3d(-50%, -50%, 0) scaleX(1.08) !important;
  }

  body #about.page .rocket-render {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translateZ(18px) !important;
  }

  body #about.page .visual-metric-row {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body .page-home .brand-lockup {
    width: min(calc(100vw - 44px), 370px) !important;
    max-width: min(calc(100vw - 44px), 370px) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 8.2% !important;
    right: 8.2% !important;
    --subtitle-word-gap: clamp(20px, 7vw, 36px) !important;
  }

  body #about.page .section-layout {
    width: min(calc(100vw - 48px), 352px) !important;
    max-width: min(calc(100vw - 48px), 352px) !important;
    padding-top: 0 !important;
  }

  body #about.page .rocket-scene {
    width: min(64vw, 226px) !important;
    height: clamp(208px, 27svh, 242px) !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }

  body #about.page .section-copy {
    margin-top: -54px !important;
  }

  body #about.page .glass-rocket {
    width: min(49vw, 188px) !important;
  }
}

/* Mobile final centering: neutralize late margin resets on content sections. */
@media (max-width: 680px) {
  body #about.page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-sites.page .section-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    position: relative !important;
    left: 50% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
}

/* Mobile hard lock 2026-06-25: one stable premium column, no drifting visuals. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .hero,
  body .page {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  body .content-page {
    display: block !important;
    align-items: initial !important;
    justify-content: flex-start !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    position: relative !important;
    left: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(calc(100vw - 48px), 356px) !important;
    max-width: min(calc(100vw - 48px), 356px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    top: auto !important;
    padding: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
    overflow: visible !important;
  }

  body .content-page .section-copy {
    position: relative !important;
    order: 2 !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .content-page .glass-visual {
    position: relative !important;
    order: 1 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 16px !important;
    transform: translate3d(-50%, 0, 0) !important;
    overflow: visible !important;
  }

  body #about.page .section-layout {
    padding-top: 10px !important;
  }

  body #about.page .rocket-scene {
    width: min(66vw, 232px) !important;
    height: clamp(218px, 29svh, 250px) !important;
    margin-top: 14px !important;
    margin-bottom: -8px !important;
  }

  body #about.page .section-copy {
    margin-top: -16px !important;
  }

  body #about.page .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(50vw, 194px) !important;
    transform: translate3d(-50%, -50%, 0) scaleX(1.08) !important;
  }

  body #ai-tools.page .tools-lab {
    height: clamp(152px, 25svh, 206px) !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
  }

  body #ai-tools.page .tools-lab[data-tool-visual="direct"] {
    width: min(calc(100vw - 48px), 356px) !important;
    opacity: 1 !important;
    filter: saturate(1.04) brightness(0.88) !important;
  }

  body #ai-tools.page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 14px !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    min-height: 0 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-cta {
    margin-top: 18px !important;
    margin-bottom: 20px !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 5 !important;
    margin-top: 8px !important;
  }

  body #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page h2 {
    order: 2 !important;
  }

  body #ai-sites.page .ai-laptop-stage {
    height: clamp(210px, 31svh, 270px) !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
  }

  body #ai-design.page .design-hourglass-scene,
  body #contacts.page .contact-jet-scene {
    height: clamp(220px, 33svh, 286px) !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 66px !important;
    box-sizing: border-box !important;
    grid-template-columns: 48px 1px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    padding: 12px 18px !important;
    align-items: center !important;
  }

  body #about.page.content-page .metric-card,
  body #ai-sites.page.content-page .site-benefit-card,
  body #ai-design.page.content-page .design-metric-row .metric-card {
    column-gap: 38px !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 80px !important;
    top: 16px !important;
    bottom: 16px !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-icon {
    width: 30px !important;
    height: 30px !important;
    justify-self: center !important;
  }

  body .tool-tab span {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    width: min(calc(100vw - 44px), 352px) !important;
    max-width: min(calc(100vw - 44px), 352px) !important;
  }

  body #about.page .rocket-scene {
    width: min(64vw, 224px) !important;
    height: clamp(214px, 28svh, 242px) !important;
    margin-top: 12px !important;
    margin-bottom: -10px !important;
  }

  body #about.page .section-copy {
    margin-top: -18px !important;
  }

  body #ai-tools.page .tools-lab {
    height: clamp(146px, 24svh, 198px) !important;
  }
}

/* Mobile layout finish: center content from the viewport, not from inherited offsets. */
@media (max-width: 680px) {
  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  body .content-page .glass-visual {
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  body #about.page .section-copy {
    margin-top: -22px !important;
  }

  body #about.page .rocket-scene {
    height: clamp(204px, 27svh, 236px) !important;
    margin-bottom: -14px !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 5 !important;
  }
}

/* Mobile production lock 2026-06-25: final centered rhythm for phone layouts. */
@media (max-width: 680px) {
  body .page-home {
    display: grid !important;
    place-items: center !important;
  }

  body .page-home .brand-lockup {
    width: min(calc(100vw - 40px), 388px) !important;
    max-width: min(calc(100vw - 40px), 388px) !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  body .page-home .logo-stage {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body .page-home .logo-viewport,
  body .page-home .logo-canvas {
    transform: translate3d(1.95%, 0, 0) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.25% !important;
    right: 13.05% !important;
    bottom: 11.75% !important;
    --subtitle-word-gap: clamp(20px, 7vw, 36px) !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    left: auto !important;
    right: auto !important;
    width: min(calc(100vw - 52px), 352px) !important;
    max-width: min(calc(100vw - 52px), 352px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .content-page .glass-visual {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  body #about.page .section-layout {
    padding-top: 8px !important;
  }

  body #about.page .rocket-scene {
    width: min(68vw, 228px) !important;
    height: clamp(208px, 27svh, 238px) !important;
    margin-top: 10px !important;
    margin-bottom: -22px !important;
  }

  body #about.page .section-copy {
    margin-top: -32px !important;
  }

  body #about.page .glass-rocket {
    width: min(50vw, 194px) !important;
  }

  body #ai-tools.page .tools-lab {
    width: 100% !important;
    height: clamp(150px, 24svh, 202px) !important;
    margin: 8px auto 18px !important;
  }

  body #ai-tools.page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page h2 {
    order: 2 !important;
  }

  body #ai-tools.page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-cta {
    margin: 20px 0 24px !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 5 !important;
    margin-top: 10px !important;
  }

  body #ai-sites.page .ai-laptop-stage,
  body #ai-design.page .design-hourglass-scene,
  body #contacts.page .contact-jet-scene {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body #ai-sites.page .ai-laptop-stage {
    height: clamp(214px, 31svh, 270px) !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  body #ai-design.page .design-hourglass-scene,
  body #contacts.page .contact-jet-scene {
    height: clamp(220px, 32svh, 282px) !important;
    margin-top: 10px !important;
    margin-bottom: 12px !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    display: grid !important;
    grid-template-columns: 44px 1px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 68px !important;
    padding: 13px 16px !important;
    box-sizing: border-box !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 74px !important;
    top: 16px !important;
    bottom: 16px !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-icon {
    width: 30px !important;
    height: 30px !important;
    justify-self: center !important;
  }

  body .metric-card h3,
  body .site-benefit-card h3,
  body .contact-card strong,
  body .tool-tab strong {
    margin: 0 !important;
    min-width: 0 !important;
  }

  body .tool-tab span {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 1 !important;
    text-align: center !important;
    justify-self: center !important;
  }

  body .site-legal {
    right: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
    width: min(calc(100vw - 48px), 320px) !important;
    text-align: center !important;
    transform: translateX(50%) !important;
  }

  body .site-legal::before {
    content: none !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    left: 17px !important;
    height: 1.6px !important;
    border-radius: 999px !important;
    transform: none !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 23px !important;
    width: 28px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }

  body .side-rail.is-open .menu-toggle span {
    left: 11px !important;
    top: 20px !important;
    width: 20px !important;
    height: 1.45px !important;
  }

  body .side-rail.is-open .menu-toggle span:first-child {
    transform: rotate(42deg) !important;
  }

  body .side-rail.is-open .menu-toggle span:last-child {
    transform: rotate(-42deg) !important;
  }
}

@media (max-width: 420px) {
  body .page-home .brand-lockup {
    width: min(calc(100vw - 42px), 384px) !important;
    max-width: min(calc(100vw - 42px), 384px) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.15% !important;
    right: 13.35% !important;
    bottom: 11.85% !important;
    --subtitle-word-gap: clamp(19px, 6.8vw, 33px) !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    width: min(calc(100vw - 48px), 354px) !important;
    max-width: min(calc(100vw - 48px), 354px) !important;
  }
}

/* Mobile geometry hard-lock 2026-06-25. Keep this as the final mobile layer. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .site-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .page {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .page.is-active {
    transform: none !important;
  }

  body .page-home {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body .page-home .brand-lockup {
    position: relative !important;
    left: 50% !important;
    width: min(calc(100vw - 46px), 368px) !important;
    max-width: min(calc(100vw - 46px), 368px) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  body .page-home .logo-stage {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  body .page-home .logo-viewport,
  body .page-home .logo-canvas {
    width: 100% !important;
    max-width: 100% !important;
    transform: translate3d(1.35%, 0, 0) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.4% !important;
    right: 15.75% !important;
    bottom: 12.8% !important;
    width: auto !important;
    max-width: none !important;
    letter-spacing: 0 !important;
    --subtitle-word-gap: clamp(18px, 6.3vw, 30px) !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - 56px), 352px) !important;
    max-width: min(calc(100vw - 56px), 352px) !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
  }

  body .content-page .glass-visual {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  body #about.page .section-layout {
    padding-top: 0 !important;
  }

  body #about.page .rocket-scene {
    width: min(66vw, 230px) !important;
    height: clamp(212px, 27svh, 238px) !important;
    margin: 4px auto -18px !important;
    overflow: visible !important;
  }

  body #about.page .glass-rocket {
    width: min(49vw, 190px) !important;
    max-width: 190px !important;
  }

  body #about.page .section-copy {
    margin-top: -28px !important;
  }

  body #ai-tools.page .section-layout.tools-layout {
    padding-top: 0 !important;
  }

  body #ai-tools.page .tools-lab {
    width: 100% !important;
    height: clamp(154px, 23svh, 202px) !important;
    margin: 2px auto 16px !important;
    overflow: visible !important;
  }

  body #ai-tools.page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page h2 {
    order: 2 !important;
  }

  body #ai-tools.page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-cta {
    margin: 20px 0 24px !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 5 !important;
    margin-top: 10px !important;
  }

  body #ai-sites.page .ai-laptop-stage {
    height: clamp(214px, 30svh, 268px) !important;
    margin: 6px auto 16px !important;
    overflow: visible !important;
  }

  body #ai-design.page .design-hourglass-scene,
  body #contacts.page .contact-jet-scene {
    height: clamp(220px, 31svh, 282px) !important;
    margin: 6px auto 16px !important;
    overflow: visible !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    display: grid !important;
    grid-template-columns: 42px 1px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 68px !important;
    padding: 13px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 72px !important;
    top: 16px !important;
    bottom: 16px !important;
    width: 1px !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-icon {
    width: 30px !important;
    height: 30px !important;
    justify-self: center !important;
  }

  body .metric-card h3,
  body .site-benefit-card h3,
  body .contact-card strong,
  body .tool-tab strong,
  body .metric-card em,
  body .site-benefit-card em,
  body .contact-card em {
    margin: 0 !important;
    min-width: 0 !important;
  }

  body .tool-tab span {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 1 !important;
    text-align: center !important;
    justify-self: center !important;
    padding: 0 !important;
  }

  body .action-link {
    margin-top: 24px !important;
  }

  body .site-legal {
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
    width: min(calc(100vw - 56px), 320px) !important;
    max-width: min(calc(100vw - 56px), 320px) !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
  }

  body .site-legal::before {
    content: none !important;
    display: none !important;
  }

  body .side-rail:not(.is-open) {
    left: 14px !important;
    top: 14px !important;
    width: 58px !important;
    height: 58px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    position: absolute !important;
    left: 17px !important;
    right: auto !important;
    bottom: auto !important;
    height: 1.6px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transform: none !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 22px !important;
    width: 28px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 32px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .side-rail.is-open .menu-toggle span {
    position: absolute !important;
    left: 11px !important;
    top: 20px !important;
    width: 20px !important;
    height: 1.45px !important;
    margin: 0 !important;
    bottom: auto !important;
    transform-origin: center !important;
  }
}

@media (max-width: 420px) {
  body .page-home .brand-lockup {
    width: min(calc(100vw - 48px), 352px) !important;
    max-width: min(calc(100vw - 48px), 352px) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.4% !important;
    right: 16.2% !important;
    bottom: 13.1% !important;
    --subtitle-word-gap: clamp(17px, 5.8vw, 27px) !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    width: min(calc(100vw - 60px), 348px) !important;
    max-width: min(calc(100vw - 60px), 348px) !important;
  }
}

/* Mobile definitive layout lock 2026-06-25. Keep this last. */
@media (max-width: 680px) {
  :root {
    --m-pad: clamp(30px, 8vw, 36px);
    --m-card-divider: 72px;
  }

  html,
  body,
  body .site-shell,
  body .hero,
  body .page {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body .page {
    inset: 0 !important;
  }

  body .page.is-active {
    transform: none !important;
  }

  body .glass-visual img,
  body .logo-pass,
  body .rocket-render,
  body .racer-image,
  body .ai-laptop-image,
  body .design-hourglass-image,
  body .contact-jet-image {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  body .page-home {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    min-height: 100svh !important;
  }

  body .page-home .brand-lockup {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: min(calc(100vw - 66px), 352px) !important;
    max-width: min(calc(100vw - 66px), 352px) !important;
    margin: 0 auto !important;
    transform: translateX(0) !important;
    overflow: visible !important;
  }

  body .page-home .logo-stage,
  body .page-home .logo-viewport,
  body .page-home .logo-canvas {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: translateX(0) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 4.9% !important;
    right: 5.35% !important;
    bottom: 12.6% !important;
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    letter-spacing: 0 !important;
    font-size: clamp(7px, 2.15vw, 9px) !important;
    line-height: 1 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-letter,
  body .page-home .brand-subtitle-light .subtitle-letter {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    text-align: center !important;
  }

  body .content-page {
    padding: 0 0 28px !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: calc(100vw - (var(--m-pad) * 2)) !important;
    max-width: 380px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  body .content-page .section-copy,
  body .content-page .glass-visual {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body .content-page .section-copy {
    z-index: 3 !important;
  }

  body .section-kicker {
    margin-top: 0 !important;
  }

  body #about.page .section-layout {
    padding-top: 10px !important;
  }

  body #about.page .rocket-scene {
    order: 1 !important;
    width: min(72vw, 252px) !important;
    max-width: 252px !important;
    height: clamp(224px, 29svh, 254px) !important;
    margin: 0 auto -52px !important;
    overflow: visible !important;
  }

  body #about.page .visual-metric-row {
    display: none !important;
  }

  body #about.page .glass-rocket {
    left: 50% !important;
    right: auto !important;
    top: 2px !important;
    width: min(49vw, 184px) !important;
    max-width: 184px !important;
    transform: translateX(-50%) !important;
  }

  body #about.page .rocket-render {
    width: 100% !important;
    max-width: 100% !important;
  }

  body #about.page .section-copy {
    order: 2 !important;
    margin-top: 0 !important;
  }

  body #ai-tools.page .section-layout.tools-layout {
    padding-top: 12px !important;
  }

  body #ai-tools.page .tools-lab {
    order: 1 !important;
    height: clamp(158px, 24svh, 210px) !important;
    margin: 0 auto 16px !important;
    overflow: visible !important;
  }

  body #ai-tools.page .section-copy {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page h2 {
    order: 2 !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-cta {
    order: 5 !important;
    margin-top: 20px !important;
    margin-bottom: 22px !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 6 !important;
    margin-top: 10px !important;
  }

  body #ai-sites.page .ai-laptop-stage,
  body #ai-design.page .design-hourglass-scene,
  body #contacts.page .contact-jet-scene {
    order: 1 !important;
    height: clamp(176px, 28svh, 240px) !important;
    margin: 0 auto 18px !important;
    overflow: visible !important;
  }

  body #ai-sites.page .section-copy,
  body #ai-design.page .section-copy,
  body #contacts.page .section-copy {
    order: 2 !important;
  }

  body #ai-sites.page .ai-laptop-stage {
    height: clamp(176px, 27svh, 226px) !important;
  }

  body #ai-design.page .design-hourglass-scene {
    height: clamp(218px, 32svh, 290px) !important;
  }

  body #contacts.page .contact-jet-scene {
    height: clamp(178px, 27svh, 232px) !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel,
  body .tool-tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .metric-card,
  body .site-benefit,
  body .design-metric-row .metric-card,
  body .contact-card,
  body .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 68px !important;
    padding: 13px 16px !important;
    display: grid !important;
    grid-template-columns: 42px 1px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  body .metric-card::after,
  body .site-benefit::after,
  body .design-metric-row .metric-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: var(--m-card-divider) !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-card svg,
  body .tool-tab span {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
  }

  body .tool-tab span {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body .metric-card span,
  body .site-benefit span,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab em,
  body .tool-tab .tool-tab-text {
    grid-column: 3 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  body .action-link {
    margin-top: 24px !important;
    margin-bottom: 34px !important;
  }

  body .side-rail:not(.is-open) {
    position: fixed !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    z-index: 40 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    position: absolute !important;
    left: 18px !important;
    right: auto !important;
    width: 27px !important;
    height: 1.6px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 23px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .side-rail.is-open .menu-toggle span {
    left: 10px !important;
    top: 18px !important;
    width: 18px !important;
    height: 1.35px !important;
  }

  body .site-legal {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(calc(100vw - 58px), 320px) !important;
    max-width: 320px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    z-index: 12 !important;
    margin-top: -54px !important;
    margin-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    pointer-events: auto !important;
  }

  body:has(.page-home.is-active) .site-legal {
    position: fixed !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }

  body:has(.content-page.is-active) .site-legal {
    position: fixed !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    opacity: 0.92 !important;
  }

  body .site-legal::before {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body .page-home .brand-lockup {
    width: min(calc(100vw - 62px), 344px) !important;
    max-width: min(calc(100vw - 62px), 344px) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 5.3% !important;
    right: 5.8% !important;
    bottom: 12.9% !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    width: calc(100vw - 60px) !important;
    max-width: 348px !important;
  }
}

/* Mobile scroll-safe production lock 2026-06-25. Keep as the final mobile layer. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    min-height: 100svh !important;
    background: #020304 !important;
  }

  body .site-shell,
  body .hero,
  body .page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body .page {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
  }

  body .page.is-active {
    transform: none !important;
  }

  body .page-home {
    display: block !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  body .page-home .brand-lockup {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(82vw, 350px) !important;
    max-width: min(82vw, 350px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body .page-home .logo-stage,
  body .page-home .logo-viewport,
  body .page-home .logo-canvas {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 6.4% !important;
    right: 9.8% !important;
    bottom: 13.9% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: auto !important;
    transform: none !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    display: none !important;
  }

  body .page-home .brand-subtitle .subtitle-letter,
  body .page-home .brand-subtitle-light .subtitle-letter {
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  body .content-page {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 0 0 96px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    --mobile-page-width: min(calc(100vw - 56px), 370px);
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .content-page .section-copy,
  body .content-page .glass-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .content-page .section-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    order: 2 !important;
    margin-top: 0 !important;
  }

  body .content-page h2,
  body .content-page p {
    max-width: 100% !important;
  }

  body #about.page .section-layout {
    padding-top: 6px !important;
  }

  body #about.page .rocket-scene {
    order: 1 !important;
    width: min(72vw, 250px) !important;
    height: clamp(210px, 28svh, 252px) !important;
    margin: 0 auto -18px !important;
    overflow: visible !important;
  }

  body #about.page .glass-rocket {
    left: 50% !important;
    right: auto !important;
    top: 0 !important;
    width: min(48vw, 182px) !important;
    max-width: 182px !important;
    transform: translateX(-50%) !important;
  }

  body #about.page .rocket-halo,
  body #about.page .rocket-grid {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body #about.page .visual-metric-row {
    display: none !important;
  }

  body #ai-tools.page .section-layout.tools-layout {
    padding-top: 0 !important;
  }

  body #ai-tools.page .tools-lab {
    order: 1 !important;
    height: clamp(144px, 24svh, 206px) !important;
    margin: 0 auto 18px !important;
    overflow: visible !important;
  }

  body #ai-tools.page .section-copy {
    order: 2 !important;
  }

  body #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page h2 {
    order: 2 !important;
  }

  body #ai-tools.page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    margin-top: 16px !important;
  }

  body #ai-tools.page .tool-cta {
    order: 5 !important;
    margin-top: 22px !important;
    margin-bottom: 34px !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 6 !important;
    margin-top: 10px !important;
  }

  body #ai-sites.page .ai-laptop-stage,
  body #ai-design.page .design-hourglass-scene,
  body #contacts.page .contact-jet-scene {
    order: 1 !important;
    margin: 0 auto 20px !important;
    overflow: visible !important;
  }

  body #ai-sites.page .ai-laptop-stage {
    height: clamp(178px, 28svh, 238px) !important;
  }

  body #ai-design.page .design-hourglass-scene {
    height: clamp(230px, 34svh, 304px) !important;
  }

  body #contacts.page .contact-jet-scene {
    height: clamp(176px, 27svh, 236px) !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel,
  body .tool-tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body .metric-card,
  body .site-benefit,
  body .design-metric-row .metric-card,
  body .contact-card,
  body .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 68px !important;
    padding: 13px 16px !important;
    display: grid !important;
    grid-template-columns: 42px 1px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  body .metric-card::after,
  body .site-benefit::after,
  body .design-metric-row .metric-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 72px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-card svg,
  body .tool-tab span {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
  }

  body .tool-tab span {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body .metric-card span,
  body .site-benefit span,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab em,
  body .tool-tab .tool-tab-text {
    grid-column: 3 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  body .tool-tab strong {
    align-self: end !important;
  }

  body .tool-tab em {
    align-self: start !important;
  }

  body .contact-panel {
    grid-template-columns: 1fr !important;
  }

  body .action-link {
    margin-top: 24px !important;
    margin-bottom: 48px !important;
  }

  body .side-rail:not(.is-open) {
    position: fixed !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    z-index: 40 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    position: absolute !important;
    left: 18px !important;
    right: auto !important;
    height: 1.5px !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .side-rail.is-open .menu-toggle span {
    left: 10px !important;
    top: 18px !important;
    width: 18px !important;
    height: 1.35px !important;
  }

  body .site-legal {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 56px), 320px) !important;
    max-width: 320px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 18 !important;
    pointer-events: auto !important;
  }

  body .site-legal::before {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body .page-home .brand-lockup {
    width: min(82vw, 336px) !important;
    max-width: min(82vw, 336px) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 6.3% !important;
    right: 10.6% !important;
    bottom: 13.8% !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    --mobile-page-width: min(calc(100vw - 56px), 360px);
  }
}

/* Mobile final pass: allow a little scroll, keep art visible, remove overlay collisions. */
.mobile-page-legal {
  display: none;
}

@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100vw - 52px), 360px);
  }

  body .site-shell,
  body .app-shell,
  body .pages {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .page-home {
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
  }

  body .page-home .brand-lockup {
    left: 50% !important;
    top: 50% !important;
    width: min(86vw, 372px) !important;
    max-width: min(86vw, 372px) !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
  }

  body .page-home .logo-stage {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  body .page-home .logo-viewport,
  body .page-home .logo-canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 7.8% !important;
    right: 7.8% !important;
    bottom: 13.5% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    width: auto !important;
    transform: none !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    display: none !important;
  }

  body .page-home .brand-subtitle .subtitle-letter,
  body .page-home .brand-subtitle-light .subtitle-letter {
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  body .content-page {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .content-page .section-copy,
  body .content-page .glass-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .content-page .section-copy {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 0 !important;
  }

  body .content-page .section-kicker,
  body .content-page h2,
  body .content-page p {
    max-width: 100% !important;
  }

  body #about.page .section-layout {
    padding-top: 10px !important;
  }

  body #about.page .rocket-scene {
    order: 1 !important;
    width: min(74vw, 258px) !important;
    height: clamp(232px, 31svh, 278px) !important;
    margin: 0 auto -8px !important;
    overflow: visible !important;
  }

  body #about.page .glass-rocket {
    left: 50% !important;
    top: 0 !important;
    right: auto !important;
    width: min(50vw, 190px) !important;
    transform: translateX(-50%) !important;
  }

  body #about.page .rocket-halo,
  body #about.page .rocket-grid {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body #ai-tools.page .tools-lab {
    order: 1 !important;
    width: 100% !important;
    height: clamp(150px, 24svh, 214px) !important;
    margin: 0 auto 18px !important;
    overflow: visible !important;
  }

  body #ai-tools.page .section-copy {
    order: 2 !important;
  }

  body #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page h2 {
    order: 2 !important;
  }

  body #ai-tools.page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page .tool-cta {
    order: 5 !important;
    margin-top: 24px !important;
    margin-bottom: 36px !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 6 !important;
    margin-top: 10px !important;
  }

  body #ai-sites.page .ai-laptop-stage,
  body #ai-design.page .design-hourglass-scene,
  body #contacts.page .contact-jet-scene {
    order: 1 !important;
    width: 100% !important;
    margin: 0 auto 22px !important;
    overflow: visible !important;
  }

  body #ai-sites.page .ai-laptop-stage {
    height: clamp(244px, 33svh, 318px) !important;
  }

  body #ai-design.page .design-hourglass-scene {
    height: clamp(250px, 35svh, 326px) !important;
  }

  body #contacts.page .contact-jet-scene {
    height: clamp(198px, 29svh, 260px) !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 68px !important;
    padding: 13px 16px !important;
    display: grid !important;
    grid-template-columns: 42px 1px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 72px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
  }

  body .tool-tab > span:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab em,
  body .tool-tab .tool-tab-text {
    grid-column: 3 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  body .tool-tab strong {
    align-self: end !important;
  }

  body .tool-tab em {
    align-self: start !important;
  }

  body .action-link,
  body .tool-cta {
    align-self: flex-start !important;
  }

  body .side-rail:not(.is-open) {
    left: max(16px, env(safe-area-inset-left)) !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    position: absolute !important;
    left: 18px !important;
    right: auto !important;
    height: 1.5px !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 34px auto max(18px, env(safe-area-inset-bottom)) !important;
    padding: 0 0 2px !important;
    text-align: center !important;
    color: rgba(235, 243, 255, 0.46) !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    pointer-events: auto !important;
  }

  body .mobile-page-legal a {
    color: rgba(238, 244, 255, 0.58) !important;
    text-decoration: none !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 56px), 320px) !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body .site-legal::before {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body {
    --mobile-page-width: min(calc(100vw - 48px), 352px);
  }

  body .page-home .brand-lockup {
    width: min(88vw, 352px) !important;
    max-width: min(88vw, 352px) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 7.8% !important;
    right: 7.8% !important;
    bottom: 13.7% !important;
  }
}

/* Mobile production flow lock 2026-06-25.
   This is the final mobile layer: small vertical scroll is allowed, layout is centered. */
@media (max-width: 680px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100vw - 56px), 354px) !important;
  }

  body .page {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body .content-page {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }

  body .content-page .section-layout,
  body #ai-tools.page .section-layout.tools-layout,
  body #ai-sites.page .section-layout,
  body #ai-design.page .section-layout,
  body #contacts.page .section-layout {
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 0 auto !important;
    padding: 0 0 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .content-page .section-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 4 !important;
    box-sizing: border-box !important;
  }

  body .section-kicker {
    margin-top: 0 !important;
  }

  body .page-home {
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  body .page-home .brand-lockup {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 51% !important;
    width: min(calc(100vw - 64px), 336px) !important;
    max-width: min(calc(100vw - 64px), 336px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body .page-home .logo-stage,
  body .page-home .logo-viewport,
  body .page-home .logo-canvas {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 8.8% !important;
    right: 8.6% !important;
    bottom: 14.4% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    display: none !important;
    width: 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-letter,
  body .page-home .brand-subtitle-light .subtitle-letter {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body #about.page .rocket-scene {
    order: 1 !important;
    position: relative !important;
    width: min(72vw, 250px) !important;
    height: clamp(220px, 29svh, 258px) !important;
    min-height: 0 !important;
    margin: 0 auto 0 !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #about.page .section-copy {
    order: 2 !important;
    margin-top: -2px !important;
  }

  body #ai-tools.page .tools-lab {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(156px, 24svh, 206px) !important;
    min-height: 0 !important;
    margin: 0 auto 22px !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #ai-tools.page .section-copy {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page h2 {
    order: 2 !important;
  }

  body #ai-tools.page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page .tool-cta {
    margin-top: 22px !important;
    margin-bottom: 28px !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 6 !important;
    margin-top: 10px !important;
  }

  body #ai-sites.page .ai-laptop-stage {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(190px, 27svh, 250px) !important;
    margin: 0 auto 26px !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #ai-design.page .design-hourglass-scene {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(238px, 32svh, 306px) !important;
    margin: 0 auto 22px !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #contacts.page .contact-jet-scene {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(188px, 27svh, 244px) !important;
    margin: 0 auto 24px !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 22px 0 0 !important;
    box-sizing: border-box !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 82px !important;
    top: 16px !important;
    bottom: 16px !important;
    width: 1px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }

  body .tool-tab > span:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  body .tool-tab strong {
    align-self: end !important;
  }

  body .tool-tab small,
  body .tool-tab em {
    align-self: start !important;
  }

  body .action-link,
  body .tool-cta {
    align-self: flex-start !important;
    margin-top: 24px !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 34px auto max(22px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 56px), 320px) !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  body .side-rail:not(.is-open) {
    left: max(16px, env(safe-area-inset-left)) !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    position: absolute !important;
    left: 18px !important;
    right: auto !important;
    height: 1.5px !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .hero img,
  body .glass-visual img,
  body .brand-lockup img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }
}

@media (max-width: 420px) {
  body {
    --mobile-page-width: min(calc(100vw - 56px), 344px) !important;
  }

  body .page-home .brand-lockup {
    width: min(calc(100vw - 64px), 336px) !important;
    max-width: min(calc(100vw - 64px), 336px) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 8.8% !important;
    right: 8.8% !important;
    bottom: 14.4% !important;
  }
}

/* Mobile layout hard-lock 2026-06-25.
   Small vertical scroll is allowed; every content page uses the same centered column. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100vw - 56px), 344px) !important;
  }

  body .page,
  body .page-home,
  body .content-page {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body .content-page {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
  }

  body #about.content-page .section-layout,
  body #ai-tools.content-page .section-layout,
  body #ai-tools.content-page .section-layout.tools-layout,
  body #ai-sites.content-page .section-layout,
  body #ai-design.content-page .section-layout,
  body #contacts.content-page .section-layout {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: max(62px, env(safe-area-inset-top)) 0 34px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  body #about.content-page .section-copy,
  body #ai-tools.content-page .section-copy,
  body #ai-sites.content-page .section-copy,
  body #ai-design.content-page .section-copy,
  body #contacts.content-page .section-copy {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .section-kicker {
    margin-top: 0 !important;
  }

  body .section-copy h2 {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body .section-copy p,
  body .tool-panel p {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-wrap: normal !important;
  }

  body .visual-metric-row {
    display: none !important;
  }

  body #about.page .rocket-scene {
    order: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: clamp(238px, 34svh, 286px) !important;
    margin: 0 auto 18px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #about.page .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(54vw, 220px) !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  body #about.page .rocket-render {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  body #ai-tools.page .tools-lab {
    order: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: clamp(172px, 27svh, 228px) !important;
    margin: 0 auto 20px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #ai-tools.page .racer-build-scene {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  body #ai-tools.page .direct-bolid-object {
    left: 50% !important;
    top: 48% !important;
    width: min(104%, 388px) !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
  }

  body #ai-tools.page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page .section-copy h2 {
    order: 2 !important;
  }

  body #ai-tools.page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }

  body #ai-tools.page .tool-copy-stack {
    order: 4 !important;
    width: 100% !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page .tool-cta {
    margin-top: 24px !important;
    margin-bottom: 26px !important;
  }

  body #ai-tools.page .tool-tab.is-disabled {
    order: 5 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  body #ai-sites.page .ai-laptop-stage {
    order: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: clamp(178px, 28svh, 228px) !important;
    margin: 0 auto 22px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #ai-sites.page .ai-laptop-device {
    left: 50% !important;
    bottom: 0 !important;
    width: min(108%, 390px) !important;
    max-width: none !important;
    height: auto !important;
    transform: translateX(-50%) !important;
  }

  body #ai-design.page .design-hourglass-scene {
    order: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: clamp(232px, 34svh, 292px) !important;
    margin: 0 auto 22px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #ai-design.page .design-hourglass-image {
    left: 50% !important;
    top: 50% !important;
    width: min(78%, 270px) !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
  }

  body #contacts.page .contact-jet-scene {
    order: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: clamp(184px, 28svh, 236px) !important;
    margin: 0 auto 22px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #contacts.page .contact-jet-image {
    left: 50% !important;
    top: 50% !important;
    width: min(104%, 360px) !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
    box-sizing: border-box !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
    padding: 13px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 78px !important;
    top: 16px !important;
    bottom: 16px !important;
    width: 1px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body .tool-tab > span:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    margin: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  body .tool-tab strong {
    align-self: end !important;
  }

  body .tool-tab small,
  body .tool-tab em {
    align-self: start !important;
  }

  body .action-link,
  body .tool-cta {
    align-self: flex-start !important;
    margin-top: 28px !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 34px auto max(20px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body .mobile-page-legal a,
  body .mobile-page-legal span {
    text-align: center !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 56px), 320px) !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  body .page-home .brand-lockup {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100vw - 76px), 324px) !important;
    max-width: min(calc(100vw - 76px), 324px) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
  }

  body .page-home .logo-stage,
  body .page-home .logo-viewport,
  body .page-home .logo-canvas {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  body .page-home .logo-pass {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 10.8% !important;
    right: 11.8% !important;
    bottom: 15.3% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transform: none !important;
    letter-spacing: 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    width: clamp(30px, 10vw, 44px) !important;
    flex: 0 0 clamp(30px, 10vw, 44px) !important;
  }

  body .page-home .brand-subtitle .subtitle-letter,
  body .page-home .brand-subtitle-light .subtitle-letter {
    flex: 0 0 auto !important;
    letter-spacing: 0 !important;
  }

  body .side-rail:not(.is-open) {
    left: max(18px, env(safe-area-inset-left)) !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    position: absolute !important;
    left: 20px !important;
    right: auto !important;
    height: 1.5px !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    width: 40px !important;
    height: 40px !important;
  }

  body .hero img,
  body .glass-visual img,
  body .brand-lockup img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }
}

@media (max-width: 420px) {
  body {
    --mobile-page-width: min(calc(100vw - 56px), 344px) !important;
  }

  body .page-home .brand-lockup {
    width: min(calc(100vw - 76px), 324px) !important;
    max-width: min(calc(100vw - 76px), 324px) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 10.8% !important;
    right: 11.8% !important;
    bottom: 15.3% !important;
  }
}

/* Mobile definitive pass 2026-06-25.
   This block intentionally beats the older mobile locks above. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100dvw - 56px), 344px) !important;
  }

  body .content-page {
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .content-page::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  body #about.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout.tools-layout,
  body #ai-sites.page.content-page .section-layout,
  body #ai-design.page.content-page .section-layout,
  body #contacts.page.content-page .section-layout {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: max(62px, env(safe-area-inset-top)) 0 34px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  body #about.page.content-page .section-copy,
  body #ai-tools.page.content-page .section-copy,
  body #ai-sites.page.content-page .section-copy,
  body #ai-design.page.content-page .section-copy,
  body #contacts.page.content-page .section-copy {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body #about.page.content-page .rocket-scene,
  body #ai-tools.page.content-page .tools-lab,
  body #ai-sites.page.content-page .ai-laptop-stage,
  body #ai-design.page.content-page .design-hourglass-scene,
  body #contacts.page.content-page .contact-jet-scene {
    order: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #about.page.content-page .rocket-scene {
    height: clamp(228px, 32svh, 278px) !important;
    margin-bottom: 14px !important;
  }

  body #about.page.content-page .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(50vw, 202px) !important;
    transform: translate(-50%, -50%) !important;
  }

  body #ai-tools.page.content-page .tools-lab {
    height: clamp(170px, 27svh, 220px) !important;
    margin-bottom: 22px !important;
  }

  body #ai-tools.page.content-page .direct-bolid-object {
    left: 50% !important;
    top: 48% !important;
    width: min(100%, 370px) !important;
    transform: translate(-50%, -50%) !important;
  }

  body #ai-sites.page.content-page .ai-laptop-stage {
    height: clamp(178px, 28svh, 224px) !important;
    margin-bottom: 22px !important;
  }

  body #ai-sites.page.content-page .ai-laptop-device {
    left: 50% !important;
    bottom: 0 !important;
    width: min(104%, 372px) !important;
    transform: translateX(-50%) !important;
  }

  body #ai-design.page.content-page .design-hourglass-scene {
    height: clamp(228px, 34svh, 286px) !important;
    margin-bottom: 22px !important;
  }

  body #contacts.page.content-page .contact-jet-scene {
    height: clamp(184px, 28svh, 236px) !important;
    margin-bottom: 22px !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
    padding: 13px 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 78px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
  }

  body #ai-tools.page.content-page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page.content-page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page.content-page .section-copy h2 {
    order: 2 !important;
  }

  body #ai-tools.page.content-page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 20px !important;
  }

  body #ai-tools.page.content-page .tool-copy-stack {
    order: 4 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-disabled {
    order: 5 !important;
    min-height: 54px !important;
    margin-top: 10px !important;
  }

  body #ai-tools.page.content-page .tool-cta,
  body .action-link {
    align-self: flex-start !important;
    margin-top: 28px !important;
  }

  body #ai-tools.page.content-page .tool-cta {
    margin-bottom: 26px !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 34px auto max(22px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100dvw - 56px), 320px) !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
  }

  body .page-home .brand-lockup {
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100dvw - 76px), 324px) !important;
    max-width: min(calc(100dvw - 76px), 324px) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.2% !important;
    right: 9.4% !important;
    bottom: 16.4% !important;
    justify-content: space-between !important;
    letter-spacing: 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    width: clamp(28px, 9vw, 42px) !important;
    flex: 0 0 clamp(28px, 9vw, 42px) !important;
  }

  body .side-rail:not(.is-open) {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    width: 58px !important;
    height: 58px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    left: 20px !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
    transform: none !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
    transform: none !important;
  }
}

/* Mobile production geometry lock 2026-06-25.
   A small vertical scroll is allowed; this layer only fixes centering,
   spacing and mobile order after the older experimental locks above. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100vw - 52px), 352px) !important;
    --mobile-card-icon: 44px !important;
    --mobile-card-gap: 18px !important;
    --mobile-card-divider: 82px !important;
  }

  body .site-shell,
  body .hero,
  body .page {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body .content-page {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .content-page::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  body #about.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout.tools-layout,
  body #ai-sites.page.content-page .section-layout,
  body #ai-design.page.content-page .section-layout,
  body #contacts.page.content-page .section-layout {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: var(--mobile-page-width) !important;
    min-width: 0 !important;
    max-width: var(--mobile-page-width) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: max(58px, env(safe-area-inset-top)) 0 38px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body #about.page.content-page .section-copy,
  body #ai-tools.page.content-page .section-copy,
  body #ai-sites.page.content-page .section-copy,
  body #ai-design.page.content-page .section-copy,
  body #contacts.page.content-page .section-copy {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .section-kicker {
    margin-bottom: 16px !important;
  }

  body .section-copy h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    font-size: clamp(34px, 10.2vw, 48px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
  }

  body .section-copy p,
  body .tool-copy-stack p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
  }

  body #about.page.content-page .rocket-scene,
  body #ai-tools.page.content-page .tools-lab,
  body #ai-sites.page.content-page .ai-laptop-stage,
  body #ai-design.page.content-page .design-hourglass-scene,
  body #contacts.page.content-page .contact-jet-scene {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body #about.page.content-page .rocket-scene {
    height: clamp(236px, 33svh, 292px) !important;
    margin-bottom: 18px !important;
    overflow: visible !important;
  }

  body #about.page.content-page .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(46vw, 188px) !important;
    transform: translate(-50%, -50%) !important;
  }

  body #ai-tools.page.content-page .tools-lab {
    height: clamp(180px, 27svh, 226px) !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
  }

  body #ai-tools.page.content-page .direct-bolid-object {
    left: 50% !important;
    top: 50% !important;
    width: min(100%, 362px) !important;
    transform: translate(-50%, -50%) !important;
  }

  body #ai-sites.page.content-page .ai-laptop-stage {
    height: clamp(222px, 34svh, 284px) !important;
    margin-bottom: 28px !important;
    overflow: hidden !important;
  }

  body #ai-sites.page.content-page .ai-laptop-device {
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(94%, 334px) !important;
    max-width: 334px !important;
    transform: translateX(-50%) !important;
  }

  body #ai-design.page.content-page .design-hourglass-scene {
    height: clamp(238px, 35svh, 296px) !important;
    margin-bottom: 22px !important;
    overflow: visible !important;
  }

  body #contacts.page.content-page .contact-jet-scene {
    height: clamp(188px, 29svh, 242px) !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .design-metric-row,
  body .contact-panel,
  body .tool-tabs {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  body .contact-panel {
    display: grid !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    position: relative !important;
    display: grid !important;
    grid-template-columns: var(--mobile-card-icon) minmax(0, 1fr) !important;
    column-gap: var(--mobile-card-gap) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    padding: 14px 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: var(--mobile-card-divider) !important;
    top: 17px !important;
    bottom: 17px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    place-self: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    line-height: 32px !important;
    text-align: center !important;
  }

  body .tool-tab > span:first-child {
    display: grid !important;
    place-items: center !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body .contact-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  body #ai-tools.page.content-page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page.content-page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page.content-page .section-copy h2 {
    order: 2 !important;
    margin-bottom: 0 !important;
  }

  body #ai-tools.page.content-page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 20px !important;
  }

  body #ai-tools.page.content-page .tool-copy-stack {
    order: 4 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page.content-page .tool-cta {
    order: 5 !important;
    align-self: flex-start !important;
    margin-top: 26px !important;
    margin-bottom: 26px !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-disabled {
    order: 6 !important;
    min-height: 56px !important;
    margin-top: 10px !important;
    opacity: 0.55 !important;
  }

  body .action-link {
    align-self: flex-start !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 34px auto max(22px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body .mobile-page-legal a,
  body .mobile-page-legal span,
  body .site-legal a,
  body .site-legal span {
    text-align: center !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    right: auto !important;
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    width: min(calc(100vw - 56px), 320px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  body .page-home .brand-lockup {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100vw - 72px), 328px) !important;
    max-width: min(calc(100vw - 72px), 328px) !important;
    aspect-ratio: 2.92 / 1 !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body .page-home .logo-stage,
  body .page-home .logo-viewport,
  body .page-home .logo-pass {
    width: 100% !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 8.8% !important;
    right: 8.8% !important;
    bottom: 15.6% !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) clamp(28px, 8vw, 38px) repeat(7, max-content) !important;
    justify-content: space-between !important;
    font-size: clamp(8px, 2.2vw, 11px) !important;
    letter-spacing: 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    width: clamp(28px, 8vw, 38px) !important;
    flex: 0 0 clamp(28px, 8vw, 38px) !important;
  }

  body .page-home .wave-print {
    opacity: 0.92 !important;
    filter: contrast(1.16) brightness(1.12) !important;
  }

  body .page-home .home-cinema-trails {
    opacity: 0.42 !important;
  }

  body .side-rail:not(.is-open) {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    left: 19px !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    margin-left: auto !important;
    margin-right: 12px !important;
  }

  body .side-rail.is-open .menu-toggle span {
    left: 13px !important;
    width: 18px !important;
  }

  body .logo-stage img,
  body .glass-visual img,
  body .brand-lockup img,
  body .glass-rocket,
  body .direct-bolid-object,
  body .ai-laptop-device,
  body .design-hourglass-scene img,
  body .contact-jet-scene img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
  }
}

/* Mobile production lock 2026-06-25: final override, scroll is allowed. */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    --mobile-page-width: min(calc(100vw - 48px), 356px) !important;
  }

  body .site-shell,
  body .pages,
  body .page {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body .page.content-page,
  body #about.page.content-page,
  body #ai-tools.page.content-page,
  body #ai-sites.page.content-page,
  body #ai-design.page.content-page,
  body #contacts.page.content-page {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    touch-action: pan-y !important;
  }

  body #about.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout.tools-layout,
  body #ai-sites.page.content-page .section-layout,
  body #ai-design.page.content-page .section-layout,
  body #contacts.page.content-page .section-layout {
    position: relative !important;
    inset: auto !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 34px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body #about.page.content-page .section-copy,
  body #ai-tools.page.content-page .section-copy,
  body #ai-sites.page.content-page .section-copy,
  body #ai-design.page.content-page .section-copy,
  body #contacts.page.content-page .section-copy {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }

  body #about.page.content-page .rocket-scene,
  body #ai-tools.page.content-page .tools-lab,
  body #ai-sites.page.content-page .ai-laptop-stage,
  body #ai-design.page.content-page .design-hourglass-scene,
  body #contacts.page.content-page .contact-jet-scene {
    order: 1 !important;
    width: 100% !important;
    margin: 0 auto -2px !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body #about.page.content-page .rocket-scene {
    height: clamp(212px, 29svh, 260px) !important;
    margin-bottom: -8px !important;
  }

  body #ai-tools.page.content-page .tools-lab {
    height: clamp(150px, 24svh, 210px) !important;
  }

  body #ai-sites.page.content-page .ai-laptop-stage {
    height: clamp(172px, 27svh, 230px) !important;
  }

  body #ai-design.page.content-page .design-hourglass-scene {
    height: clamp(212px, 31svh, 280px) !important;
  }

  body #contacts.page.content-page .contact-jet-scene {
    height: clamp(180px, 28svh, 252px) !important;
  }

  body #about.page.content-page .rocket-asset,
  body #about.page.content-page .glass-rocket {
    left: 50% !important;
    top: 50% !important;
    width: min(39vw, 158px) !important;
    max-height: 96% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate(-50%, -50%) !important;
  }

  body #about.page.content-page .section-copy,
  body #ai-tools.page.content-page .section-copy,
  body #ai-sites.page.content-page .section-copy,
  body #ai-design.page.content-page .section-copy,
  body #contacts.page.content-page .section-copy {
    order: 2 !important;
  }

  body #about.page.content-page .section-copy {
    margin-top: -8px !important;
  }

  body .section-copy h2 {
    max-width: 100% !important;
  }

  body #ai-tools.page.content-page .section-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  body #ai-tools.page.content-page .section-kicker {
    order: 1 !important;
  }

  body #ai-tools.page.content-page .section-copy h2 {
    order: 2 !important;
    margin-bottom: 0 !important;
  }

  body #ai-tools.page.content-page .tool-tabs {
    display: contents !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-active {
    order: 3 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page.content-page .tool-copy-stack {
    order: 4 !important;
    margin-top: 18px !important;
  }

  body #ai-tools.page.content-page .tool-cta {
    order: 5 !important;
    align-self: flex-start !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  body #ai-tools.page.content-page .tool-tab.is-disabled {
    order: 6 !important;
    min-height: 56px !important;
    margin-top: 10px !important;
  }

  body .metric-row,
  body .site-benefits,
  body .contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 22px !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 18px !important;
    align-items: center !important;
    padding: 13px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: 74px !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    place-self: center !important;
    display: grid !important;
    place-items: center !important;
    line-height: 34px !important;
    text-align: center !important;
  }

  body .tool-tab > span:first-child {
    font-size: 9px !important;
    padding-top: 1px !important;
  }

  body .metric-card span,
  body .site-benefit-card em,
  body .contact-card span,
  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body .action-link {
    align-self: flex-start !important;
    margin-top: 26px !important;
    margin-bottom: 0 !important;
  }

  body .mobile-page-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: 34px auto max(18px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body .mobile-page-legal a,
  body .mobile-page-legal span {
    text-align: center !important;
  }

  body:has(.content-page.is-active) .site-legal {
    display: none !important;
  }

  body:has(.page-home.is-active) .site-legal {
    right: auto !important;
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    width: min(calc(100vw - 56px), 320px) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  body .page-home .brand-lockup {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100vw - 72px), 328px) !important;
    max-width: min(calc(100vw - 72px), 328px) !important;
    aspect-ratio: 2.92 / 1 !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body .page-home .logo-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform: translateX(1.9%) !important;
  }

  body .page-home .logo-viewport {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  body .page-home .logo-pass {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.25% !important;
    right: 13.15% !important;
    bottom: 15.2% !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) clamp(27px, 7.6vw, 36px) repeat(7, max-content) !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: clamp(7px, 2vw, 9.5px) !important;
    letter-spacing: 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    width: clamp(27px, 7.6vw, 36px) !important;
    flex: 0 0 clamp(27px, 7.6vw, 36px) !important;
  }

  body .page-home .wave-print {
    opacity: 0.94 !important;
    filter: contrast(1.18) brightness(1.1) !important;
  }

  body .page-home .home-cinema-trails {
    opacity: 0.28 !important;
  }

  body .side-rail:not(.is-open) {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    left: 19px !important;
    transform: none !important;
    transform-origin: left center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    top: 24px !important;
    width: 27px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    top: 33px !important;
    width: 20px !important;
  }

  body .side-rail.is-open .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    margin: 0 10px 14px auto !important;
  }

  body .side-rail.is-open .menu-toggle span {
    left: 11px !important;
    width: 17px !important;
  }

  body .brand-lockup img,
  body .glass-visual img,
  body .direct-bolid-object,
  body .glass-rocket,
  body .ai-laptop-device,
  body .design-hourglass-image,
  body .contact-jet-image {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
  }
}

@media (max-width: 380px) {
  body {
    --mobile-page-width: min(calc(100vw - 36px), 344px) !important;
  }
}

/* Mobile EOF override 2026-06-26: true final layer. */
@media (max-width: 680px) {
  body {
    --mobile-page-width: min(calc(100vw - 48px), 356px) !important;
    --mobile-card-icon: 46px !important;
    --mobile-card-gap: 34px !important;
    --mobile-card-divider: 78px !important;
  }

  body .page.content-page,
  body #about.page.content-page,
  body #ai-tools.page.content-page,
  body #ai-sites.page.content-page,
  body #ai-design.page.content-page,
  body #contacts.page.content-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body #about.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout,
  body #ai-tools.page.content-page .section-layout.tools-layout,
  body #ai-sites.page.content-page .section-layout,
  body #ai-design.page.content-page .section-layout,
  body #contacts.page.content-page .section-layout {
    flex: 0 0 auto !important;
    padding-top: max(34px, env(safe-area-inset-top)) !important;
    gap: 18px !important;
  }

  body .section-kicker {
    margin-bottom: 16px !important;
  }

  body .section-copy h2 {
    margin-bottom: 10px !important;
    line-height: 1.02 !important;
  }

  body .section-copy p,
  body .tool-copy-stack p {
    margin-top: 0 !important;
    line-height: 1.52 !important;
  }

  body .metric-row,
  body .site-benefit-row,
  body .site-benefits,
  body .design-metric-row,
  body .contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 22px !important;
  }

  body .metric-card,
  body .site-benefit-card,
  body .contact-card,
  body .tool-tab {
    grid-template-columns: var(--mobile-card-icon) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    column-gap: var(--mobile-card-gap) !important;
    min-height: 66px !important;
    padding: 13px 18px !important;
    align-items: center !important;
  }

  body #about.page.content-page .metric-card,
  body #ai-sites.page.content-page .site-benefit-card,
  body #ai-design.page.content-page .design-metric-row .metric-card {
    column-gap: 38px !important;
  }

  body .metric-card::after,
  body .site-benefit-card::after,
  body .contact-card::after,
  body .tool-tab::after {
    left: var(--mobile-card-divider) !important;
  }

  body .metric-icon,
  body .site-benefit-icon,
  body .contact-icon,
  body .contact-card svg,
  body .tool-tab > span:first-child {
    grid-row: 1 / -1 !important;
    align-self: center !important;
  }

  body .metric-card > span,
  body .site-benefit-card > em,
  body .contact-card > span {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    line-height: 1.16 !important;
    text-align: left !important;
  }

  body .metric-card > span > em,
  body .site-benefit-card > em,
  body .contact-card > span > strong,
  body .contact-card > span > em {
    line-height: 1.16 !important;
  }

  body .metric-card > span > em,
  body .site-benefit-card > em {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  body .tool-tab strong,
  body .tool-tab small,
  body .tool-tab em {
    grid-column: 2 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    line-height: 1.14 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  body .tool-tab strong {
    align-self: end !important;
    margin-bottom: 3px !important;
  }

  body .tool-tab small,
  body .tool-tab em {
    align-self: start !important;
    margin-top: 3px !important;
  }

  body #ai-tools.page.content-page .tool-tab {
    grid-template-columns: var(--mobile-card-icon) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    align-items: center !important;
    row-gap: 4px !important;
    column-gap: 30px !important;
    min-height: 66px !important;
    padding: 13px 18px !important;
  }

  body #ai-tools.page.content-page .tool-tab > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    justify-self: center !important;
    align-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  body #ai-tools.page.content-page .tool-tab strong,
  body #ai-tools.page.content-page .tool-tab small,
  body #ai-tools.page.content-page .tool-tab em {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  body #ai-tools.page.content-page .tool-tab strong {
    grid-row: 1 !important;
    align-self: end !important;
    line-height: 1.12 !important;
    margin-bottom: 1px !important;
  }

  body #ai-tools.page.content-page .tool-tab small,
  body #ai-tools.page.content-page .tool-tab em {
    grid-row: 2 !important;
    align-self: start !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
  }

  body #contacts.page.content-page .contact-card {
    column-gap: 20px !important;
  }

  body #contacts.page.content-page .contact-panel .contact-card > span {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    padding-left: 0 !important;
    line-height: 1.04 !important;
  }

  body #contacts.page.content-page .contact-panel .contact-card > span > strong,
  body #contacts.page.content-page .contact-panel .contact-card > span > em {
    align-self: flex-start !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  body #contacts.page.content-page .contact-panel .contact-card > span > strong {
    line-height: 1.08 !important;
  }

  body #contacts.page.content-page .contact-panel .contact-card > span > em {
    line-height: 1.12 !important;
  }

  body #ai-sites.page.content-page .ai-laptop-stage {
    height: clamp(194px, 28svh, 224px) !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
  }

  body #ai-sites.page.content-page .ai-laptop-device {
    left: 50% !important;
    right: auto !important;
    top: 6px !important;
    bottom: auto !important;
    width: min(82vw, 300px) !important;
    max-width: 300px !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }

  body #ai-sites.page.content-page .ai-laptop-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  body #ai-design.page.content-page .design-hourglass-scene {
    height: clamp(204px, 31svh, 256px) !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
  }

  body #ai-design.page.content-page .design-hourglass-image {
    left: 50% !important;
    top: 48% !important;
    width: min(76%, 270px) !important;
    transform: translate(-50%, -50%) !important;
  }

  body #contacts.page.content-page .contact-jet-scene {
    height: clamp(178px, 27svh, 218px) !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
  }

  body #contacts.page.content-page .contact-jet-image {
    left: 50% !important;
    top: 50% !important;
    width: min(102vw, 380px) !important;
    max-width: 380px !important;
    transform: translate(-50%, -50%) !important;
  }

  body #ai-tools.page.content-page .tool-cta,
  body #ai-sites.page.content-page .site-cta,
  body #ai-design.page.content-page .design-cta,
  body .action-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    gap: 14px !important;
    padding: 0 18px 0 0 !important;
    margin-top: 24px !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body .tool-cta::before,
  body .tool-cta::after,
  body .tool-cta:hover::before,
  body .tool-cta:hover::after,
  body .tool-cta:focus-visible::before,
  body .tool-cta:focus-visible::after {
    left: 0 !important;
    width: 48px !important;
    height: 48px !important;
    transform: translate3d(0, -50%, 0) !important;
  }

  body .tool-cta::before,
  body .tool-cta:hover::before,
  body .tool-cta:focus-visible::before {
    transform: translate3d(0, -50%, 0) scale(0.82) !important;
  }

  body .tool-cta svg,
  body .tool-cta:hover svg,
  body .tool-cta:focus-visible svg {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 15px !important;
    transform: none !important;
  }

  body .tool-cta span,
  body .tool-cta:hover span,
  body .tool-cta:focus-visible span {
    display: block !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
    line-height: 1.05 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body .tool-cta:hover,
  body .tool-cta:focus-visible {
    color: #fff !important;
    transform: translateY(-1px) !important;
  }

  body .tool-cta:hover::after,
  body .tool-cta:focus-visible::after {
    width: 48px !important;
    filter: saturate(1.14) brightness(1.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(72, 48, 116, 0.42),
      0 15px 34px rgba(0, 0, 0, 0.42),
      0 0 36px rgba(166, 190, 255, 0.3),
      0 0 30px rgba(212, 126, 240, 0.28) !important;
    transform: translate3d(0, -50%, 0) scale(1.04) !important;
  }

  body .tool-cta:hover::before,
  body .tool-cta:focus-visible::before {
    opacity: 0.85 !important;
    transform: translate3d(0, -50%, 0) scale(1.16) !important;
  }

  body .tool-cta:hover svg,
  body .tool-cta:focus-visible svg {
    filter: brightness(1.1) !important;
    transform: translateX(1px) scale(1.04) !important;
  }

  body .tool-cta:hover span,
  body .tool-cta:focus-visible span {
    color: rgba(255, 255, 255, 0.98) !important;
    transform: translateX(2px) !important;
  }

  body .tool-cta:active::after,
  body .tool-cta.is-pressed::after {
    filter: saturate(1.2) brightness(1.08) !important;
    transform: translate3d(0, -50%, 0) scale(0.94) !important;
  }

  body .tool-cta:active svg,
  body .tool-cta.is-pressed svg {
    animation: toolCtaClick 560ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform: scale(0.9) !important;
  }

  body .tool-cta.is-pressed::before {
    opacity: 1 !important;
    animation: toolCtaClickPulse 560ms ease-out !important;
  }

  body .mobile-page-legal {
    width: var(--mobile-page-width) !important;
    max-width: var(--mobile-page-width) !important;
    margin: auto auto max(18px, env(safe-area-inset-bottom)) !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }

  body .page-home .logo-stage {
    transform: translateX(1.9%) !important;
  }

  body .page-home .brand-subtitle,
  body .page-home .brand-subtitle-light {
    left: 9.6% !important;
    right: 13% !important;
    bottom: -6.4% !important;
    grid-template-columns: repeat(2, max-content) clamp(10px, 3.2vw, 16px) repeat(7, max-content) !important;
    font-size: clamp(8px, 2.15vw, 10px) !important;
    justify-content: space-between !important;
    letter-spacing: 0 !important;
  }

  body .page-home .brand-subtitle .subtitle-space,
  body .page-home .brand-subtitle-light .subtitle-space {
    display: block !important;
    width: clamp(10px, 3.2vw, 16px) !important;
    min-width: clamp(10px, 3.2vw, 16px) !important;
    height: 1px !important;
    flex: 0 0 clamp(10px, 3.2vw, 16px) !important;
  }

  body .page-home .brand-subtitle .subtitle-letter,
  body .page-home .brand-subtitle-light .subtitle-letter {
    min-width: 0.62em !important;
    letter-spacing: 0 !important;
  }

  body .side-rail:not(.is-open) {
    left: max(14px, env(safe-area-inset-left)) !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    border-radius: 18px !important;
  }

  body .side-rail:not(.is-open) .menu-toggle {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    transform-origin: center !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:first-child {
    left: 50% !important;
    top: 25px !important;
    width: 24px !important;
    transform: translateX(-50%) !important;
  }

  body .side-rail:not(.is-open) .menu-toggle span:last-child {
    left: 50% !important;
    top: 34px !important;
    width: 18px !important;
    transform: translateX(-50%) !important;
  }

  body .side-rail.is-open .menu-toggle {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 12px 10px auto !important;
    padding: 0 !important;
  }

  body .side-rail.is-open .menu-toggle span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    transform-origin: center !important;
  }

  body .side-rail.is-open .menu-toggle span:first-child {
    left: 50% !important;
    top: 50% !important;
    width: 20px !important;
    height: 2px !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  body .side-rail.is-open .menu-toggle span:last-child {
    left: 50% !important;
    top: 50% !important;
    width: 20px !important;
    height: 2px !important;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  body .side-rail.is-open .side-nav {
    margin-top: 8px !important;
  }
}

@media (max-width: 380px) {
  body {
    --mobile-page-width: min(calc(100vw - 36px), 344px) !important;
  }

  body .section-copy h2 {
    font-size: clamp(32px, 9.4vw, 44px) !important;
  }

  body #ai-sites.page.content-page .ai-laptop-device {
    width: min(88vw, 304px) !important;
  }
}