/* ============================================================
   BookMyCab — Technology Page  (technology.css)
   Supplements index1.css
   ============================================================ */

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.tech-hero {
    background: #0A1628;
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
    min-height: 92vh;
    display: flex;
    align-items: center;
}

.tech-hero__bg-glow {
    position: absolute;
    top: -100px; left: -120px;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51,90,95,.35) 0%, transparent 70%);
    pointer-events: none;
}
.tech-hero__bg-glow::after {
    content: '';
    position: absolute;
    bottom: -200px; right: -200px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,88,12,.15) 0%, transparent 70%);
}
.tech-hero__grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(73,150,156,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73,150,156,.04) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}
/* Bottom fade into white */
.tech-hero::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}

.tech-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.tech-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    background: rgba(73,150,156,.12);
    border: 1px solid rgba(73,150,156,.25);
    color: var(--teal-400);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: .3rem .9rem;
    border-radius: 20px;
    margin-bottom: 1.4rem;
}

.tech-hero__h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.4rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.7px;
    margin-bottom: 1.3rem;
}
.tech-hero__h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--teal-400), #6DD5DC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tech-hero__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.65);
    line-height: 1.75;
    margin-bottom: 2rem;
    max-width: 500px;
}
.tech-hero__sub strong { color: rgba(255,255,255,.9); }
.tech-hero__sub span  { color: var(--teal-400); font-weight: 600; }

.tech-hero__stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.th-stat { padding: 0 1.4rem; }
.th-stat:first-child { padding-left: 0; }
.th-stat__val {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: .2rem;
}
.th-stat__lbl {
    font-size: .68rem;
    color: rgba(255,255,255,.45);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.th-stat__divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
}

/* Scroll indicator */
.tech-hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    opacity: .45;
    font-size: .65rem;
    color: rgba(255,255,255,.7);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.scroll-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(73,150,156,.8);
    animation: scrollBounce 1.4s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(6px); opacity: .4; }
}


/* ── Orbit Diagram ── */
.orbit-diagram {
    position: relative;
    width: 360px;
    height: 360px;
    margin: 0 auto;
}

