/*
Theme Name: Mobifin
Theme URI: https://mobifin.com
Author: Mobifin Team
Author URI: https://mobifin.com
Description: Custom SEO Friendly Professional WordPress Theme for Mobifin
Version: 1.0.0
Text Domain: mobifin
*/

ul,
li {
    list-style: none;
}

 

.blur-bg {
    -webkit-backdrop-filter: blur(8px) brightness(110%) saturate(120%);
    backdrop-filter: blur(8px) brightness(110%) saturate(120%);
    background: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.light-og-bg {
    background: linear-gradient(150deg, var(--orange-xpale) 0%, white 100%);
    border: 1.5px solid rgba(221, 62, 0, 0.2)
}


.serv-list li {
    display: block;
}


*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --blue: #2680EB;
    --blue-mid: #4E9AF0;
    --blue-light: #A8CCF7;
    --blue-pale: #DCEFFF;
    --blue-xpale: #F0F7FF;
    --orange: #DD3E00;
    --orange-mid: #E8622E;
    --orange-light: #F4A882;
    --orange-pale: #FFDACF;
    --orange-xpale: #FFF4EF;
    --purple: #9816DA;
    --purple-pale: #EDD4FF;
    --ink: #1a1a2e;
    --ink-mid: #3E3E3D;
    --ink-soft: #6B6B6A;
    --ink-muted: #ADADAC;
    --bg: rgba(255, 255, 255, 0.80);
    --bg-alt: rgba(248, 250, 253, 0.80);
    --bg-alt2: #EEF4FD;
    --border: #E8EAF0;
    --border2: #D0D4E0;
    --shadow-sm: 0 2px 8px rgba(38, 128, 235, 0.08);
    --shadow-md: 0 8px 32px rgba(38, 128, 235, 0.12);
    --shadow-lg: 0 20px 60px rgba(38, 128, 235, 0.16);
	--navy:#0d1117;
}

html {
    scroll-behavior: smooth
}

html {
    background: #f0f4fb
}

body {
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

::-webkit-scrollbar {
    width: 4px
}

::-webkit-scrollbar-track {
    background: #f0f4ff
}

::-webkit-scrollbar-thumb {
    background: var(--blue);
    border-radius: 2px
}
/*-----------*/
span.orange-text {
    color: var(--orange);
}
/* ── REVEAL ── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s ease, transform 0.7s ease
}

.reveal.visible {
    opacity: 1;
    transform: none
}

.reveal-left {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.7s ease, transform 0.7s ease
}

.reveal-left.visible {
    opacity: 1;
    transform: none
}

.reveal-right {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.7s ease, transform 0.7s ease
}

.reveal-right.visible {
    opacity: 1;
    transform: none
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s ease, transform 0.7s ease
}

.reveal-scale.visible {
    opacity: 1;
    transform: none
}

.d1 {
    transition-delay: 0.1s
}

.d2 {
    transition-delay: 0.2s
}

.d3 {
    transition-delay: 0.3s
}

.d4 {
    transition-delay: 0.4s
}

.d5 {
    transition-delay: 0.5s
}

.d6 {
    transition-delay: 0.6s
}

/* ── SHARED ── */
.section-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px
}

.eyebrow::before {
    content: '';
    width: 28px;
    height: 1.5px;
    background: var(--blue);
    flex-shrink: 0
}

.eyebrow.orange {
    color: var(--orange)
}

.eyebrow.orange::before {
    background: var(--orange)
}

.eyebrow.centered {
    justify-content: center
}

.section-h h2 {
    font-family: var(--tp-ff-heading);
    font-size: clamp(30px, 3.5vw, 50px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 18px
}

.section-sub {
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.75;
    max-width: 540px
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    background: var(--blue);
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s
}

.btn-primary:hover {
    background: #1a6dd4;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(38, 128, 235, 0.3)
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    color: var(--ink-mid);
    border: 1.5px solid var(--border2);
    padding: 13px 28px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s
}

.btn-ghost:hover {
    border-color: var(--blue);
    color: var(--blue)
}

.btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    background: var(--orange);
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s
}

.btn-orange:hover {
    background: #c23600;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(221, 62, 0, 0.3)
}

.btn-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s
}

.btn-link:hover {
    gap: 10px
}

/* ════════════════════════════════════
   NAV
════════════════════════════════════ */
header {
    z-index: 999;
}

.megamenu-bg {
    padding: 40px 26px 48px;
    background: linear-gradient(150deg, #ffffff 0%, #f0f7ff 40%, #fff4ef 100%)
}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.hero {
    height: auto;
/*     display: grid;
    grid-template-columns: 1fr 1fr; */
    align-items: center;
    gap: 48px;
    padding: 100px 96px 48px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, #ffffff 0%, #f0f7ff 40%, #fff4ef 100%)
}

.hero-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none
}

.hero-bg-blob.b1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(38, 128, 235, 0.07), transparent);
    top: -100px;
    right: -100px
}

.hero-bg-blob.b2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(221, 62, 0, 0.05), transparent);
    bottom: 0;
    left: -100px
}

.hero-left {
    position: relative;
    z-index: 2
}

.hero-eyebrow,
.hero-eyebrow h4 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 12px;
    opacity: 0;
    animation: fadeUp 0.8s 0.2s forwards
}

.hero-eyebrow::before {
    content: '';
    width: 28px;
    height: 1.5px;
    background: var(--blue);
    flex-shrink: 0
}

