/* ===================================================================
   AI SERVICES PAGE — Vetora dark AI-agency theme
   Design tokens: --bg-primary, --bg-secondary, --bg-card,
                  --accent-purple, --accent-pink, --accent-cyan,
                  --gradient-btn
   Prefix: axo-
   Animation libraries: GSAP+ScrollTrigger (reveals), Lenis (smooth
   scroll), Swiper (projects carousel), CountUp.js (stat counters).
=================================================================== */

/* ===================================================================
   DESIGN TOKENS
=================================================================== */
:root {
    --bg-primary: #0D0B2A;
    --bg-secondary: #13112E;
    --bg-card: #1A1640;
    --accent-purple: #7C3AED;
    --accent-pink: #D946EF;
    --accent-cyan: #06B6D4;
    --gradient-btn: linear-gradient(135deg, #6D28D9, #06B6D4);
}

/* ===================================================================
   BODY OVERRIDES + DOT-GRID BACKGROUND
=================================================================== */
body {
    background-color: var(--bg-primary);
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(124, 58, 237, 0.20) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* ===================================================================
   SCROLL-REVEAL BASE STATES
=================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
    will-change: opacity, transform;
}

.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================================================
   KEYFRAMES
=================================================================== */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-18px);
    }
}

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

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

@keyframes holo-spin {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }

    50% {
        filter: hue-rotate(180deg) brightness(1.25);
    }

    100% {
        filter: hue-rotate(360deg) brightness(1);
    }
}

@keyframes axoOrbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(24px, -28px) scale(1.1);
    }
}

@keyframes axoBlobMove {

    0%,
    100% {
        border-radius: 48% 52% 60% 40% / 50% 45% 55% 50%;
        transform: translateY(0) rotate(0deg);
    }

    50% {
        border-radius: 60% 40% 45% 55% / 45% 55% 45% 55%;
        transform: translateY(-18px) rotate(8deg);
    }
}

/* ===================================================================
   PAGE WRAPPER — scoped tokens mapped to :root tokens
=================================================================== */
.axo-page {
    --axo-bg: var(--bg-primary);
    --axo-bg-soft: var(--bg-secondary);
    --axo-bg-alt: #0A0826;
    --axo-bg-alt2: var(--bg-card);
    --axo-violet: var(--accent-purple);
    --axo-pink: var(--accent-pink);
    --axo-cyan: var(--accent-cyan);
    --axo-indigo: #6D28D9;
    --axo-violet-light: #9B6FFF;
    --axo-white: #ffffff;
    --axo-text-dim: rgba(255, 255, 255, 0.66);
    --axo-text-mute: rgba(255, 255, 255, 0.46);
    --axo-border: rgba(124, 58, 237, 0.28);
    --axo-border-soft: rgba(255, 255, 255, 0.08);
    --axo-grad-primary: var(--gradient-btn);
    --axo-grad-accent: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
    --axo-font-head: "Lexend", sans-serif;
    --axo-font-body: "Livvic", sans-serif;

    background: var(--axo-bg);
    color: var(--axo-white);
    font-family: var(--axo-font-body);
    overflow-x: hidden;
    overflow-y: clip;
    position: relative;
}

.axo-page * {
    box-sizing: border-box;
}

.axo-section {
    position: relative;
    padding: 110px 0;
}

.axo-section-alt {
    background: var(--axo-bg-alt2);
}

.axo-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* ===================================================================
   KICKER / SECTION HEAD
=================================================================== */
.axo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--axo-font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--axo-pink);
    margin-bottom: 18px;
}

.axo-kicker::before {
    content: "\2192";
    font-weight: 900;
}

.axo-section-head {
    max-width: 760px;
    margin-bottom: 60px;
}

.axo-section-head.axo-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.axo-heading {
    font-family: var(--axo-font-head);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-size: clamp(30px, 4.2vw, 54px);
    color: var(--axo-white);
    margin-bottom: 18px;
}

.axo-heading span {
    background: var(--axo-grad-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.axo-sub {
    font-size: 16px;
    line-height: 1.8;
    color: var(--axo-text-dim);
}

/* ===================================================================
   BUTTONS
=================================================================== */
.axo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 999px;
    font-family: var(--axo-font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.axo-btn-primary {
    background: var(--gradient-btn);
    color: #fff;
    box-shadow: 0 14px 34px rgba(109, 40, 217, 0.40);
}

.axo-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(6, 182, 212, 0.35);
    color: #fff;
}

.axo-btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
}

.axo-btn-outline:hover {
    border-color: var(--accent-pink);
    background: rgba(217, 70, 239, 0.10);
    color: #fff;
    transform: translateY(-3px);
}

/* ===================================================================
   BRAND "X" MOTIF
=================================================================== */
.axo-x {
    background: var(--axo-grad-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.axo-cta-x,
.axo-x-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--axo-grad-accent);
    border-radius: 16px;
    color: #fff;
    flex-shrink: 0;
}

.axo-cta-x {
    width: 0.85em;
    height: 0.85em;
    font-size: 0.5em;
}

.axo-x-mark {
    width: 28px;
    height: 28px;
    font-size: 14px;
    margin-left: 4px;
}

/* ===================================================================
   BACKDROP — line-grid, ghost word, glow orbs
=================================================================== */
.axo-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.08) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 25%, rgba(0, 0, 0, 0.95), transparent 72%);
    pointer-events: none;
    z-index: 0;
}

.axo-ghost-word {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--axo-font-head);
    font-size: clamp(80px, 16vw, 220px);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.axo-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    animation: axoOrbFloat 13s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

.axo-orb-violet {
    background: var(--accent-purple);
}

.axo-orb-pink {
    background: var(--accent-pink);
}

.axo-orb-indigo {
    background: var(--axo-indigo);
}

/* ===================================================================
   GLASS CARD (shared)
=================================================================== */
.axo-glass {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--axo-border);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

/* ===================================================================
   ROTATING CIRCULAR BADGE
=================================================================== */
.axo-badge {
    position: relative;
    width: 168px;
    height: 168px;
    border-radius: 50%;
}

.axo-badge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: rotate 20s linear infinite;
}

.axo-badge-ring svg {
    width: 100%;
    height: 100%;
}

.axo-badge-ring text {
    font-family: var(--axo-font-head);
    font-size: 8.6px;
    font-weight: 700;
    letter-spacing: 2px;
    fill: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
}

.axo-badge-center {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background: var(--axo-grad-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    border: none;
    box-shadow: 0 0 0 8px rgba(217, 70, 239, 0.14);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.axo-badge-center:hover {
    transform: scale(1.08);
}

.axo-badge-sm {
    width: 120px;
    height: 120px;
}

.axo-badge-sm .axo-badge-center {
    inset: 22px;
    font-size: 16px;
}

.axo-badge-center-static {
    font-family: var(--axo-font-head);
    font-weight: 800;
    text-transform: lowercase;
    cursor: default;
}

.axo-badge-center-static:hover {
    transform: none;
}

.axo-cta-badge {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================================================================
   1. HERO
=================================================================== */
.axo-hero {
    position: relative;
    padding: 150px 0 90px;
    overflow: hidden;
    border-bottom: 1px solid var(--axo-border-soft);
}

.axo-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 60px;
}

.axo-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--axo-border);
    margin-bottom: 26px;
}

.axo-hero-chip span.axo-chip-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--axo-grad-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

.axo-hero-chip span.axo-chip-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--axo-text-dim);
}

.axo-hero h1 {
    font-family: var(--axo-font-head);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.06;
    letter-spacing: -0.01em;
    font-size: clamp(36px, 6vw, 76px);
    color: #fff;
    position: relative;
}