.orbit-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}
.orbit-core__inner {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-700), var(--teal));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    gap: .25rem;
    box-shadow: 0 0 0 3px rgba(73,150,156,.3), 0 0 40px rgba(51,90,95,.5);
    position: relative;
    z-index: 2;
}
.orbit-pulse {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 88px; height: 88px;
    border-radius: 50%;
    border: 2px solid rgba(73,150,156,.4);
    animation: orbitPulse 2s ease-out infinite;
}
.orbit-pulse--2 { animation-delay: 1s; }
@keyframes orbitPulse {
    0%   { transform: translate(-50%,-50%) scale(1); opacity: .7; }
    100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

.orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(73,150,156,.2);
    animation: orbitSpin linear infinite;
}
.orbit-ring--1 { width: 230px; height: 230px; animation-duration: 22s; }
.orbit-ring--2 { width: 340px; height: 340px; animation-duration: 35s; animation-direction: reverse; }
@keyframes orbitSpin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.orbit-node {
    position: absolute;
    top: 50%; left: 50%;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--bg, #335A5F);
    border: 2px solid rgba(255,255,255,.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.9);
    font-size: .55rem;
    font-weight: 600;
    gap: .18rem;
    text-align: center;
    transform:
        translate(-50%, -50%)
        rotate(var(--a))
        translateX(115px)
        rotate(calc(-1 * var(--a)));
}
.orbit-node--sm {
    width: 46px; height: 46px;
    font-size: .5rem;
    transform:
        translate(-50%, -50%)
        rotate(var(--a))
        translateX(170px)
        rotate(calc(-1 * var(--a)));
}
/* Counter-rotate node content to keep text upright */
.orbit-ring--1 .orbit-node { animation: counterSpin 22s linear infinite reverse; }
.orbit-ring--2 .orbit-node { animation: counterSpin2 35s linear infinite; }
@keyframes counterSpin  { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes counterSpin2 { from { rotate: 0deg; } to { rotate: -360deg; } }
.orbit-node i { font-size: 1rem; }
.orbit-node--sm i { font-size: .85rem; }


/* ─────────────────────────────────────────
   3T PILLAR BLOCKS — Alternating full-width
───────────────────────────────────────── */
.pillars-section {}

.pillar-block {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.pillar-block--teal { background: var(--grey-50); }
.pillar-block--light { background: var(--white); }
.pillar-block--dark { background: linear-gradient(125deg, #0A1628 0%, #1E3A40 60%, #275059 100%); }

/* Decorative background shapes */
.pillar-block__decor {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.pillar-block__decor--t1 {
    width: 500px; height: 500px;
    top: -150px; right: -150px;
    background: radial-gradient(circle, rgba(51,90,95,.06) 0%, transparent 70%);
}
.pillar-block__decor--t2 {
    width: 400px; height: 400px;
    bottom: -100px; left: -100px;
    background: radial-gradient(circle, rgba(232,88,12,.04) 0%, transparent 70%);
}
.pillar-block__decor--t3 {
    width: 600px; height: 600px;
    top: -200px; left: -200px;
    background: radial-gradient(circle, rgba(73,150,156,.12) 0%, transparent 70%);
}

.pillar-block__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.pillar-block--flip .pillar-block__inner { }
.pillar-block--flip .pillar-block__visual { order: 2; }
.pillar-block--flip .pillar-block__text   { order: 1; }

/* Number badge */
.pillar-num-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--teal);
    background: var(--teal-50);
    border: 1px solid rgba(51,90,95,.15);
    padding: .22rem .75rem;
    border-radius: 20px;
    margin-bottom: .85rem;
    text-transform: uppercase;
}
.pillar-num-badge--orange { color: var(--orange); background: #FFF3EB; border-color: rgba(232,88,12,.15); }
.pillar-num-badge--blue   { color: #3B82F6; background: #EFF6FF; border-color: rgba(59,130,246,.15); }

.pillar-block__h {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: var(--grey-900);
    letter-spacing: -.5px;
    line-height: 1.1;
    margin-bottom: .4rem;
}
.pillar-block__sub {
    font-size: .88rem;
    color: var(--grey-400);
    margin-bottom: 1.2rem;
    font-weight: 500;
}
.pillar-block__p {
    font-size: .93rem;
    color: var(--grey-500);
    line-height: 1.78;
    margin-bottom: 1.6rem;
}

.pillar-features { display: flex; flex-direction: column; gap: .7rem; }
.pf-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .85rem;
    color: var(--grey-600);
    line-height: 1.55;
}
.pf-item i { color: var(--teal); font-size: .95rem; flex-shrink: 0; margin-top: .1rem; }
.pf-item--dark { color: rgba(255,255,255,.7); }
.pf-item--dark i { color: var(--teal-400); }


/* ── Pillar Illustrations ── */
.pillar-illustration { position: relative; }

/* Floating chips */
.pil-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 20px;
    padding: .35rem .85rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--grey-700);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    animation: floatChip 3s ease-in-out infinite;
    white-space: nowrap;
    z-index: 3;
}
.pil-chip i { color: var(--teal); }
.pil-chip--1 { top: -16px; right: 10px; animation-delay: 0s; }
.pil-chip--2 { bottom: -12px; left: 10px; animation-delay: 1.2s; }
.pil-chip--3 { top: -14px; left: 20px; animation-delay: .5s; }
.pil-chip--4 { bottom: -14px; right: 20px; animation-delay: 1.7s; }
.pil-chip--5 { top: -14px; right: 12px; animation-delay: .3s; }
.pil-chip--6 { bottom: -14px; left: 8px; animation-delay: 1.5s; }
@keyframes floatChip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ── Mock Screen (CRM) ── */
.pil-screen {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.06);
    position: relative;
    z-index: 2;
}
.pil-screen__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-200);
    padding: .65rem 1rem;
}
.pil-dot { width: 10px; height: 10px; border-radius: 50%; background: #E5E7EB; }
.pil-dot--y { background: #FCD34D; }
.pil-dot--g { background: #6EE7B7; }
.pil-screen__title {
    font-size: .7rem;
    font-weight: 600;
    color: var(--grey-400);
    margin-left: .3rem;
}
.pil-screen__body { padding: 1.1rem; display: flex; flex-direction: column; gap: .65rem; }

.pil-dash-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--grey-50);
    border: 1px solid var(--grey-100);
    border-radius: 8px;
    padding: .6rem .75rem;
}
.pil-dash-ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}
.pil-dash-info { flex: 1; }
.pil-dash-info span { display: block; font-size: .65rem; color: var(--grey-400); }
.pil-dash-info strong { font-size: .8rem; color: var(--grey-900); }
.pil-dash-badge {
    font-size: .58rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 8px;
    letter-spacing: .5px;
}
.pil-dash-badge--green { background: #ECFDF5; color: #166534; }
.pil-dash-badge--amber { background: #FEF3C7; color: #92400E; }

.pil-bar-row { display: flex; flex-direction: column; gap: .2rem; padding: 0 .1rem; }
.pil-bar-row > div:first-child { display: flex; justify-content: space-between; font-size: .7rem; color: var(--grey-500); }
.pil-bar { height: 5px; background: var(--grey-200); border-radius: 3px; overflow: hidden; }
.pil-bar__fill { height: 100%; border-radius: 3px; }

/* ── Fleet Map (Transportation) ── */
.fleet-map {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.06);
    position: relative;
    z-index: 2;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.fleet-map__header {
    font-size: .72rem;
    font-weight: 700;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.fleet-map__route {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: .4rem;
}
.route-stop { display: flex; align-items: center; gap: .7rem; position: relative; z-index: 1; }
.rs-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grey-300); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--grey-300); flex-shrink: 0; }
.rs-dot--teal   { background: var(--teal); box-shadow: 0 0 0 2px rgba(51,90,95,.2); }
.rs-dot--orange { background: var(--orange); box-shadow: 0 0 0 2px rgba(232,88,12,.2); }
.rs-label { font-size: .78rem; color: var(--grey-700); }
.rs-label span { font-size: .65rem; color: var(--grey-400); margin-left: .4rem; }
.route-line {
    width: 1px;
    height: 26px;
    background: linear-gradient(to bottom, var(--teal), var(--grey-300));
    margin-left: 5px;
    position: relative;
}
.route-car-icon {
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--teal);
    background: #EEF7F8;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fleet-drivers { display: flex; flex-direction: column; gap: .45rem; }
