/* ============================================================
   Atomquark — "What Are We Experts At" section (compact, light)
   Custom atom-themed SVG graphic + tight 2-col content.
   Cool brand palette (cyan / indigo / violet).
   ============================================================ */

.ab-mod-section {
    position: relative;
    padding: 48px 0 56px;
    background:
        radial-gradient(circle at 12% 14%, rgba(6, 182, 212, 0.10) 0%, transparent 38%),
        radial-gradient(circle at 88% 86%, rgba(139, 92, 246, 0.10) 0%, transparent 38%),
        linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
    overflow: hidden;
    isolation: isolate;
}

.ab-mod-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

.ab-mod-section > .container { position: relative; z-index: 1; }

/* ----- Grid ----- */
.ab-mod-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 40px;
    align-items: stretch;  /* image column stretches to match text column height */
}

/* ============================================================
   LEFT — Atom-themed graphic
   ============================================================ */
.ab-mod-visual {
    position: relative;
    width: 100%;
    height: 100%;          /* fill the grid row height */
    min-height: 380px;     /* sane floor if the text column is very short */
    margin: 0 auto;
    display: flex;         /* lets the photo fill 100% of available height */
}

.ab-mod-visual__svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   Photo frame — themed image with gradient border & glow
   ============================================================ */
.ab-mod-visual__photo {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.ab-mod-visual__photo-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 26px;
    overflow: hidden;
    /* Layered shadow + brand-coloured glow + gradient border */
    box-shadow:
        0 30px 60px -20px rgba(79, 70, 229, 0.45),
        0 10px 30px -10px rgba(6, 182, 212, 0.30),
        0 0 0 1px rgba(79, 70, 229, 0.18);
    background: linear-gradient(135deg, #22d3ee, #4f46e5, #8b5cf6);
    padding: 3px; /* gradient ring around the photo */
}

.ab-mod-visual__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 23px;
}

/* Brand-coloured tint overlay: pushes the image toward cyan/indigo without obliterating detail */
.ab-mod-visual__photo-tint {
    position: absolute;
    inset: 3px;
    border-radius: 23px;
    pointer-events: none;
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(79, 70, 229, 0.08) 50%, rgba(139, 92, 246, 0.12));
    mix-blend-mode: screen;
}

/* ============================================================
   "Quantum Resonance Lattice" — animations
   ============================================================ */

/* Outer hexagon slowly rotates clockwise (60s/turn) — the perimeter
   feels like a slow, deliberate cosmic motion. */
.ab-mod-visual__svg .layer-outer {
    transform-origin: 200px 200px;
    animation: ab-mod-spin-cw 60s linear infinite;
}

/* Inner triangle counter-rotates faster — creates dynamic tension
   between the two layers. */
.ab-mod-visual__svg .layer-inner {
    transform-origin: 200px 200px;
    animation: ab-mod-spin-ccw 24s linear infinite;
}

/* The middle dashed halo ring rotates the opposite way for depth. */
.ab-mod-visual__svg .halo-spin-rev {
    transform-origin: 200px 200px;
    animation: ab-mod-spin-ccw 50s linear infinite;
}

@keyframes ab-mod-spin-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes ab-mod-spin-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Each outer quark pulses in its own rhythm (3s loop, staggered by
   animation-delay in the SVG inline style) — creates a wave around
   the hexagon perimeter. */
.ab-mod-visual__svg .quark-pulse {
    animation: ab-mod-quark-pulse 3s ease-in-out infinite;
}

@keyframes ab-mod-quark-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.9; }
}

/* Central emergent core pulses fastest — the "alive" spark. */
.ab-mod-visual__svg .emergent {
    transform-origin: 200px 200px;
    animation: ab-mod-emergent 2s ease-in-out infinite;
}

@keyframes ab-mod-emergent {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.22); opacity: 0.88; }
}

/* Flowing-light effect on beams via dasharray offset.
   Each beam looks like data is streaming through it. */
.ab-mod-visual__svg .beam-flow line {
    stroke-dasharray: 12 10;
    animation: ab-mod-beam-flow 2.4s linear infinite;
}
.ab-mod-visual__svg .beam-flow-rev line {
    stroke-dasharray: 10 8;
    animation: ab-mod-beam-flow-rev 1.8s linear infinite;
}