.axo-hero-tooltip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--axo-border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--axo-text-dim);
    margin: 18px 0 0;
    font-family: var(--axo-font-body);
    text-transform: none;
    letter-spacing: 0;
}

.axo-hero-right {
    padding-top: 18px;
}

.axo-hero-desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--axo-text-dim);
    margin-bottom: 28px;
}

.axo-hero-strip {
    display: flex;
    justify-content: center;
    margin: 10px 0 60px;
}

.axo-hero-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.axo-hero-img {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--axo-border);
    height: 360px;
    animation: float 7s ease-in-out infinite;
}

.axo-hero-img:nth-child(2) {
    animation-delay: -3.5s;
}

.axo-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.axo-hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(124, 58, 237, 0.28), rgba(217, 70, 239, 0.16));
    mix-blend-mode: overlay;
}

/* ===================================================================
   2. FEATURES
=================================================================== */
.axo-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.axo-feat-card {
    padding: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.axo-feat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(217, 70, 239, 0.45);
    box-shadow: 0 26px 60px rgba(124, 58, 237, 0.28);
}

.axo-feat-img {
    height: 170px;
    overflow: hidden;
    position: relative;
}

.axo-feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.axo-feat-card:hover .axo-feat-img img {
    transform: scale(1.08);
}

.axo-feat-body {
    padding: 26px 26px 30px;
}

.axo-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--axo-grad-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-bottom: 16px;
    margin-top: -50px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.axo-feat-card h3 {
    font-family: var(--axo-font-head);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.axo-feat-card p {
    font-size: 14px;
    color: var(--axo-text-dim);
    line-height: 1.7;
    margin: 0;
}

/* ===================================================================
   3. ABOUT
=================================================================== */
.axo-about-top {
    max-width: 920px;
    margin-bottom: 50px;
}

.axo-about-blob {
    position: absolute;
    top: -40px;
    right: 0;
    width: 220px;
    height: 220px;
    border-radius: 48% 52% 60% 40% / 50% 45% 55% 50%;
    background: var(--axo-grad-accent);
    filter: blur(2px);
    opacity: 0.85;
    animation: axoBlobMove 9s ease-in-out infinite, holo-spin 12s linear infinite;
    z-index: 0;
}

.axo-about-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 50px;
    align-items: center;
}

.axo-about-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.axo-about-imgs img {
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--axo-border);
    display: block;
    object-fit: cover;
    height: 280px;
}

.axo-about-imgs .axo-img-tall {
    height: 340px;
    margin-top: -60px;
}

.axo-about-text {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--axo-text-dim);
    margin-bottom: 26px;
}

.axo-avatar-row {
    display: flex;
    align-items: center;
    gap: -10px;
    margin-bottom: 30px;
}

.axo-avatar-row img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--axo-bg);
    margin-left: -12px;
    object-fit: cover;
}

.axo-avatar-row img:first-child {
    margin-left: 0;
}

.axo-avatar-more {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-left: -12px;
    border: 2px solid var(--bg-primary);
}

.axo-avatar-pill {
    margin-left: 14px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--axo-border);
}

.axo-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.axo-stat-box {
    padding: 24px;
    border-radius: 18px;
}

.axo-stat-num {
    display: block;
    font-family: var(--axo-font-head);
    font-size: 36px;
    font-weight: 800;
    background: var(--axo-grad-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.axo-stat-lbl {
    font-size: 13px;
    color: var(--axo-text-dim);
    margin-top: 4px;
    display: block;
    line-height: 1.5;
}

/* ===================================================================
   4. SERVICES — accordion rows
=================================================================== */
.axo-svc-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
}

.axo-pill-tag {
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--axo-border);
    color: var(--axo-text-dim);
}

.axo-svc-rows {
    position: relative;
    border-top: 1px solid var(--axo-border-soft);
    /* Faint vertical grid behind the rows (columns at 0/25/50/75%). Normal rows
       let it show through; the active row's opaque band covers it — matching
       the reference. */
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 25% 100%;
}

.axo-svc-row {
    position: relative;
    border-bottom: 1px solid var(--axo-border-soft);
    padding: 26px 26px;
    display: flex;
    align-items: center;
    border-radius: 18px;
    transition: background 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    background-color: #0D0733;
}

/* Active row: an OPAQUE lighter violet band (so it hides the grid behind it),
   with a soft edge — the main visual difference from the normal rows. */
.axo-svc-row.axo-open {
    background-color: #171042;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

/* Wraps everything but the thumbnail. On desktop it just reproduces the
   row's own flex layout so the extra nesting is invisible; tablet/mobile
   override this to stack num/info/tags/arrow as a single column. */
.axo-svc-body {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

/* Thumbnail sits at the far LEFT and is collapsed to zero width until the row
   is active, then slides/fades in. */
.axo-svc-thumb {
    flex: 0 0 auto;
    width: 0;
    height: 118px;
    margin-right: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--axo-border);
    opacity: 0;
    transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s ease,
        margin-right 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.axo-svc-row.axo-open .axo-svc-thumb {
    width: 186px;
    margin-right: 30px;
    opacity: 1;
}

.axo-svc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.axo-svc-num {
    flex: 0 0 auto;
    margin-right: 26px;
    font-family: var(--axo-font-head);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    transition: color 0.35s ease;
}

/* Collapsed rows show the bracket number a touch dimmer; the active row is
   full white. */
.axo-svc-row:not(.axo-open) .axo-svc-num {
    color: rgba(255, 255, 255, 0.85);
}

.axo-svc-info {
    /* Natural width (does NOT grow) so the flex gaps around the tags do the
       centring / shifting. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 360px;
}

/* Flexible spacers on each side of the tags: equal, so the tags sit CENTRED
   between the info block and the (far-right) arrow. When the row activates and
   the image pushes the left content right, the left gap shrinks and the tags
   slide right toward the arrow — matching the reference. */
.axo-svc-gap {
    flex: 1 1 auto;
    min-width: 16px;
}

.axo-svc-info h3 {
    font-family: var(--axo-font-head);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.axo-svc-info p {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 0;
    max-width: 340px;
}

/* Tags: a vertical list (always visible) with a magenta spark icon. */
.axo-svc-tags {
    flex: 0 0 auto;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.axo-svc-tags span {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    /* Rest offset for the "points move" reveal on the active row. */
    transform: translateX(6px);
    opacity: 0.82;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.45s ease;
}

/* When the row activates, the tag rows slide into place with a small stagger. */
.axo-svc-row.axo-open .axo-svc-tags span {
    transform: translateX(0);
    opacity: 1;
}

.axo-svc-row.axo-open .axo-svc-tags span:nth-child(1) {
    transition-delay: 0.05s;
}

.axo-svc-row.axo-open .axo-svc-tags span:nth-child(2) {
    transition-delay: 0.12s;
}

.axo-svc-row.axo-open .axo-svc-tags span:nth-child(3) {
    transition-delay: 0.19s;
}

.axo-svc-tags em {
    /* Light-lavender 6-point spark (brightens to magenta on the active row). */
    color: #fff;
    font-style: normal;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: color 0.35s ease, transform 0.45s ease;
}

.axo-svc-row.axo-open .axo-svc-tags em {
    transform: rotate(90deg);
}

.axo-svc-arrow {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--axo-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    overflow: hidden;
    transition: background 0.4s ease, border-color 0.4s ease,
        box-shadow 0.4s ease, transform 0.4s ease;
}

.axo-svc-arrow__icon {
    display: block;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Active row's arrow fills blue -> purple, shifts a bit to the right, and the
   arrow icon nudges up-right. */
.axo-svc-row.axo-open .axo-svc-arrow {
    background: linear-gradient(140deg, #6366F1 0%, #7C3AED 100%);
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(99, 102, 241, 0.45);
    transform: translateX(-20px);
}

.axo-svc-row.axo-open .axo-svc-arrow__icon {
    transform: translate(3px, -3px);
}

/* Hovering the arrow itself gives it an extra diagonal nudge. */
.axo-svc-arrow:hover .axo-svc-arrow__icon {
    transform: translate(4px, -4px) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .axo-svc-thumb {
        transition: opacity 0.3s ease;
    }
}

/* ===================================================================
   5. TECHNOLOGIES
=================================================================== */
.axo-tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.axo-tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.axo-tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--axo-border);
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.axo-tech-chip:hover {
    border-color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.10);
    transform: translateY(-3px);
}

.axo-tech-chip i {
    font-size: 16px;
    color: var(--axo-violet-light);
}

.axo-tech-img {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--axo-border);
    height: 440px;
}

.axo-tech-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================================================================
   6. PROJECTS — swiper carousel
=================================================================== */
.axo-proj-swiper {
    overflow: visible;
    cursor: grab;
}

.axo-proj-swiper:active {
    cursor: grabbing;
}

.axo-proj-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    height: 420px;
    border: 1px solid var(--axo-border);
    display: block;
}

.axo-proj-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.axo-proj-card:hover img {
    transform: scale(1.08);
}

.axo-proj-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(13, 11, 42, 0.94) 100%);
}

.axo-proj-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(13, 11, 42, 0.75);
    border: 1px solid var(--axo-border);
    color: var(--accent-pink);
    backdrop-filter: blur(6px);
}