.hero-h1 h1 {
    font-family: var(--tp-ff-heading);
    font-size: clamp(32px, 3.4vw, 58px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin-bottom: 14px
}

.hero-h1 .blue {
    color: var(--blue)
}

.hero-h1 .orange {
    color: var(--orange)
}

.hero-sub {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 0.8s 0.5s forwards
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    opacity: 0;
    animation: fadeUp 0.8s 0.65s forwards
}

.hero-trust {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    opacity: 0;
    animation: fadeUp 0.8s 0.8s forwards
}

.hero-trust-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px
}

.hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap
}

.hero-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm)
}

/* Typewriter cursor */
.tw-cursor {
    display: inline-block;
    width: 3px;
    height: 0.85em;
    background: var(--orange);
    margin-left: 2px;
    vertical-align: middle;
    border-radius: 1px;
    animation: twBlink 0.75s step-end infinite
}

@keyframes twBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.tw-rotating {
    color: var(--orange)
}

/* HERO RIGHT — phone mockup scene */
.hero-right {
    position: relative;
    height: auto;
    opacity: 0;
    animation: fadeIn 1s 0.5s forwards;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible
}

.phone-scene {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1400px;
    display: flex;
    align-items: center;
    justify-content: center
}

.phone-tilt-wrap {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.08s ease-out;
    width: clamp(210px, 16vw, 248px);
    height: clamp(430px, 65vh, 510px)
}

/* Main phone shell */
.phone-shell {
    width: clamp(210px, 16vw, 248px);
    height: clamp(430px, 65vh, 510px);
    background: linear-gradient(160deg, #1a1a2e, #0f1420);
    border-radius: 40px;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    cursor: default
}

.phone-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
    border-radius: 40px;
    pointer-events: none;
    z-index: 20
}
/*Innner Hero */
.seg-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: var(--bg-alt2);
  border: 1px solid rgba(38,128,235,0.2);
  padding: 5px 14px; border-radius: 20px;
  margin-bottom: 24px;
  opacity: 0; animation: fadeUp 0.7s 0.05s forwards;
}
.seg-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
.hero-h1 .accent,h2 .accent, h3 .accent, h4 .accent, .accent {
    color: #2680EB;
}
/* notch */
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 26px;
    background: #0f1420;
    border-radius: 0 0 18px 18px;
    z-index: 21;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.notch-cam {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1a1a2e;
    border: 1.5px solid rgba(255, 255, 255, 0.1)
}

.notch-speaker {
    width: 30px;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px
}

/* screen */
.phone-screen {
    position: absolute;
    inset: 5px;
    border-radius: 35px;
    overflow: hidden;
    background: #0f1f40
}

/* status bar */
.phone-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 4px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    background: #0f1f40;
    z-index: 10;
    position: relative
}

.status-time {
    font-weight: 700;
    color: white
}

.status-icons {
    display: flex;
    gap: 4px;
    align-items: center
}

.sig-bar {
    height: 8px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.7)
}

/* App screens that cycle */
.app-screens {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden
}

.app-screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    padding: 0
}

.app-screen.active {
    opacity: 1
}

/* Screen 1 — Wallet Dashboard */
.screen-wallet {
    background: linear-gradient(170deg, #0f1f40 0%, #1a3468 60%, #0f2850 100%)
}

.sw-header {
    padding: 14px 18px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.sw-greeting {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Poppins', sans-serif
}

.sw-name {
    font-size: 13px;
    font-weight: 700;
    color: white;
    font-family: 'Poppins', sans-serif
}

.sw-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #5ba3f5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white
}

.sw-balance-card {
    margin: 4px 14px 12px;
    background: linear-gradient(135deg, #2680EB, #4E9AF0, #7ab8f7);
    border-radius: 20px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden
}

.sw-balance-card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07)
}

.sw-balance-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05)
}

.sw-bal-lbl {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px
}

.sw-bal-amt {
    font-size: 26px;
    font-weight: 800;
    color: white;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
    margin-bottom: 2px
}

.sw-bal-sub {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'JetBrains Mono', monospace
}

.sw-bal-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 12px
}

.sw-chip-mini {
    display: flex;
    gap: 1px;
    flex-wrap: wrap;
    width: 24px
}

.sw-chip-cell {
    width: 7px;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px
}

.sw-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 14px 12px
}

.sq-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.sq-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px
}

.sq-lbl {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Poppins', sans-serif;
    text-align: center
}

.sw-txns {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 18px 18px 0 0;
    padding: 12px 14px;
    flex: 1
}

.sw-txns-h {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Poppins', sans-serif;
    margin-bottom: 8px
}

.sw-txn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.sw-txn:last-child {
    border-bottom: none
}

.sw-txn-ic {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0
}

.sw-txn-nm {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', sans-serif
}

.sw-txn-dt {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'JetBrains Mono', monospace
}

.sw-txn-amt {
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    margin-left: auto
}

.sw-txn-amt.cr {
    color: #4ade80
}

.sw-txn-amt.dr {
    color: #f87171
}