@keyframes ab-mod-beam-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -22; }
}
@keyframes ab-mod-beam-flow-rev {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: 18; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .ab-mod-visual__svg .layer-outer,
    .ab-mod-visual__svg .layer-inner,
    .ab-mod-visual__svg .halo-spin-rev,
    .ab-mod-visual__svg .quark-pulse,
    .ab-mod-visual__svg .emergent,
    .ab-mod-visual__svg .beam-flow line,
    .ab-mod-visual__svg .beam-flow-rev line { animation: none; }
}

/* Floating years-of-excellence badge over the visual */
.ab-mod-visual__badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 60%, #8b5cf6 100%);
    color: #ffffff;
    box-shadow: 0 14px 30px -8px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ab-mod-visual__badge-num {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
}

.ab-mod-visual__badge-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ============================================================
   Floating trust chips around the visual
   ============================================================ */

.ab-mod-visual__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow:
        0 10px 24px -8px rgba(79, 70, 229, 0.30),
        0 0 0 1px rgba(79, 70, 229, 0.10);
    z-index: 3;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    white-space: nowrap;
}

.ab-mod-visual__chip:hover {
    transform: translateY(-3px) rotate(0deg) !important;
    box-shadow:
        0 16px 32px -8px rgba(79, 70, 229, 0.5),
        0 0 0 1px rgba(79, 70, 229, 0.2);
}

/* Per-position placement + float animation (staggered per chip) */
.ab-mod-visual__chip--tl {
    top: 14%;
    left: -6%;
    transform: rotate(-3deg);
    animation: ab-mod-float-y 5.5s ease-in-out infinite;
}
.ab-mod-visual__chip--tr {
    top: 10%;
    right: -4%;
    transform: rotate(3deg);
    animation: ab-mod-float-y 6.5s ease-in-out infinite;
    animation-delay: -1.8s;
}
.ab-mod-visual__chip--ml {
    top: 52%;
    left: -8%;
    transform: rotate(-2deg);
    animation: ab-mod-float-y 5s ease-in-out infinite;
    animation-delay: -2.6s;
}
.ab-mod-visual__chip--mr {
    top: 60%;
    right: -6%;
    transform: rotate(2deg);
    animation: ab-mod-float-y 6s ease-in-out infinite;
    animation-delay: -3.4s;
}

@keyframes ab-mod-float-y {
    0%, 100% { transform: translateY(0) rotate(var(--rot, -3deg)); }
    50%      { transform: translateY(-8px) rotate(var(--rot, -3deg)); }
}

/* Per-chip rotation variable so float animation preserves tilt */
.ab-mod-visual__chip--tl { --rot: -3deg; }
.ab-mod-visual__chip--tr { --rot:  3deg; }
.ab-mod-visual__chip--ml { --rot: -2deg; }
.ab-mod-visual__chip--mr { --rot:  2deg; }

.ab-mod-visual__chip-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 60%, #8b5cf6 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.4);
}

/* Variant icon colors so each chip feels distinct */
.ab-mod-visual__chip-icon--cyan {
    background: linear-gradient(135deg, #67e8f9 0%, #06b6d4 60%, #0e7490 100%);
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.45);
}
.ab-mod-visual__chip-icon--violet {
    background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 60%, #6d28d9 100%);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.45);
}

.ab-mod-visual__chip-text {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
}

.ab-mod-visual__chip-text small {
    display: block;
    font-size: 9px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.3px;
    text-transform: none;
    margin-top: 2px;
}

/* ============================================================
   Decorative floating particles (fill whitespace, subtle motion)
   ============================================================ */