.axo-proj-title {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    z-index: 2;
    font-family: var(--axo-font-head);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}

.axo-proj-nav {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin-top: 30px;
}

.axo-proj-nav button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--axo-border);
    background: transparent;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.axo-proj-nav button:hover {
    background: var(--axo-grad-accent);
    border-color: transparent;
}

/* ===================================================================
   8. TESTIMONIALS
=================================================================== */
.axo-test-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 50px;
}

.axo-test-rating {
    display: flex;
    align-items: center;
    gap: 14px;
}

.axo-test-rating-num {
    font-family: var(--axo-font-head);
    font-size: 30px;
    font-weight: 800;
    color: #fff;
}

.axo-test-rating-stars {
    color: #ffb22e;
    font-size: 14px;
}

.axo-test-rating-sub {
    font-size: 12.5px;
    color: var(--axo-text-mute);
    display: block;
}

.axo-test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.axo-test-card {
    padding: 28px;
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.axo-test-card:hover {
    transform: translateY(-6px);
    border-color: rgba(6, 182, 212, 0.35);
}

.axo-test-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.axo-test-top img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.axo-test-top h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.axo-test-top span {
    font-size: 12px;
    color: var(--axo-text-mute);
}

.axo-test-quote-icon {
    font-size: 22px;
    color: var(--axo-violet-light);
    margin-bottom: 10px;
    display: block;
}

.axo-test-card p.axo-test-quote {
    font-size: 14px;
    color: var(--axo-text-dim);
    line-height: 1.75;
    margin-bottom: 16px;
}

.axo-test-stars {
    color: #ffb22e;
    font-size: 13px;
}

/* ===================================================================
   9. BLOG
=================================================================== */
.axo-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.axo-blog-card {
    overflow: hidden;
    transition: all 0.35s ease;
}

.axo-blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 20px 46px rgba(124, 58, 237, 0.20);
}

.axo-blog-thumb {
    height: 190px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(124, 58, 237, 0.18), rgba(217, 70, 239, 0.10));
}

.axo-blog-thumb i {
    font-size: 44px;
    color: var(--axo-violet-light);
}

.axo-blog-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(13, 11, 42, 0.75);
    border: 1px solid var(--axo-border);
    color: var(--accent-pink);
}

.axo-blog-body {
    padding: 24px;
}

.axo-blog-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--axo-text-mute);
    margin-bottom: 12px;
}

.axo-blog-body h4 {
    font-family: var(--axo-font-head);
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.4;
}

.axo-blog-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-cyan);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.25s ease;
}

.axo-blog-link:hover {
    gap: 10px;
}

/* ===================================================================
   10. CTA + CONTACT
=================================================================== */
.axo-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 50px;
    align-items: center;
    margin-bottom: 70px;
}

.axo-cta-heading {
    font-family: var(--axo-font-head);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(34px, 6vw, 68px);
    line-height: 1.05;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.axo-cta-right p {
    font-size: 15.5px;
    color: var(--axo-text-dim);
    line-height: 1.85;
    margin-bottom: 26px;
}

.axo-contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 50px;
    align-items: flex-start;
}

.axo-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.axo-contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--axo-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    flex-shrink: 0;
}

.axo-contact-item span {
    font-size: 12px;
    color: var(--axo-text-mute);
    display: block;
}

.axo-contact-item h4 {
    font-size: 15px;
    color: #fff;
    margin: 0;
}

.axo-form-card {
    padding: 32px;
}

.axo-form-card .Contact-Form label {
    color: rgba(255, 255, 255, 0.85);
}

.axo-form-card .Contact-Form input,
.axo-form-card .Contact-Form textarea {
    background-color: rgba(255, 255, 255, 0.94);
}

.axo-form-card .Contact-Form input:focus,
.axo-form-card .Contact-Form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.35);
}

.axo-form-card .Contact-Form button {
    background: var(--gradient-btn);
    background-color: transparent;
    padding: 12px 40px;
    border: none;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
}

/* ===================================================================
   VIDEO MODAL
=================================================================== */
.axo-video-modal .modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--axo-border);
    border-radius: 20px;
    overflow: hidden;
}

.axo-video-placeholder {
    padding: 70px 40px;
    text-align: center;
    color: #fff;
}

.axo-video-placeholder i {
    font-size: 48px;
    color: var(--axo-violet-light);
    margin-bottom: 18px;
    display: block;
}

.axo-video-placeholder p {
    font-size: 15.5px;
    color: var(--axo-text-dim);
    margin: 0 0 26px;
    line-height: 1.7;
}

/* ===================================================================
   BACK TO TOP
=================================================================== */
.axo-totop {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid var(--axo-border);
    background: rgba(13, 11, 42, 0.88);
    backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 60;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: all 0.35s ease;
}

.axo-totop.axo-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.axo-totop:hover {
    background: var(--axo-grad-accent);
    border-color: transparent;
}

/* ===================================================================
   GSAP REVEAL HINT
=================================================================== */
[data-reveal] {
    will-change: transform, opacity;
}