/* Screen 2 — Agency Banking */
.screen-agency {
    background: linear-gradient(170deg, #1a0a00 0%, #3d1500 60%, #200a00 100%)
}

.sa-header {
    padding: 14px 18px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.sa-title {
    font-size: 13px;
    font-weight: 800;
    color: white;
    font-family: 'Poppins', sans-serif
}

.sa-badge {
    background: rgba(221, 62, 0, 0.3);
    border: 1px solid rgba(221, 62, 0, 0.4);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 8px;
    color: #f97316;
    font-family: 'JetBrains Mono', monospace
}

.sa-map {
    margin: 0 14px 10px;
    height: 110px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a3a1a, #0f2a0f);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08)
}

.sa-map-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(221, 62, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(221, 62, 0, 0.08) 1px, transparent 1px);
    background-size: 16px 16px
}

.sa-map-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange)
}

.sa-map-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(221, 62, 0, 0.4);
    animation: ripple 2s ease-out infinite
}

.sa-map-dot.d1 {
    top: 30%;
    left: 25%;
    animation-delay: 0s
}

.sa-map-dot.d2 {
    top: 50%;
    left: 60%;
    animation-delay: 0.7s
}

.sa-map-dot.d3 {
    top: 70%;
    left: 40%;
    animation-delay: 1.4s
}

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

    100% {
        transform: scale(3);
        opacity: 0
    }
}

.sa-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 14px 10px
}

.sa-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 12px
}

.sa-stat-n {
    font-size: 18px;
    font-weight: 800;
    color: white;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em
}

.sa-stat-l {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Poppins', sans-serif
}

.sa-agents {
    padding: 0 14px
}

.sa-agents-h {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Poppins', sans-serif;
    margin-bottom: 8px
}

.sa-agent {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.sa-agent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0
}

.sa-agent-dot.on {
    background: #4ade80
}

.sa-agent-dot.off {
    background: #6b7280
}

.sa-agent-nm {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Poppins', sans-serif;
    flex: 1
}

.sa-agent-tx {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'JetBrains Mono', monospace
}

/* Screen 3 — SuperApp */
.screen-super {
    background: linear-gradient(170deg, #0f0a1a, #1a0f2e, #120820)
}

.ss-header {
    padding: 14px 18px 8px;
    text-align: center
}

.ss-logo {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.02em
}

.ss-logo span {
    color: #c084fc
}

.ss-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 6px 14px 10px
}

.ss-svc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.ss-svc-ic {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1)
}

.ss-svc-lbl {
    font-size: 7.5px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Poppins', sans-serif;
    text-align: center
}

.ss-offer {
    margin: 0 14px 10px;
    background: linear-gradient(135deg, rgba(152, 22, 218, 0.25), rgba(38, 128, 235, 0.2));
    border: 1px solid rgba(152, 22, 218, 0.25);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px
}

.ss-offer-emoji {
    font-size: 28px
}

.ss-offer-title {
    font-size: 11px;
    font-weight: 700;
    color: white;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 3px
}

.ss-offer-sub {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Poppins', sans-serif
}

.ss-txn-hist {
    padding: 0 14px
}

.ss-th-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.ss-th-ic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0
}

.ss-th-nm {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Poppins', sans-serif;
    flex: 1
}

.ss-th-amt {
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace
}

/* Phone side buttons */
.phone-btn-r {
    position: absolute;
    right: -3px;
    top: 100px;
    width: 4px;
    height: 60px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 0 2px 2px 0
}

.phone-btn-l1 {
    position: absolute;
    left: -3px;
    top: 90px;
    width: 4px;
    height: 40px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px 0 0 2px
}

.phone-btn-l2 {
    position: absolute;
    left: -3px;
    top: 140px;
    width: 4px;
    height: 40px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px 0 0 2px
}

/* Second phone (background) */
.phone-bg {
    position: absolute;
    width: clamp(170px, 13vw, 200px);
    height: clamp(360px, 55vh, 410px);
    background: linear-gradient(160deg, #1a1a2e, #0f1420);
    border-radius: 34px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transform: rotate(-12deg) translateX(88px) translateY(44px);
    opacity: 0.6;
    z-index: -1
}

.phone-bg-screen {
    position: absolute;
    inset: 5px;
    border-radius: 29px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a3468, #0d1f44)
}

.phone-bg-blur {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px)
}

/* Floating UI pills */
.float-badge {
    position: absolute;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 7px 13px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap
}

.fb1 {
    top: 16px;
    right: -14px;
    animation: fb 5s ease-in-out infinite
}

.fb2 {
    top: 46%;
    right: -50px;
    animation: fb 5s ease-in-out 1.5s infinite
}

.fb3 {
    bottom: 60px;
    right: -20px;
    animation: fb 5s ease-in-out 0.8s infinite
}

.fb-icon {
    font-size: 17px
}

.fb-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink)
}

.fb-sub {
    font-size: 9px;
    color: var(--ink-muted)
}

/* Screen indicator dots */
.screen-dots {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px
}

.sdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(38, 128, 235, 0.25);
    cursor: pointer;
    transition: all 0.3s
}

.sdot.active {
    background: var(--blue);
    width: 16px;
    border-radius: 3px
}

/* 3D interconnect canvas on hero */
#heroNet {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5
}