.ab-mod-visual__particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.ab-mod-visual__particle--1 {
    top: 28%; left: 4%;
    width: 10px; height: 10px;
    background: radial-gradient(circle, #22d3ee 0%, rgba(34, 211, 238, 0) 70%);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.6);
    animation: ab-mod-particle 7s ease-in-out infinite;
}
.ab-mod-visual__particle--2 {
    top: 80%; right: 10%;
    width: 8px; height: 8px;
    background: radial-gradient(circle, #8b5cf6 0%, rgba(139, 92, 246, 0) 70%);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
    animation: ab-mod-particle 8.5s ease-in-out infinite;
    animation-delay: -3s;
}
.ab-mod-visual__particle--3 {
    top: 38%; right: 6%;
    width: 6px; height: 6px;
    background: radial-gradient(circle, #4f46e5 0%, rgba(79, 70, 229, 0) 70%);
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.6);
    animation: ab-mod-particle 6s ease-in-out infinite;
    animation-delay: -1.5s;
}
.ab-mod-visual__particle--4 {
    bottom: 14%; left: 12%;
    width: 7px; height: 7px;
    background: radial-gradient(circle, #a78bfa 0%, rgba(167, 139, 250, 0) 70%);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
    animation: ab-mod-particle 7.5s ease-in-out infinite;
    animation-delay: -4s;
}

@keyframes ab-mod-particle {
    0%, 100% { transform: translate(0, 0)     scale(1);   opacity: 0.7; }
    25%      { transform: translate(8px, -10px) scale(1.2); opacity: 1; }
    50%      { transform: translate(0, -16px)   scale(0.8); opacity: 0.5; }
    75%      { transform: translate(-8px, -8px) scale(1.1); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-mod-visual__chip,
    .ab-mod-visual__particle { animation: none !important; }
}

@media (max-width: 991.98px) {
    /* Tuck chips closer in on smaller screens */
    .ab-mod-visual__chip--tl { left: 2%; }
    .ab-mod-visual__chip--tr { right: 2%; }
    .ab-mod-visual__chip--ml { left: 0; }
    .ab-mod-visual__chip--mr { right: 0; }
}

@media (max-width: 575.98px) {
    /* Hide the two side chips on phones — keeps it readable */
    .ab-mod-visual__chip--ml,
    .ab-mod-visual__chip--mr { display: none; }
}

/* ============================================================
   RIGHT — Content
   ============================================================ */
.ab-mod-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.13), rgba(139, 92, 246, 0.13));
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: 999px;
    color: #4f46e5;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ab-mod-eyebrow i {
    color: #06b6d4;
    font-size: 11px;
}

.ab-mod-title {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    letter-spacing: -0.6px;
    margin: 0 0 4px;
    background: linear-gradient(135deg, #0f172a 0%, #4f46e5 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.ab-mod-tagline {
    font-size: 14px;
    color: #4f46e5;
    font-weight: 600;
    margin: 0 0 14px;
    letter-spacing: 0.1px;
}

.ab-mod-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(79, 70, 229, 0.12);
}

/* ----- Capabilities 2x3 grid ----- */
.ab-mod-caps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.ab-mod-caps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #0f172a;
    font-weight: 500;
    line-height: 1.4;
    transition: transform 0.2s ease;
}

.ab-mod-caps li:hover { transform: translateX(3px); }

.ab-mod-caps__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(79, 70, 229, 0.18));
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.25s ease;
}

.ab-mod-caps li:hover .ab-mod-caps__icon {
    background: linear-gradient(135deg, #22d3ee, #4f46e5);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
}

/* ----- Stats row ----- */
.ab-mod-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 0;
    border-top: 1px solid rgba(79, 70, 229, 0.12);
    border-bottom: 1px solid rgba(79, 70, 229, 0.12);
}

.ab-mod-stats__item {
    text-align: center;
}

.ab-mod-stats__value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #06b6d4, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 4px;
}

.ab-mod-stats__label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* ----- CTAs ----- */
.ab-mod-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ab-mod-cta__btn,
.ab-mod-cta__btn:link,
.ab-mod-cta__btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.ab-mod-cta__btn--primary {
    background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 60%, #8b5cf6 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.4);
}

.ab-mod-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -4px rgba(79, 70, 229, 0.55);
}

.ab-mod-cta__btn--ghost {
    background: rgba(79, 70, 229, 0.06);
    color: #4f46e5 !important;
    border: 1px solid rgba(79, 70, 229, 0.25);
}

.ab-mod-cta__btn--ghost:hover {
    background: rgba(79, 70, 229, 0.12);
    border-color: rgba(79, 70, 229, 0.4);
    transform: translateY(-2px);
}

.ab-mod-cta__btn i { font-size: 11px; transition: transform 0.25s ease; }
.ab-mod-cta__btn:hover i { transform: translateX(3px); }

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
    .ab-mod-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* On mobile, fall back to a fixed-ratio image (text comes after) */
    .ab-mod-visual {
        max-width: 480px;
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    .ab-mod-section { padding: 40px 0 44px; }
}

@media (max-width: 575.98px) {
    .ab-mod-caps { grid-template-columns: 1fr; }
    .ab-mod-cta__btn { flex: 1; justify-content: center; }
}