/* ===================================================================
   HERO — ai-hero
=================================================================== */
@keyframes scroll-bg-text {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes tooltip-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

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

.ai-hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #060129;
    background-image: url('/Assets/Images/AI-development/banner-pattern.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
}

.ai-hero__glow {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(109, 40, 217, 0.28) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

/* Scrolling bg text */
.hero-bg-text {
    position: absolute;
    top: 38%;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.hero-bg-text__track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: scroll-bg-text 28s linear infinite;
    font-size: clamp(5rem, 13vw, 12rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.18);
    text-transform: capitalize;
    letter-spacing: -0.02em;
}

/* Content grid */
.ai-hero__content {
    display: grid;
    grid-template-columns: 52% 1fr;
    align-items: flex-start;
    padding: 160px 24px 0;
    position: relative;
    z-index: 1;
    flex: 1;
    justify-items: stretch;
}

/* Headline */
.ai-hero__headline {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 0.93;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ai-hero__headline .line-2 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.chip-icon {
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(147, 51, 234, 0.6));
}

/* Tooltip card */
.hero-tooltip {
    position: absolute;
    top: 66%;
    left: 41%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0D0733;
    border-radius: 12px;
    padding: 12px 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 2;
    animation: tooltip-float 3.5s ease-in-out infinite;
    min-width: 180px;
}

.hero-tooltip__thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.hero-tooltip__text strong {
    display: block;
    font-weight: 700;
    color: #ffffff;
    font-size: 0.95rem;
}

.hero-tooltip__text span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
}

/* Right column */
.ai-hero__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    padding: 20px 0 0 60px;
    position: relative;
    justify-self: end;
    width: 100%;
}

.ai-hero__paragraph {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.75;
    text-align: right;
    max-width: 360px;
    margin: 0;
}

/* Explore More link */
.hero-explore {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 28px;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: border-color 0.3s, box-shadow 0.3s;
    display: inline-block;
    text-align: center;
}

.hero-explore:hover {
    border-color: rgba(236, 72, 153, 0.55);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.12);
    color: #fff;
    text-decoration: none;
}

.hero-explore::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #EC4899, #7C3AED);
    margin: 6px auto 0;
    transition: width 0.3s ease;
}

.hero-explore:hover::after {
    width: 85px;
}

/* Rotating badge */
.hero-badge {
    position: absolute;
    bottom: 180px;
    right: 20%;
    width: 160px;
    height: 160px;
    cursor: pointer;
    z-index: 10;
    background: #060129;
    border-radius: 50%;
}

.hero-badge__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    background: linear-gradient(145deg, #5B21B6, #4338CA);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(91, 33, 182, 0.9), 0 0 48px rgba(91, 33, 182, 0.35);
    z-index: 2;
    transition: transform 0.2s;
}

.hero-badge__inner:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.play-triangle {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 20px solid #ffffff;
    margin-left: 5px;
}

.hero-badge__ring {
    position: absolute;
    top: 0;
    left: 0;
    animation: spin-badge 9s linear infinite;
}

/* Bottom area */
.ai-hero__bottom {
    display: grid;
    grid-template-columns: 27% 73%;
    gap: 20px;
    padding: 120px 24px 0;
    height: 380px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.ai-hero__robot {
    background: linear-gradient(160deg, #140e35 0%, #0a0818 45%, #1e0f4a 100%);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.ai-hero__robot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.ai-hero__wave {
    position: relative;
    overflow: hidden;
    /* background: #0a0818; */
}

.hero-wave-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* Video modal — above the nav (1000), floating WhatsApp/chatbot buttons
   (99999) and the quote/chatbot modals (up to 100001). */
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100010;
    align-items: center;
    justify-content: center;
}

.video-modal.active {
    display: flex;
}

.video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(5px);
}

.video-modal__box {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 900px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.video-modal__close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
}

.video-modal__overlay-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.2s;
    z-index: 2;
}

.video-modal__overlay-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.video-modal__embed {
    width: 100%;
    height: 100%;
}

.video-modal__embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ===================================================================
   RESPONSIVE — 1200px
=================================================================== */
@media (max-width: 1200px) {
    .axo-hero-grid {
        grid-template-columns: 1fr 1fr;
    }

    .axo-feat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .axo-test-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .axo-blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .axo-tech-img {
        height: 380px;
    }

    /* ---- Hero: single-column stacked layout ---- */
    .ai-hero {
        min-height: auto;
    }

    .ai-hero__content {
        grid-template-columns: 1fr;
        padding: 100px 28px 0;
    }

    .ai-hero__headline {
        font-size: clamp(2.4rem, 8vw, 4rem);
        line-height: 1.0;
        gap: 10px;
    }

    /* decorative desktop-only tooltip card */
    .hero-tooltip {
        top: 38%;
        left: 57%;
    }

    /* paragraph + Explore button — left-aligned stack under the headline */
    .ai-hero__right {
        align-items: flex-start;
        padding: 26px 0 0;
        gap: 24px;
        width: 100%;
    }

    .ai-hero__paragraph {
        text-align: left;
        max-width: 520px;
        font-size: 1rem;
    }

    .hero-explore {
        align-self: flex-start;
        padding: 13px 34px;
        border: 1px solid rgba(236, 72, 153, .5);
        border-radius: 50px;
    }

    .hero-explore::after {
        display: none;
    }

    /* robot image + wave — stay side-by-side through tablet widths.
       Height is fixed at 260px for this entire 641-1200px range (not
       overridden again at 768px) so the badge's offset below stays at a
       consistent relative position instead of drifting between breakpoints. */
    .ai-hero__bottom {
        grid-template-columns: 32% 65%;
        padding: 56px 28px 0;
        height: 260px;
        gap: 18px;
    }

    .ai-hero__robot {
        border-radius: 16px;
    }

    .hero-wave-video {
        border-radius: 16px;
    }

    /* rotating play badge overlaps the seam between the two images */
    .hero-badge {
        width: 116px;
        height: 116px;
        bottom: 140px;
    }

    .hero-badge__ring {
        width: 100%;
        height: 100%;
    }

    .hero-badge__inner {
        width: 54px;
        height: 54px;
    }
}