@keyframes fb {

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

    50% {
        transform: translateY(-7px)
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes pulse {

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

    50% {
        opacity: 0.5;
        transform: scale(0.8)
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* ════════════════════════════════════
   LOGO CAROUSEL
════════════════════════════════════ */
.logo-strip {
    background: white;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 32px 0;
    overflow: hidden;
    position: relative;
    z-index: 10
}

.logo-strip::before,
.logo-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none
}

.logo-strip::before {
    left: 0;
    background: linear-gradient(90deg, white, transparent)
}

.logo-strip::after {
    right: 0;
    background: linear-gradient(-90deg, white, transparent)
}

.logo-track {
    display: flex;
    gap: 64px;
    align-items: center;
    width: max-content;
    animation: marquee 28s linear infinite
}

.logo-track:hover {
    animation-play-state: paused
}
/*
.logo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.5;
    transition: opacity 0.3s;
    flex-shrink: 0
}

.logo-item:hover {
    opacity: 0.85
}

.logo-item-text {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-mid);
    letter-spacing: 0.03em;
    white-space: nowrap
}

.logo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0.4;
    flex-shrink: 0
}
*/
/* ════════════════════════════════════
   SECTION DIVIDER — 3D NET
════════════════════════════════════ */
.net-divider {
    position: relative;
    height: 120px;
    overflow: hidden;
    z-index: 10
}

.net-divider canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

/* ════════════════════════════════════
   WHO WE ARE
════════════════════════════════════ */
.who {
    padding: 120px 0;
    background: rgba(255, 255, 255, 0.82)
}

.who-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.who-video {
    aspect-ratio: 16/9;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--blue-xpale), #e8f0ff);
    border: 1px solid var(--border);
    cursor: pointer
}

.who-video-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(38, 128, 235, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 128, 235, 0.07) 1px, transparent 1px);
    background-size: 36px 36px
}

.who-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 2
}

.play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(38, 128, 235, 0.35);
    animation: pp 2s ease-out infinite;
    transition: transform 0.2s
}

.play-btn:hover {
    transform: scale(1.1)
}

@keyframes pp {
    0% {
        box-shadow: 0 0 0 0 rgba(38, 128, 235, 0.35)
    }

    70% {
        box-shadow: 0 0 0 18px rgba(38, 128, 235, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(38, 128, 235, 0)
    }
}

.play-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    letter-spacing: 0.1em
}

/* ════════════════════════════════════
   WHAT WE DO — ACCORDION
════════════════════════════════════ */
.what-we-do {
    padding: 120px 0;
    background: rgba(248, 250, 253, 0.78)
}

.wwd-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

.wwd-accordion {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 16px
}

.acc-item {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s
}

.acc-item.open {
    border-color: var(--blue);
    box-shadow: 0 4px 20px rgba(38, 128, 235, 0.1)
}

.acc-head {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    user-select: none
}

.acc-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0
}

.acc-item.open .acc-icon-wrap {
    background: var(--blue);
    border-color: var(--blue)
}

.acc-icon {
    font-size: 22px;
    transition: transform 0.3s;
    color: var(--ink-soft)
}

.acc-item.open .acc-icon {
    transform: rotate(45deg);
    color: white
}

.acc-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink)
}

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s
}

.acc-item.open .acc-body {
    max-height: 200px;
    padding: 0 24px 20px
}

.acc-text {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.75
}

/* RIGHT SIDE — animated platform visual */
.platform-visual {
    position: relative;
    height: 480px
}

.pv-card {
    position: absolute;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s
}

.pv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg)
}

.pv-card.axis {
    top: 0;
    left: 0;
    width: 260px
}

.pv-card.engage {
    top: 80px;
    right: 0;
    width: 240px
}

.pv-card.mobiview {
    bottom: 60px;
    left: 40px;
    width: 250px
}

.pv-card-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 6px
}

.pv-card-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px
}

.pv-card-desc {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.6
}

.pv-bar {
    height: 4px;
    border-radius: 2px;
    margin-top: 12px
}

.pv-bar.blue {
    background: linear-gradient(90deg, var(--blue), var(--blue-mid))
}

.pv-bar.purple {
    background: linear-gradient(90deg, var(--purple), #c060f0)
}

.pv-bar.orange {
    background: linear-gradient(90deg, var(--orange), var(--orange-mid))
}

/* SVG connection lines */
.pv-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0
}

/* ════════════════════════════════════
   WHAT WE OFFER — TABS
════════════════════════════════════ */
.what-offer {
    padding: 120px 0;
    background: rgba(255, 255, 255, 0.82)
}

.wo-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.wo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px
}

.wo-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 40px;
    overflow-x: auto;
    scrollbar-width: none
}

.wo-tabs::-webkit-scrollbar {
    display: none
}

.wo-tab {
    flex: 1;
    min-width: fit-content;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap
}

.wo-tab.active {
    background: white;
    color: var(--blue);
    box-shadow: 0 2px 12px rgba(38, 128, 235, 0.1)
}

.wo-tab:hover:not(.active) {
    color: var(--ink)
}

.wo-pane {
    display: none;
    animation: tabFadeIn 0.35s ease
}

.wo-pane.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.wo-content h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 12px
}

.wo-content .sub {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: 28px
}

.wo-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px
}

.wo-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--ink-soft)
}

.wo-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    margin-top: 6px;
    flex-shrink: 0
}

.wo-image {
    aspect-ratio: 4/3;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--blue-xpale), #e0ecff)
}

.wo-image-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.wo-product-icon {
    font-size: 80px;
    opacity: 0.15
}

.wo-product-card {
    position: absolute !important;
    bottom: 24px;
    left: 14px;
    right: 24px;
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 14px
}

.wo-product-dot {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0
}

.wo-product-dot.blue {
    background: var(--blue-pale)
}

.wo-product-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink)
}

.wo-product-stat {
    font-size: 12px;
    color: var(--ink-muted)
}

