/* Octaboo UI restoration layer.
 * Presentation-only overrides live here so Laravel views and data contracts remain stable.
 */

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../vendor/fontawesome/webfonts/fa-brands-400.woff2")
        format("woff2");
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../vendor/fontawesome/webfonts/fa-solid-900.woff2")
        format("woff2");
}

:root {
    --page-bg: #0d0b17;
    --page-bg-soft: #121020;
    --surface-solid: #12111d;
    --surface-elevated: #171526;
    --surface-glass: rgba(18, 17, 29, 0.88);
    --control-bg: #100f1a;
    --heading-color: #ffffff;
    --text-strong: #f8fafc;
    --text-body: #f8fafc;
    --text-subtle: #a5a5c7;
    --text-muted: #a1a1aa;
    --border-soft: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(168, 85, 247, 0.42);
    --overlay: rgba(4, 3, 12, 0.78);
    --purple-rgb: 124, 58, 237;
    --blue-rgb: 99, 102, 241;
    --success-title-gradient: linear-gradient(90deg, #ffffff 0%, #c084fc 100%);
}

:root[data-theme="light"] {
    --bg: #f7f7fb;
    --surface: #ffffff;
    --surface-2: #f0eef7;
    --text: #111827;
    --muted: #5f6475;
    --line: rgba(29, 23, 39, 0.13);
    --shadow: rgba(124, 58, 237, 0.16);
    --page-bg: #f7f7fb;
    --page-bg-soft: #efedf6;
    --surface-solid: #ffffff;
    --surface-elevated: #f7f5fb;
    --surface-glass: rgba(255, 255, 255, 0.92);
    --control-bg: #f3f1f8;
    --heading-color: #0f172a;
    --text-strong: #111827;
    --text-body: #111827;
    --text-subtle: #5f6475;
    --text-muted: #5f6475;
    --border-soft: rgba(29, 23, 39, 0.13);
    --border-accent: rgba(124, 58, 237, 0.32);
    --overlay: rgba(24, 18, 35, 0.55);
    --success-title-gradient: linear-gradient(
        135deg,
        #111827 0%,
        #7c3aed 55%,
        #3685b5 100%
    );
}

html,
html body {
    background-color: var(--page-bg);
    color: var(--text-strong);
}

html body {
    background-image:
        radial-gradient(
            circle at 15% 2%,
            rgba(var(--purple-rgb), 0.12),
            transparent 26rem
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(var(--blue-rgb), 0.09),
            transparent 26rem
        );
}

body.menu-is-open,
body.dialog-open {
    overflow: hidden;
}

p,
.detail-copy > p,
.feature-showcase p,
.solution-card p,
.benefit-card p,
.outcome-grid p,
.related-card p,
.price-card p,
.site-footer > div > a {
    color: var(--text-body);
}

.site-header {
    background: var(--surface-glass);
    border-color: var(--border-soft);
    box-shadow: 0 14px 42px rgba(8, 5, 20, 0.2);
    padding-inline: 24px 14px;
}

.site-header nav a {
    color: var(--text-subtle);
}

.site-header nav a.active,
.site-header nav a:hover {
    color: var(--text-strong);
}

.header-currency,
.direction-toggle {
    color: var(--text-body);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

.header-currency {
    padding-inline: 10px;
}

.header-currency select {
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
}

.header-currency option {
    color: var(--text-strong);
    background: var(--surface-solid);
}

.direction-toggle {
    padding-inline: 14px;
    font-size: 0.82rem;
    font-weight: 800;
}

.theme-toggle,
.socials a {
    color: var(--text-strong);
    background: var(--control-bg);
    border-color: var(--border-soft);
}

.menu-toggle {
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 11px 9px;
    cursor: pointer;
    display: none;
}

.menu-toggle span {
    background: var(--text-strong);
    border-radius: 999px;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
    display: block;
}

.site-header.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-header.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.button-row,
.cta-actions {
    justify-content: center;
    align-items: center;
}

html[dir="rtl"] .button-row,
html[dir="rtl"] .cta-actions {
    justify-content: center;
}

.button.secondary,
.header-demo {
    color: var(--text-strong);
    background: transparent;
    border-color: var(--border-soft);
}

.button.secondary:hover,
.header-demo:hover {
    background: rgba(var(--purple-rgb), 0.1);
    border-color: var(--border-accent);
}

.cta-section > div {
    background-color: var(--surface-solid);
}

.cta-actions {
    max-width: 600px;
    margin-inline: auto;
}

.detail-trial-cta {
    /* width: min(100%, 460px); */
    /* margin-inline: auto; */
    align-self: flex-start;
    width: fit-content;
    margin-top: 16px;
    gap: 10px;
}

.detail-copy {
    min-width: 0;
}

.detail-copy .detail-trial-cta {
    display: flex;
}

.octa-line-icon {
    color: #a855f7;
    filter: drop-shadow(0 0 13px rgba(168, 85, 247, 0.34));
    width: 48px;
    height: 48px;
    flex: none;
}

.octa-line-icon .icon-fill {
    fill: currentColor;
    fill-opacity: 0.16;
}

.feature-showcase-visual .octa-line-icon {
    width: 48px;
    height: 48px;
}

.detail-item-list .octa-line-icon,
.benefit-card .octa-line-icon,
.price-card-icon .octa-line-icon {
    width: 30px;
    height: 30px;
}

.related-card .octa-line-icon {
    width: 48px;
    height: 48px;
}

.feature-showcase,
.solution-card,
.step-card,
.content-card,
.feature-card,
.benefit-card,
.outcome-grid > article,
.related-card,
.price-card,
.faq-list details,
.testimonial-grid blockquote,
.wholesale-pricing-cta {
    color: var(--text-strong);
    background-color: var(--surface-solid);
    border-color: var(--border-soft);
}

:root[data-theme="light"] .feature-showcase,
:root[data-theme="light"] .solution-card,
:root[data-theme="light"] .price-card,
:root[data-theme="light"] .solution-dashboard,
:root[data-theme="light"] .detail-visual {
    background-image: linear-gradient(
        150deg,
        rgba(124, 58, 237, 0.055),
        rgba(99, 102, 241, 0.025)
    );
    box-shadow: 0 20px 55px rgba(42, 30, 66, 0.08);
}

:root[data-theme="light"] .capability-node,
:root[data-theme="light"] .prospect-card,
:root[data-theme="light"] .mock-window,
:root[data-theme="light"] .solution-dashboard,
:root[data-theme="light"] .journal-popup,
:root[data-theme="light"] .visual-analytics,
:root[data-theme="light"] .visual-directory {
    color: var(--text-strong);
    background-color: var(--surface-solid);
    border-color: var(--border-soft);
}

:root[data-theme="light"] .capability-node .node-label > span:last-child,
:root[data-theme="light"] .journal-popup > p,
:root[data-theme="light"] .solution-dashboard small,
:root[data-theme="light"] .solution-dashboard span {
    color: var(--text-body);
}

:root[data-theme="light"] .popup-form input,
:root[data-theme="light"] .newsletter input {
    color: var(--text-strong);
    background: var(--control-bg);
}

.pricing-controls {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    display: flex;
}

.pricing-controls .billing-toggle,
.pricing-controls .ai-model-toggle {
    margin: 0;
}

.pricing-controls .billing-toggle,
.ai-model-toggle {
    background: var(--surface-solid);
    border-color: var(--border-soft);
}

.pricing-controls button {
    color: var(--text-body);
}

.price-card-icon {
    color: #a78bfa;
}

.price-card.popular .price-card-icon {
    color: #c084fc;
}

.partner-logo {
    background: #11101a !important;
    border-color: rgba(255, 255, 255, 0.12);
}

.partner-logo img,
:root[data-theme="light"] .partner-logo img,
.partner-logo:hover img {
    filter: grayscale(1) brightness(0) invert(1);
}

.pipeline-app {
    color: #fff;
    background: linear-gradient(145deg, #242035, #11101a);
    border-color: rgba(255, 255, 255, 0.14);
}

.pipeline-app i {
    font-size: 28px;
}

/* Match the original pure-HTML home entrance and orbit timing. */
.hero-motion-ready .hero .hero-copy h1,
.hero-motion-ready .hero .hero-copy > p,
.hero-motion-ready .hero .hero-copy .button-row,
.hero-motion-ready .hero .channel-orbit {
    opacity: 0;
    transform: translateY(16px);
}

.hero .hero-copy h1 {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -0.02em;
}

.hero .hero-copy > p {
    font-size: 18px;
    line-height: 1.78;
}

.channel-orbit {
    width: min(100%, 500px);
    height: auto;
    aspect-ratio: 1 / 1;
}

.hero-motion-ready .hero.hero-entered .hero-copy h1 {
    animation: octaHeroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-motion-ready .hero.hero-entered .hero-copy > p {
    animation: octaHeroIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.hero-motion-ready .hero.hero-entered .hero-copy .button-row {
    animation: octaHeroIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

.hero-motion-ready .hero.hero-entered .channel-orbit {
    animation: octaOrbitIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.72s forwards;
}

.channel-orbit .orbit-one {
    inset: 5%;
    animation: octaOrbitRotate 22s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
    z-index: 1;
    overflow: visible;
}

.channel-orbit .orbit-two {
    border-style: dashed;
    inset: 1%;
    animation: octaOrbitRotateReverse 34s linear infinite;
    transform-origin: 50% 50%;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}

.channel-orbit .orbit-core {
    inset: 34.4%;
    z-index: 2;
}

.channel-orbit .orbit-one:focus-within {
    z-index: 3;
}

.channel-orbit .channel {
    --orbit-radius: 225px;
    --node-bg: linear-gradient(145deg, var(--surface), rgba(17, 16, 24, 0.92));
    --node-glow: rgba(255, 255, 255, 0.2);
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 84px;
    height: 84px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-index) * 45deg))
        translateX(var(--orbit-radius))
        rotate(calc(var(--orbit-index) * -45deg));
    animation: none;
    z-index: 5;
    will-change: translate;
}

.channel-orbit.orbit-motion-ready .channel {
    transform: translate(-50%, -50%);
    translate: var(--orbit-x) var(--orbit-y);
}

.channel-orbit .channel-visual {
    width: 100%;
    height: 100%;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: var(--node-bg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition:
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.channel-orbit .channel i {
    font-size: 34px;
    transition: transform 0.3s ease;
}

.channel-orbit .orbit-core .logo-compact img {
    width: 90px;
    height: 90px;
}

.channel-orbit .channel:hover,
.channel-orbit .channel:focus-visible {
    z-index: 10;
    outline: none;
}

.channel-orbit .channel:hover .channel-visual,
.channel-orbit .channel:focus-visible .channel-visual {
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 25px var(--node-glow);
    filter: brightness(1.18);
    transform: scale(1.18);
}

.channel-orbit .channel:focus-visible .channel-visual {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.channel-orbit .channel:hover i,
.channel-orbit .channel:focus-visible i {
    transform: scale(1.1);
}

.channel-orbit .channel-1 {
    --node-bg: linear-gradient(
        135deg,
        rgba(0, 203, 136, 0.45),
        rgba(62, 25, 119, 0.25)
    );
    --node-glow: rgba(37, 211, 102, 0.5);
}
.channel-orbit .channel-2 {
    --node-bg: linear-gradient(
        135deg,
        rgba(214, 122, 177, 0.55),
        rgba(62, 25, 119, 0.25)
    );
    --node-glow: rgba(225, 48, 108, 0.5);
}
.channel-orbit .channel-3 {
    --node-bg: linear-gradient(
        135deg,
        rgba(54, 133, 181, 0.55),
        rgba(62, 25, 119, 0.25)
    );
    --node-glow: rgba(24, 119, 242, 0.5);
}
.channel-orbit .channel-4 {
    --node-bg: linear-gradient(
        135deg,
        rgba(143, 121, 255, 0.5),
        rgba(54, 133, 181, 0.25)
    );
    --node-glow: rgba(0, 178, 255, 0.5);
}
.channel-orbit .channel-5 {
    --node-bg: linear-gradient(
        135deg,
        rgba(242, 223, 215, 0.55),
        rgba(214, 122, 177, 0.2)
    );
    --node-glow: rgba(255, 255, 255, 0.42);
}
.channel-orbit .channel-6 {
    --node-bg: linear-gradient(
        135deg,
        rgba(150, 122, 161, 0.55),
        rgba(54, 133, 181, 0.22)
    );
    --node-glow: rgba(234, 67, 53, 0.5);
}
.channel-orbit .channel-7 {
    --node-bg: linear-gradient(
        135deg,
        rgba(91, 117, 83, 0.45),
        rgba(62, 25, 119, 0.22)
    );
    --node-glow: rgba(52, 183, 241, 0.5);
}
.channel-orbit .channel-8 {
    --node-bg: linear-gradient(
        135deg,
        rgba(255, 248, 85, 0.35),
        rgba(54, 133, 181, 0.22)
    );
    --node-glow: rgba(244, 180, 0, 0.5);
}

.steps-section .section-heading h2 {
    font-size: clamp(1.55rem, 2.5vw, 3.4rem);
    font-weight: 900;
    background: var(--success-title-gradient);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.motion-ready .steps-section .section-heading.scroll-reveal {
    --reveal-delay: 0ms !important;
}
.motion-ready .steps-section .step-card:nth-child(1).scroll-reveal {
    --reveal-delay: 350ms !important;
}
.motion-ready .steps-section .step-card:nth-child(2).scroll-reveal {
    --reveal-delay: 650ms !important;
}
.motion-ready .steps-section .step-card:nth-child(3).scroll-reveal {
    --reveal-delay: 950ms !important;
}

.steps-section .step-card:nth-child(2) {
    --octa-layout-y: -42px;
}

.steps-section .step-card:nth-child(3) {
    --octa-layout-y: 28px;
}

.steps-section .step-card {
    translate: 0 var(--octa-layout-y, 0px);
}

.testimonial-rating {
    width: max-content;
    margin: -4px 0 14px;
    line-height: 1;
    position: relative;
}

.testimonial-rating::before,
.testimonial-rating span::before {
    content: "★★★★★";
    letter-spacing: 4px;
    font-size: 17px;
}

.testimonial-rating::before {
    color: rgba(148, 163, 184, 0.28);
}

.testimonial-rating span {
    color: #fbbf24;
    width: var(--rating);
    overflow: hidden;
    position: absolute;
    inset: 0 auto 0 0;
    white-space: nowrap;
}

html[dir="rtl"] .testimonial-rating span {
    inset: 0 0 0 auto;
}

.site-footer {
    color: var(--text-strong);
}

.newsletter input,
.newsletter button {
    border-start-start-radius: 11px;
    border-end-start-radius: 11px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.newsletter button {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 11px;
    border-end-end-radius: 11px;
}

.popup-backdrop {
    background: var(--overlay);
    overflow-y: auto;
}

.journal-popup {
    color: var(--text-strong);
    background-color: var(--surface-solid);
    max-height: min(92vh, 760px);
    overflow-y: auto;
}

/* Balanced content/visual proportions from audit pages 10–16. */
.detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(38px, 6vw, 82px);
}

.detail-visual,
.solution-dashboard {
    width: 100%;
    min-width: 0;
    min-height: clamp(430px, 42vw, 590px);
}

.solution-detail-agency .solution-dashboard {
    min-height: 460px;
    padding: clamp(24px, 4vw, 42px);
    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(99, 102, 241, 0.22),
            transparent 36%
        ),
        linear-gradient(145deg, rgba(34, 18, 67, 0.96), rgba(9, 12, 34, 0.98));
}

.solution-detail-agency .dash-stats > div,
.solution-detail-agency .dash-footer {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.solution-detail-agency .solution-benefits {
    max-width: 1280px;
}

.solution-detail-agency .solution-benefits .section-heading {
    max-width: 850px;
    margin-inline: auto;
}

.agency-pipeline {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(99, 102, 241, 0.28),
            transparent 34%
        ),
        linear-gradient(145deg, #241249, #0a1535);
    border: 1px solid rgba(129, 140, 248, 0.45);
    border-radius: 28px;
    grid-template-columns: 0.85fr 0.35fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 14px 28px;
    min-height: 390px;
    margin-top: 54px;
    padding: clamp(24px, 4vw, 46px);
    display: grid;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.agency-hub {
    background: rgba(8, 8, 24, 0.68);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 24px;
    grid-row: 1 / -1;
    text-align: center;
    padding: 28px;
    display: grid;
    justify-items: center;
}

.agency-hub img {
    filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.6));
    width: 92px;
}

.agency-hub strong,
.agency-hub span {
    display: block;
}

.agency-hub strong {
    margin-top: 10px;
    font-size: 1.25rem;
}

.agency-hub span,
.agency-client small {
    color: #b8b4ca;
}

.agency-flow {
    grid-row: 1 / -1;
    align-self: stretch;
    display: grid;
    align-content: space-around;
}

.agency-flow i {
    background: linear-gradient(90deg, #a855f7, #60a5fa);
    height: 2px;
    transform-origin: left;
    animation: octaFlow 2.2s ease-in-out infinite;
}

.agency-flow i:nth-child(2) {
    animation-delay: 0.35s;
}
.agency-flow i:nth-child(3) {
    animation-delay: 0.7s;
}

.agency-client {
    color: #fff;
    background: rgba(11, 14, 39, 0.8);
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 16px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px 14px;
}

.agency-client > span {
    color: #c084fc;
    grid-row: 1 / 3;
    font-weight: 900;
}

.agency-client small {
    grid-column: 2;
}

.motion-ready .scroll-reveal {
    --octa-reveal-y: 28px;
    opacity: 0;
    translate: 0
        calc(
            var(--octa-layout-y, 0px) + var(--octa-reveal-y) +
                var(--octa-hover-lift, 0px)
        );
    animation: none !important;
    transition:
        opacity 0.72s ease var(--reveal-delay, 0ms),
        translate 0.72s cubic-bezier(0.2, 0.72, 0.22, 1)
            var(--reveal-delay, 0ms);
}

.motion-ready .scroll-reveal.is-visible {
    --octa-reveal-y: 0px;
    opacity: 1;
}

.tilt-surface.is-visible {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
}

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
    animation-play-state: paused !important;
}

@keyframes octaFlow {
    0%,
    100% {
        opacity: 0.28;
        transform: scaleX(0.18);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes octaHeroIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes octaOrbitIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

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

@keyframes octaStepIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 960px) {
    .site-header {
        grid-template-columns: auto 1fr;
        padding-inline: 20px 12px;
    }

    .menu-toggle {
        display: block;
    }

    .site-header nav {
        background: var(--surface-solid);
        border: 1px solid var(--border-soft);
        border-radius: 22px;
        box-shadow: 0 22px 60px rgba(8, 5, 20, 0.28);
        flex-direction: column;
        gap: 2px;
        padding: 10px;
        display: flex;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        inset: calc(100% + 10px) 0 auto;
        transform: translateY(-8px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s;
    }

    .site-header.menu-open nav {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-header nav a {
        border: 0;
        border-radius: 13px;
        padding: 13px 16px;
    }

    .site-header nav a.active,
    .site-header nav a:hover {
        background: rgba(var(--purple-rgb), 0.1) !important;
    }

    .header-actions {
        min-width: 0;
    }

    .header-demo {
        display: none;
    }

    .detail-hero {
        grid-template-columns: 1fr;
    }

    .detail-copy {
        text-align: center;
    }

    .detail-item-list article {
        text-align: start;
    }

    .detail-visual,
    .solution-dashboard {
        min-height: 460px;
        margin-inline: auto;
    }

    .agency-pipeline {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .agency-hub,
    .agency-flow {
        grid-row: auto;
    }

    .agency-flow {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding-top: 118px;
        padding-bottom: 60px;
        overflow: clip;
    }

    .hero .hero-copy h1 {
        font-size: 40px;
        line-height: 1.24;
    }

    .hero .hero-copy > p {
        font-size: 16px;
        line-height: 1.75;
    }

    .channel-orbit {
        width: min(100%, 320px);
        height: auto;
    }

    .channel-orbit .orbit-one {
        inset: 4.6875%;
    }

    .channel-orbit .orbit-core {
        inset: 38.125%;
    }

    .channel-orbit .orbit-core .logo-compact img {
        width: 34px;
        height: 34px;
    }

    .channel-orbit .channel {
        --orbit-radius: min(145px, calc(45.3125vw - 13.59375px));
        width: 42px;
        height: 42px;
    }

    .channel-orbit .channel i {
        font-size: 16px;
    }

    .channel-orbit .channel:hover .channel-visual,
    .channel-orbit .channel:focus-visible .channel-visual {
        transform: scale(1.15);
    }
}

@media (max-width: 640px) {
    h1 {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }
    h2 {
        font-size: clamp(1rem, 7vw, 3.8rem);
    }

    .site-header {
        width: calc(100% - 20px);
        height: 64px;
        padding-inline: 14px 9px;
    }

    .site-header .logo img {
        width: 108px;
    }

    .header-actions {
        gap: 5px;
    }

    .header-currency,
    .direction-toggle,
    .theme-toggle,
    .menu-toggle {
        min-height: 38px;
        height: 38px;
    }

    .header-currency {
        max-width: 60px;
        padding-inline: 5px;
    }

    .direction-toggle {
        padding-inline: 8px;
        font-size: 0.72rem;
    }

    .theme-toggle,
    .menu-toggle {
        width: 38px;
    }

    .button-row,
    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .button-row .button,
    .cta-actions .button {
        width: min(100%, 360px);
    }

    .cta-group,
    html[dir="rtl"] .cta-group {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .cta-group .button {
        width: min(100%, 360px);
    }

    .steps-section .step-card:nth-child(2),
    .steps-section .step-card:nth-child(3) {
        --octa-layout-y: 0px;
    }

    .capability-visual,
    .pipeline-orbit {
        width: 100%;
        max-width: 360px;
        min-height: 360px;
        height: 360px;
        margin-inline: auto;
        transform: scale(0.92);
    }

    .prospect-card,
    .detail-visual,
    .solution-dashboard {
        width: 100%;
        min-height: 360px;
        padding: 18px;
        overflow: hidden;
    }

    .detail-hero {
        gap: 42px;
    }

    .detail-item-list article {
        grid-template-columns: auto 1fr;
    }

    .pricing-controls .billing-toggle,
    .pricing-controls .ai-model-toggle {
        width: min(100%, 390px);
        justify-content: center;
    }

    .pricing-controls .billing-toggle {
        flex-wrap: wrap;
    }

    .pricing-controls .billing-toggle > span {
        flex-basis: 40%;
        text-align: center;
    }

    .journal-popup {
        max-height: calc(100dvh - 24px);
        padding: 44px 18px 28px;
    }

    .popup-backdrop {
        align-items: flex-start;
        padding: 12px;
    }

    .agency-pipeline {
        padding: 20px;
    }

    .agency-client {
        padding: 14px;
    }

    .site-footer {
        text-align: start;
    }

    .footer-brand .socials {
        margin-inline: auto;
    }

    .newsletter {
        max-width: 420px;
        margin-inline: auto;
    }

    .socials {
        justify-content: center;
    }
}

@media (max-width: 390px) {
    .site-header .logo img {
        width: 94px;
    }
    .header-currency {
        display: none;
    }
    .section {
        padding-inline: 15px;
    }

    .section .steps-grid,
    .section .three-grid,
    .section .testimonial-grid,
    .section .content-grid,
    .section .feature-showcase-grid,
    .section.process-strip {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .solution-card {
        overflow: hidden;
    }
    .capability-section {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .capability-copy,
    .capability-copy > *,
    .capability-copy .button-row,
    .capability-copy .button,
    .capability-copy .stats {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .capability-visual,
    .pipeline-orbit {
        transform: scale(0.84);
        transform-origin: center;
    }

    .pricing-hero::before,
    .pricing-hero::after {
        display: none;
    }
}

@media (max-width: 340px) {
    .direction-toggle {
        display: none;
    }
    .site-header {
        grid-template-columns: 1fr auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agency-flow i {
        animation: none;
        transform: none;
    }
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .tilt-surface {
        transform: none !important;
    }
    .channel-orbit .orbit-one,
    .channel-orbit .orbit-two,
    .channel-orbit .channel {
        animation: none !important;
    }
    .hero .hero-copy h1,
    .hero .hero-copy > p,
    .hero .hero-copy .button-row,
    .hero .channel-orbit {
        opacity: 1;
        transform: none;
    }
}

html[dir="rtl"] .site-header {
    padding-inline: 24px 14px;
}

html[dir="rtl"] .button-row,
html[dir="rtl"] .cta-section,
html[dir="rtl"] .journal-popup,
html[dir="rtl"] .detail-copy {
    text-align: center;
}

html[dir="rtl"] .button .material-symbols-outlined,
html[dir="rtl"] .detail-trial-cta .material-symbols-outlined {
    transform: scaleX(-1);
}

html[dir="rtl"] .agency-flow i {
    transform-origin: right;
}

@media (max-width: 640px) {
    html[dir="rtl"] .pricing-section .pricing-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        margin-inline: 0;
    }

    html[dir="rtl"] .pricing-section .price-card {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }
}

/* --------------------------------------------------------------------------
 * Complete restoration layer: semantic palette, responsive contracts, and
 * page-scoped motion. These declarations intentionally come last so the
 * generated legacy bundle cannot reintroduce fixed widths or old theme colors.
 * -------------------------------------------------------------------------- */

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

html body {
    color: var(--text-body);
    font-family: "Public Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-heading,
.price-card h3,
.journal-popup h2 {
    color: var(--heading-color);
}

p,
li,
small,
.detail-copy > p,
.feature-showcase p,
.solution-card p,
.benefit-card p,
.outcome-grid p,
.related-card p,
.price-card p {
    color: var(--text-body);
}

.site-header nav a,
.footer-brand p,
.site-footer > div > a,
.section-heading > p,
.detail-item-list p,
.price-card li,
.faq-list details p,
.blog-card-copy small,
.article-content p,
.article-content li {
    color: var(--text-subtle);
}

.hero .hero-copy h1 {
    color: var(--heading-color);
    font-family: "Inter", "Public Sans", sans-serif;
    font-weight: 800;
}

h1 > span,
h2 > span,
.pipeline-copy h2 {
    background: linear-gradient(100deg, var(--heading-color) 4%, #c084fc 92%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.hero .hero-copy h1 > span {
    background: linear-gradient(181deg, #d67ab1 0%, #3685b5 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

:root[data-theme="light"] h1 > span,
:root[data-theme="light"] h2 > span,
:root[data-theme="light"] .pipeline-copy h2 {
    background-image: linear-gradient(
        100deg,
        #0f172a 3%,
        #7c3aed 58%,
        #9333ea 100%
    );
}

.button.primary,
.billing-toggle button.active,
.ai-model-toggle button.active,
.popular-label,
.newsletter button {
    color: #ffffff;
}

.button-row,
.cta-actions,
.page-hero .button-row,
.capability-copy .button-row,
.detail-copy .button-row {
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    margin-top: 24px;
}

.detail-trial-cta,
.contact-form .button,
.time-placeholder .button {
    justify-content: center;
    text-align: center;
}

html[dir="rtl"] .button-row,
html[dir="rtl"] .cta-actions,
html[dir="rtl"] .page-hero .button-row,
html[dir="rtl"] .capability-copy .button-row {
    flex-direction: row;
    justify-content: center;
}

main,
.section,
.section > *,
.feature-showcase-grid > *,
.three-grid > *,
.pricing-grid > *,
.four-grid > *,
.related-grid > *,
.content-grid > * {
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.detail-visual,
.solution-dashboard,
.capability-visual {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: 620px;
    margin-inline: auto;
}

.solution-dashboard,
.detail-visual {
    isolation: isolate;
}

.solution-detail-page .solution-dashboard {
    min-height: 0;
}

.detail-visual > *,
.solution-dashboard > * {
    max-width: 100%;
}

.feature-showcase-grid,
.related-grid,
.solutions-section .three-grid,
#solution-models .three-grid,
.pricing-grid,
.four-grid,
.content-grid,
.content-grid:has(.content-card:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
}

.feature-showcase,
.related-card,
.solution-card,
.price-card,
.benefit-card,
.content-card,
.blog-card,
.contact-form,
.booking-shell {
    min-width: 0;
    overflow-wrap: anywhere;
}

.feature-showcase .octa-line-icon,
.related-card .octa-line-icon,
.octa-feature-icon {
    width: 48px;
    height: 48px;
}

.feature-showcase:nth-child(1),
.feature-showcase:nth-child(5),
.related-card:nth-child(1),
.related-card:nth-child(5) {
    --octa-feature-color: #a855f7;
}

.feature-showcase:nth-child(2),
.feature-showcase:nth-child(6),
.related-card:nth-child(2),
.related-card:nth-child(6) {
    --octa-feature-color: #c084fc;
}

.feature-showcase:nth-child(3),
.related-card:nth-child(3) {
    --octa-feature-color: #818cf8;
}

.feature-showcase:nth-child(4),
.related-card:nth-child(4) {
    --octa-feature-color: #6366f1;
}

.feature-showcase .octa-line-icon,
.related-card .octa-line-icon,
.octa-feature-icon {
    color: var(--octa-feature-color, currentColor);
    filter: drop-shadow(
        0 0 14px
            color-mix(
                in srgb,
                var(--octa-feature-color, #a855f7) 42%,
                transparent
            )
    );
}

.octa-feature-icon[data-icon="chat_bubble"],
.octa-feature-icon[data-icon="account_circle"],
.octa-line-icon[data-icon="chat_bubble"],
.octa-line-icon[data-icon="account_circle"] {
    color: #a855f7;
}
.octa-feature-icon[data-icon="smart_toy"],
.octa-feature-icon[data-icon="dashboard"],
.octa-line-icon[data-icon="smart_toy"],
.octa-line-icon[data-icon="dashboard"] {
    color: #c084fc;
}
.octa-feature-icon[data-icon="alt_route"],
.octa-line-icon[data-icon="alt_route"] {
    color: #818cf8;
}
.octa-feature-icon[data-icon="query_stats"],
.octa-line-icon[data-icon="query_stats"] {
    color: #6366f1;
}

.detail-item-list > article > .material-symbols-outlined,
.detail-benefit-icon,
.benefit-card > .material-symbols-outlined,
.outcome-grid .material-symbols-outlined {
    color: #c084fc;
    filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.42));
}

.solution-icon .material-symbols-outlined {
    font-size: 96px;
}

.solution-card > strong {
    align-items: center;
    justify-content: center;
    gap: 6px;
    display: flex;
}

.solution-ring {
    width: 192px;
    height: 192px;
}

.solution-stat-icon {
    margin: 0;
}
.solution-stat-icon,
.solution-stat-icon .material-symbols-outlined {
    font-size: 10px;
}

.price-card-icon .pricing-plan-icon,
.price-card-icon .octa-pricing-icon,
.price-card-icon > svg {
    width: 42px;
    height: 42px;
}

.pricing-plan-icon-material {
    overflow: hidden;
    text-overflow: clip;
    display: grid;
    place-items: center;
}

.price-card-icon > .material-symbols-outlined,
.price-card-icon .material-symbols-outlined {
    font-size: 38px;
}

.price-check-icon,
.price-card li > svg {
    color: #bfdbfe;
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
}

.price-card.popular .price-check-icon,
.price-card.popular li > svg {
    color: #f0abfc;
}

.pricing-faq .faq-icon,
.faq-contact-icon,
.pricing-contact-icon {
    color: #c084fc;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 28px;
}

.routing-benefit-icon,
.detail-benefit-material,
.triage-benefit-marker,
.white-label-benefit-marker {
    color: #c084fc;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}

.detail-benefit-material {
    align-items: center;
    justify-content: center;
    font-size: 34px;
    display: inline-flex;
}

.triage-benefit-marker,
.white-label-benefit-marker {
    background: radial-gradient(
        circle,
        #c084fc 0 18%,
        rgba(168, 85, 247, 0.3) 20% 42%,
        transparent 45%
    );
    border: 1px solid rgba(168, 85, 247, 0.32);
    border-radius: 50%;
    animation: octa-rest-status-glow 3s ease-in-out infinite;
}

.message-channels,
.message-composer,
.directory-actions,
.directory-status,
.solution-primary-icons,
.dash-commandbar,
.agency-verification,
.growth-sources,
.sales-profile-actions,
.pricing-contact-card {
    position: relative;
    z-index: 2;
}

.message-channels,
.message-composer,
.directory-actions,
.directory-status,
.solution-primary-icons,
.dash-commandbar,
.agency-verification,
.growth-sources,
.sales-profile-actions {
    pointer-events: none;
    user-select: none;
}

.message-channels,
.growth-sources,
.solution-primary-icons,
.sales-profile-actions,
.directory-actions {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    display: flex;
}

.solution-primary-icons > span,
.dash-commandbar > span,
.agency-verification > span,
.growth-sources > span,
.sales-profile-actions > span,
.directory-actions > span,
.directory-status > span {
    color: #c084fc;
    font-size: 20px;
}

.dash-commandbar,
.agency-verification {
    background: rgba(10, 10, 20, 0.64);
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px;
    display: flex;
}

.pricing-contact-card {
    color: var(--text-strong);
    background: var(--surface-solid);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    display: flex;
    transition:
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.pricing-contact-card:hover,
.pricing-contact-card:focus-visible {
    border-color: var(--border-accent);
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(124, 58, 237, 0.16);
}

.pricing-faq summary {
    align-items: center;
    gap: 14px;
    display: flex;
}

.pricing-faq summary::after {
    margin-inline-start: auto;
}

.triage-lightbulb,
.routing-engine {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.triage-lightbulb {
    animation: octa-rest-ai-core-glow 4s ease-in-out infinite;
}

.routing-engine-ring {
    animation: octa-rest-spin 12s linear infinite;
    transform-origin: 50% 50%;
}

.routing-engine-bolt {
    animation: octa-rest-solution-pulse 3s ease-in-out infinite;
}

.mobile-nav-actions {
    display: none;
}

.cta-group {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-inline: auto;
    display: flex;
}

.pricing-controls {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.pricing-controls .billing-toggle,
.pricing-controls .ai-model-toggle {
    width: fit-content;
    max-width: 100%;
    margin: 0;
}

.pricing-section .price-card {
    height: 100%;
    min-height: 0;
}

:root[data-theme="light"] .feature-showcase,
:root[data-theme="light"] .related-card,
:root[data-theme="light"] .benefit-card,
:root[data-theme="light"] .outcome-grid > article,
:root[data-theme="light"] .content-card,
:root[data-theme="light"] .faq-list details,
:root[data-theme="light"] .blog-card,
:root[data-theme="light"] .contact-form,
:root[data-theme="light"] .booking-shell,
:root[data-theme="light"] .wholesale-pricing-cta {
    color: #111827;
    background-color: #ffffff;
    border-color: rgba(15, 23, 42, 0.14);
}

:root[data-theme="light"] .pricing-section .price-card {
    color: #111827;
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(59, 130, 246, 0.11),
            transparent 38%
        ),
        linear-gradient(155deg, #ffffff, #eef4ff);
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 22px 55px rgba(30, 64, 175, 0.11);
}

:root[data-theme="light"] .pricing-section .price-card.popular {
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(168, 85, 247, 0.16),
            transparent 40%
        ),
        linear-gradient(155deg, #ffffff, #f5efff);
    border-color: rgba(147, 51, 234, 0.65);
    box-shadow:
        inset 0 0 0 1px rgba(168, 85, 247, 0.16),
        0 24px 65px rgba(126, 34, 206, 0.18);
}

:root[data-theme="light"] .price-card h3,
:root[data-theme="light"] .brand-price strong,
:root[data-theme="light"] .price-card > .plan-total,
:root[data-theme="light"] .price-card > .annual-note,
:root[data-theme="light"] .price-card li {
    color: #111827;
}

:root[data-theme="light"] .brand-price small,
:root[data-theme="light"] .price-card li,
:root[data-theme="light"] .pricing-faq p {
    color: #5f6475;
}

:root[data-theme="light"] .pipeline-copy h2 {
    color: transparent;
}

/* Shared interaction and motion hooks. */
.site-header {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    will-change: transform;
}

.site-header.is-hidden {
    transform: translate(-50%, calc(-100% - 28px));
}

.site-header.is-hidden:focus-within,
.site-header.menu-open {
    transform: translate(-50%, 0);
}

.site-header nav,
.site-header nav a,
.site-footer a,
.socials a,
.partner-logo img {
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease,
        opacity 0.25s ease;
}

.site-footer > div > a:hover,
.site-footer > div > a:focus-visible {
    color: var(--heading-color);
    transform: translateX(4px);
}

html[dir="rtl"] .site-footer > div > a:hover,
html[dir="rtl"] .site-footer > div > a:focus-visible {
    transform: translateX(-4px);
}

.socials a:hover,
.socials a:focus-visible {
    border-color: var(--border-accent);
    transform: translateY(-4px) rotate(-4deg);
}

.popup-backdrop:not([hidden]) {
    animation: octa-rest-popup-backdrop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.popup-backdrop:not([hidden]) .journal-popup {
    animation: octa-rest-popup-card 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.octa-particles,
.octa-feature-particles,
.octa-motion-decoration,
.pricing-symbol-field,
.octa-pricing-symbols,
.octa-about-scene,
.octa-contact-scene,
.octa-neural-mesh,
.octa-blog-neural,
.octa-cta-decor {
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.octa-particle-field {
    isolation: isolate;
    position: relative;
}

.octa-particle-field > :not(.octa-particles) {
    position: relative;
    z-index: 1;
}

.octa-particle-field > .octa-particles {
    z-index: 0;
}

.octa-feature-particles {
    z-index: 0;
}

.octa-particles,
.octa-feature-particles {
    translate: var(--octa-pointer-x, 0px) var(--octa-pointer-y, 0px);
}

.octa-particle {
    background: currentColor;
    border-radius: 50%;
    width: var(--octa-particle-size, 4px);
    height: var(--octa-particle-size, 4px);
    opacity: 0.2;
    position: absolute;
    left: var(--octa-particle-x, 50%);
    top: var(--octa-particle-y, 50%);
    animation: octa-rest-particle-float var(--octa-particle-duration, 8s)
        ease-in-out var(--octa-particle-delay, 0s) infinite alternate;
}

/* Home: steps, connected capability flow, pipeline, and marquee. */
.steps-section .step-icon {
    animation: octa-rest-step-glow 3s ease-in-out infinite;
}

.steps-section .step-icon .material-symbols-outlined {
    animation: octa-rest-step-float 4s ease-in-out infinite;
}

.cap-lines line {
    stroke-dasharray: 7 10;
    animation: octa-rest-line-flow 3s linear infinite;
}

.capability-node,
.pipeline-app {
    animation: octa-rest-card-float 6s ease-in-out infinite;
}

.capability-node:nth-of-type(2),
.pipeline-app:nth-of-type(2) {
    animation-delay: -0.75s;
}
.capability-node:nth-of-type(3),
.pipeline-app:nth-of-type(3) {
    animation-delay: -1.5s;
}
.capability-node:nth-of-type(4),
.pipeline-app:nth-of-type(4) {
    animation-delay: -2.25s;
}
.capability-node:nth-of-type(5),
.pipeline-app:nth-of-type(5) {
    animation-delay: -3s;
}
.capability-node:nth-of-type(6),
.pipeline-app:nth-of-type(6) {
    animation-delay: -3.75s;
}

.capability-core::before {
    animation: octa-rest-spin 16s linear infinite;
}

.capability-core::after {
    animation: octa-rest-spin-reverse 21s linear infinite;
}

.pipeline-arrow {
    animation: octa-rest-arrow-flow 2s ease-in-out infinite;
}

.pipeline-section .prospect-card {
    animation: octa-rest-status-glow 4s ease-in-out infinite;
}

.testimonial-block {
    overflow-x: clip;
}

/* Feature overview and detail visuals. */
.feature-showcase {
    position: relative;
    animation: octa-rest-feature-card-float 6s ease-in-out infinite;
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.feature-showcase:nth-child(2) {
    animation-delay: -0.5s;
}
.feature-showcase:nth-child(3) {
    animation-delay: -1s;
}
.feature-showcase:nth-child(4) {
    animation-delay: -1.5s;
}
.feature-showcase:nth-child(5) {
    animation-delay: -2s;
}
.feature-showcase:nth-child(6) {
    animation-delay: -2.5s;
}

.motion-ready .feature-showcase.scroll-reveal.is-visible {
    animation: octa-rest-feature-card-float 6s ease-in-out infinite !important;
}

.motion-ready .feature-showcase:nth-child(2).scroll-reveal.is-visible {
    animation-delay: -0.5s !important;
}
.motion-ready .feature-showcase:nth-child(3).scroll-reveal.is-visible {
    animation-delay: -1s !important;
}
.motion-ready .feature-showcase:nth-child(4).scroll-reveal.is-visible {
    animation-delay: -1.5s !important;
}
.motion-ready .feature-showcase:nth-child(5).scroll-reveal.is-visible {
    animation-delay: -2s !important;
}
.motion-ready .feature-showcase:nth-child(6).scroll-reveal.is-visible {
    animation-delay: -2.5s !important;
}

.feature-showcase .feature-showcase-visual > svg,
.feature-showcase .feature-showcase-visual > .material-symbols-outlined {
    animation: octa-rest-feature-icon-float 6s ease-in-out infinite;
}

.feature-showcase:nth-child(2) .feature-showcase-visual > * {
    animation-delay: -0.5s;
}
.feature-showcase:nth-child(3) .feature-showcase-visual > * {
    animation-delay: -1s;
}
.feature-showcase:nth-child(4) .feature-showcase-visual > * {
    animation-delay: -1.5s;
}
.feature-showcase:nth-child(5) .feature-showcase-visual > * {
    animation-delay: -2s;
}
.feature-showcase:nth-child(6) .feature-showcase-visual > * {
    animation-delay: -2.5s;
}

.visual-messages .mock-window {
    animation: octa-rest-window-float 6s ease-in-out infinite;
}

.visual-messages .message,
.visual-messages .ghost-note {
    animation: octa-rest-message-cascade 3s ease-in-out infinite;
}

.visual-messages .ghost-note {
    animation-delay: -0.9s;
}
.visual-messages .message.outgoing {
    animation-delay: -1.8s;
}

.visual-triage::after {
    content: "";
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(168, 85, 247, 0.28),
        transparent 62%
    );
    border-radius: 50%;
    position: absolute;
    inset: 22%;
    animation: octa-rest-ai-pulse 4s ease-in-out infinite;
}

.visual-triage .triage-core {
    animation: octa-rest-ai-core-glow 4s ease-in-out infinite;
}

.visual-triage svg path {
    stroke-dasharray: 8 16;
    animation: octa-rest-stream-dash 3s linear infinite;
}

.visual-triage .triage-message {
    animation: octa-rest-card-float 6s ease-in-out infinite;
}

.visual-routing .route-line {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: octa-rest-route-draw 3s ease-in-out infinite;
}

.visual-routing .route-pulse,
.visual-routing .route-team {
    animation: octa-rest-route-node 3s ease-in-out infinite;
}

.visual-routing .team-b {
    animation-delay: -1s;
}
.visual-routing .team-c {
    animation-delay: -2s;
}

.visual-directory::after {
    content: "";
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(129, 140, 248, 0.42),
        transparent
    );
    height: 1px;
    position: absolute;
    inset-inline: 7%;
    top: 18%;
    animation: octa-rest-directory-scan 4s ease-in-out infinite;
}

.visual-directory .directory-row {
    animation: octa-rest-row-enter 0.8s cubic-bezier(0.2, 0.72, 0.22, 1) both;
}

.visual-white-label .fiber {
    stroke-dasharray: 12 18;
    animation: octa-rest-fiber-flow 4s linear infinite;
}

.visual-white-label .fiber-b {
    animation-delay: -1.35s;
}
.visual-white-label .fiber-c {
    animation-delay: -2.7s;
}

.visual-white-label .client-panel {
    animation: octa-rest-panel-float 6s ease-in-out infinite alternate;
}

.visual-white-label .client-two {
    animation-delay: -2s;
}
.visual-white-label .client-three {
    animation-delay: -4s;
}

/* Solution overview and detail motion. */
.solution-card {
    height: 100%;
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.solution-card .ring-one {
    animation: octa-rest-spin 15s linear infinite;
}

.solution-card .ring-two {
    animation: octa-rest-spin-reverse 15s linear infinite;
}

.solution-card .solution-icon {
    animation: octa-rest-solution-pulse 4s ease-in-out infinite;
}

.solution-dashboard::after {
    content: "";
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 48%,
        transparent 66%
    );
    width: 45%;
    position: absolute;
    inset-block: 0;
    left: -55%;
    animation: octa-rest-shimmer 4s ease-in-out infinite;
    z-index: -1;
}

.solution-dashboard .dash-bars i,
.visual-analytics .analytics-chart i {
    animation: octa-rest-progress 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.solution-dashboard .dash-footer .material-symbols-outlined,
.solution-dashboard .profile-route,
.growth-stream .material-symbols-outlined {
    animation: octa-rest-status-glow 2s ease-in-out infinite;
}

.growth-dashboard svg path:not(.growth-area) {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: octa-rest-path-draw 2s ease-out forwards;
}

.agency-flow i {
    animation-name: octa-rest-agency-flow;
    animation-duration: 2.2s;
    animation-iteration-count: infinite;
}

/* Pricing motion and FAQ reveal. */
.pricing-floating-symbol,
.floating-symbol,
.pricing-symbol-field .material-symbols-outlined,
.octa-pricing-symbols .material-symbols-outlined {
    color: rgba(124, 58, 237, 0.24);
    filter: blur(0.5px);
    position: absolute;
    animation: octa-rest-pricing-symbol 8s ease-in-out infinite;
}

.pricing-floating-symbol:nth-child(2),
.floating-symbol:nth-child(2) {
    animation-delay: -2s;
}
.pricing-floating-symbol:nth-child(3),
.floating-symbol:nth-child(3) {
    animation-delay: -4s;
}
.pricing-floating-symbol:nth-child(4),
.floating-symbol:nth-child(4) {
    animation-delay: -6s;
}

.price-card,
.wholesale-pricing-cta {
    animation: octa-rest-card-breathe 4s ease-in-out infinite;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.72, 0.22, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.price-card:nth-child(2) {
    animation-delay: -0.7s;
}
.price-card:nth-child(3) {
    animation-delay: -1.4s;
}

.motion-ready .price-card.scroll-reveal.is-visible,
.motion-ready .wholesale-pricing-cta.scroll-reveal.is-visible {
    animation: octa-rest-card-breathe 4s ease-in-out infinite !important;
}

.motion-ready
    .pricing-section
    .price-card:nth-child(2).scroll-reveal.is-visible {
    animation-delay: -0.7s !important;
}
.motion-ready
    .pricing-section
    .price-card:nth-child(3).scroll-reveal.is-visible {
    animation-delay: -1.4s !important;
}

.popular-label {
    animation: octa-rest-badge-breathe 3s ease-in-out infinite;
}

.pricing-faq details[open] > p,
.faq-list details[open] > .cyber-reveal {
    animation: octa-rest-faq-reveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* About motion hooks added as decorative, inaccessible presentation layers. */
.octa-about-trace,
.octa-about-traces,
.octa-about-scene .trace,
.octa-about-scene .blueprint-trace,
.octa-about-ribbon,
.octa-energy-ribbon,
.octa-about-scene .energy-ribbon,
.octa-about-blueprint,
.octa-blueprint-core,
.octa-about-scene .blueprint-core,
.octa-about-core,
.octa-about-panel,
.octa-floating-panel,
.octa-about-scene .floating-panel {
    pointer-events: none;
    position: absolute;
}

.octa-about-trace,
.octa-about-traces path,
.octa-about-scene .trace,
.octa-about-scene .blueprint-trace {
    stroke-dasharray: 12 20;
    animation: octa-rest-about-trace 2s linear infinite;
}

.octa-about-blueprint,
.octa-blueprint-core,
.octa-about-scene .blueprint-core,
.octa-about-panel,
.octa-floating-panel,
.octa-about-scene .floating-panel {
    animation: octa-rest-about-float 6s ease-in-out infinite;
}

.octa-about-ribbon,
.octa-energy-ribbon,
.octa-about-scene .energy-ribbon {
    animation: octa-rest-about-ribbon 10s linear infinite;
}

.octa-about-core {
    animation: octa-rest-about-core 40s linear infinite;
}

main:has(.original-partners) .vision-grid article,
main:has(.original-partners) .content-card {
    transition:
        opacity 0.72s ease var(--reveal-delay, 0ms),
        translate 0.72s cubic-bezier(0.2, 0.72, 0.22, 1)
            var(--reveal-delay, 0ms),
        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

main:has(.original-partners) .vision-grid article:hover,
main:has(.original-partners) .content-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-7px);
    box-shadow: 0 22px 55px rgba(124, 58, 237, 0.18);
}

/* Contact floating/glow hooks and the restored pointer-parallax layer. */
.octa-contact-float,
.octa-contact-orb,
.contact-float-icon,
.octa-contact-glow,
.octa-contact-number,
[data-contact-14],
.octa-contact-scene .float-icon,
.octa-contact-scene .glow,
.octa-contact-scene .contact-number,
.contact-parallax-14,
[data-contact-parallax],
.icon-14 {
    pointer-events: none;
    position: absolute;
}

.octa-contact-float,
.contact-float-icon,
.octa-contact-number,
[data-contact-14],
.octa-contact-scene .float-icon,
.octa-contact-scene .contact-number,
.contact-parallax-14,
[data-contact-parallax],
.icon-14 {
    animation: octa-rest-contact-float 6s ease-in-out infinite;
}

.octa-contact-orb,
.octa-contact-glow,
.octa-contact-scene .glow {
    animation: octa-rest-contact-glow 3s ease-in-out infinite;
}

.contact-points > div,
.support-grid > a,
.booking-shell {
    transition:
        transform 0.35s cubic-bezier(0.2, 0.72, 0.22, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.contact-points > div:hover,
.support-grid > a:hover {
    border-color: var(--border-accent);
    transform: translateY(-5px);
    box-shadow: 0 18px 44px rgba(124, 58, 237, 0.16);
}

/* Journal index/article neural atmosphere and content entrances. */
.octa-neural-mesh {
    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(168, 85, 247, 0.2),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 68%,
            rgba(59, 130, 246, 0.16),
            transparent 30%
        );
    background-size: 120% 120%;
    animation: octa-rest-blog-mesh 12s ease-in-out infinite alternate;
}

.octa-blog-neural .mesh {
    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(168, 85, 247, 0.2),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 68%,
            rgba(59, 130, 246, 0.16),
            transparent 30%
        );
    background-size: 120% 120%;
    position: absolute;
    inset: 0;
    animation: octa-rest-blog-mesh 12s ease-in-out infinite alternate;
}

.octa-neural-mesh::before {
    content: "";
    background-image:
        linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    position: absolute;
    inset: -42px;
    animation: octa-rest-blog-grid 20s linear infinite;
}

.octa-neural-ring,
.octa-blog-neural .neural-ring {
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: 50%;
    position: absolute;
    inset: var(--octa-ring-inset, 20%);
    animation: octa-rest-spin var(--octa-ring-speed, 15s) linear infinite;
}

.octa-neural-ring:nth-child(2),
.octa-blog-neural .neural-ring:nth-child(2) {
    --octa-ring-inset: 30%;
    --octa-ring-speed: 10s;
    border-color: rgba(59, 130, 246, 0.28);
    animation-direction: reverse;
}

.octa-neural-ring:nth-child(3),
.octa-blog-neural .neural-ring:nth-child(3) {
    --octa-ring-inset: 40%;
    --octa-ring-speed: 8s;
}

.blog-card,
.article-content > * {
    transition:
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        opacity 0.4s ease;
}

.article-content > * {
    animation: octa-rest-content-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.article-content > *:nth-child(2) {
    animation-delay: 0.08s;
}
.article-content > *:nth-child(3) {
    animation-delay: 0.16s;
}
.article-content > *:nth-child(4) {
    animation-delay: 0.24s;
}

.blog-card:hover {
    border-color: var(--border-accent);
    box-shadow: 0 24px 60px rgba(124, 58, 237, 0.18);
}

@media (hover: hover) and (pointer: fine) {
    [data-tilt],
    .octa-tilt-surface,
    .tilt-surface.is-visible {
        --octa-tilt-transform: translate3d(
                var(--octa-parallax-x, 0px),
                var(--octa-parallax-y, 0px),
                0
            )
            perspective(1000px)
            rotateX(
                clamp(
                    -5deg,
                    var(
                        --octa-rotate-x,
                        var(--octa-tilt-x, var(--tilt-x, 0deg))
                    ),
                    5deg
                )
            )
            rotateY(
                clamp(
                    -5deg,
                    var(
                        --octa-rotate-y,
                        var(--octa-tilt-y, var(--tilt-y, 0deg))
                    ),
                    5deg
                )
            );
        transform: var(--octa-tilt-transform);
        translate: 0
            calc(
                var(--octa-layout-y, 0px) + var(--octa-reveal-y, 0px) +
                    var(--octa-hover-lift, 0px)
            );
        transform-style: preserve-3d;
        will-change: transform;
    }

    .visual-white-label .client-panel {
        translate: var(--octa-parallax-x, var(--octa-pointer-x, 0px))
            var(--octa-parallax-y, var(--octa-pointer-y, 0px));
    }

    .contact-parallax-14,
    .icon-14,
    [data-parallax]:not(.octa-about-scene):not(.octa-contact-scene):not(
            .octa-blog-neural
        ):not(.octa-tilt-surface):not(.tilt-surface) {
        transform: translate(
            var(--octa-parallax-x, var(--octa-pointer-x, 0px)),
            var(--octa-parallax-y, var(--octa-pointer-y, 0px))
        );
    }

    .solution-card:hover,
    .feature-showcase:hover,
    .related-card:hover,
    .benefit-card:hover {
        --octa-hover-lift: -6px;
        transform: var(--octa-tilt-transform);
    }

    main:has(.original-partners) .vision-grid article:hover,
    main:has(.original-partners) .content-card:hover {
        --octa-hover-lift: -7px;
        transform: var(--octa-tilt-transform);
    }
}

@keyframes octa-rest-popup-backdrop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes octa-rest-popup-card {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes octa-rest-particle-float {
    from {
        opacity: 0.08;
        transform: translate3d(-8px, 10px, 0) scale(0.8);
    }
    to {
        opacity: 0.34;
        transform: translate3d(12px, -18px, 0) scale(1.15);
    }
}

@keyframes octa-rest-step-glow {
    0%,
    100% {
        box-shadow: 0 0 28px rgba(124, 58, 237, 0.22);
    }
    50% {
        box-shadow: 0 0 54px rgba(168, 85, 247, 0.46);
    }
}

@keyframes octa-rest-step-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes octa-rest-line-flow {
    to {
        stroke-dashoffset: -34;
    }
}

@keyframes octa-rest-card-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

@keyframes octa-rest-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes octa-rest-arrow-flow {
    0%,
    100% {
        opacity: 0.45;
        transform: translateY(-4px);
    }
    50% {
        opacity: 1;
        transform: translateY(8px);
    }
}

@keyframes octa-rest-status-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(52, 211, 153, 0));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.62));
    }
}

@keyframes octa-rest-feature-icon-float {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

@keyframes octa-rest-feature-card-float {
    0%,
    100% {
        inset-block-start: 0;
    }
    50% {
        inset-block-start: -8px;
    }
}

@keyframes octa-rest-window-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes octa-rest-message-cascade {
    0%,
    10% {
        opacity: 0.18;
        transform: translateY(-12px) scale(0.97);
    }
    28%,
    76% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0.18;
        transform: translateY(10px) scale(0.98);
    }
}

@keyframes octa-rest-ai-pulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.88);
        filter: blur(28px);
    }
    50% {
        opacity: 0.72;
        transform: scale(1.2);
        filter: blur(54px);
    }
}

@keyframes octa-rest-ai-core-glow {
    0%,
    100% {
        box-shadow: 0 0 22px rgba(168, 85, 247, 0.32);
    }
    50% {
        box-shadow: 0 0 62px rgba(168, 85, 247, 0.7);
    }
}

@keyframes octa-rest-stream-dash {
    to {
        stroke-dashoffset: -48;
    }
}

@keyframes octa-rest-route-draw {
    0% {
        opacity: 0.22;
        stroke-dashoffset: 800;
    }
    55%,
    85% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    100% {
        opacity: 0.22;
        stroke-dashoffset: -120;
    }
}

@keyframes octa-rest-route-node {
    0%,
    100% {
        opacity: 0.72;
        box-shadow: 0 0 0 rgba(168, 85, 247, 0);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 26px rgba(168, 85, 247, 0.34);
    }
}

@keyframes octa-rest-directory-scan {
    0% {
        opacity: 0;
        transform: translateY(-18px);
    }
    16%,
    84% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateY(340px);
    }
}

@keyframes octa-rest-row-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes octa-rest-fiber-flow {
    to {
        stroke-dashoffset: -90;
    }
}

@keyframes octa-rest-panel-float {
    from {
        transform: translateY(-5px);
    }
    to {
        transform: translateY(8px);
    }
}

@keyframes octa-rest-solution-pulse {
    0%,
    100% {
        opacity: 0.82;
        filter: drop-shadow(0 0 13px rgba(168, 85, 247, 0.46));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.82));
    }
}

@keyframes octa-rest-shimmer {
    0%,
    18% {
        transform: translateX(0);
        opacity: 0;
    }
    36% {
        opacity: 1;
    }
    70%,
    100% {
        transform: translateX(390%);
        opacity: 0;
    }
}

@keyframes octa-rest-progress {
    from {
        opacity: 0.2;
        transform: scaleY(0.08);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes octa-rest-path-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes octa-rest-agency-flow {
    0%,
    100% {
        opacity: 0.25;
        transform: scaleX(0.16);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes octa-rest-pricing-symbol {
    0%,
    100% {
        opacity: 0.15;
        transform: translateY(0) rotate(0);
    }
    50% {
        opacity: 0.35;
        transform: translateY(-25px) rotate(8deg);
    }
}

@keyframes octa-rest-card-breathe {
    0%,
    100% {
        box-shadow: 0 18px 45px rgba(2, 6, 23, 0.13);
    }
    50% {
        box-shadow: 0 24px 62px rgba(124, 58, 237, 0.22);
    }
}

@keyframes octa-rest-badge-breathe {
    0%,
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.86;
        transform: translateX(-50%) scale(1.05);
    }
}

@keyframes octa-rest-faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes octa-rest-about-trace {
    to {
        stroke-dashoffset: -64;
    }
}

@keyframes octa-rest-about-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -14px, 0);
    }
}

@keyframes octa-rest-about-chaos {
    from {
        transform: translate3d(-3%, -2%, 0) rotate(0);
    }
    50% {
        transform: translate3d(4%, 3%, 0) rotate(180deg);
    }
    to {
        transform: translate3d(-3%, -2%, 0) rotate(360deg);
    }
}

@keyframes octa-rest-about-ribbon {
    from {
        background-position: 0 0;
        transform: translateX(-8%);
    }
    to {
        background-position: 220px 0;
        transform: translateX(8%);
    }
}

@keyframes octa-rest-about-core {
    to {
        rotate: 360deg;
    }
}

@keyframes octa-rest-contact-float {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-14px) rotate(2deg);
    }
}

@keyframes octa-rest-contact-glow {
    0%,
    100% {
        opacity: 0.28;
        filter: blur(28px);
        transform: scale(0.94);
    }
    50% {
        opacity: 0.62;
        filter: blur(44px);
        transform: scale(1.08);
    }
}

@keyframes octa-rest-blog-mesh {
    0% {
        background-position: 0% 20%;
    }
    50% {
        background-position: 60% 80%;
    }
    100% {
        background-position: 100% 30%;
    }
}

@keyframes octa-rest-blog-grid {
    to {
        transform: translate3d(42px, 42px, 0);
    }
}

@keyframes octa-rest-content-enter {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.octa-about-chaos {
    pointer-events: none;
    animation: octa-rest-about-chaos 20s linear infinite;
}

.octa-about-scene {
    z-index: 0;
    min-height: 880px;
    translate: var(--octa-parallax-x, 0px) var(--octa-parallax-y, 0px);
}

main[data-page="about"] > :not(.octa-about-scene),
main[data-page="contact"] > :not(.octa-contact-scene),
main[data-page^="blog"] > :not(.octa-blog-neural) {
    position: relative;
    z-index: 1;
}

.octa-about-traces {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.octa-about-traces path {
    fill: none;
    stroke: rgba(168, 85, 247, 0.28);
    stroke-width: 1.5;
}

.octa-blueprint-core {
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.36);
    border-radius: 50%;
    width: 160px;
    height: 160px;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: octa-rest-about-core 40s linear infinite;
}

.octa-floating-panel {
    background: rgba(17, 16, 37, 0.58);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 18px;
    width: 160px;
    height: 92px;
}

.octa-floating-panel.panel-one {
    top: 18%;
    left: 10%;
}
.octa-floating-panel.panel-two {
    top: 48%;
    right: 10%;
    animation-delay: -2s;
}
.octa-floating-panel.panel-three {
    bottom: 8%;
    left: 24%;
    animation-delay: -4s;
}

.octa-energy-ribbon {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(168, 85, 247, 0.4),
        rgba(59, 130, 246, 0.28),
        transparent
    );
    width: 65%;
    height: 2px;
    left: 18%;
    top: 38%;
}

.octa-energy-ribbon.ribbon-two {
    top: 68%;
    animation-direction: reverse;
}

.octa-contact-scene {
    z-index: 0;
    min-height: 880px;
}

.octa-contact-number,
[data-contact-14] {
    color: rgba(192, 132, 252, 0.12);
    font-size: clamp(9rem, 28vw, 28rem);
    font-weight: 900;
    line-height: 0.8;
    right: -3vw;
    top: 20%;
    translate: var(--octa-parallax-x, 0px) var(--octa-parallax-y, 0px);
}

.octa-contact-glow {
    background: rgba(168, 85, 247, 0.2);
    border-radius: 50%;
    width: 240px;
    height: 240px;
}

.octa-contact-glow.glow-one {
    top: 18%;
    left: 4%;
}
.octa-contact-glow.glow-two {
    top: 56%;
    right: 9%;
    animation-delay: -1.5s;
}

.contact-float-icon {
    color: rgba(192, 132, 252, 0.26);
    font-size: 54px;
}

.contact-float-icon.icon-one {
    top: 32%;
    left: 12%;
}
.contact-float-icon.icon-two {
    top: 62%;
    right: 20%;
    animation-delay: -2s;
}

.octa-blog-neural {
    pointer-events: none;
    z-index: 0;
    position: absolute;
    inset: 0 0 auto;
    height: 880px;
    overflow: hidden;
    translate: var(--octa-parallax-x, 0px) var(--octa-parallax-y, 0px);
}

.octa-blog-neural .octa-neural-mesh {
    width: 100%;
    height: 100%;
}

.octa-blog-neural .octa-neural-mesh path {
    fill: none;
    stroke: rgba(168, 85, 247, 0.24);
    stroke-dasharray: 9 14;
    animation: octa-rest-stream-dash 12s linear infinite;
}

.octa-blog-neural .octa-neural-mesh circle {
    fill: rgba(192, 132, 252, 0.5);
    animation: octa-rest-route-node 3s ease-in-out infinite;
}

.octa-feature-particles > i {
    background: #c084fc;
    border-radius: 50%;
    width: 4px;
    height: 4px;
    opacity: 0.18;
    position: absolute;
    left: 10%;
    top: 16%;
    animation: octa-rest-particle-float 9s ease-in-out infinite alternate;
}

.octa-feature-particles > i:nth-child(2) {
    left: 24%;
    top: 38%;
    width: 3px;
    height: 3px;
    animation-delay: -0.7s;
}
.octa-feature-particles > i:nth-child(3) {
    left: 41%;
    top: 12%;
    width: 5px;
    height: 5px;
    animation-delay: -1.4s;
}
.octa-feature-particles > i:nth-child(4) {
    left: 57%;
    top: 66%;
    animation-delay: -2.1s;
}
.octa-feature-particles > i:nth-child(5) {
    left: 72%;
    top: 25%;
    width: 3px;
    height: 3px;
    animation-delay: -2.8s;
}
.octa-feature-particles > i:nth-child(6) {
    left: 88%;
    top: 52%;
    width: 5px;
    height: 5px;
    animation-delay: -3.5s;
}
.octa-feature-particles > i:nth-child(7) {
    left: 16%;
    top: 78%;
    animation-delay: -4.2s;
}
.octa-feature-particles > i:nth-child(8) {
    left: 34%;
    top: 54%;
    width: 3px;
    height: 3px;
    animation-delay: -4.9s;
}
.octa-feature-particles > i:nth-child(9) {
    left: 50%;
    top: 88%;
    width: 5px;
    height: 5px;
    animation-delay: -5.6s;
}
.octa-feature-particles > i:nth-child(10) {
    left: 65%;
    top: 43%;
    animation-delay: -6.3s;
}
.octa-feature-particles > i:nth-child(11) {
    left: 80%;
    top: 84%;
    width: 3px;
    height: 3px;
    animation-delay: -7s;
}
.octa-feature-particles > i:nth-child(12) {
    left: 94%;
    top: 14%;
    width: 5px;
    height: 5px;
    animation-delay: -7.7s;
}

.octa-pricing-symbols > span {
    color: rgba(124, 58, 237, 0.25);
    font-size: clamp(2rem, 5vw, 5rem);
    font-weight: 900;
    position: absolute;
    left: 8%;
    top: 18%;
    animation: octa-rest-pricing-symbol 8s ease-in-out infinite;
}

.octa-pricing-symbols > span:nth-child(2) {
    left: 34%;
    top: 66%;
    animation-delay: -2s;
}
.octa-pricing-symbols > span:nth-child(3) {
    left: 62%;
    top: 16%;
    animation-delay: -4s;
}
.octa-pricing-symbols > span:nth-child(4) {
    left: 88%;
    top: 64%;
    animation-delay: -6s;
}

@media (min-width: 640px) {
    .feature-showcase-grid,
    .related-grid,
    .content-grid,
    .content-grid:has(.content-card:nth-child(4)),
    .four-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 641px) and (max-width: 960px) {
    .pricing-section .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-section .price-card:nth-child(3) {
        grid-column: 1 / -1;
        width: min(100%, 570px);
        margin-inline: auto;
    }
}

@media (min-width: 768px) {
    .solutions-section .three-grid,
    #solution-models .three-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 961px) {
    .pricing-section .pricing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pricing-section .price-card:nth-child(3) {
        grid-column: auto;
        width: auto;
        max-width: none;
        margin-inline: 0;
    }
}

@media (min-width: 1024px) {
    .feature-showcase-grid,
    .related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .solutions-section .three-grid,
    #solution-models .three-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .content-grid:has(.content-card:nth-child(4)),
    .four-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .site-header {
        grid-template-columns: auto 1fr;
        padding-inline: 20px 12px;
    }

    .menu-toggle {
        display: block;
    }

    .site-header nav {
        background: var(--surface-solid);
        border: 1px solid var(--border-soft);
        border-radius: 22px;
        box-shadow: 0 22px 60px rgba(8, 5, 20, 0.28);
        flex-direction: column;
        gap: 2px;
        max-height: min(72vh, 560px);
        padding: 10px;
        display: flex;
        visibility: hidden;
        opacity: 0;
        overflow-y: auto;
        pointer-events: none;
        position: absolute;
        inset: calc(100% + 10px) 0 auto;
        transform: translateY(-8px);
        transition:
            opacity 0.26s ease,
            transform 0.26s ease,
            visibility 0.26s;
    }

    .site-header.menu-open nav {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-header nav a {
        border: 0;
        border-radius: 13px;
        padding: 13px 16px;
    }

    .site-header nav a.active,
    .site-header nav a:hover {
        background: rgba(var(--purple-rgb), 0.1) !important;
    }

    .mobile-nav-controls,
    .octa-mobile-nav-controls,
    .mobile-nav-actions {
        border-top: 1px solid var(--border-soft);
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 6px;
        padding: 12px 8px 4px;
        display: flex;
    }

    .header-actions > .header-currency,
    .header-actions > .direction-toggle,
    .header-actions > .header-demo {
        display: none !important;
    }

    .mobile-nav-actions .mobile-header-currency,
    .mobile-nav-actions .mobile-direction-toggle,
    .mobile-nav-actions .mobile-header-demo {
        display: inline-flex !important;
    }

    .mobile-nav-actions .mobile-header-demo {
        min-height: 42px;
    }

    .mobile-nav-actions .direction-toggle > span:last-child {
        display: inline !important;
    }

    .mobile-nav-actions .direction-toggle {
        width: auto;
        min-width: max-content;
        border-radius: 999px;
        padding-inline: 12px;
    }

    .mobile-nav-actions .header-currency,
    .mobile-nav-actions .direction-toggle {
        display: inline-flex !important;
    }
}

@media (max-width: 767px) {
    .detail-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-visual,
    .solution-dashboard,
    .capability-visual {
        aspect-ratio: 1 / 1;
        width: min(100%, 540px);
        min-height: 0;
        padding: clamp(16px, 5vw, 28px);
        overflow: hidden;
    }

    .mock-window {
        inset: 9% 6%;
    }

    .visual-triage .triage-message {
        width: min(42%, 155px);
        padding: 10px;
        font-size: 0.62rem;
    }

    .visual-triage .triage-core {
        padding: 16px;
    }

    .visual-triage .triage-core .material-symbols-outlined {
        font-size: 38px;
    }

    .visual-routing .route-team {
        width: 29%;
        padding: 10px;
        bottom: 7%;
    }

    .visual-routing .team-a {
        left: 2%;
    }
    .visual-routing .team-c {
        right: 2%;
    }

    .visual-routing .route-lead {
        max-width: 58%;
        padding: 11px 13px;
        top: 10%;
        font-size: 0.68rem;
    }

    .visual-directory,
    .visual-analytics,
    .solution-dashboard {
        padding: clamp(16px, 5vw, 25px);
    }

    .directory-row {
        grid-template-columns: 34px 1fr auto;
        gap: 8px;
        padding-block: 12px;
    }

    .directory-row b {
        display: none;
    }

    .analytics-chart,
    .dash-bars {
        gap: 8px;
        height: 40%;
        min-height: 105px;
    }

    .sales-profile blockquote {
        margin-block: 20px;
        padding: 15px;
        font-size: 0.78rem;
    }

    .growth-dashboard svg {
        height: 38%;
        min-height: 115px;
    }

    .growth-stream {
        flex-wrap: wrap;
    }

    .growth-stream > span {
        flex-basis: calc(50% - 4px);
    }

    .agency-pipeline {
        aspect-ratio: auto;
        min-height: 0;
    }

    .blog-card.featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-card.featured .blog-art {
        min-height: 240px;
    }
}

@media (max-width: 640px) {
    .pricing-section .pricing-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pricing-section .price-card,
    .pricing-section .price-card:nth-child(3) {
        grid-column: auto;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    .button-row,
    .cta-actions,
    .page-hero .button-row,
    html[dir="rtl"] .button-row,
    html[dir="rtl"] .cta-actions,
    html[dir="rtl"] .page-hero .button-row {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .button-row .button,
    .cta-actions .button,
    .page-hero .button-row .button {
        width: min(100%, 360px);
    }

    .pricing-controls,
    .pricing-controls .billing-toggle,
    .pricing-controls .ai-model-toggle {
        width: 100%;
    }

    .pricing-controls .billing-toggle,
    .pricing-controls .ai-model-toggle {
        justify-content: center;
    }

    .pricing-controls .ai-model-toggle button {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 10px;
    }

    .process-strip,
    .support-grid,
    .vision-grid,
    .outcome-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-title {
        flex-wrap: wrap;
    }

    .profile-title em {
        margin-top: 10px;
        margin-inline-start: 49px;
    }

    .pricing-faq summary {
        align-items: flex-start;
        padding-inline-end: 48px;
    }

    .pricing-faq .faq-icon {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 24px;
    }
}

@media (max-width: 430px) {
    .site-header {
        grid-template-columns: auto 1fr;
        width: calc(100% - 12px);
        padding-inline: 8px 6px;
    }

    .site-header .logo img {
        width: 78px;
    }

    .header-actions {
        gap: 3px;
    }

    .mobile-nav-actions .header-currency,
    .mobile-nav-actions .direction-toggle {
        min-height: 34px;
        height: 34px;
        padding-inline: 5px;
        font-size: 0.66rem;
    }

    .mobile-nav-actions .header-currency {
        width: 48px;
        max-width: 48px;
    }

    .mobile-nav-actions .header-currency select {
        width: 100%;
        font-size: 0.64rem;
    }

    .mobile-nav-actions .direction-toggle {
        width: auto;
        min-width: 38px;
    }

    .theme-toggle,
    .menu-toggle {
        width: 34px;
        min-width: 34px;
        min-height: 34px;
        height: 34px;
    }

    .theme-toggle .material-symbols-outlined {
        font-size: 19px;
    }

    .section {
        padding-inline: 15px;
    }

    .detail-visual,
    .solution-dashboard,
    .capability-visual {
        width: 100%;
    }

    .mock-sidebar {
        width: 44px;
        gap: 22px;
        padding-top: 22px;
    }

    .mock-window {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .mock-conversation {
        padding: 13px;
    }

    .message,
    .ghost-note {
        max-width: 94%;
        margin-block: 14px;
        padding: 10px;
        font-size: 0.62rem;
    }

    .client-panel {
        width: 42%;
        padding: 10px;
    }

    .white-core {
        width: 92px;
        height: 92px;
    }

    .white-core img {
        width: 58px;
        height: 58px;
    }

    .analytics-metrics,
    .dash-stats,
    .growth-top {
        gap: 8px;
    }

    .analytics-metrics > div,
    .dash-stats > div,
    .growth-top > div {
        padding: 11px;
    }

    .analytics-metrics b,
    .dash-stats strong,
    .growth-top strong {
        font-size: clamp(1.2rem, 7vw, 1.65rem);
    }

    .calendar-placeholder,
    .time-placeholder,
    .contact-form {
        padding: 18px;
    }
}

@media (max-width: 340px) {
    .site-header .logo img {
        width: 68px;
    }

    .mobile-nav-actions .header-currency {
        width: 42px;
        min-width: 42px;
        padding-inline: 3px;
        font-size: 0.6rem;
    }

    .mobile-nav-actions .direction-toggle {
        width: auto;
        min-width: max-content;
        padding-inline: 8px;
        font-size: 0.6rem;
    }

    .theme-toggle,
    .menu-toggle {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
    }
}

@media (hover: none), (pointer: coarse) {
    [data-tilt],
    .octa-tilt-surface,
    .tilt-surface,
    .tilt-surface.is-visible {
        transform: none !important;
        will-change: auto;
    }

    .visual-white-label .client-panel,
    .contact-parallax-14,
    [data-contact-parallax],
    [data-parallax],
    .icon-14 {
        transform: none !important;
    }
}

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }

    [data-tilt],
    [data-parallax],
    .octa-tilt-surface,
    .tilt-surface,
    .tilt-surface.is-visible,
    .site-header.is-hidden {
        transform: none !important;
        translate: none !important;
    }

    .site-header,
    .site-header.is-hidden {
        transform: translate(-50%, 0) !important;
    }

    .octa-particles,
    .pricing-symbol-field,
    .octa-about-scene,
    .octa-contact-scene,
    .octa-neural-mesh {
        display: none !important;
    }

    .scroll-reveal,
    .reveal-up,
    .reveal-card,
    .article-content > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

html.reduce-motion,
html.reduce-motion body {
    scroll-behavior: auto;
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after,
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
}

html.reduce-motion [data-tilt],
html.reduce-motion [data-parallax],
.reduce-motion [data-tilt],
.reduce-motion [data-parallax] {
    transform: none !important;
    translate: none !important;
}

/* Unified public dropdown component. Native selects remain the form/data source. */
.octa-select {
    position: relative;
    width: 100%;
    min-width: 0;
    display: inline-flex;
}

.octa-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.octa-select__trigger {
    color: var(--text-strong);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        ),
        var(--control-bg);
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: start;
    font: inherit;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.octa-select__trigger:hover,
.octa-select.is-open .octa-select__trigger,
.octa-select__trigger:focus-visible {
    border-color: rgba(168, 85, 247, 0.72);
    box-shadow:
        0 0 0 3px rgba(124, 58, 237, 0.13),
        0 10px 30px rgba(10, 5, 25, 0.18);
    outline: 0;
}

.octa-select.is-invalid .octa-select__trigger {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

.octa-select.is-placeholder .octa-select__value {
    color: var(--text-subtle);
}

.octa-select__chevron {
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    width: 7px;
    height: 7px;
    flex: none;
    opacity: 0.65;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.18s ease;
}

.octa-select.is-open .octa-select__chevron {
    transform: translateY(2px) rotate(225deg);
}

.octa-select__list {
    z-index: 140;
    color: var(--text-strong);
    background:
        radial-gradient(
            circle at 85% 0,
            rgba(124, 58, 237, 0.16),
            transparent 42%
        ),
        var(--surface-solid);
    border: 1px solid var(--border-accent);
    border-radius: 15px;
    box-shadow:
        0 22px 60px rgba(3, 2, 12, 0.42),
        inset 0 1px rgba(255, 255, 255, 0.05);
    width: max(100%, max-content);
    min-width: 100%;
    max-width: min(340px, calc(100vw - 24px));
    max-height: min(310px, 52vh);
    padding: 6px;
    position: absolute;
    inset: calc(100% + 7px) auto auto 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.octa-select__list[hidden] {
    display: none;
}

.octa-select__option {
    color: var(--text-body);
    background: transparent;
    border: 0;
    border-radius: 10px;
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    display: block;
    text-align: start;
    white-space: normal;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.35;
    cursor: pointer;
}

.octa-select__option[hidden] {
    display: none;
}

.octa-select__option:hover,
.octa-select__option:focus-visible {
    color: var(--text-strong);
    background: rgba(124, 58, 237, 0.13);
    outline: 0;
}

.octa-select__option[aria-selected="true"] {
    color: #fff;
    background: linear-gradient(100deg, #6d28d9, #8b5cf6);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.22);
    font-weight: 800;
}

.octa-select__option:disabled {
    color: var(--text-subtle);
    opacity: 0.55;
    cursor: default;
}

.octa-select.is-disabled {
    opacity: 0.58;
}

.octa-select.is-disabled .octa-select__trigger {
    cursor: not-allowed;
}

.header-currency .octa-select__trigger {
    background: transparent;
    border: 0;
    border-radius: 999px;
    min-height: 40px;
    padding: 0 7px;
    gap: 9px;
    font-size: 0.78rem;
    font-weight: 850;
}

.header-currency .octa-select__trigger:hover,
.header-currency .octa-select.is-open .octa-select__trigger,
.header-currency .octa-select__trigger:focus-visible {
    background: rgba(124, 58, 237, 0.1);
    box-shadow: none;
}

.header-currency .octa-select__list {
    width: 108px;
    min-width: 108px;
}

:root[data-theme="light"] .octa-select__trigger {
    background: linear-gradient(145deg, #fff, #f4f1fa);
    box-shadow:
        inset 0 1px #fff,
        0 6px 20px rgba(53, 38, 82, 0.06);
}

:root[data-theme="light"] .header-currency .octa-select__trigger {
    background: transparent;
    box-shadow: none;
}

:root[data-theme="light"] .octa-select__list {
    background:
        radial-gradient(
            circle at 85% 0,
            rgba(124, 58, 237, 0.1),
            transparent 42%
        ),
        #fff;
    box-shadow: 0 22px 55px rgba(53, 38, 82, 0.18);
}

html[dir="rtl"] .octa-select__list {
    inset-inline: auto 0;
}

html[dir="rtl"] .octa-select__trigger,
html[dir="rtl"] .octa-select__option {
    text-align: right;
}

@media (max-width: 960px) {
    .mobile-nav-actions .header-currency .octa-select__list {
        inset: auto 0 calc(100% + 7px) auto;
    }
}

/* Shared closing CTA — proportions and atmosphere from the original pure UI. */
.cta-section {
    max-width: 1336px;
    padding-block: 64px;
}

.cta-section > div {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 475px;
    padding: 80px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            760px 420px at 8% 110%,
            rgba(189, 0, 255, 0.09),
            transparent 60%
        ),
        radial-gradient(
            680px 380px at 94% 0%,
            rgba(54, 133, 181, 0.09),
            transparent 58%
        ),
        #0f0f24;
    border: 1px solid rgba(168, 85, 247, 0.24);
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(163, 230, 53, 0.05);
}

.cta-section > div::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: auto auto -150px -90px;
    width: 660px;
    height: 304px;
    background: linear-gradient(
        98deg,
        #00e3f2 5.55%,
        #ff9b00 32.85%,
        #f00 57.49%,
        #bd00ff 86.75%
    );
    opacity: 0.08;
    filter: blur(75px);
    pointer-events: none;
}

.cta-section > div::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(72%, 850px);
    height: 66%;
    background:
        linear-gradient(rgba(168, 85, 247, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.16) 1px, transparent 1px);
    background-position: center;
    background-size: 160px 120px;
    opacity: 0.72;
    transform: translate(-50%, -50%);
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        #000 52%,
        transparent 100%
    );
    mask-image: radial-gradient(ellipse at center, #000 52%, transparent 100%);
    pointer-events: none;
}

.cta-section > div > * {
    position: relative;
    z-index: 1;
}

/* .cta-section .pill {
    color: #7c3aed;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-bottom: 24px;
    padding: 0;
    letter-spacing: .025em;
    text-transform: none;
    font-size: .875rem;
    font-weight: 500;
} */

.cta-section h2 {
    color: #fff;
    max-width: 900px;
    margin: 0 auto 24px;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.4;
}

.cta-section h2 span {
    color: inherit !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    display: block;
}

.cta-section p {
    color: #a5a5c7;
    max-width: 650px;
    margin: 0 auto 40px;
    font-size: 1.125rem;
    line-height: 1.55;
}

.cta-section .cta-actions {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    justify-content: center;
}

.cta-section .button {
    min-height: 48px;
}

:root[data-theme="light"] .cta-section > div {
    background:
        radial-gradient(
            760px 420px at 10% 0%,
            rgba(214, 122, 177, 0.18),
            transparent 56%
        ),
        radial-gradient(
            700px 380px at 92% 10%,
            rgba(54, 133, 181, 0.14),
            transparent 56%
        ),
        #f8f6ff;
    border-color: rgba(124, 58, 237, 0.2);
    box-shadow: 0 26px 70px -34px rgba(88, 28, 135, 0.28);
}

:root[data-theme="light"] .cta-section > div::after {
    display: none;
}

:root[data-theme="light"] .cta-section h2 {
    color: #111827;
}

:root[data-theme="light"] .cta-section p {
    color: #67647a;
}

@media (max-width: 767px) {
    .cta-section {
        padding-block: 48px;
    }

    .cta-section > div {
        min-height: 0;
        padding: 56px 20px;
    }

    .cta-section h2 {
        font-size: 1.5rem;
    }

    .cta-section p {
        margin-bottom: 32px;
        font-size: 1rem;
    }

    .cta-section .cta-actions {
        flex-direction: column;
        align-items: stretch;
        width: min(100%, 340px);
    }

    .cta-section .button {
        width: 100%;
    }
}

/* Arabic pricing mirrors the English price row while preserving Arabic copy. */
html[dir="rtl"] .pricing-section .brand-price {
    direction: rtl;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

html[dir="rtl"] .pricing-section .brand-price > span {
    direction: rtl;
    unicode-bidi: isolate;
}

html[dir="rtl"] .pricing-section .brand-price > strong {
    direction: ltr;
    unicode-bidi: isolate;
    max-width: 100%;
    line-height: normal;
    text-align: center;
}

html[dir="rtl"] .pricing-section .brand-price > small {
    direction: rtl;
    unicode-bidi: isolate;
}

@media (max-width: 430px) {
    html[dir="rtl"] .pricing-section .brand-price {
        gap: 4px;
    }

    html[dir="rtl"] .pricing-section .brand-price > span {
        font-size: 0.72rem;
    }

    html[dir="rtl"] .pricing-section .brand-price > strong {
        font-size: clamp(1.9rem, 10vw, 2.3rem);
    }

    html[dir="rtl"] .pricing-section .brand-price > small {
        font-size: 0.65rem;
    }
}

/* Arabic CTA heading: calmer scale and balanced lines without changing copy. */
html[dir="rtl"] .cta-section h2 {
    max-width: 800px;
    font-size: clamp(1.75rem, 2.35vw, 2rem);
    font-weight: 600;
    line-height: 1.45;
    text-wrap: balance;
}

.cta-section h2 span {
    color: transparent !important;
    background: linear-gradient(
        100deg,
        #d8b4fe,
        #a855f7 48%,
        #60a5fa
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html[dir="rtl"][data-theme="light"] .cta-section h2 span {
    background-image: linear-gradient(
        100deg,
        #0f172a 3%,
        #7c3aed 58%,
        #9333ea 100%
    ) !important;
}

/* Use one highlight gradient throughout dark mode, matching the refined design. */
:root[data-theme="dark"] h1 > span,
:root[data-theme="dark"] h2 > span,
:root[data-theme="dark"] .steps-section .section-heading h2,
:root[data-theme="dark"] .pipeline-copy h2,
:root[data-theme="dark"] .success-message h2 {
    color: transparent !important;
    background: linear-gradient(
        100deg,
        #d8b4fe,
        #a855f7 45%,
        #60a5fa
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* The base banner uses a dark background shorthand; replace it fully in light mode. */
:root[data-theme="light"] .wholesale-pricing-cta {
    color: #111827;
    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(168, 85, 247, 0.12),
            transparent 34%
        ),
        linear-gradient(105deg, #ffffff, #f4f3ff);
    border-color: rgba(124, 58, 237, 0.25);
    box-shadow: 0 24px 70px rgba(67, 56, 120, 0.13);
}

:root[data-theme="light"] .wholesale-pricing-cta h3 {
    color: #111827;
}

:root[data-theme="light"] .wholesale-pricing-cta p {
    color: #5f6475;
}

:root[data-theme="light"] .wholesale-pricing-cta .wholesale-icon {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.09);
    border-color: rgba(124, 58, 237, 0.35);
}

@media (max-width: 767px) {
    html[dir="rtl"] .cta-section h2 {
        font-size: 1.5rem;
    }
}

/* Logical RTL header alignment, especially in compact navigation. */
html[dir="rtl"] .site-header > a {
    width: max-content;
    justify-self: start;
}

html[dir="rtl"] .site-header nav {
    direction: rtl;
    justify-content: center;
}

@media (min-width: 1081px) {
    html[dir="rtl"] .site-header .header-actions {
        justify-content: flex-end;

        width: fit-content;
        justify-self: flex-end;
    }
}

@media (max-width: 1080px) {
    .header-actions > .desktop-header-demo {
        display: none !important;
    }

    html[dir="rtl"] .site-header .header-actions {
        justify-content: flex-end;
    }

    html[dir="rtl"] .site-header nav {
        text-align: right;
        align-items: stretch;
    }

    html[dir="rtl"] .site-header nav > a {
        width: 100%;
        text-align: right;
    }

    html[dir="rtl"] .mobile-nav-actions {
        direction: rtl;
        justify-content: center;
    }
}

/* Compact mobile card proportions used by the Swiper carousels. */
@media (max-width: 767px) {
    .steps-section,
    .solutions-section {
        padding-block: 56px;
        overflow: hidden;
    }

    .steps-section .section-heading,
    .solutions-section .section-heading {
        max-width: 360px;
        margin-bottom: 28px;
        padding-inline: 4px;
    }

    .steps-section .section-heading h2,
    .solutions-section .section-heading h2 {
        font-size: clamp(1.65rem, 7.4vw, 2rem);
        line-height: 1.25;
        text-wrap: balance;
    }

    .steps-section .section-heading p,
    .solutions-section .section-heading p {
        margin-inline: auto;
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .steps-section .step-card,
    .steps-section .step-card:nth-child(2),
    .steps-section .step-card:nth-child(3) {
        --octa-layout-y: 0px;
        min-height: 230px;
        padding: 24px 18px;
        translate: 0;
    }

    .steps-section .step-top {
        gap: 14px;
    }

    .steps-section .step-icon {
        width: 72px;
        height: 72px;
    }

    .steps-section .step-icon .material-symbols-outlined {
        font-size: 30px;
    }

    .steps-section .step-top > span:last-child {
        font-size: 0.68rem;
    }

    .steps-section .step-card h3 {
        margin-top: 14px;
        font-size: 1.25rem;
        line-height: 1.3;
    }

    .steps-section .step-card p {
        max-width: 255px;
        margin: 9px auto 0;
        display: block;
        font-size: 0.85rem;
        line-height: 1.55;
    }

    .solutions-section .solution-card {
        min-height: 470px;
        padding: 24px;
    }

    .solutions-section .solution-visual {
        height: 190px;
        margin-bottom: 18px;
    }

    .solutions-section .solution-icon .material-symbols-outlined {
        font-size: 68px;
    }

    .solutions-section .solution-ring {
        width: 142px;
        height: 142px;
    }

    .solutions-section .solution-ring.ring-two {
        width: 116px;
        height: 116px;
    }

    .solutions-section .solution-card h3 {
        font-size: 1.25rem;
    }

    .solutions-section .solution-card p {
        min-height: 0;
        font-size: 0.9rem;
        line-height: 1.55;
    }
}

/* Pipeline applications move independently around the core, as in the hero orbit. */
.pipeline-orbit .pipeline-app {
    --pipeline-shift-x: 7px;
    --pipeline-shift-y: -10px;
    --pipeline-rotate: 2deg;
    animation: octa-pipeline-app-float 5.4s ease-in-out infinite;
    will-change: transform;
}

.pipeline-orbit .app-2 {
    --pipeline-shift-x: -8px;
    --pipeline-shift-y: -7px;
    --pipeline-rotate: -3deg;
    animation-delay: -0.9s;
}
.pipeline-orbit .app-3 {
    --pipeline-shift-x: 10px;
    --pipeline-shift-y: 5px;
    --pipeline-rotate: -2deg;
    animation-delay: -1.8s;
}
.pipeline-orbit .app-4 {
    --pipeline-shift-x: -9px;
    --pipeline-shift-y: 8px;
    --pipeline-rotate: 3deg;
    animation-delay: -2.7s;
}
.pipeline-orbit .app-5 {
    --pipeline-shift-x: 8px;
    --pipeline-shift-y: -8px;
    --pipeline-rotate: 2deg;
    animation-delay: -3.6s;
}
.pipeline-orbit .app-6 {
    --pipeline-shift-x: -7px;
    --pipeline-shift-y: -10px;
    --pipeline-rotate: -3deg;
    animation-delay: -4.5s;
}

.pipeline-orbit .pipeline-app i {
    animation: octa-pipeline-icon-pulse 3.8s ease-in-out infinite;
}

.pipeline-orbit .pipeline-core {
    animation: octa-pipeline-core-pulse 4.8s ease-in-out infinite;
}

/* Premium header utilities and responsive navigation. */
.header-actions {
    gap: 8px;
}

.header-currency {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 40px;
    padding: 0;
}

.header-currency::after {
    display: none;
}

.header-currency .octa-select {
    width: auto;
}

.header-currency .octa-select__trigger,
.direction-toggle {
    color: var(--text-strong);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.02)
        ),
        var(--control-bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(5, 3, 16, 0.12);
    height: 40px;
    min-height: 40px;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.header-currency .octa-select__trigger {
    width: 72px;
    min-width: 72px;
    padding-inline: 12px 11px;
    gap: 10px;
    font-size: 0.73rem;
    letter-spacing: 0.035em;
    font-weight: 900;
}

.direction-toggle {
    width: 46px;
    min-width: 46px;
    padding: 0;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.header-currency .octa-select__trigger:hover,
.header-currency .octa-select.is-open .octa-select__trigger,
.header-currency .octa-select__trigger:focus-visible,
.direction-toggle:hover,
.direction-toggle:focus-visible {
    color: #d8b4fe;
    background: rgba(124, 58, 237, 0.13);
    border-color: rgba(168, 85, 247, 0.56);
    box-shadow:
        0 0 0 3px rgba(124, 58, 237, 0.1),
        0 10px 28px rgba(5, 3, 16, 0.2);
    outline: 0;
    transform: translateY(-1px);
}

.header-currency .octa-select__chevron {
    width: 6px;
    height: 6px;
    border-width: 0 1.5px 1.5px 0;
}

.header-currency .octa-select__list {
    width: 112px;
    min-width: 112px;
    padding: 6px;
}

:root[data-theme="light"] .header-currency .octa-select__trigger,
:root[data-theme="light"] .direction-toggle {
    color: #191426;
    background: linear-gradient(145deg, #fff, #f7f4fc);
    border-color: rgba(58, 43, 82, 0.15);
    box-shadow:
        inset 0 1px #fff,
        0 7px 20px rgba(49, 35, 76, 0.08);
}

:root[data-theme="light"] .header-currency .octa-select__trigger:hover,
:root[data-theme="light"]
    .header-currency
    .octa-select.is-open
    .octa-select__trigger,
:root[data-theme="light"] .header-currency .octa-select__trigger:focus-visible,
:root[data-theme="light"] .direction-toggle:hover,
:root[data-theme="light"] .direction-toggle:focus-visible {
    color: #6d28d9;
    background: #f5efff;
    border-color: rgba(124, 58, 237, 0.4);
}

.menu-toggle {
    position: relative;
    background: linear-gradient(
        145deg,
        rgba(139, 92, 246, 0.18),
        rgba(91, 33, 182, 0.08)
    );
    border: 1px solid rgba(168, 85, 247, 0.36);
    border-radius: 13px;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.08),
        0 8px 24px rgba(5, 3, 16, 0.16);
    width: 42px;
    height: 42px;
    padding: 11px 10px;
}

.menu-toggle span {
    width: 19px;
    height: 2px;
    margin: 4px auto;
    transform-origin: center;
}

.menu-toggle span:nth-child(2) {
    width: 13px;
    margin-inline-end: 0;
}

.site-header.menu-open .menu-toggle {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.32);
}

.site-header.menu-open .menu-toggle span:nth-child(2) {
    width: 19px;
}

.site-header.menu-open .menu-toggle span {
    background: #fff;
}

/* Swiper layout: desktop grids stay unchanged; mobile cards and testimonials move smoothly. */
.octa-card-swiper {
    max-width: none;
    overflow: visible;
}

.octa-process-swiper {
    max-width: none;
    overflow: visible;
}

.octa-swiper-controls {
    direction: ltr;
    min-height: 42px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.octa-card-swiper > .octa-swiper-controls {
    display: none;
}

.octa-process-swiper > .octa-swiper-controls {
    display: none;
}

.octa-swiper-button {
    color: var(--text-strong);
    background: var(--control-bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.octa-swiper-button:hover,
.octa-swiper-button:focus-visible {
    color: #fff;
    background: #7c3aed;
    border-color: #8b5cf6;
    outline: 0;
    transform: translateY(-2px);
}

.octa-swiper-button .material-symbols-outlined {
    font-size: 19px;
}

.octa-swiper-button.swiper-button-disabled {
    opacity: 0.32;
    pointer-events: none;
}

.octa-swiper-pagination {
    background: var(--control-bg);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    min-width: 70px;
    min-height: 32px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.octa-swiper-pagination .swiper-pagination-bullet {
    appearance: none;
    background: var(--text-subtle);
    border: 0;
    border-radius: 999px;
    width: 6px;
    height: 6px;
    margin: 0 !important;
    padding: 0;
    opacity: 0.42;
    cursor: pointer;
    transition:
        width 0.25s ease,
        opacity 0.25s ease,
        background 0.25s ease;
}

.octa-swiper-pagination .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    width: 21px;
    opacity: 1;
}

.octa-testimonial-swiper {
    width: 100%;
    padding: 8px 2px 2px;
    overflow: hidden;
}

.octa-testimonial-swiper .testimonial-grid {
    grid-template-columns: none;
    gap: 0;
    display: flex;
    overflow: visible;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.octa-testimonial-swiper .testimonial-grid > blockquote {
    flex: none;
    width: auto;
    height: auto;
    min-height: 250px;
}

.octa-testimonial-swiper .testimonial-grid > blockquote.swiper-slide-active {
    border-color: rgba(168, 85, 247, 0.52);
    box-shadow: 0 18px 46px rgba(75, 35, 135, 0.16);
}

.swiper-initialized .scroll-reveal,
.swiper-initialized .scroll-reveal.is-visible {
    opacity: 1 !important;
    translate: 0 var(--octa-layout-y, 0px) !important;
}

@media (min-width: 768px) {
    .octa-card-swiper > .swiper-wrapper {
        transform: none !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px;
        display: grid !important;
    }

    .octa-card-swiper > .swiper-wrapper > .swiper-slide {
        width: auto !important;
        margin: 0 !important;
    }

    .octa-features-swiper .feature-showcase {
        min-height: 0;
    }

    .process-section {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .octa-process-swiper > .process-strip {
        transform: none !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1px !important;
        display: grid !important;
    }

    .octa-process-swiper > .process-strip > .process-step {
        border-radius: 0;
        width: auto !important;
        margin: 0 !important;
        padding: 30px 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .octa-process-swiper .process-step-top {
        margin-bottom: 14px;
    }

    .octa-process-swiper .process-step-number {
        line-height: 1;
    }

    .octa-process-swiper .process-step strong {
        margin-bottom: 7px;
        line-height: 1.25;
    }

    .octa-process-swiper .process-step p {
        line-height: 1.55;
    }

    .octa-process-swiper > .process-strip > .process-step:first-child {
        border-start-start-radius: 22px;
        border-end-start-radius: 22px;
    }

    .octa-process-swiper > .process-strip > .process-step:last-child {
        border-start-end-radius: 22px;
        border-end-end-radius: 22px;
    }
}

@media (max-width: 1080px) {
    .site-header {
        padding-inline: 16px 10px;
    }

    .site-header nav {
        background:
            radial-gradient(
                circle at 85% 0,
                rgba(124, 58, 237, 0.17),
                transparent 34%
            ),
            var(--surface-solid);
        border: 1px solid var(--border-accent);
        border-radius: 20px;
        box-shadow:
            0 28px 70px rgba(4, 2, 14, 0.36),
            inset 0 1px rgba(255, 255, 255, 0.055);
        gap: 4px;
        padding: 12px;
        inset: calc(100% + 12px) 0 auto;
        transform: translateY(-10px) scale(0.985);
        transform-origin: top center;
    }

    .site-header.menu-open nav {
        transform: translateY(0) scale(1);
    }

    .site-header nav > a {
        position: relative;
        border: 1px solid transparent;
        border-radius: 12px;
        min-height: 46px;
        padding: 12px 15px;
        display: flex;
        align-items: center;
    }

    .site-header nav > a::after {
        content: "";
        background: currentColor;
        border-radius: 50%;
        width: 5px;
        height: 5px;
        margin-inline-start: auto;
        opacity: 0;
        transform: scale(0.4);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    .site-header nav > a.active,
    .site-header nav > a:hover,
    .site-header nav > a:focus-visible {
        color: var(--text-strong);
        background: rgba(124, 58, 237, 0.12) !important;
        border-color: rgba(168, 85, 247, 0.18);
        outline: 0;
    }

    .site-header nav > a.active::after {
        opacity: 1;
        transform: scale(1);
    }

    .mobile-nav-actions {
        border-top: 1px solid var(--border-soft);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 9px;
        margin-top: 8px;
        padding: 13px 0 0;
        display: grid;
    }

    .mobile-nav-actions .header-currency,
    .mobile-nav-actions .direction-toggle {
        width: 100%;
        min-width: 0;
        height: 42px;
        min-height: 42px;
        padding: 0;
        display: flex !important;
    }

    .mobile-nav-actions .header-currency .octa-select,
    .mobile-nav-actions .header-currency .octa-select__trigger {
        width: 100%;
    }

    .mobile-nav-actions .header-currency .octa-select__trigger,
    .mobile-nav-actions .direction-toggle {
        border-radius: 11px;
        justify-content: center;
    }

    .mobile-nav-actions .header-currency .octa-select__trigger {
        padding-inline: 14px;
    }

    .mobile-nav-actions .mobile-header-demo {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 46px;
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(90deg, #7c3aed, #6366f1) !important;
        border: 1px solid rgba(99, 102, 241, 0.9);
        box-shadow: 0 0 18px rgba(99, 102, 241, 0.35);
    }

    .mobile-nav-actions .mobile-header-demo:hover,
    .mobile-nav-actions .mobile-header-demo:focus-visible {
        color: #fff;
        background: linear-gradient(90deg, #7c3aed, #6366f1) !important;
        border-color: rgba(99, 102, 241, 0.9);
    }

    .header-actions .menu-toggle {
        padding: 0;
    }

    .header-actions .menu-toggle span,
    .header-actions .menu-toggle span:nth-child(2) {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 19px;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    .header-actions .menu-toggle span:nth-child(1) {
        transform: translate(-50%, calc(-50% - 6px));
    }

    .header-actions .menu-toggle span:nth-child(3) {
        transform: translate(-50%, calc(-50% + 6px));
    }

    .site-header.menu-open .header-actions .menu-toggle span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .site-header.menu-open .header-actions .menu-toggle span:nth-child(2) {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0);
    }

    .site-header.menu-open .header-actions .menu-toggle span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .mobile-nav-actions .header-currency .octa-select__list {
        inset: auto 0 calc(100% + 8px) auto;
    }
}

@media (max-width: 767px) {
    .steps-section,
    .solutions-section,
    main[data-page="features-overview"] .content-section,
    .process-section {
        overflow: hidden;
    }

    .octa-card-swiper {
        width: calc(100% + 30px);
        margin-inline: -15px;
        padding: 10px 15px 2px;
        overflow: hidden;
    }

    .octa-card-swiper > .swiper-wrapper {
        grid-template-columns: none !important;
        gap: 0 !important;
        display: flex;
    }

    .octa-card-swiper > .octa-swiper-controls {
        display: flex;
    }

    .octa-features-swiper:not(.swiper-initialized) > .octa-swiper-controls,
    .octa-process-swiper:not(.swiper-initialized) > .octa-swiper-controls {
        display: none;
    }

    .octa-process-swiper {
        width: calc(100% + 30px);
        margin-inline: -15px;
        padding: 10px 15px 2px;
        overflow: hidden;
    }

    .octa-process-swiper.swiper-initialized > .octa-swiper-controls {
        display: flex;
    }

    .octa-features-swiper > .feature-showcase-grid,
    .octa-process-swiper > .process-strip {
        align-items: stretch;
        transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    .octa-features-swiper:not(.swiper-initialized) > .feature-showcase-grid,
    .octa-process-swiper:not(.swiper-initialized) > .process-strip {
        gap: 14px !important;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }

    .octa-features-swiper:not(.swiper-initialized)
        > .feature-showcase-grid::-webkit-scrollbar,
    .octa-process-swiper:not(.swiper-initialized)
        > .process-strip::-webkit-scrollbar {
        display: none;
    }

    .octa-features-swiper:not(.swiper-initialized)
        > .feature-showcase-grid
        > .feature-showcase {
        flex: 0 0 calc(100% - 26px);
        width: calc(100% - 26px);
        scroll-snap-align: start;
    }

    .octa-process-swiper:not(.swiper-initialized)
        > .process-strip
        > .process-step {
        flex: 0 0 calc(100% - 38px);
        width: calc(100% - 38px);
        scroll-snap-align: start;
    }

    .octa-features-swiper .feature-showcase {
        box-sizing: border-box;
        width: auto;
        height: auto;
        min-height: unset;
        padding: 24px;
        display: flex;
        flex-direction: column;
    }

    .motion-ready
        .octa-features-swiper
        .feature-showcase.scroll-reveal.is-visible {
        animation: none !important;
    }

    .octa-features-swiper .feature-number {
        margin-bottom: 0 !important;
    }

    .octa-features-swiper .feature-showcase .feature-showcase-visual {
        height: 126px;
        margin: -50px -24px 24px;
    }

    .octa-features-swiper .feature-showcase > p {
        overflow-wrap: anywhere;
    }

    .octa-features-swiper .feature-showcase > a {
        width: max-content;
        margin-top: auto;
        padding-top: 10px;
    }

    .octa-features-swiper .feature-showcase.swiper-slide-active {
        border-color: rgba(168, 85, 247, 0.52);
        box-shadow:
            0 20px 48px rgba(75, 35, 135, 0.2),
            inset 0 1px rgba(255, 255, 255, 0.04);
    }

    .process-section {
        padding-top: 42px;
        padding-bottom: 54px;
    }

    .octa-process-swiper > .process-strip {
        grid-template-columns: none !important;
        gap: 0 !important;
        padding: 0;
        display: flex;
    }

    .octa-process-swiper .process-step {
        position: relative;
        box-sizing: border-box;
        width: auto;
        height: auto;
        min-height: 230px;
        padding: 24px;
        overflow: hidden;
        background:
            radial-gradient(
                circle at 92% 4%,
                rgba(168, 85, 247, 0.17),
                transparent 38%
            ),
            var(--surface-solid);
        border: 1px solid var(--border-soft);
        border-radius: 22px;
        box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.045),
            0 18px 42px rgba(5, 3, 16, 0.16);
    }

    .octa-process-swiper .process-step-top {
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .octa-process-swiper .process-step-number {
        color: #fff;
        background: linear-gradient(135deg, #7c3aed, #6366f1);
        border: 1px solid rgba(196, 181, 253, 0.42);
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(99, 102, 241, 0.25);
        width: 46px;
        height: 46px;
        margin: 0;
        display: grid;
        place-items: center;
        font-size: 0.76rem;
        letter-spacing: 0.08em;
    }

    .octa-process-swiper .process-step-icon {
        color: #c084fc;
        background: rgba(124, 58, 237, 0.12);
        border: 1px solid rgba(168, 85, 247, 0.22);
        border-radius: 14px;
        width: 44px;
        height: 44px;
        margin: 0;
        display: grid !important;
        place-items: center;
        font-size: 22px;
        letter-spacing: 0;
    }

    .octa-process-swiper .process-step strong,
    .octa-process-swiper .process-step p {
        position: relative;
        z-index: 1;
    }

    .octa-process-swiper .process-step strong {
        color: var(--text-strong);
        margin-bottom: 10px;
        font-size: 1.28rem;
        line-height: 1.2;
    }

    .octa-process-swiper .process-step p {
        color: var(--text-subtle);
        max-width: 30ch;
        font-size: 0.92rem;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    .octa-process-swiper .process-step.swiper-slide-active {
        border-color: rgba(168, 85, 247, 0.5);
        box-shadow:
            0 20px 50px rgba(75, 35, 135, 0.22),
            inset 0 1px rgba(255, 255, 255, 0.06);
    }

    .octa-process-swiper .octa-swiper-pagination {
        background: transparent;
        border: 0;
        min-width: 148px;
        padding: 0;
        gap: 5px;
    }

    .octa-process-swiper .octa-swiper-pagination .swiper-pagination-bullet {
        background: var(--border-soft);
        width: 27px;
        height: 4px;
        opacity: 1;
    }

    .octa-process-swiper
        .octa-swiper-pagination
        .swiper-pagination-bullet-active {
        background: linear-gradient(90deg, #a855f7, #6366f1);
        width: 40px;
    }

    :root[data-theme="light"] .octa-process-swiper .process-step {
        background:
            radial-gradient(
                circle at 92% 4%,
                rgba(124, 58, 237, 0.1),
                transparent 38%
            ),
            #fff;
        box-shadow:
            0 18px 42px rgba(67, 56, 120, 0.12),
            inset 0 1px #fff;
    }

    html[dir="rtl"]
        .octa-features-swiper
        .octa-swiper-button
        .material-symbols-outlined,
    html[dir="rtl"]
        .octa-process-swiper
        .octa-swiper-button
        .material-symbols-outlined {
        transform: scaleX(-1);
    }

    .steps-section .step-card,
    .steps-section .step-card:nth-child(2),
    .steps-section .step-card:nth-child(3) {
        width: auto;
        min-height: 220px;
        padding: 22px 18px;
    }

    .solutions-section .solution-card {
        width: auto;
        min-height: 440px;
        padding: 22px;
    }

    .octa-testimonial-swiper {
        width: calc(100% + 18px);
        margin-inline: -9px;
        padding-inline: 9px;
    }

    .octa-testimonial-swiper .testimonial-grid > blockquote {
        width: auto;
        min-height: 245px;
        padding: 24px;
    }
}

@media (max-width: 430px) {
    .site-header {
        width: calc(100% - 14px);
        height: 62px;
        padding-inline: 16px;
    }

    .site-header .logo img {
        width: 86px;
    }

    .theme-toggle,
    .menu-toggle {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .site-header nav {
        border-radius: 17px;
        padding: 10px;
        inset-inline: -1px;
    }

    .mobile-nav-actions .header-currency,
    .mobile-nav-actions .direction-toggle,
    .mobile-nav-actions .header-currency .octa-select__trigger {
        width: 100%;
        max-width: none;
        height: 40px;
        min-height: 40px;
        font-size: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .octa-swiper-button,
    .octa-swiper-pagination .swiper-pagination-bullet {
        transition-duration: 0.01ms;
    }
}

@keyframes octa-pipeline-app-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0);
    }
    50% {
        transform: translate3d(
                var(--pipeline-shift-x),
                var(--pipeline-shift-y),
                0
            )
            rotate(var(--pipeline-rotate));
    }
}

@keyframes octa-pipeline-icon-pulse {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.88;
    }
    50% {
        transform: translateY(-3px) scale(1.08);
        opacity: 1;
    }
}

@keyframes octa-pipeline-core-pulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 38px rgba(168, 85, 247, 0.52);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.035);
        box-shadow: 0 0 58px rgba(168, 85, 247, 0.74);
    }
}