/* ===================================================================
   RESPONSIVE — 768px
=================================================================== */
@media (max-width: 768px) {
    .axo-section {
        padding: 72px 0;
    }

    .axo-hero {
        padding: 110px 0 60px;
    }

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

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

    .axo-hero-img {
        height: 260px;
    }

    /* ---- Hero: tighter single-column stack for phones ---- */
    .ai-hero__content {
        grid-template-columns: 1fr;
        padding: 88px 20px 0;
    }

    .hero-bg-text {
        display: none;
    }

    .ai-hero__headline {
        font-size: clamp(2rem, 10.5vw, 3rem);
        line-height: 1.02;
        gap: 8px;
    }

    .ai-hero__right {
        align-items: flex-start;
        padding: 22px 0 0;
        gap: 20px;
        width: 100%;
    }

    .ai-hero__paragraph {
        text-align: left;
        max-width: 100%;
        font-size: .95rem;
    }

    .hero-explore {
        align-self: flex-start;
        padding: 12px 30px;
    }

    .ai-hero__bottom {
        padding: 48px 20px 0;
    }

    .axo-feat-grid {
        grid-template-columns: 1fr;
    }

    .axo-about-grid {
        grid-template-columns: 1fr;
    }

    .axo-about-imgs {
        grid-template-columns: 1fr 1fr;
    }

    .axo-about-imgs .axo-img-tall {
        margin-top: 0;
    }

    /* Keep the "Our Service" button beside the headline instead of it
       wrapping below — cap the headline column so there's room left over. */
    .axo-svc-head-left {
        max-width: 60%;
    }

    .axo-stats-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Thumbnail is always visible now, side-by-side with the content column —
       matches the reference's tablet card layout instead of the desktop
       accordion (where the thumb only appears for the active row). */
    .axo-svc-row {
        flex-wrap: nowrap;
        align-items: flex-start;
        padding: 20px;
        gap: 20px;
    }

    .axo-svc-thumb,
    .axo-svc-row.axo-open .axo-svc-thumb {
        width: 38%;
        height: 220px;
        margin-right: 0;
        opacity: 1;
    }

    /* Body switches from a flex row to plain block flow: the num/info pair
       sit inline via inline-block, tags and the arrow stack below as
       ordinary block elements. */
    .axo-svc-body {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    .axo-svc-num {
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
    }

    .axo-svc-info {
        display: inline-block;
        vertical-align: top;
        max-width: calc(100% - 50px);
    }

    .axo-svc-gap {
        display: none;
    }

    .axo-svc-tags {
        width: 100%;
        margin-top: 14px;
    }

    .axo-svc-arrow,
    .axo-svc-row.axo-open .axo-svc-arrow {
        display: flex;
        margin-top: 18px;
        transform: none;
    }

    .axo-tech-grid {
        grid-template-columns: 1fr;
    }

    .axo-tech-img {
        height: 280px;
    }


    .axo-test-grid {
        grid-template-columns: 1fr 1fr;
    }

    .axo-blog-grid {
        grid-template-columns: 1fr;
    }

    .axo-cta-row {
        grid-template-columns: 1fr;
    }

    .axo-cta-badge {
        justify-content: flex-start;
    }

    .axo-contact-grid {
        grid-template-columns: 1fr;
    }

    .axo-test-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   RESPONSIVE — 640px (hero: final phone collapse)
=================================================================== */
@media (max-width: 640px) {
    .chip-icon {
        display: none;
    }

    .hero-tooltip {
        display: none;
    }

    .ai-hero__headline {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
        line-height: 1.05;
        gap: 6px;
    }

    /* robot image + wave — stack full width */
    .ai-hero__bottom {
        grid-template-columns: 1fr;
        padding: 40px 20px 0;
        height: auto;
        gap: 16px;
    }

    .ai-hero__robot {
        height: 300px;
        border-radius: 16px;
    }

    .ai-hero__wave {
        height: 180px;
    }

    .hero-wave-video {
        border-radius: 16px;
    }

    /* rotating play badge overlaps the robot / wave junction, right side */
    .hero-badge {
        width: 100px;
        height: 100px;
        top: auto;
        left: auto;
        right: 16px;
        bottom: 150px;
        transform: none;
    }

    .hero-badge__ring {
        width: 100%;
        height: 100%;
    }

    .hero-badge__inner {
        width: 46px;
        height: 46px;
    }

    /* Undo the tablet cap — headline goes back to full width with the
       button wrapping below it. */
    .axo-svc-head-left {
        max-width: none;
    }

    /* Service rows: thumbnail full-width on top, content column below —
       further collapsing the 768px side-by-side card into a single column. */
    .axo-svc-row {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 0;
    }

    .axo-svc-thumb,
    .axo-svc-row.axo-open .axo-svc-thumb {
        width: 100%;
        height: 200px;
        margin-bottom: 18px;
    }
}

/* ===================================================================
   REDUCED MOTION
=================================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
    }

    .axo-badge-ring {
        animation: none;
    }

    .reveal {
        transition: none;
    }
}

/* ===================================================================
   FEATURES SECTION
=================================================================== */
.feat-section {
    background: #0B0921;
    padding: 90px 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.feat-header {
    text-align: center;
    margin-bottom: 52px;
}

.feat-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.feat-eyebrow__line {
    display: block;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7C3AED);
}

.feat-eyebrow__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #A855F7;
    box-shadow: 0 0 7px rgba(168, 85, 247, 0.8);
    flex-shrink: 0;
}

.feat-eyebrow__text {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #fff;
    text-transform: uppercase;
}

.feat-headline {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    margin: 16px 0 18px;
    line-height: 1.15;
}

.feat-subtext {
    font-size: 1rem;
    color: #fff;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.feat-card {
    border-radius: 18px;
    overflow: hidden;
    background: #0D0733;
    padding: 20px;
    transition: box-shadow 0.3s ease;
}

/* .feat-card--collab {
    border: 1px solid rgba(99, 75, 220, 0.192);
} */

.feat-card--collab .feat-card__img-zone {
    border: 2px solid rgba(99, 75, 220, 0.75);

    border-top: 2px solid rgba(99, 75, 220, 0.75);
    border-right: 1px solid rgba(99, 75, 220, 0.75);
    border-left: 1px solid rgba(99, 75, 220, 0.75);
    border-bottom: none;
}

.feat-card--chat .feat-card__img-zone {
    border-top: 2px solid rgba(236, 72, 153, 0.5);
    border-right: 1px solid rgba(236, 72, 153, 0.5);
    border-left: 1px solid rgba(236, 72, 153, 0.5);
    border-bottom: none;
}

.feat-card--magic {
    border: none;
}

.feat-card--magic .feat-card__info {
    border-radius: 0 0 12px 12px;
}

/* .feat-card--chat {
    border: 1px solid rgba(236, 72, 153, 0.3);
    box-shadow: 0 4px 24px rgba(236, 72, 153, 0.12);
} */


.feat-card__img-zone {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: 12px;
}

/* Per-card sweep color */
.feat-card--collab {
    --sweep-clr: rgba(255, 255, 255, 0.55);
}

.feat-card--magic {
    --sweep-clr: rgba(255, 255, 255, 0.50);
}

.feat-card--chat {
    --sweep-clr: rgba(255, 255, 255, 0.55);
}

@keyframes gradient-sweep {
    0% {
        transform: translateX(-130%) skewX(-18deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(130%) skewX(-18deg);
        opacity: 0;
    }
}

.feat-card__img-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 0%,
            var(--sweep-clr, rgba(99, 75, 220, 0.5)) 50%,
            transparent 100%);
    z-index: 2;
    pointer-events: none;
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
}

.feat-card__img-zone:hover::before {
    animation: gradient-sweep 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.img-zone--collab {
    background: #0D0733;
    /* The collab card's artwork sits on this backdrop, so lightening it on
       hover is the visible part of the effect (see hover rule below). */
    transition: background-color 0.5s ease;
}

.feat-card__img-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* No scale/zoom — the hover effect is a lighten + diagonal sheen. */
    transition: filter 0.5s ease;
}

/* Hover effect (NOT a zoom): the card lightens and a soft diagonal sheen
   fills the top-right corner — matching the reference feature card. */
.feat-card__img-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(135deg,
            transparent 42%,
            rgba(139, 116, 235, 0.16) 78%,
            rgba(190, 170, 255, 0.30) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.feat-card__img-zone:hover::after {
    opacity: 1;
}

/* Lighten the imagery itself on hover (brightens the photo cards; the collab
   card additionally lightens its solid backdrop). */
.feat-card__img-zone:hover img {
    filter: brightness(1.12) saturate(1.04);
}

.feat-card--collab .feat-card__img-zone:hover {
    background-color: #3B3358;
}

@media (prefers-reduced-motion: reduce) {

    .feat-card__img-zone img,
    .img-zone--collab,
    .feat-card__img-zone::after {
        transition: none;
    }
}

.collab-avatars {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    z-index: 2;
}

.collab-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2.5px solid #13103A;
    margin-left: -12px;
    overflow: hidden;
    flex-shrink: 0;
}

.collab-avatar:first-child {
    margin-left: 0;
}

.collab-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collab-avatar--1 {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
}

.collab-avatar--2 {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

.collab-avatar--3 {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.collab-avatar--4 {
    background: linear-gradient(135deg, #10B981, #059669);
}

.collab-robot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 52%;
    height: 95%;
    z-index: 1;
}

.collab-robot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom left;
    filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.25));
}

.pill-mario {
    position: absolute;
    top: 38%;
    right: 8%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #3B82F6;
    border-radius: 50px;
    padding: 5px 12px 5px 5px;
    animation: float-mario 3s ease-in-out infinite;
}

.pill-mario__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #93C5FD, #2563EB);
    flex-shrink: 0;
}