.driver-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border: 1px solid var(--grey-100);
    border-radius: 8px;
    background: var(--grey-50);
}
.driver-chip--active { background: var(--teal-50); border-color: rgba(51,90,95,.15); }
.dc-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dc-name { font-size: .75rem; font-weight: 600; color: var(--grey-900); line-height: 1; }
.dc-status { font-size: .62rem; color: var(--grey-400); }
.dc-icon { margin-left: auto; color: var(--teal); font-size: .8rem; animation: iconPulse 1.5s ease-in-out infinite; }
@keyframes iconPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; }
.dc-dot--green { background: #22C55E; }
.dc-dot--grey  { background: var(--grey-300); }

/* ── Telematics Panel (T3) ── */
.telematic-panel {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
}
.tp-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: .73rem;
    color: rgba(255,255,255,.7);
    font-weight: 500;
}
.tp-live {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .6rem;
    font-weight: 800;
    color: #22C55E;
    letter-spacing: 1px;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.25);
    padding: .18rem .55rem;
    border-radius: 10px;
}
.tp-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22C55E;
    animation: orbitPulse .9s ease-out infinite;
    display: inline-block;
}
.tp-map { padding: .5rem; }
.tp-map svg { width: 100%; border-radius: 8px; background: #EEF7F8; display: block; }
.tp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.08);
}
.tp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .65rem .5rem;
    border-right: 1px solid rgba(255,255,255,.08);
    gap: .2rem;
}
.tp-stat:last-child { border-right: none; }
.tp-stat i { font-size: .8rem; color: var(--teal-400); }
.tp-stat span { font-size: .85rem; font-weight: 700; color: #fff; }
.tp-stat small { font-size: .58rem; color: rgba(255,255,255,.4); }
.tp-otp-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: rgba(34,197,94,.06);
    border-top: 1px solid rgba(34,197,94,.1);
    font-size: .65rem;
    color: rgba(255,255,255,.5);
}