/* ════════════════════════════════════
   TWO PATHS
════════════════════════════════════ */
.two-paths {
    padding: 120px 0;
    background: rgba(248, 250, 253, 0.82)
}

.tp-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.tp-header {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 16px
}

.tp-note {
    text-align: center;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.75;
    max-width: 660px;
    margin: 0 auto 20px
}

.fork-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 48px
}

.tp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px
}

.tp-card {
    border-radius: 20px;
    padding: 48px 44px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s
}

.tp-card:hover {
    transform: translateY(-6px)
}

.tp-card.classic {
    background: linear-gradient(150deg, var(--blue-xpale) 0%, white 100%);
    border: 1.5px solid rgba(38, 128, 235, 0.2)
}

.tp-card.classic:hover {
    box-shadow: 0 20px 60px rgba(38, 128, 235, 0.15);
    border-color: var(--blue)
}

.tp-card.tapestry {
    background: linear-gradient(150deg, var(--orange-xpale) 0%, white 100%);
    border: 1.5px solid rgba(221, 62, 0, 0.2)
}

.tp-card.tapestry:hover {
    box-shadow: 0 20px 60px rgba(221, 62, 0, 0.12);
    border-color: var(--orange)
}

.tp-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px
}

.tp-card.classic .tp-accent {
    background: linear-gradient(90deg, var(--blue), var(--blue-mid))
}

.tp-card.tapestry .tp-accent {
    background: linear-gradient(90deg, var(--orange), var(--orange-mid))
}

.tp-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 24px
}

.tp-tag.c {
    background: rgba(38, 128, 235, 0.08);
    color: var(--blue);
    border: 1px solid rgba(38, 128, 235, 0.2)
}

.tp-tag.t {
    background: rgba(221, 62, 0, 0.08);
    color: var(--orange);
    border: 1px solid rgba(221, 62, 0, 0.2)
}

.tp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
	display:inline-block;
}
.tp-dot {
    background: var(--blue)
}
.tp-tag.c .tp-dot {
    background: var(--blue)
}

.tp-tag.t .tp-dot {
    background: var(--orange);
    animation: pulse 2s infinite
}

.tp-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 8px
}

.tp-sub {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 18px
}

.tp-body {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: 28px
}

.tp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 32px
}

.tp-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-soft)
}

.tp-list li::before {
    content: '→';
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    margin-top: 2px;
    flex-shrink: 0
}

.tp-card.classic .tp-list li::before {
    color: var(--blue)
}

.tp-card.tapestry .tp-list li::before {
    color: var(--orange)
}

.tp-ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.tp-footer {
    max-width: 1240px;
    margin: 32px auto 0;
    padding: 0 48px
}

.tp-footer-note {
    text-align: center;
    padding: 20px 40px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.8
}

.tb {
    color: var(--blue);
    font-weight: 600
}

.to {
    color: var(--orange);
    font-weight: 600
}

/* ════════════════════════════════════
   STATS
════════════════════════════════════ */
.stats-bar {
    background: rgba(20, 20, 40, 0.90);
    padding: 60px 0
}

.stats-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.07)
}

.stat-it {
    padding: 16px 32px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center
}

.stat-n {
    font-family: 'Poppins', sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: white;
    margin-bottom: 6px
}

.stat-n em {
    color: var(--blue-mid);
    font-style: normal
}

.stat-l {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4)
}

/* ════════════════════════════════════
   TAPESTRY
════════════════════════════════════ */
.tapestry {
    padding: 120px 0;
    background: rgba(255, 248, 245, 0.82);
    border-top: 1px solid rgba(221, 62, 0, 0.08)
}

.tap-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

.tap-h {
    color: var(--ink)
}

.tap-body {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.8;
    margin-bottom: 28px
}

.tap-use-row {
    margin-bottom: 32px
}

.tap-use-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px
}

.tap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tap-tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--orange);
    background: var(--orange-xpale);
    border: 1px solid rgba(221, 62, 0, 0.15);
    border-radius: 20px;
    padding: 5px 14px;
    transition: all 0.2s;
    cursor: default
}

.tap-tag:hover {
    background: rgba(221, 62, 0, 0.1);
    border-color: rgba(221, 62, 0, 0.3)
}

.tap-how {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm)
}

.tap-steps {
    display: flex;
    flex-direction: column;
    gap: 0
}

.tap-step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--border)
}

.tap-step:last-child {
    border-bottom: none
}

.tap-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--orange-xpale);
    border: 1.5px solid rgba(221, 62, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    flex-shrink: 0
}

.tap-sname {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px
}

.tap-sdesc {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6
}

.tap-caps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px
}

.tap-cap {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: center;
    transition: all 0.2s;
    cursor: default
}

.tap-cap:hover {
    background: var(--orange-xpale);
    border-color: rgba(221, 62, 0, 0.25);
    color: var(--orange)
}

/* ════════════════════════════════════
   PLATFORM
════════════════════════════════════ */
.platform {
    padding: 120px 0;
    background: rgba(248, 250, 253, 0.82)
}

.plat-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.plat-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 72px
}

.plat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px
}

.plat-card {
    border-radius: 20px;
    padding: 40px 36px;
    border: 1.5px solid var(--border);
    background: white;
    transition: all 0.3s;
    position: relative;
    overflow: hidden
}

.plat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg)
}

.plat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px
}

.plat-card.axis::before {
    background: linear-gradient(90deg, var(--blue), var(--blue-mid))
}