.pill-mario__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pill-mario__name {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.cursor-blue {
    position: absolute;
    top: 29%;
    right: 27%;
    z-index: 3;
    animation: cursor-drift 2.5s ease-in-out infinite;
}

.pill-melissa {
    position: absolute;
    top: 60%;
    right: 15%;
    z-index: 3;
    background: #EC4899;
    border-radius: 50px;
    padding: 6px 14px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    animation: float-melissa 4s ease-in-out infinite;
    animation-delay: 1.2s;
}

.cursor-pink {
    position: absolute;
    top: 53%;
    right: 31%;
    z-index: 3;
    animation: cursor-drift 3s ease-in-out infinite;
    animation-delay: 0.6s;
}

.img-zone--split {
    display: flex;
}

.split-half {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.split-half img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.split-half--left {
    background: linear-gradient(135deg, #111827, #1F2937);
}

.split-half--left img {
    filter: grayscale(1) contrast(1.15) brightness(0.88);
}

.split-half--right {
    background: linear-gradient(135deg, #0a1628, #1a3a5c);
}

.split-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255, 255, 255, 0.40);
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

.img-zone--generate {
    background: linear-gradient(135deg, #071020, #0d1f3c);
}

.img-zone--generate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.generate-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    background: rgba(6, 6, 18, 0.78);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 7px 7px 7px 20px;
    white-space: nowrap;
    z-index: 2;
}

.generate-bar__label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
    padding-right: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.generate-bar__btn {
    background: linear-gradient(135deg, #A855F7, #EC4899);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 9px 22px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    animation: btn-glow 2s ease-in-out infinite;
    transition: transform 0.2s;
}

.generate-bar__btn:hover {
    transform: scale(1.04);
}

.feat-card__info {
    margin-top: 20px;
    border-radius: 20px;
    padding: 20px 20px 20px 20px;
    background: #060129;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

@keyframes icon-shake {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-14deg);
    }

    30% {
        transform: rotate(12deg);
    }

    45% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(8deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    88% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.feat-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #4F46E5, #6D28D9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
}

.feat-card__icon:hover {
    animation: icon-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.feat-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.feat-card__desc {
    font-size: 1rem;
    color: #fff;
    line-height: 1.6;
    margin: 0;
}

.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(99, 75, 220, 0.6);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(99, 75, 220, 0.25);
    transition: background 0.25s, border-color 0.25s, opacity 0.3s ease;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
}

.scroll-top-btn:hover {
    background: #7C3AED;
    border-color: #7C3AED;
}

.scroll-top-btn:hover svg path {
    stroke: #fff;
}

.scroll-top-btn svg path {
    stroke: #7C3AED;
    transition: stroke 0.25s;
}

/* Scroll reveal */
.feat-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.feat-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Keyframes */
@keyframes float-mario {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(-2deg);
    }
}

@keyframes float-melissa {

    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(-8px) rotate(2deg);
    }
}

@keyframes cursor-drift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(3px, -5px);
    }

    66% {
        transform: translate(-2px, 2px);
    }
}

@keyframes btn-glow {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
    }

    50% {
        box-shadow: 0 0 22px rgba(168, 85, 247, 0.9), 0 0 40px rgba(236, 72, 153, 0.3);
    }
}

@media (max-width: 1024px) {
    .feat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    /* 3rd card gets its own row but stays card-width and centered,
       instead of stretching edge-to-edge across both columns. */
    .feat-card--chat {
        grid-column: span 2;
        width: calc((100% - 18px) / 2);
        margin: 0 auto;
    }

    .feat-section {
        padding: 70px 40px;
    }
}

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

    /* full-width single-column stack — undo the tablet centering
       (width/margin) from the 1024px breakpoint above */
    .feat-card--chat {
        grid-column: span 1;
        width: auto;
        margin: 0;
    }

    .feat-section {
        padding: 60px 20px;
    }

    .feat-headline {
        font-size: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════════════════ */
.about-section {
    background: #0D0B2A;
    position: relative;
    overflow: hidden;
    padding: 100px 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.about-bg-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%;
    background-position: center;
}

/* ROW 1 */
.about-top {
    display: grid;
    grid-template-columns: 25% 75%;
    align-items: flex-start;
    padding: 0 60px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.about-top__left {
    padding-top: 8px;
}

.about-top__right {
    position: relative;
}

/* Eyebrow */
.about-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eyebrow-line-h {
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7C3AED);
}

.eyebrow-dot-filled {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #A855F7;
    box-shadow: 0 0 7px rgba(168, 85, 247, 0.8);
    flex-shrink: 0;
}

.eyebrow-label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #fff;
    text-transform: uppercase;
}

/* Headline */
.about-headline {
    /* Pinned so the shared headline matches whether or not its container sets
       this font (the service section inherits Lexend otherwise). */
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    max-width: 820px;
}

.about-headline .word {
    display: inline-block;
    opacity: 0.2;
    color: rgba(255, 255, 255, 0.25);
    transition: opacity 0.4s ease-out, color 0.4s ease-out;
    margin-right: 0.28em;
}

.about-headline .word.lit {
    opacity: 1;
    color: #ffffff;
}

/* The service section headline reuses the .about-headline class so its size,
   weight, colour, spacing and word-by-word reveal are identical to the About
   headline. (No separate rules needed.) */

/* Holographic knot — image */
.holo-knot {
    position: absolute;
    top: 150px;
    right: 0px;
    width: 150px;
    height: 150px;
    animation: holo-float 8s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.35));
}

.holo-knot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes holo-float {
    0% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }

    33% {
        transform: translateY(-8px) rotate(6deg) scale(1.04);
    }

    66% {
        transform: translateY(4px) rotate(-4deg) scale(0.97);
    }

    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
}

/* ROW 2 */
.about-bottom {
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Left images */
.about-images {
    position: relative;
    height: 540px;
    overflow: visible;
}

.about-hand {
    position: absolute;
    left: -152px;
    top: 0;
    width: 550px;
    height: 100%;
    z-index: 4;
}

.about-hand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 0 40px rgba(6, 182, 212, 0.22));
}

.about-hand.hand-fallback {
    background: linear-gradient(135deg, #0a1628, #1a3a5c);
}

.about-robot-card {
    position: absolute;
    right: 0;
    top: 50%;
    width: 350px;
    height: 420px;
    border-radius: 28px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.07);
    opacity: 0;
    transform: translateY(calc(-50% + 80px));
}