/* ─────────────────────────────────────────
   FLOW DIAGRAM
───────────────────────────────────────── */
.flow-diagram {
    max-width: 840px;
    margin: 0 auto 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.flow-row {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    width: 100%;
}

.flow-node {
    flex: 1;
    max-width: 220px;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    padding: 1.1rem;
    text-align: center;
    transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.flow-node:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(51,90,95,.2); }
.fn-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: var(--teal-50);
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 0 auto .65rem;
}
.fn-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: .25rem;
}
.fn-sub { font-size: .7rem; color: var(--grey-400); line-height: 1.5; }

.flow-hub {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal) 100%);
    border-radius: var(--r-xl);
    padding: 1.4rem 2rem;
}
.fh-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
    gap: .3rem;
}
.fh-inner i { font-size: 1.6rem; opacity: .85; }
.fh-inner strong { font-size: 1rem; font-weight: 700; }
.fh-inner span { font-size: .75rem; opacity: .7; }

.flow-node--portal .fn-icon { background: rgba(51,90,95,.08); color: var(--teal-700); }
.flow-node--action .fn-icon { width: 36px; height: 36px; font-size: .9rem; }
.flow-node--output {
    max-width: 480px;
    background: linear-gradient(135deg, #ECFDF5, #F0FFF4);
    border-color: rgba(34,197,94,.2);
    text-align: center;
}

.flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .65rem 0;
    color: var(--grey-300);
}
.fa-line { width: 1px; height: 28px; background: var(--grey-200); }
.fa-head { font-size: .9rem; color: var(--grey-400); }
.fa-label { font-size: .62rem; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--teal); }

/* Platform module pillars */
.platform-modules {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
}
.pm-item {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    padding: 1.1rem .9rem;
    text-align: center;
    transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.pm-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: rgba(51,90,95,.2); }
.pm-icon { font-size: 1.3rem; color: var(--teal); margin-bottom: .5rem; }
.pm-name { font-size: .78rem; font-weight: 700; color: var(--grey-900); margin-bottom: .3rem; }
.pm-desc { font-size: .68rem; color: var(--grey-400); line-height: 1.55; }


/* ─────────────────────────────────────────
   ARCHITECTURE STACK — Layered diagram
───────────────────────────────────────── */
.arch-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 900px;
    margin: 0 auto 2rem;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.arch-layer {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.1rem 1.8rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: filter var(--ease);
    position: relative;
}
.arch-layer:last-child { border-bottom: none; }