.plat-card.engage::before {
    background: linear-gradient(90deg, var(--purple), #c060f0)
}

.plat-card.mobiview::before {
    background: linear-gradient(90deg, var(--orange), var(--orange-mid))
}

.plat-card.axis:hover {
    border-color: rgba(38, 128, 235, 0.35);
    box-shadow: 0 20px 60px rgba(38, 128, 235, 0.14)
}

.plat-card.engage:hover {
    border-color: rgba(152, 22, 218, 0.3);
    box-shadow: 0 20px 60px rgba(152, 22, 218, 0.12)
}

.plat-card.mobiview:hover {
    border-color: rgba(221, 62, 0, 0.3);
    box-shadow: 0 20px 60px rgba(221, 62, 0, 0.1)
}

.plat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px
}

.plat-card.axis .plat-icon {
    background: var(--blue-pale)
}

.plat-card.engage .plat-icon {
    background: var(--purple-pale)
}

.plat-card.mobiview .plat-icon {
    background: var(--orange-pale)
}

.plat-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 6px
}

.plat-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 14px
}

.plat-body {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.75
}

/* ════════════════════════════════════
   WHO WE SERVE
════════════════════════════════════ */
.segments {
    padding: 120px 0;
    background: rgba(255, 255, 255, 0.82)
}

.seg-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.seg-header {
    margin-bottom: 56px
}

.seg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px
}

.seg-card {
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px;
    transition: all 0.3s;
    cursor: default
}

.seg-card:hover {
    background: var(--blue-xpale);
    border-color: rgba(38, 128, 235, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md)
}

.seg-icon {
    font-size: 30px;
    margin-bottom: 14px
}

.seg-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px
}

.seg-body {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.65
}

/* ════════════════════════════════════
   RECOGNITION
════════════════════════════════════ */
.awards {
    padding: 120px 0;
    background: rgba(248, 250, 253, 0.82);
    border-top: 1px solid var(--border)
}

.awards-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.awards-header {
    text-align: center;
    max-width: 580px;
    margin: 0 auto 56px
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px
}

.award-card {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    transition: all 0.3s
}

.award-card:hover {
    border-color: rgba(38, 128, 235, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md)
}

.award-emoji {
    font-size: 32px;
    margin-bottom: 12px
}

.award-yr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--blue);
    letter-spacing: 0.1em;
    margin-bottom: 8px
}

.award-org {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px
}

.award-desc {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.5;
    font-weight: 600
}

/* ════════════════════════════════════
   TESTIMONIALS — CAROUSEL
════════════════════════════════════ */
.testi {
    padding: 120px 0;
    background: rgba(255, 255, 255, 0.78)
}

.testi-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.testi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px
}

.testi-track-wrap {
    overflow: hidden;
    position: relative
}

.testi-track {
    display: flex;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
}

.testi-card {
    min-width: 380px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 36px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s;
    flex-shrink: 0
}

.testi-card:hover {
    box-shadow: var(--shadow-md)
}

.testi-mark {
    font-size: 48px;
    line-height: 1;
    color: var(--blue);
    opacity: 0.2;
    font-family: Georgia, serif;
    margin-bottom: 12px
}

.testi-text {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.8;
    margin-bottom: 24px;
    font-style: italic
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 12px
}

.testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blue-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
    flex-shrink: 0
}

.testi-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink)
}

.testi-role {
    font-size: 12px;
    color: var(--ink-muted)
}

.testi-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 32px;
    justify-content: center
}

.testi-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    color: var(--ink-soft)
}

.testi-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: var(--shadow-sm)
}

.testi-dots {
    display: flex;
    gap: 6px
}

.testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: all 0.2s
}

.testi-dot.active {
    background: var(--blue);
    width: 20px;
    border-radius: 4px
}

/*-----------*/
.hm-tab .e-n-tabs-heading {
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 40px;
    overflow-x: auto;
    scrollbar-width: none
}

/* ════════════════════════════════════
   IN ACTION
════════════════════════════════════ */
.in-action {
    padding: 120px 0;
    background: rgba(248, 250, 253, 0.78);
    border-top: 1px solid var(--border)
}

.ia-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.ia-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px
}

.ia-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4px;
    align-items: stretch
}

.ia-tabs {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.ia-tab {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 22px 24px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    gap: 16px
}

.ia-tab:hover {
    border-color: var(--blue-light);
    box-shadow: var(--shadow-sm)
}

.ia-tab.active {
    border-color: var(--blue);
    background: var(--blue-xpale);
    box-shadow: var(--shadow-sm)
}

.ia-tab-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: background 0.25s
}

.ia-tab.active .ia-tab-icon {
    background: var(--blue-pale)
}

.ia-tab-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink)
}

.ia-tab-sub {
    font-size: 12px;
    color: var(--ink-muted)
}

.ia-panel {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    display: none
}

.ia-panel.active {
    display: flex;
    flex-direction: column;
    animation: tabFadeIn 0.35s ease
}

.ia-panel-visual {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--blue-xpale), #e0ecff);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.ia-panel-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(38, 128, 235, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 128, 235, 0.06) 1px, transparent 1px);
    background-size: 32px 32px
}

.ia-panel-icon {
    font-size: 72px;
    opacity: 0.12;
    z-index: 1
}

.ia-panel-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: white;
    border-radius: 10px;
    padding: 12px 18px;
    box-shadow: var(--shadow-md);
    z-index: 2
}