@keyframes robotCardUp {
    from {
        opacity: 0;
        transform: translateY(calc(-50% + 80px));
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

.about-images.in-view .about-robot-card {
    animation: robotCardUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}

.about-robot-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.about-robot-card.robot-fallback {
    background: linear-gradient(160deg, #1a1040, #2d1060, #0d1f3c);
}

/* Right content */
.about-content {
    padding: 20px 60px 60px 50px;
}

/* style.css has its own unrelated .about-content component with a
   @media(max-width:767px){text-align:center} rule that bleeds into this
   page via the shared class name. Force left-alignment back with a more
   specific selector so it wins regardless of stylesheet load order. */
.about-section .about-content {
    text-align: left;
}

/* Avatars */
.about-avatars {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.about-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2.5px solid #0D0B2A;
    margin-left: -14px;
    overflow: hidden;
    flex-shrink: 0;
}

.about-avatar:first-child {
    margin-left: 0;
}

.about-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-avatar--1 {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
}

.about-avatar--2 {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.about-avatar--3 {
    background: linear-gradient(135deg, #10B981, #059669);
}

.about-avatar--plus {
    background: #3B82F6;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Paragraph */
.about-paragraph {
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.75;
    margin: 0 0 28px;
    max-width: 440px;
}

/* Button + deco lines */
.about-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 40px;
}

.about-deco-line {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #EC4899, transparent);
}

.about-btn {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 28px;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: border-color 0.3s, box-shadow 0.3s;
    display: inline-block;
    text-align: center;
}

.about-btn:hover {
    border-color: rgba(236, 72, 153, 0.55);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.12);
    color: #fff;
    text-decoration: none;
}

.about-btn::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #EC4899, #7C3AED);
    margin: 6px auto 0;
    transition: width 0.3s ease;
}

.about-btn:hover::after {
    width: 85px;
}

/* Shared CTA button style — used on all section links */
.page-btn {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 28px;
    border: 1px solid transparent;
    border-radius: 50px;
    transition: border-color 0.3s, box-shadow 0.3s;
    display: inline-block;
    text-align: center;
}

.page-btn:hover {
    border-color: rgba(236, 72, 153, 0.55);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.12);
    color: #fff;
    text-decoration: none;
}

.page-btn::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #EC4899, #7C3AED);
    margin: 6px auto 0;
    transition: width 0.3s ease;
}

.page-btn:hover::after {
    width: 85px;
}

/* Stats */
.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.about-stat__num {
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 10px;
}

.about-stat__label {
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
}

/* Scroll reveal */
.about-reveal-left {
    opacity: 0;
    transform: translateX(-70px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.2s;
}

.about-reveal-left.in-view,
.about-reveal-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive */
@media (max-width: 1024px) {
    .about-top {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 30px;
    }

    /* image + content stay side-by-side through tablet widths */
    .about-bottom {
        grid-template-columns: 42% 58%;
        gap: 20px;
    }

    .about-images {
        height: 420px;
    }

    .about-hand {
        display: none;
    }

    .about-robot-card {
        width: 260px;
        height: 380px;
        border-radius: 22px;
    }

    .about-content {
        padding: 20px 30px 40px 0;
    }

    .holo-knot {
        width: 90px;
        height: 90px;
        top: 0;
        right: 0;
        border-radius: 0;
    }
}

@media (max-width: 640px) {
    .about-section {
        padding: 70px 0 0;
    }

    .about-top {
        padding: 0 20px;
    }

    /* image on top, content below — undo the tablet 42%/58% split */
    .about-bottom {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

    .about-images {
        height: 300px;
    }

    .about-robot-card {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        transform: none !important;
    }

    .about-content {
        padding: 30px 20px 40px;
    }

    .holo-knot {
        display: none;
    }
}

/* ===================================================================
   OUR TECHNOLOGIES — falling capsule stage (Matter.js physics)
   =================================================================== */
.tech2 {
    position: relative;
    /* transparent (same colour as the page body) so the animated line
       background shows through behind the card */
    background: transparent;
    padding: 110px 0;
    overflow: hidden;
}

.tech2__bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(124, 58, 237, .12) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Outer container that centres the card. */
.tech2__wrap {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* The card: rounded, bordered, background image (set inline) with a dark
   overlay for readability. overflow:hidden clips the bleeding VR image and the
   falling capsules to the card. */
.tech2__card {
    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(124, 58, 237, .28);
    overflow: hidden;
    padding: 56px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.tech2__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 50px;
    align-items: stretch;
}

.tech2__left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The technologies headline reuses .about-headline (size/weight/colour/font
   and the word-by-word reveal), identical to the service + About headlines. */
.tech2__para {
    font-size: 16px;
    line-height: 1.85;
    color: #fff;
    margin: 18px 0 26px;
    max-width: 520px;
}

.tech2__left .page-btn {
    align-self: flex-start;
}

/* Physics stage — capsules are absolutely positioned and driven by JS.
   overflow:hidden clips the drop to the stage box, so the capsules appear to
   fall in from just below the About Company button (the stage's top edge)
   rather than from the top of the section. */
.tech2__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 350px;
    margin-top: 28px;
    overflow: hidden;
}

.tech-cap {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(15, 11, 40, .92);
    border: 1px solid rgba(124, 58, 237, .30);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    cursor: grab;
    user-select: none;
    opacity: 0;
    transform: translate(-300px, -300px);
    will-change: transform;
    transform-origin: center center;
    /* NB: transform is driven by the physics engine every frame, so it is
       intentionally NOT transitioned here — only the colour/shadow are. */
    transition: background 0.6s ease, border-color 0.6s ease,
        box-shadow 0.6s ease, color 0.6s ease;
}

.tech-cap:active {
    cursor: grabbing;
}

/* Hover: the capsule lights up with the brand purple gradient (like the
   highlighted capsule in the reference). */
.tech-cap:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow: 0 14px 32px rgba(124, 58, 237, 0.55);
    color: #fff;
}

.tech-cap img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    pointer-events: none;
}

/* Transparent cutout figure (VR-headset PNG), aligned to the bottom-right and
   bleeding to the card's right + bottom edges (negative margins cancel the
   card padding on those sides). */
.tech2__right {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 520px;
    margin: -20px -56px -56px 0;
}

.tech2__right img {
    width: auto;
    max-width: 100%;
    max-height: 640px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 30px 60px rgba(124, 58, 237, .35));
}

/* Text+capsules and the VR image stay side-by-side through tablet widths —
   only truly stacking (and hiding the image, see the 640px block) at mobile. */
@media (max-width: 900px) {
    .tech2__card {
        padding: 34px;
    }

    .tech2__inner {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .tech2__right {
        min-height: 300px;
        margin: 0;
    }

    .tech2__stage {
        min-height: 260px;
    }
}

/* Technologies: stack to one column and drop the decorative VR image so
   the capsule stage gets the full width to itself. Placed after the 900px
   block above so it wins the cascade at widths where both apply. */
@media (max-width: 640px) {
    .tech2__inner {
        grid-template-columns: 1fr;
    }

    .tech2__right {
        display: none;
    }

    .tech2__stage {
        min-height: 320px;
    }
}

/* ===================================================================
   ANIMATED VERTICAL-LINE BACKGROUND
   A fixed layer behind the page content (z-index:-1): faint static vertical
   lines with light beams travelling down them.
   =================================================================== */
/* Establish a stacking context on the page wrapper so the fixed line layer
   (z-index:0 below) sits ABOVE the opaque body background but behind the
   page content. Without this, a z-index:-1 layer hides behind the body bg. */
.axo-page {
    position: relative;
    z-index: 0;
}

.page-lines {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Page content sits above the line layer. */
.axo-page>section {
    position: relative;
    z-index: 1;
}

/* Faint static vertical guide lines (a few columns). */
.page-lines::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg,
            rgba(139, 116, 235, .08) 0 1px,
            transparent 1px 25%);
}

/* A soft glowing head with a fading tail that slides down each line — like a
   comet descending. Visible but not laser-harsh. */
.page-lines i {
    position: absolute;
    top: -42vh;
    width: 2px;
    height: 42vh;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(150, 130, 240, 0) 45%,
            rgba(170, 140, 250, .5) 82%,
            rgba(215, 185, 255, .95) 100%);
    filter: blur(0.6px) drop-shadow(0 0 7px rgba(190, 150, 255, .7));
    animation: lineBeam 8s linear infinite;
    opacity: 0;
}

.page-lines i:nth-child(1) {
    left: 25%;
    animation-duration: 5.2s;
    animation-delay: 0s;
}

.page-lines i:nth-child(2) {
    left: 50%;
    animation-duration: 6.4s;
    animation-delay: 2.6s;
}