.arch-layer--1 { background: #EEF7F8; }
.arch-layer--2 { background: #D8EEF0; }
.arch-layer--3 { background: #1E3A40; }
.arch-layer--4 { background: #162D32; }
.arch-layer--5 { background: #0A1A1E; }

.al-label {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 240px;
    flex-shrink: 0;
}
.al-num {
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: 1px;
    border-radius: 6px;
    padding: .25rem .5rem;
    flex-shrink: 0;
}
.arch-layer--1 .al-num { background: var(--teal-50); color: var(--teal); border: 1px solid rgba(51,90,95,.2); }
.arch-layer--2 .al-num { background: rgba(51,90,95,.15); color: var(--teal-700); border: 1px solid rgba(51,90,95,.2); }
.arch-layer--3 .al-num { background: rgba(73,150,156,.15); color: var(--teal-400); border: 1px solid rgba(73,150,156,.2); }
.arch-layer--4 .al-num { background: rgba(73,150,156,.1); color: var(--teal-400); border: 1px solid rgba(73,150,156,.15); }
.arch-layer--5 .al-num { background: rgba(73,150,156,.08); color: var(--teal-400); border: 1px solid rgba(73,150,156,.12); }

.al-name {
    font-size: .83rem;
    font-weight: 700;
    margin-bottom: .1rem;
}
.arch-layer--1 .al-name, .arch-layer--2 .al-name { color: var(--grey-900); }
.arch-layer--3 .al-name, .arch-layer--4 .al-name, .arch-layer--5 .al-name { color: rgba(255,255,255,.9); }

.al-desc {
    font-size: .68rem;
    line-height: 1.5;
}
.arch-layer--1 .al-desc, .arch-layer--2 .al-desc { color: var(--grey-500); }
.arch-layer--3 .al-desc, .arch-layer--4 .al-desc, .arch-layer--5 .al-desc { color: rgba(255,255,255,.4); }

.al-nodes {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    flex: 1;
}
.al-node {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .75rem;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--ease);
}
.arch-layer--1 .al-node { background: rgba(51,90,95,.07); color: var(--teal-700); border: 1px solid rgba(51,90,95,.1); }
.arch-layer--2 .al-node { background: rgba(51,90,95,.1); color: var(--teal-700); border: 1px solid rgba(51,90,95,.12); }
.arch-layer--3 .al-node { background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.08); }
.arch-layer--4 .al-node { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.06); }
.arch-layer--5 .al-node { background: rgba(255,255,255,.04); color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.05); }
.al-node i { font-size: .85rem; }
.arch-layer--1 .al-node i { color: var(--teal); }
.arch-layer--2 .al-node i { color: var(--teal); }
.arch-layer--3 .al-node i, .arch-layer--4 .al-node i, .arch-layer--5 .al-node i { color: var(--teal-400); }

.arch-callout {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--teal-50);
    border: 1px solid rgba(51,90,95,.15);
    border-radius: var(--r-lg);
    padding: 1rem 1.3rem;
}
.arch-callout i { color: var(--teal); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.arch-callout p { font-size: .82rem; color: var(--grey-600); margin: 0; line-height: 1.65; }
.arch-callout strong { color: var(--teal-700); }


/* ─────────────────────────────────────────
   ROADMAP TIMELINE
───────────────────────────────────────── */
.roadmap-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    align-items: start;
}
.rt-connector {
    position: absolute;
    top: 24px;
    left: calc(12.5%);
    right: calc(12.5%);
    height: 2px;
    background: linear-gradient(to right, #22C55E 50%, #F59E0B 70%, #CBD5E1 100%);
    z-index: 0;
}

.rt-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 1;
    padding: 0 .5rem;
}
.rt-phase__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.2rem;
}
.rt-marker-dot {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--grey-200);
}
.rt-marker-dot--live    { background: #22C55E; color: #fff; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.rt-marker-dot--progress { background: #F59E0B; color: #fff; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
.rt-marker-dot--planned  { background: #CBD5E1; color: #fff; }

.rt-phase__label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--grey-400);
}
.rt-phase__card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    padding: 1.2rem;
    width: 100%;
    transition: box-shadow var(--ease), transform var(--ease);
}
.rt-phase__card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.rt-phase__status {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .65rem;
}
.rt-phase__status--live    { color: #166534; }
.rt-phase__status--progress { color: #92400E; }
.rt-phase__status--planned  { color: var(--grey-400); }
.status-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22C55E;
    display: inline-block;
    animation: orbitPulse 1.2s ease-out infinite;
}
.status-pulse--amber { background: #F59E0B; }

.rt-phase__card h4 { font-size: .9rem; font-weight: 700; color: var(--grey-900); margin-bottom: .5rem; }
.rt-phase__card p  { font-size: .75rem; color: var(--grey-500); line-height: 1.65; margin-bottom: .75rem; }

.rt-features {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .85rem;
}
.rt-features span {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: var(--grey-600);
}
.rt-features span i { font-size: .75rem; }
.rt-phase--live .rt-features i { color: #22C55E; }
.rt-phase--progress .rt-features i { color: #F59E0B; }
.rt-phase--planned .rt-features i { color: var(--grey-400); }

.rt-progress { height: 4px; background: var(--grey-100); border-radius: 2px; overflow: hidden; margin-bottom: .3rem; }
.rt-progress__bar { height: 100%; border-radius: 2px; }
.rt-progress__label { font-size: .62rem; color: var(--grey-400); text-align: right; font-weight: 600; }


/* ─────────────────────────────────────────
   SECURITY SECTION
───────────────────────────────────────── */
.security-section {
    background: linear-gradient(135deg, #0A1628 0%, #1E3A40 50%, #0A1628 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}
.security-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(73,150,156,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73,150,156,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.security-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Shield Graphic */
.shield-graphic {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
}
.shield-outer {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 1px solid rgba(73,150,156,.2);
    background: radial-gradient(circle, rgba(73,150,156,.08) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.shield-middle {
    width: 110px; height: 110px;
    border-radius: 50%;
    border: 1px solid rgba(73,150,156,.25);
    background: rgba(73,150,156,.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.shield-core {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), #22C55E);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    text-align: center;
    gap: .15rem;
    box-shadow: 0 0 30px rgba(34,197,94,.3);
}
.shield-core i { font-size: 1.3rem; }
.shield-orbit {
    position: absolute;
    inset: 0;
}
.so-item {
    position: absolute;
    top: 50%; left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    transform:
        translate(-50%, -50%)
        rotate(var(--sa))
        translateX(130px)
        rotate(calc(-1 * var(--sa)));
}
.so-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}
.so-item span { font-size: .55rem; color: rgba(255,255,255,.45); font-weight: 600; white-space: nowrap; }

.security-metrics { display: flex; flex-direction: column; gap: 1.2rem; }
.sm-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-lg);
    transition: background var(--ease), border-color var(--ease);
}
.sm-item:hover { background: rgba(255,255,255,.07); border-color: rgba(73,150,156,.2); }
.sm-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(73,150,156,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-400);
    font-size: .95rem;
    flex-shrink: 0;
}
.sm-val { font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: .2rem; }
.sm-desc { font-size: .78rem; color: rgba(255,255,255,.45); line-height: 1.6; }


/* ─────────────────────────────────────────
   CTA BAND
───────────────────────────────────────── */
.tech-cta {
    background: linear-gradient(125deg, #0A1628 0%, #1E3A40 60%, #275059 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.tech-cta::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: rgba(73,150,156,.07);
    pointer-events: none;
}
.tech-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.btn-orange-solid {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--teal); color: var(--white);
    font-size: .88rem; font-weight: 700;
    padding: .75rem 1.6rem;
    border-radius: var(--r-md);
    border: 2px solid var(--teal);
    transition: all var(--ease); text-decoration: none; white-space: nowrap;
}
.btn-orange-solid:hover { background: var(--teal-700); border-color: var(--teal-700); color: var(--white); }
.btn-white-outline {
    display: inline-flex; align-items: center; gap: .45rem;
    background: transparent; color: rgba(255,255,255,.85);
    font-size: .88rem; font-weight: 700;
    padding: .75rem 1.6rem;
    border-radius: var(--r-md);
    border: 2px solid rgba(255,255,255,.2);
    transition: all var(--ease); text-decoration: none; white-space: nowrap;
}
.btn-white-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }


/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1023px) {
    .tech-hero__inner { grid-template-columns: 1fr; }
    .orbit-diagram { width: 280px; height: 280px; }
    .orbit-ring--1 { width: 180px; height: 180px; }
    .orbit-ring--2 { width: 265px; height: 265px; }
    .orbit-node { transform: translate(-50%,-50%) rotate(var(--a)) translateX(90px) rotate(calc(-1 * var(--a))); }
    .orbit-node--sm { transform: translate(-50%,-50%) rotate(var(--a)) translateX(132px) rotate(calc(-1 * var(--a))); }

    .pillar-block__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .pillar-block--flip .pillar-block__visual { order: 0; }
    .pillar-block--flip .pillar-block__text { order: 0; }

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

    .arch-layer { flex-wrap: wrap; gap: 1rem; }
    .al-label { min-width: auto; }
    .al-nodes { gap: .4rem; }

    .roadmap-timeline { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .rt-connector { display: none; }

    .security-inner { grid-template-columns: 1fr; }
    .shield-graphic { margin-bottom: 2rem; }

    .tech-cta__inner { flex-direction: column; align-items: flex-start; }
}
/* ─────────────────────────────────────────
   ARCH LAYER — AI variant
───────────────────────────────────────── */
.arch-layer--0  { background: #F1F5F9; }
.arch-layer--ai { background: #13142B; border-bottom: 1px solid rgba(129,140,248,.1); }

/* ─────────────────────────────────────────
   AI SECTION
───────────────────────────────────────── */
.ai-section {
    background: linear-gradient(160deg, #0A1628 0%, #151540 40%, #1A1A3B 100%);
    padding: 6rem 0 5rem;
    position: relative;
    overflow: hidden;
}
.ai-section__bg-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(73,150,156,.07) 0%, transparent 60%);
    pointer-events: none;
}

.ai-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.ai-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-xl);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.ai-card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); transform: translateY(-3px); }

.ai-card__icon-wrap {
    width: 44px; height: 44px;
    border-radius: 11px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.ai-card h4 { font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.3; }
.ai-card p  { font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.7; }

.ai-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.ai-card__tags span {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .5px;
    padding: .18rem .6rem;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.5);
}

/* AI Mini Visuals */
.ai-mini-visual {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: .85rem;
    margin-top: auto;
}

/* Booking intelligence */
.amv-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.amv-label { font-size: .62rem; color: rgba(255,255,255,.35); width: 38px; flex-shrink: 0; }
.amv-input {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: .3rem .55rem;
    font-size: .72rem;
    color: rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    gap: 2px;
}
.amv-input--active { border-color: rgba(99,102,241,.4); background: rgba(99,102,241,.06); }
.amv-cursor {
    width: 1px; height: 12px;
    background: #818CF8;
    display: inline-block;
    animation: blink .8s steps(1) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.amv-suggest { display: flex; flex-direction: column; gap: .25rem; }
.amv-sug-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .68rem;
    color: rgba(255,255,255,.45);
    padding: .25rem .4rem;
    border-radius: 5px;
    background: rgba(255,255,255,.02);
}
.amv-sug-item--highlight {
    background: rgba(99,102,241,.08);
    color: rgba(129,140,248,.9);
    border: 1px solid rgba(99,102,241,.15);
}
.amv-sug-item i { font-size: .7rem; color: #818CF8; }

/* Alert */
.amv-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .5rem .6rem;
    border-radius: 7px;
    margin-bottom: .3rem;
    font-size: .7rem;
}
.amv-alert:last-child { margin-bottom: 0; }
.amv-alert--warn { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.18); }
.amv-alert--info { background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.15); }
.amv-alert--warn > i { color: #FCD34D; font-size: .9rem; margin-top: .1rem; }
.amv-alert--info > i { color: #60A5FA; font-size: .9rem; margin-top: .1rem; }
.amv-alert > div strong { display: block; color: rgba(255,255,255,.75); font-size: .7rem; margin-bottom: .12rem; }
.amv-alert > div span { color: rgba(255,255,255,.4); font-size: .65rem; line-height: 1.5; }

/* Pricing chart */
.amv-pricing-grid {
    display: flex;
    gap: .35rem;
    align-items: flex-end;
    height: 80px;
    padding: 0 .2rem;
}
.apg-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    height: 100%;
}
.apg-slot span { font-size: .52rem; color: rgba(255,255,255,.3); }
.apg-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    transition: height var(--ease);
    min-height: 4px;
}
.apg-val { font-size: .52rem; color: rgba(255,255,255,.35); }

/* Chat */
.amv-chat { display: flex; flex-direction: column; gap: .35rem; }
.amv-msg {
    max-width: 90%;
    font-size: .68rem;
    padding: .38rem .65rem;
    border-radius: 10px;
    line-height: 1.55;
}
.amv-msg--user {
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.2);
    color: rgba(255,255,255,.7);
    align-self: flex-end;
}
.amv-msg--ai {
    background: rgba(73,150,156,.1);
    border: 1px solid rgba(73,150,156,.18);
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: flex-start;
    gap: .35rem;
}
.amv-msg--ai i { color: var(--teal-400); flex-shrink: 0; font-size: .8rem; margin-top: .1rem; }
.amv-msg--ai a { color: var(--teal-400); font-weight: 600; text-decoration: none; }
.amv-msg--confirm {
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.18);
}
.amv-msg--confirm i { color: #FCD34D; }
.amv-msg--confirm span { color: #FCD34D; font-weight: 600; }

/* AI Principle bar */
.ai-principle {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-lg);
    padding: 1.2rem 2rem;
}
.ai-principle__items {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.ap-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem 1.5rem;
    font-size: .8rem;
    color: rgba(255,255,255,.55);
    line-height: 1.55;
}
.ap-item i { color: var(--teal-400); flex-shrink: 0; margin-top: .1rem; }
.ap-item strong { color: rgba(255,255,255,.85); }
.ap-divider { width: 1px; height: 40px; background: rgba(255,255,255,.08); flex-shrink: 0; }


/* ─────────────────────────────────────────
   API + ECOSYSTEM SECTION
───────────────────────────────────────── */
.api-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 2.5rem;
}