.ia-panel-badge-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink)
}

.ia-panel-badge-sub {
    font-size: 11px;
    color: var(--ink-muted)
}

.ia-panel-body {
    padding: 28px 28px
}

.ia-panel-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px
}

.ia-panel-body p {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 16px
}

.ia-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    transition: gap 0.2s
}

.ia-panel-cta:hover {
    gap: 10px
}

/* ════════════════════════════════════
   PERSPECTIVES
════════════════════════════════════ */
.perspectives {
    padding: 120px 0;
    background: rgba(255, 255, 255, 0.82)
}

.persp-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.persp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px
}

.persp-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 4px
}

.persp-card {
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    flex-direction: column
}

.persp-card:hover {
    background: var(--blue-xpale);
    border-color: rgba(38, 128, 235, 0.25);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md)
}

.persp-card.feat {
    grid-row: 1/3
}

.persp-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--blue-pale);
    border: 1px solid rgba(38, 128, 235, 0.2);
    border-radius: 20px;
    padding: 4px 10px;
    margin-bottom: 14px
}

.persp-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: auto
}

.persp-card.feat .persp-title {
    font-size: 20px;
    margin-bottom: 16px
}

.persp-meta {
    font-size: 11px;
    color: var(--ink-muted);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 16px
}

/* ════════════════════════════════════
   FAQ
════════════════════════════════════ */
.faq {
    padding: 120px 0;
    background: rgba(248, 250, 253, 0.82);
    border-top: 1px solid var(--border)
}

.faq-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px
}

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
    align-items: start
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.faq-item {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s
}

.faq-item.open {
    border-color: var(--blue);
    box-shadow: 0 4px 20px rgba(38, 128, 235, 0.1)
}

.faq-q {
    padding: 20px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    user-select: none
}

.faq-plus {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--ink-muted);
    transition: all 0.3s;
    flex-shrink: 0
}

.faq-item.open .faq-plus {
    background: var(--blue);
    border-color: var(--blue);
    color: white;
    transform: rotate(45deg)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.75;
    padding: 0 24px
}

.faq-item.open .faq-a {
    max-height: 220px;
    padding: 0 24px 20px
}

/* ════════════════════════════════════
   FINAL CTA
════════════════════════════════════ */
.final-cta {
    padding: 140px 0;
    background: linear-gradient(150deg, rgba(26, 26, 46, 0.93) 0%, rgba(26, 32, 64, 0.93) 100%);
    position: relative;
    overflow: hidden;
    text-align: center
}

.cta-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(38, 128, 235, 0.14) 0%, transparent 70%)
}

.cta-content {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding: 0 48px
}

.cta-h {
    font-family: var(--tp-ff-heading);
    font-size: clamp(36px, 4.5vw, 62px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.06;
    color: white;
    margin-bottom: 20px
}

.cta-sub {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.75;
    margin-bottom: 44px
}

.cta-acts {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

.btn-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    background: white;
    color: var(--ink);
    border: none;
    padding: 14px 30px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s
}

.btn-white:hover {
    background: #f0f4ff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 255, 255, 0.2)
}

.btn-wout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    padding: 14px 30px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s
}

.btn-wout:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
    transform: translateY(-2px)
}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
footer,
.cnt-footer-bg {
    background: rgba(10, 14, 26, 0.93);
}

/* ════════════════════════════════════
   GLOBAL PAGE NET CANVAS
════════════════════════════════════ */
#pageNet {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
}

/* ════════════════════════════════════
   CLIENT LOGOS CAROUSEL
════════════════════════════════════ */
.clients {
    background: rgba(255, 255, 255, 0.85);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
    overflow: hidden;
    position: relative
}

.clients::before,
.clients::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 160px;
    z-index: 2;
    pointer-events: none
}

.clients::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 30%, transparent)
}

.clients::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0.95) 30%, transparent)
}

.clients-label {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 20px
}

.clients-track-wrap {
    overflow: hidden;
    position: relative
}

.clients-track {
    display: flex !important;
    gap: 56px !important;
    align-items: center !important;
    width: max-content !important;
    animation: clientsScroll 32s linear infinite !important;
}

.clients-track:hover {
    animation-play-state: paused
}

@keyframes clientsScroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.client-logo {
    height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.45);
    transition: filter 0.35s ease, transform 0.35s ease;
    flex-shrink: 0
}

.client-logo:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.06)
}


@media (max-width: 1440px) {
    .hero {
        padding: 90px 60px 40px;
        gap: 36px
    }

    .phone-tilt-wrap,
    .phone-shell {
        width: clamp(200px, 15vw, 232px);
        height: clamp(410px, 60vh, 480px)
    }

    .phone-bg {
        width: clamp(160px, 12vw, 185px);
        height: clamp(340px, 51vh, 380px);
        transform: rotate(-12deg) translateX(80px) translateY(38px)
    }

    .fb2 {
        right: -44px
    }
}

@media (max-width: 1280px) {
    .hero {
        padding: 85px 48px 36px;
        gap: 28px
    }

    .hero-h1 {
        font-size: clamp(28px, 3vw, 46px)
    }

    .phone-tilt-wrap,
    .phone-shell {
        width: clamp(186px, 14vw, 216px);
        height: clamp(385px, 57vh, 450px)
    }

    .phone-bg {
        width: clamp(150px, 11vw, 172px);
        height: clamp(315px, 48vh, 355px);
        transform: rotate(-12deg) translateX(72px) translateY(34px)
    }

    .fb1 {
        right: -8px
    }

    .fb2 {
        right: -36px
    }

    .fb3 {
        right: -10px
    }

    .float-badge {
        padding: 6px 10px
    }

    .fb-text {
        font-size: 10px
    }

    .fb-sub {
        font-size: 8px
    }
}