.page-lines i:nth-child(3) {
    left: 75%;
    animation-duration: 5.8s;
    animation-delay: 1.3s;
}

.page-lines i:nth-child(4) {
    left: 12%;
    animation-duration: 6.9s;
    animation-delay: 4s;
}

.page-lines i:nth-child(5) {
    left: 88%;
    animation-duration: 6.1s;
    animation-delay: 1.9s;
}

.page-lines i:nth-child(6),
.page-lines i:nth-child(7) {
    display: none;
}

@keyframes lineBeam {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(150vh);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-lines i {
        animation: none;
        opacity: 0;
    }
}

/* ===================================================================
   OUR PROJECT — centred header + image cards with glass panel + hover
   =================================================================== */
.proj2 {
    background: transparent;
}

.proj-head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 54px;
}

.proj-head .feat-eyebrow {
    justify-content: center;
}

.proj-head .about-headline {
    margin: 8px auto 16px;
    max-width: 760px;
}

.proj-head__sub {
    font-size: 16px;
    color: #fff;
    line-height: 1.8;
    margin: 0;
    max-width: 620px;
    margin-inline: auto;
}

.proj-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.proj-card {
    position: relative;
    display: block;
    height: 360px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, .2);
    text-decoration: none;
    background: linear-gradient(160deg, rgba(124, 58, 237, .22), rgba(13, 11, 42, .9));
}

.proj-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.25, .46, .45, .94);
}

.proj-card:hover .proj-card__img {
    transform: scale(1.07);
}

.proj-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 32%, rgba(9, 7, 30, .85) 100%);
    pointer-events: none;
}

/* Frosted-glass panel */
.proj-card__panel {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 16px 18px;
    border-radius: 15px;
    background-color: #06012966;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: background .4s ease, transform .4s ease, box-shadow .4s ease;
}

.proj-card:hover .proj-card__panel {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
}

.proj-card__tag {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .04em;
    padding: 3px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
    background: rgba(13, 11, 42, .7);
    border: 1px solid rgba(124, 58, 237, .4);
    color: #fff;
}

.proj-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.proj-card__title {
    font-family: 'Plus Jakarta Sans', 'Lexend', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.proj-card__arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}

/* Hover: the arrow fills white with a purple glyph */
.proj-card:hover .proj-card__arrow {
    background: #fff;
    border-color: #fff;
    color: #7C3AED;
    transform: scale(1.06);
}

/* Stays a 2x2 grid through tablet widths — only collapses to a single
   column at true mobile (see the 640px block below). */
@media (max-width: 768px) {
    .proj-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .proj-card {
        height: 260px;
    }
}

@media (max-width: 640px) {
    .proj-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .proj-card {
        height: 320px;
    }
}

/* ===================================================================
   OUR TESTIMONIALS — split header + 3-column vertical marquee
   =================================================================== */
.tstm {
    background: #060129;
}

.tstm__head {
    display: grid;
    grid-template-columns: 0.72fr 1.6fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.tstm__head .about-headline {
    margin: 0;
    max-width: none;
}

/* Rating badge (centred) */
.tstm__rating {
    display: flex;
    align-items: center;
    gap: 14px;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 48px;
    padding: 12px 22px;
    border-radius: 16px;
    background: rgba(20, 16, 45, .6);
    border: 1px solid rgba(124, 58, 237, .22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.tstm__logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.tstm__score {
    font-family: 'Plus Jakarta Sans', 'Lexend', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tstm__stars {
    color: #F5A623;
    font-size: 16px;
    letter-spacing: 2px;
}

.tstm__reviews {
    font-size: 12.5px;
    color: #fff;
    margin-top: 2px;
}

/* 3 marquee columns; top/bottom fade via mask */
.tstm__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    height: 640px;
    overflow: hidden;
    -webkit-mask: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.tstm__col {
    overflow: hidden;
}

.tstm__track {
    display: block;
    will-change: transform;
}

/* cols 1 & 3 move up, col 2 moves the opposite way (down) */
.tstm__col--up .tstm__track {
    animation: tstmUp 36s linear infinite;
}

.tstm__col--down .tstm__track {
    animation: tstmDown 32s linear infinite;
}

.tstm__col:nth-child(3) .tstm__track {
    animation-duration: 40s;
}

@keyframes tstmUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

@keyframes tstmDown {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}

/* Cards — margin-bottom (not gap) so translateY(-50%) loops seamlessly */
.tstm-card {
    background: #151134;
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 18px;
    padding: 30px;
    margin-bottom: 24px;
}

.tstm-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tstm-card__quote {
    color: #6D5CE7;
    font-size: 32px;
    line-height: 1;
    display: block;
}

.tstm-card__stars {
    color: #F5A623;
    font-size: 20px;
    letter-spacing: 2px;
}

.tstm-card__text {
    font-size: 16px;
    color: #fff;
    line-height: 1.7;
    margin: 0 0 20px;
}

.tstm-card__person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tstm-card__person img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(124, 58, 237, .4);
    flex: 0 0 auto;
}

.tstm-card__name {
    display: block;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}

.tstm-card__role {
    display: block;
    font-size: 12.5px;
    color: #D946EF;
    margin-top: 2px;
}

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

    .tstm__cols {
        grid-template-columns: 1fr 1fr;
        height: 560px;
    }

    .tstm__col:nth-child(3) {
        display: none;
    }
}

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

    .tstm__col:nth-child(2) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tstm__track {
        animation: none !important;
    }

    .tstm__cols {
        height: auto;
        -webkit-mask: none;
        mask: none;
    }
}

/* ===================================================================
   AI INSIGHTS / BLOG — split header + horizontal card marquee
   =================================================================== */
.blog2 {
    background: transparent;
}

.blog2__head {
    display: grid;
    grid-template-columns: 0.72fr 1.6fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 44px;
}

.blog2__head .about-headline {
    margin: 0;
    max-width: none;
}

/* Card wrapper with the insight-bg image + #0D0733 base colour */
.blog2__card {
    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(124, 58, 237, .28);
    overflow: hidden;
    padding: 54px 40px 48px;
    background-color: #0D0733;
    background-size: cover;
    background-position: center;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

/* Owl carousel item cards */
.blog-card__media {
    display: block;
    position: relative;
    height: 270px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, .18);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.25, .46, .45, .94);
}

.blog-card__media:hover img {
    transform: scale(1.06);
}

.blog-card__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(13, 11, 42, .7);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.blog-card__body {
    padding: 20px 2px 0;
}

.blog-card__title {
    font-family: 'Plus Jakarta Sans', 'Lexend', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}

.blog-card__title a {
    color: #fff;
    text-decoration: none;
    transition: color .3s ease;
}

.blog-card__title a:hover {
    color: #D946EF;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #fff;
}

.blog-card__dot {
    color: #7C3AED;
}

/* Alternating image heights — short / tall / short … (shifts as it slides) */
.blog-card--short .blog-card__media {
    height: 250px;
}

.blog-card--tall .blog-card__media {
    height: 340px;
}

/* Owl carousel: top-align the differing-height items, hide nav/dots */
.blog-owl .owl-stage {
    display: flex;
    align-items: flex-start;
}

.blog-owl .owl-nav,
.blog-owl .owl-dots {
    display: none;
}

.blog-owl .owl-item {
    opacity: .35;
    transition: opacity .6s ease;
}

.blog-owl .owl-item.active {
    opacity: 1;
}

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

    .blog2__card {
        padding: 34px 20px;
    }

    .blog-card--short .blog-card__media,
    .blog-card--tall .blog-card__media {
        height: 220px;
    }
}