.api-capabilities { display: flex; flex-direction: column; gap: 1.1rem; }

.api-cap {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.api-cap:hover { box-shadow: var(--shadow-sm); border-color: rgba(51,90,95,.2); transform: translateX(4px); }

.api-cap__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--teal-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--teal);
    flex-shrink: 0;
}
.api-cap h5 { font-size: .87rem; font-weight: 700; color: var(--grey-900); margin-bottom: .3rem; }
.api-cap p  { font-size: .78rem; color: var(--grey-400); line-height: 1.65; margin: 0; }

/* Ecosystem diagram */
.ecosystem-diagram {
    position: relative;
    width: 340px;
    height: 340px;
    margin: 0 auto;
}
.eco-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}
.eco-hub {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-700), var(--teal));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    gap: .15rem;
    box-shadow: 0 0 0 3px rgba(51,90,95,.15), 0 0 30px rgba(51,90,95,.3);
    text-align: center;
}
.eco-hub small { font-size: .52rem; opacity: .65; font-weight: 400; }

.eco-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 260px; height: 260px;
    border-radius: 50%;
    border: 1px dashed rgba(51,90,95,.2);
}

.eco-node {
    position: absolute;
    top: 50%; left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    transform:
        translate(-50%, -50%)
        rotate(var(--en-a))
        translateX(130px)
        rotate(calc(-1 * var(--en-a)));
    z-index: 2;
}
.eco-node__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--grey-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: var(--teal);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: box-shadow var(--ease), border-color var(--ease);
}
.eco-node:hover .eco-node__icon { border-color: var(--teal); box-shadow: 0 4px 14px rgba(51,90,95,.2); }
.eco-node__label {
    font-size: .56rem;
    font-weight: 600;
    color: var(--grey-500);
    text-align: center;
    white-space: nowrap;
    max-width: 70px;
    line-height: 1.3;
}