.smooth_slider .swiper-wrapper {
    transition-timing-function: linear !important;
}
/*-----------*/
.trust-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 18px; }
/* ════════════════════════════════════
   FOLD 2 — THE REALITY
════════════════════════════════════ */
.reality     { background: rgba(248,249,251,0.88); }
.reality { padding: 140px 64px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prob-cards { display: flex; flex-direction: column; gap: 3px; }
.prob-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 28px 32px;
  position: relative; overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.prob-card:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(38,128,235,0.08); }
.prob-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); opacity: 0; transition: opacity 0.3s; }
.prob-card:hover::before { opacity: 1; }
.prob-num   { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: var(--blue); margin-bottom: 10px; letter-spacing: 0.06em; }
.prob-title { font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.prob-body  { font-size: 14px; font-weight: 400; color: var(--ink-soft); line-height: 1.65; }
/*--------*/
.layers      { background: rgba(255,255,255,0.85); padding: 100px 64px; }
.layer-card {
  background: var(--bg-alt); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 28px 32px;
  position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  cursor: default;
}
.layer-card:hover { transform: translateX(6px); border-color: var(--blue-mid); box-shadow: 0 4px 20px rgba(38,128,235,0.08); }
.layer-card.highlighted { background: var(--bg-alt2); border-color: rgba(38,128,235,0.3); }
.layer-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity 0.3s; }
.layer-card:hover::before, .layer-card.highlighted::before { opacity: 1; }

.layer-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.layer-title { font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.layer-body  { font-size: 14px; font-weight: 400; color: var(--ink-soft); line-height: 1.65; }
.layer-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); border: 1px solid rgba(38,128,235,0.25); background: rgba(38,128,235,0.06); padding: 3px 10px; border-radius: 4px; }
/*-----products----*/
.products { padding: 100px 64px 120px;  background: rgba(255,255,255,0.85); }
.prod-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 52px; }
/*--------------------*/

/* Arrow between steps */
.dcp-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -30px;
  top: 20px;
  font-size: 24px;
  color: #ccc;
}

.plat-layer {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color 0.3s;
  position: relative; overflow: hidden;
}
.plat-layer:hover { border-color: var(--blue-mid); }
.plat-layer.axis-layer { background: var(--bg-alt2); border-color: rgba(38,128,235,0.25); }
.plat-layer::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tp-theme-primary); opacity: 0; transition: opacity 0.3s; }
.plat-layer:hover::before, .plat-layer.axis-layer::before { opacity: 1; }
.plat-left {
  position: relative;
  padding-left: 20px;
}

.plat-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* 🎨 Different colors */
/* 🎨 Colors (match your screenshot) */
.dot-grey::before {
  background: #bdbdbd;
}

.dot-red::before {
  background: #e53935;
}

.dot-yellow::before {
  background: #f4a300;
}

.dot-blue::before {
  background: #1e88e5;
}
.uc-tags  { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
span.uc-tag   { font-size: 12px; font-weight: 500; color: #DD3E00; background-color: #DD3E0017; border: #DD3E0017; border-radius: 20px; padding: 5px 12px; }

/*---------------------------*/

.innerHero{background: var(--navy); overflow: hidden; position: relative;}
.innerHero::before {
    content: ''; position: absolute; top: -200px; right: -200px;  width: 700px; height: 700px; background: radial-gradient(circle, rgba(38, 128, 235, .18) 0%, transparent 65%);  pointer-events: none;
}

.innerHero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 194, 255, .07) 0%, transparent 65%);
    pointer-events: none;
}
   .hr-list li.elementor-inline-item{font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px !important;
	   margin-bottom:5px !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .55);}
.bridge__text span {
    color: var(--orange);
}
.reality__right h2 span {
    color: var(--orange);
}
.hover-acc-item .number{
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--orange) !important;
    width: 24px;
    flex-shrink: 0;
}

.eco-hub{position:relative;width:100%;max-width:380px;aspect-ratio:1;margin:0 auto;display:flex;align-items:center;justify-content:center}
.eco-hub__ring{position:absolute;width:300px;height:300px;border-radius:50%;border:1px dashed rgba(255,255,255,.12)}
.eco-hub__center{width:96px;height:96px;border-radius:50%;background:rgba(38,128,235,.15);border:2px solid rgba(38,128,235,.4);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--blue);text-align:center;z-index:2;position:relative;line-height:1.3}
.eco-hub__node{position:absolute;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:8px;font-weight:600;color:rgba(255,255,255,.7);text-align:center;line-height:1.2;padding:5px}
.eco-hub__node span{font-size:15px;margin-bottom:2px}
.eco-hub__node:nth-child(3){top:0;left:50%;transform:translateX(-50%)}
.eco-hub__node:nth-child(4){top:18%;right:2%}
.eco-hub__node:nth-child(5){bottom:18%;right:2%}
.eco-hub__node:nth-child(6){bottom:0;left:50%;transform:translateX(-50%)}
.eco-hub__node:nth-child(7){bottom:18%;left:2%}
.eco-hub__node:nth-child(8){top:18%;left:2%}