.eco-badge {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    background: var(--teal-50);
    border: 1px solid rgba(51,90,95,.18);
    border-radius: var(--r-lg);
    padding: .65rem .95rem;
    min-width: 260px;
    font-size: .72rem;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.eco-badge i { color: var(--teal); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.eco-badge strong { display: block; color: var(--teal-700); font-size: .78rem; margin-bottom: .1rem; }
.eco-badge span { color: var(--grey-400); font-size: .68rem; line-height: 1.5; display: block; }

/* Omnichannel row */
.omnichannel-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    padding: 1rem 1.5rem;
    margin-top: 3.5rem;
}
.oc-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--grey-700);
    white-space: nowrap;
    flex-shrink: 0;
}
.oc-label i { color: var(--teal); }
.oc-channels {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 1;
}
.oc-chip {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 500;
    color: var(--grey-600);
    padding: .25rem .7rem;
    border-radius: 20px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    transition: border-color var(--ease), color var(--ease);
}
.oc-chip:hover { border-color: var(--teal); color: var(--teal); }
.oc-chip i { font-size: .75rem; color: var(--teal); }


/* ─────────────────────────────────────────
   RESPONSIVE — additions
───────────────────────────────────────── */
@media (max-width: 1023px) {
    .ai-cards { grid-template-columns: 1fr 1fr; }
    .ai-principle__items { flex-direction: column; align-items: flex-start; }
    .ap-divider { width: 100%; height: 1px; }
    .api-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .ecosystem-diagram { margin-bottom: 3rem; }
}

@media (max-width: 767px) {
    .tech-hero { padding-bottom: 4rem; }
    .th-stat__val { font-size: 1.15rem; }
    .pillar-block { padding: 3.5rem 0; }
    .platform-modules { grid-template-columns: repeat(2, 1fr); }
    .flow-row { flex-direction: column; align-items: center; }
    .flow-node, .flow-hub { max-width: 100%; }
    .roadmap-timeline { grid-template-columns: 1fr; }
    .arch-layer { flex-direction: column; }
    .al-label { flex-direction: column; align-items: flex-start; }
    .security-inner { gap: 3rem; }
    .shield-graphic { width: 220px; height: 220px; }
    .ai-cards { grid-template-columns: 1fr; }
    .ai-section { padding: 4rem 0; }
    .omnichannel-row { flex-direction: column; align-items: flex-start; }
    .eco-badge { min-width: 200px; font-size: .65rem; }
}